/* Zählwerk – eigene Projektseite. Welt: Handzähler und Rollenzählwerk auf einem Inventurschild.
   Grund Signalgelb, Schrift und Zählergehäuse Schwarz, Zählblätter Papierweiß. Rot steht nur für eine Abweichung
   (immer mit −1), Grün nur für „Bestand stimmt“ (immer mit Haken). Leitmotiv: Ziffernrollen drehen auf den gezählten
   Stand, ein Klick am Handzähler bestätigt, der Weg der Ware ist ein Tunnel mit sechs Stationen, von denen nur das
   Regal gezählt wird. Die zwölf Schritte des Rundgangs stehen als Zeilen auf vier Zählblättern. */

/* ---------- 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:#121212}
  ::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:"Barlow Semi Condensed";src:url('../fonts/barlow-semi-condensed-normal-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url('../fonts/barlow-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url('../fonts/barlow-normal-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --gelb:#ffd60a;--gelb-t:#dcb500;--matt:rgba(255,214,10,.42);
  --schwarz:#121212;--blatt:#fffdf5;--blei:#45402f;
  --rot:#c4261b;--gruen:#136c3d;
  --kond:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --text:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);--maxw:1320px;
  --rand:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));
  --niete:radial-gradient(circle at 11px 11px,var(--gelb) 0 2.6px,transparent 3.4px),radial-gradient(circle at calc(100% - 11px) 11px,var(--gelb) 0 2.6px,transparent 3.4px),radial-gradient(circle at 11px calc(100% - 11px),var(--gelb) 0 2.6px,transparent 3.4px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),var(--gelb) 0 2.6px,transparent 3.4px);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;background:var(--gelb);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;font:400 1.125rem/1.55 var(--text);color:var(--schwarz);background:var(--gelb);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
i,em{font-style:normal}
h2{font:700 clamp(2rem,1.3rem + 2.6vw,3.5rem)/1.02 var(--kond);letter-spacing:-.008em;text-wrap:balance}
h3{font:700 clamp(1.5rem,1.3rem + .8vw,2rem)/1.08 var(--kond);text-wrap:balance}
:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px;border-radius:4px}
.top :focus-visible,.tunnel :focus-visible,.demo-sec :focus-visible,.foot :focus-visible,.more__card--next:focus-visible{outline-color:var(--blatt)}
.more__card--next:focus-visible{outline-offset:-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:6px;background:var(--blatt);color:var(--schwarz);font-weight:600;text-decoration:none;box-shadow:0 0 0 3px var(--schwarz)}
.skip:focus{top:12px}

/* ---------- Bauteile ----------
   Rollenzählwerk: jedes Rad ist ein Fenster, hinter dem ein Band mit Ziffern läuft. Die Stellung kommt aus --n
   (Klassen .n0 bis .n9 für das Ruhebild, das Skript dreht --n). Oben und unten sieht man die Nachbarziffern anlaufen. */
.zw{display:inline-flex;flex:none;gap:.07em;padding:.1em;border-radius:.14em;background:var(--schwarz);font:500 2.25rem/1 var(--mono);vertical-align:middle}
.rad{--n:0;position:relative;display:block;flex:none;width:.76em;height:1.2em;overflow:hidden;border-radius:.07em;background:var(--blatt);color:var(--schwarz);text-align:center}
.rad::before{content:"9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3";display:block;white-space:pre;line-height:1;transform:translateY(calc(var(--o,.075em) - (var(--n) + 1) * 1em))}
.rad::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,46,0,.5),rgba(58,46,0,0) 26%,rgba(58,46,0,0) 74%,rgba(58,46,0,.5))}
.n1{--n:1}.n2{--n:2}.n3{--n:3}.n4{--n:4}.n5{--n:5}.n6{--n:6}.n7{--n:7}.n8{--n:8}.n9{--n:9}
/* Gehäuse: schwarz mit vier Nieten für Werte aus weclapp, hell für das, was am Regal gezählt wurde */
.geh{display:inline-grid;justify-items:start;gap:8px;padding:14px 18px 16px;border-radius:10px;background:var(--niete),var(--schwarz);color:var(--gelb)}
.geh .zw{padding:0}
.geh__k{font:500 .8125rem/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.geh__e{font:400 .8125rem/1.3 var(--mono);color:var(--blatt)}
.geh--hell{padding:11px 15px 13px;border:3px solid var(--schwarz);background:var(--blatt);color:var(--schwarz)}
.geh--hell .zw{padding:.1em}
/* Schilder: Grün nur „Bestand stimmt“ mit Haken, Rot nur die Abweichung mit Zahl */
.pl{display:inline-flex;align-items:center;gap:.4em;padding:.34em .7em .38em;border-radius:6px;font:700 1.375rem/1 var(--kond);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pl svg{width:.95em;height:.95em}
.pl--ok{background:var(--gruen);color:var(--blatt)}
.pl--ab{background:var(--rot);color:var(--blatt)}
.pl--sw{background:var(--schwarz);color:var(--gelb)}
.feld{display:inline-flex;align-items:center;min-height:34px;padding:4px 10px;border:2px solid var(--schwarz);border-radius:4px;background:var(--blatt);font:500 .875rem/1.2 var(--mono)}
.feld--an{background:var(--schwarz);color:var(--gelb)}
.taste{display:inline-grid;gap:2px;padding:10px 16px 11px;border:3px solid var(--schwarz);border-radius:8px;background:var(--blatt);font:700 1.25rem/1.1 var(--kond);letter-spacing:.02em;text-transform:uppercase}
.taste small{font:500 .8125rem/1.25 var(--mono);letter-spacing:0;text-transform:none}
.taste--an{background:var(--schwarz);color:var(--gelb)}
.balken{display:block;width:100%;height:20px;padding:3px;border:3px solid var(--schwarz);border-radius:999px;background:var(--blatt);overflow:hidden}
.balken__f{display:block;height:100%;border-radius:999px;background:var(--schwarz);transform-origin:0 50%}
.kicker{display:flex;width:fit-content;padding:5px 10px;border-radius:4px;background:var(--schwarz);color:var(--gelb);font:500 .875rem/1.25 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.kicker + h2{margin-top:16px}

/* ---------- Kopf: die schwarze Kopfleiste des Schilds ----------
   Eine Grammatik auf allen Projektseiten: 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:10px clamp(16px,3vw,40px);background:var(--schwarz);color:var(--gelb)}
.back{display:inline-flex;flex:none;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 14px;border:2px solid var(--gelb);border-radius:6px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;transition:background-color .2s,color .2s}
.back:hover{background:var(--gelb);color:var(--schwarz)}
.back.demo{margin-left:auto;gap:0;padding-inline:18px;background:var(--gelb);color:var(--schwarz)} /* Rundgang mit Übungsdaten (demo-zaehlwerk.html), steht direkt vor dem Namen */
.back.demo:hover{border-color:var(--blatt);background:var(--blatt)}
@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;margin-left:8px;font:500 .8125rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--blatt)}
@media (max-width:400px){.top{gap:8px}.back{gap:6px;padding:8px 12px}.back.demo{padding-inline:12px}.brand{margin-left:0;font-size:.75rem;letter-spacing:.03em}}
@media (max-width:359px){.back{padding:8px 9px}.back.demo{padding-inline:9px}.brand{letter-spacing:0}}

/* ---------- Einstieg: das Schild, an vier Schrauben ---------- */
.hero{padding:clamp(8px,1.2vw,14px)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(20px,4vw,64px);align-items:center;min-height:min(calc(100svh - 64px - 2 * clamp(8px,1.2vw,14px)),820px);padding:clamp(34px,5.5vh,60px) max(clamp(22px,4.6vw,68px),calc((100% - var(--maxw)) / 2 + var(--gut)));border:3px solid var(--schwarz);border-radius:clamp(16px,2.4vw,28px)}
.schraube{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--schwarz)}
.schraube::after{content:"";position:absolute;inset:6.5px 3px;background:var(--gelb);transform:rotate(-32deg)}
.schraube--ol{left:12px;top:12px}.schraube--or{right:12px;top:12px}.schraube--ul{left:12px;bottom:12px}.schraube--ur{right:12px;bottom:12px}
.schraube--or::after,.schraube--ul::after{transform:rotate(48deg)}
.hero__text{container-type:inline-size}
.eyebrow{font:500 .9375rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.h1-name{display:block;width:fit-content;margin:clamp(10px,1.8vh,16px) 0 clamp(10px,2vh,18px);padding:.24em .5em .28em;border-radius:6px;background:var(--schwarz);color:var(--gelb);font:700 clamp(1.25rem,1rem + .9vw,1.75rem)/1 var(--kond);letter-spacing:.07em;text-transform:uppercase}
.h1-q{display:block;font:700 clamp(2.25rem,16.4cqw,7.5rem)/.92 var(--kond);letter-spacing:-.012em;text-transform:uppercase}
.zl{display:block}
.lead{max-width:31em;margin-top:clamp(16px,2.6vh,28px);font-size:clamp(1.125rem,1rem + .45vw,1.375rem);line-height:1.45}
.cue{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(16px,3vh,32px);font-weight:600;text-decoration:none}
.cue i{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;background:var(--schwarz);color:var(--gelb);transition:background-color .2s,color .2s}
.cue:hover i{background:var(--blatt);color:var(--schwarz)}

/* Handzähler: Körper als SVG, das Fenster mit den vier Rädern liegt als HTML darüber (Maße in Anteilen der Zeichnung 450 × 500) */
.hz{justify-self:center;width:100%;max-width:min(500px,54vh);container-type:inline-size}
.hz__bild{position:relative}
.hz__svg{width:100%;height:auto;overflow:visible}
.hz__svg text{font:500 21px var(--mono);letter-spacing:.16em;fill:var(--gelb);text-anchor:middle}
.hz__fenster{position:absolute;left:22%;top:42.8%;display:flex;gap:.03em;width:51.56%;height:21.6%;font:500 19.2cqw/1 var(--mono)}
.hz__fenster .rad{--o:.105em;flex:1;width:auto;height:100%;border-radius:.05em}
.hz__ok{position:absolute;right:-1%;bottom:3%;font-size:clamp(1.125rem,6.4cqw,1.875rem);box-shadow:5px 5px 0 var(--schwarz);transform:rotate(-5deg)}
.hz__e{display:block;margin-top:6px;font:400 .8125rem/1.4 var(--mono);text-align:center;text-wrap:balance}
/* Knöpfe legt das Skript an: Körper und Hebel zählen eins weiter, der Rändelknopf rechts stellt auf null */
.hz__taste,.hz__null{position:absolute;z-index:2;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hz__taste{left:8%;top:5%;width:80%;height:83%;border-radius:40%}
.hz__null{left:81%;top:42%;width:16%;height:22%;border-radius:8px}
.hz__taste:focus-visible{outline-offset:2px;border-radius:40%}
.hz__ok{z-index:3;pointer-events:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Abschnitte auf dem Schild ---------- */
.sit,.rg,.detail,.rel,.tech,.more{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,10vh,120px) var(--gut)}
.sit{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,80px);align-items:center}
.sit__text p:not(.kicker),.rg__text,.rel__text,.tech__text p:not(.kicker),.demo-sec__text p:not(.kicker){max-width:34em;margin-top:16px}
.spruch{padding:clamp(28px,3.6vw,52px);border-radius:14px;background:var(--niete),var(--schwarz);color:var(--gelb);box-shadow:10px 10px 0 var(--gelb-t)}
.spruch p{font:700 clamp(1.875rem,1.2rem + 2.4vw,3.25rem)/1.02 var(--kond);text-transform:uppercase;text-wrap:balance}
.spruch figcaption{margin-top:18px;font:500 .875rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blatt)}

.rg{padding-bottom:clamp(28px,5vh,48px)}
.register{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.register a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 14px 5px 6px;border:3px solid var(--schwarz);border-radius:6px;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s}
.register a span{display:grid;place-items:center;min-width:34px;height:30px;padding:0 6px;border-radius:3px;background:var(--schwarz);color:var(--gelb);font:500 .875rem/1 var(--mono)}
.register a:hover{background:var(--blatt)}

/* ---------- Zählblätter: jede Zeile ein Schritt ---------- */
.blatt{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,3.4vh,36px) var(--gut) clamp(28px,5vh,56px)}
.blatt__in{border:3px solid var(--schwarz);border-radius:14px;background:var(--blatt);box-shadow:10px 10px 0 var(--gelb-t);overflow:clip}
.blatt__kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 20px;padding:16px clamp(16px,2.4vw,32px) 18px;background:var(--schwarz);color:var(--gelb)}
.blatt__nr{grid-column:1/-1;font:500 .875rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.blatt__kopf h2{font-size:clamp(1.875rem,1.4rem + 1.8vw,3rem);text-transform:uppercase}
.blatt__wer{padding:3px 9px;border:2px solid var(--gelb);border-radius:4px;font:500 .875rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blatt)}
.blatt__spalten,.zeile{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);column-gap:clamp(18px,3vw,48px);padding-inline:clamp(16px,2.4vw,32px)}
.blatt__spalten{padding-block:8px;border-bottom:3px solid var(--schwarz);font:500 .8125rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.zeile{row-gap:20px;align-items:start;padding-block:clamp(26px,4.4vw,56px)}
.zeile + .zeile{border-top:3px solid var(--schwarz)}
.nr{display:grid;justify-items:start;align-self:start;gap:8px}
.nr .zw{font-size:2.5rem}
.nr__t{font:500 .8125rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.zeile__text p,.dt p,.rel__k p:not(.rel__code),.tunnel__apptext p{max-width:34em;margin-top:12px}
.zeile__text p,.dt p,.rel__k p:not(.rel__code){color:var(--blei)}
.zeile__bild{min-width:0}

/* Schemas: kleine gelbe Tafeln auf dem Blatt */
.sz{display:grid;justify-items:start;gap:16px}
.zeile__bild.sz,.sz--ab,.sz--frisch{padding:clamp(16px,2.4vw,28px);border:3px solid var(--schwarz);border-radius:12px;background:var(--gelb)}
.zeile__text .sz{margin-top:22px}
.sz__e{font:400 .8125rem/1.3 var(--mono)}
.wahl{display:flex;flex-wrap:wrap;gap:10px}
.marke{display:grid;gap:8px;width:min(100%,260px);padding:12px 14px 16px;border:3px solid var(--schwarz);border-radius:8px;background:var(--blatt)}
.marke__k{font:500 .8125rem/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.marke__n{display:block;width:72%;height:14px;border-radius:3px;background:var(--schwarz);transform-origin:0 50%}
.sz--stimmt{grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:clamp(14px,2.4vw,28px)}
.sz--stimmt > .pl,.sz--stimmt > .erfasst,.sz--stimmt > .sz__e{grid-column:1/-1}
.hzk{width:clamp(84px,9vw,116px);height:auto}
.erfasst{display:inline-flex;align-items:center;gap:10px;font:500 .875rem/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.erfasst .zw{font-size:1.5rem}
.sz--ab{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.sz--ab .zw{font-size:1.875rem}
.weiter{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.weiter svg,.sz--pruef svg,.dt__bild svg,.handy__pf{flex:none;width:22px;height:22px}
.sz--pruef,.sz--filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lade{display:block;width:100%}
.marken{display:grid;grid-template-columns:55% minmax(0,1fr);margin-top:8px}
.mk{display:flex;justify-content:flex-end;gap:7px;padding-right:2px;font:500 .8125rem/1.3 var(--mono);text-align:right}
.mk::after{content:"";flex:none;width:9px;height:9px;margin-top:.3em;border-radius:50%;background:var(--schwarz)}
.buch__aus{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;max-width:420px}
.kacheln i,.inv__l i{--h:1;position:relative;display:grid;place-items:center;aspect-ratio:1;border:3px solid var(--schwarz);border-radius:6px;background:var(--blatt)}
.kacheln .ue,.inv__l .ue{background:var(--schwarz)}
.ue::after{content:"";width:28%;height:52%;margin-top:-12%;border:solid var(--gelb);border-width:0 3px 3px 0;transform:rotate(42deg) scale(var(--h))}
.inv__z{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.inv__l{display:grid;gap:8px;font-size:1rem;line-height:1.3}
.inv__l span{display:flex;align-items:center;gap:10px}
.inv__l i{flex:none;width:22px;border-width:2px;border-radius:4px}
.sz--handy{grid-template-columns:auto auto auto;justify-content:start;align-items:center;gap:14px}
.sz--handy .sz__e{grid-column:1/-1}
.geraet{display:grid;gap:5px;padding:10px;border:5px solid var(--schwarz);border-radius:14px;background:var(--blatt)}
.geraet i{border:2px solid var(--schwarz)}
.geraet .an{background:var(--gelb)}
.geraet--breit{grid-template-columns:repeat(6,clamp(12px,1.3vw,18px));align-items:end;padding:16px 12px 12px}
.geraet--breit i{height:38px;border-bottom-width:4px;border-radius:999px 999px 0 0}
.geraet--breit .an{height:52px}
.geraet--schmal{width:176px;border-radius:20px}
.geraet--schmal i{padding:3px 8px;border-radius:4px;font:500 .75rem/1.35 var(--mono)}
.sz--frisch .geh{width:100%;grid-template-columns:minmax(0,1fr)}
.frisch__w{display:flex;align-items:baseline;gap:8px}
.frisch__w b{font:700 2rem/1 var(--kond)}
.geh .balken{border-color:var(--gelb);background:none}
.geh .balken__f{width:33.4%;background:var(--gelb)}

/* Ansichten aus dem Rundgang: schwarzer Geräterahmen, der Klick führt in die Demo */
.shot{min-width:0}
.shot a{display:block;padding:8px;border-radius:16px;background:var(--schwarz);box-shadow:8px 8px 0 var(--gelb);transition:transform .2s,box-shadow .2s}
.shot a:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--gelb)}
.shot img{width:100%;height:auto;border-radius:9px}
.shot--hoch{justify-self:center;width:100%;max-width:340px}
.shot figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:18px;font-size:1rem;line-height:1.35}
.badge{padding:2px 8px;border:2px solid currentColor;border-radius:4px;font:500 .8125rem/1.35 var(--mono)}

/* ---------- Schritt 3: der Tunnel ---------- */
.tunnel{margin-top:clamp(20px,4vh,44px);border-radius:50% 50% 0 0/clamp(36px,8vw,120px) clamp(36px,8vw,120px) 0 0;background:var(--schwarz);color:var(--blatt)}
.tunnel__szene{display:grid;align-content:center;gap:clamp(20px,3.6vh,40px);padding:clamp(64px,12vh,140px) var(--rand) clamp(24px,4vh,44px)}
.tunnel .zw{background:var(--gelb)}
.nr--quer{display:flex;align-items:center;gap:14px}
.tunnel__kopf h2{margin-top:14px;color:var(--gelb)}
.tunnel__text{max-width:44em;margin-top:14px}
.roehre{--bh:clamp(190px,30vh,270px);position:relative}
.tore{display:grid;grid-template-columns:1fr 1.75fr 1fr 1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:10px clamp(8px,1.2vw,18px)}
.tor{display:grid;grid-row:span 3;grid-template-rows:subgrid;justify-items:center;text-align:center}
.tor__bogen{display:grid;place-content:center;justify-items:center;align-self:end;gap:4px;width:100%;height:calc(var(--bh) * .74);padding-bottom:34px;border:3px solid var(--gelb);border-bottom:0;border-radius:999px 999px 0 0;color:var(--gelb)}
.tor__bogen small{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tor__bogen > .zw{font-size:clamp(1.75rem,1rem + 1.6vw,2.5rem)}
.tor--regal .tor__bogen{height:var(--bh);background:var(--gelb);color:var(--schwarz)}
.tor--regal .tor__bogen .zw{background:var(--schwarz)}
.tor--regal .tor__bogen > .zw{font-size:clamp(2.5rem,1.4rem + 2.6vw,3.75rem)}
.tor__teile{display:flex;align-items:center;gap:8px;margin-top:6px;font:500 .8125rem/1.2 var(--mono)}
.tor__teile span{display:inline-flex;align-items:center;gap:6px}
.tor__teile .zw{font-size:1.25rem}
.tor__name{margin-top:6px;font:700 clamp(1rem,.62rem + .86vw,1.375rem)/1.05 var(--kond);letter-spacing:.03em;text-transform:uppercase}
.tor__urteil{align-self:start;padding:4px 8px;border:2px solid var(--gelb);border-radius:4px;color:var(--gelb);font:500 .8125rem/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tor--regal .tor__urteil{background:var(--gelb);color:var(--schwarz)}
.schiene{position:absolute;left:0;right:0;top:calc(var(--bh) - 4px);display:block;height:4px;background:var(--gelb)}
.kiste{position:absolute;left:0;bottom:4px;display:none;width:38px;height:30px;border:3px solid var(--schwarz);border-radius:3px;background:linear-gradient(var(--schwarz),var(--schwarz)) 50% 0/7px 13px no-repeat,linear-gradient(var(--schwarz),var(--schwarz)) 0 7px/100% 3px no-repeat,var(--blatt);box-shadow:0 0 0 2px var(--blatt)}
.tunnel__e{font:400 .8125rem/1.3 var(--mono)}
.tunnel__app{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,6vh,72px) var(--rand) clamp(56px,10vh,110px)}
.tunnel__apptext h3{color:var(--gelb)}
.tunnel .shot a{background:var(--gelb);box-shadow:8px 8px 0 var(--matt)}
@media screen and (min-width:960px) and (min-height:700px){
  .zw-motion .tunnel__szene{min-height:100vh}
  .zw-motion .kiste{display:block}
}

/* ---------- Im Detail ---------- */
.dt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);margin-top:clamp(26px,4vh,44px)}
.dt{padding:clamp(20px,2.6vw,34px);border:3px solid var(--schwarz);border-radius:14px;background:var(--blatt);box-shadow:8px 8px 0 var(--gelb-t)}
.dt__bild{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:118px;margin-bottom:20px;padding-bottom:20px;border-bottom:3px solid var(--schwarz)}
.dt__bild b{font:700 1.5rem/1 var(--kond)}
.dt__k{font:500 .875rem/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.dt--blind .zw{font-size:1.875rem}
.geh--blind .zw{position:relative}
.blende{position:absolute;inset:0;border-radius:.07em;background:repeating-linear-gradient(180deg,var(--gelb) 0 7px,var(--schwarz) 7px 10px);transform-origin:50% 0}

/* ---------- Demo ---------- */
.demo-sec{background:var(--schwarz);color:var(--blatt)}
.demo-sec__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,6vw,96px);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,10vh,110px) var(--gut)}
.tunnel .kicker,.demo-sec .kicker{background:var(--gelb);color:var(--schwarz)}
.demo-sec h2{color:var(--gelb)}
.go{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:26px;padding:10px 22px;border-radius:6px;background:var(--gelb);color:var(--schwarz);font-weight:600;text-decoration:none;transition:background-color .2s}
.go:hover{background:var(--blatt)}
.demo-sec__zw{display:grid;justify-items:center;gap:10px}
.demo-sec__zw .zw{background:var(--gelb);font-size:clamp(5rem,13vw,10.5rem)}
.demo-sec__k{color:var(--gelb);font:700 clamp(1.5rem,1rem + 1.6vw,2.25rem)/1 var(--kond);letter-spacing:.12em;text-transform:uppercase}

/* ---------- Zusammenspiel ---------- */
.fluss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;margin-top:clamp(28px,5vh,52px)}
.fluss__erp,.fluss__zw{display:grid;justify-items:center;gap:8px;min-width:clamp(120px,14vw,190px);padding:24px 20px;border-radius:12px;font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1 var(--kond);text-transform:uppercase}
.fluss__erp{border:3px solid var(--schwarz);background:var(--blatt);text-transform:none}
.fluss__erp small{font:500 .8125rem/1.2 var(--mono);letter-spacing:.09em}
.fluss__zw{background:var(--niete),var(--schwarz);color:var(--gelb);letter-spacing:.05em}
.fluss__zw .zw{font-size:1.75rem;background:none;padding:0}
.rohre{display:grid;gap:22px}
.rohr{display:grid;gap:6px;justify-items:center;text-align:center}
.rohr b{font:500 .875rem/1.25 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.rohr i{position:relative;display:block;width:100%;height:10px;background:var(--schwarz)}
.rohr i::after{content:"";position:absolute;top:50%;right:-1px;border:13px solid transparent;border-right-width:0;border-left-color:var(--schwarz);transform:translate(100%,-50%)}
.rohr--hin i{width:calc(100% - 13px);justify-self:start}
.rohr--rueck i{width:calc(100% - 13px);justify-self:end}
.rohr--rueck i::after{right:auto;left:-1px;border-width:13px 13px 13px 0;border-left-color:transparent;border-right-color:var(--schwarz);transform:translate(-100%,-50%)}
.rohr em{padding:0 18px;font-weight:600;line-height:1.3}
.rel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(32px,6vh,60px)}
.rel__k{padding:clamp(18px,2.2vw,28px);border:3px solid var(--schwarz);border-radius:14px;background:var(--blatt);box-shadow:8px 8px 0 var(--gelb-t)}
.rel__code{width:fit-content;padding:2px 8px;border-radius:4px;background:var(--schwarz);color:var(--gelb);font:500 .875rem/1.4 var(--mono);letter-spacing:.06em}
.rel__k h3{margin-top:12px}
.rel__k h3 a{display:inline-block;padding-block:8px;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em}
.rel__k h3 a:hover{background:var(--gelb)}
.rel__k h3 + p{margin-top:4px}

/* ---------- Technik & Rolle: das Typenschild ---------- */
.tech{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,5vw,72px);align-items:start}
.typ{padding:clamp(24px,3.2vw,44px);border-radius:14px;background:var(--niete),var(--schwarz);color:var(--gelb);box-shadow:10px 10px 0 var(--gelb-t)}
.typ__kopf{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:3px solid var(--gelb);font:500 .875rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.typ__z{display:grid;grid-template-columns:minmax(92px,.28fr) minmax(0,1fr);gap:4px 18px;padding:13px 0;border-bottom:1px solid var(--matt)}
.typ__z dt{font:500 .875rem/1.85 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.typ__z dd{color:var(--blatt);font:700 clamp(1.25rem,1.05rem + .7vw,1.625rem)/1.15 var(--kond);letter-spacing:.01em}

/* ---------- Weitere Projekte ---------- */
.more{padding-top:clamp(24px,5vh,56px)}
.more__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);margin-top:22px}
.more__list li{display:grid}
.more__card{display:grid;align-content:start;gap:6px;padding:clamp(20px,3vw,34px);border:3px solid var(--schwarz);border-radius:14px;background:var(--blatt);text-decoration:none;box-shadow:8px 8px 0 var(--gelb-t);transition:transform .2s,box-shadow .2s}
.more__card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--gelb-t)}
.more__card--next{justify-items:end;background:var(--schwarz);color:var(--gelb);text-align:right}
.more__dir{font-size:1rem;font-weight:600}
.more__code{margin-top:10px;font:500 1rem/1.3 var(--mono);letter-spacing:.06em}
.more__name{font:700 clamp(1.75rem,1.3rem + 1.6vw,2.75rem)/1 var(--kond);text-transform:uppercase}
.more__hook{max-width:28em;margin-top:6px;text-wrap:pretty}
.more__card--prev .more__hook{color:var(--blei)}
.more__card--next .more__hook{color:var(--blatt)}
.more__all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:26px;font-weight:600;text-underline-offset:.22em}

/* ---------- Laufwerk: zählt im Rundgang den aktuellen Schritt mit (nur mit Bewegung; greift keine Klicks ab) ---------- */
.lauf{position:fixed;left:16px;bottom:16px;z-index:20;display:none;align-items:center;gap:10px;padding:7px 14px 7px 12px;border:2px solid var(--gelb);border-radius:10px;background:var(--schwarz);color:var(--gelb);font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(calc(100% + 24px));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.zw-motion .lauf{display:flex}
.zw-motion .lauf--da{opacity:1;transform:none}
.lauf .zw{padding:0;font-size:1.75rem}
@media (max-width:599px){.lauf{left:12px;bottom:12px;gap:8px;padding:6px 10px}.lauf__k{display:none}.lauf .zw{font-size:1.5rem}}

/* ---------- Fuß ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:32px var(--rand) 48px;background:var(--schwarz);color:var(--gelb)}
.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(--blatt)}
.foot__sig{font:500 .8125rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Breite Bildschirme: Überschrift am Raum ausgerichtet ---------- */
@media (min-width:960px){
  .h1-q{font-size:clamp(3rem,min(16.4cqw,15.5vh),7.5rem)}
  .tunnel__e{text-align:right} /* links unten steht das Laufwerk */
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:959px){
  .hero__in,.sit,.tech{grid-template-columns:minmax(0,1fr)}
  .hero__in{min-height:0}
  .hz{max-width:min(380px,86%)}
  .roehre{--bh:186px}
  .tore{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px}
  .tor{grid-row:auto;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 18px;justify-items:start;align-items:center;text-align:left}
  .tor__bogen{grid-row:1/3;height:112px;padding-bottom:6px;border-bottom:4px solid var(--gelb)}
  .tor--regal{grid-template-columns:164px minmax(0,1fr)}
  .tor--regal .tor__bogen{border-bottom-color:var(--schwarz);box-shadow:0 4px 0 var(--gelb)}
  .tor__teile{flex-direction:column;gap:3px;margin-top:2px}
  .tor__teile b{display:none}
  .tor__name{align-self:end;margin-top:0;font-size:1.375rem}
  .schiene{display:none}
}
@media (max-width:899px){
  .blatt__spalten{display:none}
  .zeile{grid-template-columns:minmax(0,1fr)}
  .nr{display:flex;align-items:center;gap:12px}
  .tunnel__app{grid-template-columns:minmax(0,1fr)}
  .tunnel__app .shot{justify-self:start}
  .demo-sec__in{grid-template-columns:minmax(0,1fr)}
  .demo-sec__zw{justify-items:start}
  .rel-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759px){
  .dt-grid,.more__list{grid-template-columns:minmax(0,1fr)}
  .more__card--next{justify-items:start;text-align:left}
  .fluss{grid-template-columns:minmax(0,1fr);gap:16px}
  .fluss__erp,.fluss__zw{justify-self:start}
  .rohre{gap:14px;padding-left:20px;border-left:10px solid var(--schwarz)}
  .rohr{justify-items:start;text-align:left}
  .rohr i{display:none}
  .rohr em{padding:0}
  .rohr--hin b::after{content:" ↓"}
  .rohr--rueck b::after{content:" ↑"}
}
@media (max-width:479px){
  .hero__in{padding:36px 18px 30px}
  .schraube{width:12px;height:12px}
  .schraube::after{inset:5px 2px}
  .blatt__in,.spruch,.typ{box-shadow:6px 6px 0 var(--gelb-t)}
  .blatt__nr{letter-spacing:.03em}
  .nr .zw{font-size:2rem}
  .sz--stimmt{grid-template-columns:minmax(0,1fr) auto}
  .sz--handy{grid-template-columns:minmax(0,1fr)}
  .handy__pf{transform:rotate(90deg)}
  .kacheln{gap:6px}
  .typ__z{grid-template-columns:minmax(0,1fr)}
  .typ__z dt{line-height:1.3}
  .marken{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
}

/* ---------- Ruhige Fassung ---------- */
@media (prefers-reduced-motion:reduce){
  .back,.cue i,.register a,.go,.shot a,.more__card{transition:none}
}

/* ---------- Druck ----------
   Das Schild auf Papier: der Grund wird weiß, die schwarzen Bänder (Kopf der Zählblätter ausgenommen) ebenfalls, die
   Schrift bleibt dunkel. Zählwerke, Tafeln und Schilder behalten ihre Flächen. Die ruhige Fassung (Endbilder, keine Pins)
   setzt das Skript; Zeilen, Karten und Abbildungen werden nicht zerschnitten, Sprungmarken und Rückwege entfallen. */
@media print{
  html,body{background:#fff}
  .skip,.top,.cue,.register,.go,.foot .back,.schiene,.schraube{display:none}
  .hero__in{min-height:0;padding-block:24px}
  .hz{max-width:300px}
  .sit,.rg,.detail,.rel,.tech,.more{padding-block:26px}
  .blatt{padding-block:14px}
  .blatt__in,.dt,.rel__k,.more__card,.spruch,.typ,.shot a{box-shadow:none}
  .zeile{padding-block:20px}
  .tunnel,.demo-sec,.foot{border-radius:0;background:#fff;color:var(--schwarz)}
  .tunnel__szene{padding-block:26px 12px}
  .tunnel__app{padding-block:12px 26px}
  .tunnel__kopf h2,.tunnel__apptext h3,.demo-sec h2,.demo-sec__k,.tor__bogen,.tor__urteil{color:var(--schwarz)}
  .tor__bogen,.tor__urteil{border-color:var(--schwarz)}
  .tunnel .kicker,.demo-sec .kicker{background:var(--schwarz);color:var(--gelb)}
  .tunnel .zw,.demo-sec__zw .zw{background:var(--schwarz)}
  .demo-sec__in{padding-block:26px}
  .demo-sec__zw .zw{font-size:4rem}
  .foot{padding-block:16px}
  .zw,.rad,.geh,.pl,.feld,.taste,.kicker,.h1-name,.balken,.balken__f,.blatt__kopf,.spruch,.typ,.sz,.tor__bogen,.tor__urteil,.kacheln i,.inv__l i,.geraet i,.blende,.rel__code,.fluss__zw,.rohr i,.more__card,.marke__n,.mk::after,.register a span,.shot a,.hz__ok{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .zeile,.dt,.rel__k,.shot,.sz,.spruch,.typ,.more__card,.tor,.fluss,.demo-sec__in{break-inside:avoid}
  h2,h3,.kicker,.nr,.blatt__kopf{break-after:avoid}
  .shot--hoch{max-width:250px}
  .shot--quer{max-width:440px}
  body{zoom:.8}
}