/* ELDI motion.css v1 - Bewegung, Material, Nachtschicht, Cursor, Stempel, Karteikarte, Print. Alles reduced-motion-sicher. */

/* ==== Fixes v2 ==== */
.nav>ul a{font:600 .95rem/1 var(--font);color:var(--ink);text-decoration:none;padding:.65rem .75rem;border-radius:var(--r);display:inline-block}
.nav .burger{display:inline-flex}
@media(min-width:900px){.nav .burger{display:none}}
.consent{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;border:0;border-top:2px solid var(--brass);padding:.7rem var(--gut);display:none;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.88rem;box-shadow:0 -6px 24px rgba(27,34,41,.15)}
.consent.on{display:flex}
.consent p{margin:0;flex:1 1 360px}
.toast{bottom:5.2rem}
@media(min-width:900px){.toast{bottom:1.4rem}}
.fitlist{hyphens:auto}
table.data th{position:static}
table.data tbody tr:nth-child(even){background:#faf8f3}
.sheet-img .stamp{left:auto;right:.8rem;top:.8rem}
.ico-row svg{stroke-width:1.9}
.ico-row div{gap:1rem}

/* ==== Material ==== */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
.btn-brass{background:linear-gradient(180deg,#EDC85E,#D9AC3C);position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #9a6f18}
.btn-brass::after{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn-brass:hover::after{left:130%}
.btn-brass:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 #9a6f18}
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 3px rgba(27,34,41,.08),0 18px 36px -14px rgba(27,34,41,.35)}
.tool-card .img{position:relative;overflow:hidden}
.tool-card .img svg.pict{position:absolute;inset:0;width:100%;height:100%;padding:12%;stroke:var(--ink-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.tool-card .img picture,.sheet-img picture{display:block;position:relative;z-index:1}
.tool-card .img img{position:relative;z-index:1;background:transparent}
.tool-card .img img.ph-hidden{opacity:0}
.tool-card:hover .img svg.pict{stroke:var(--brass-2)}
.pict .dim{stroke:var(--brass);stroke-width:1}
.pict .hatch{stroke-width:.8;opacity:.6}
.sheet-img{position:relative;overflow:hidden}
.sheet-img svg.pict{position:absolute;inset:0;width:100%;height:100%;padding:10%;stroke:var(--ink-2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sheet-img img{position:relative;z-index:1}
.sheet-img img.ph-hidden{opacity:0}

/* Karteikarte */
.sheet{background:var(--white) linear-gradient(transparent 31px,rgba(29,76,120,.08) 31px,rgba(29,76,120,.08) 32px,transparent 32px);background-size:100% 32px;background-position:0 12px;position:relative}
.sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--signal),var(--brass) 50%,var(--signal))}
.sheet-head{background:var(--white)}
.sheet-main,.sheet-side{background:var(--white)}
.sheet-side{background:var(--paper)}
.emboss{font:700 .78rem var(--mono);letter-spacing:.14em;color:transparent;background:linear-gradient(180deg,#c9c2b3,#8d8574);-webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.punch{position:absolute;left:14px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.punch.a{top:26%}.punch.b{top:74%}
.copy-sku{background:none;border:1px dashed var(--paper-3);border-radius:3px;padding:.05em .4em;font:inherit;cursor:pointer;color:inherit}
.copy-sku:hover{border-color:var(--brass)}

/* Stempel-Knall */
@keyframes stampIn{0%{transform:scale(3) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.stamp-hit{position:absolute;right:8%;bottom:8%;z-index:3;font:800 1.1rem var(--font-c);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);border:3px double var(--signal);padding:.25em .6em;border-radius:4px;transform:rotate(-8deg);opacity:0;pointer-events:none;mix-blend-mode:multiply;background:transparent}
.stamp-hit.on{animation:stampIn .45s cubic-bezier(.2,1.4,.4,1) forwards}
@media(prefers-reduced-motion:reduce){.stamp-hit.on{animation:none;opacity:1}}
.merk.on{animation:merkPulse .35s ease}
@keyframes merkPulse{40%{transform:scale(1.06)}}
.cnt.bump{animation:bump .4s ease}
@keyframes bump{30%{transform:scale(1.5) translateY(-3px)}}

/* ==== Zeichnen beim Scrollen ==== */
.draw path,.draw line,.draw circle,.draw rect,.draw polyline,.draw ellipse{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.draw.on path,.draw.on line,.draw.on circle,.draw.on rect,.draw.on polyline,.draw.on ellipse{stroke-dashoffset:0}
.draw text,.draw .fillonly{opacity:0;transition:opacity .5s ease 1.1s}
.draw.on text,.draw.on .fillonly{opacity:1}
.draw [data-late]{transition-delay:1.4s}
.draw text[data-late]{transition-delay:1.9s}
@media(prefers-reduced-motion:reduce){.draw *{stroke-dashoffset:0!important;opacity:1!important;transition:none!important}}
.reveal{transition-delay:calc(var(--i,0) * 70ms)}

/* Hero-Szene */
.hero-art{cursor:grab}
.hero-art:active{cursor:grabbing}
.hero-art .thr,.hero-art .head,.hero-art .rotor{transition:transform .08s linear}
.hero-art .hl{transition:opacity .08s}
.hero-art .hint{font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bp-line);text-align:center;margin-top:.6rem}
.hero-art .hint b{color:var(--brass-l);font-weight:500}
.hero h1 .typed::after{content:"";display:inline-block;width:.08em;height:.9em;background:var(--brass-l);margin-left:.06em;animation:blink 1s steps(1) infinite;vertical-align:-.05em}
@keyframes blink{50%{opacity:0}}
.hero h1 .typed.done::after{display:none}
.counter{display:inline-flex;gap:.06em}
.counter i{font-style:normal;display:inline-block;min-width:.62em;background:rgba(0,0,0,.28);border-radius:2px;padding:.08em .05em;color:var(--white);font-weight:600;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hero-meta span{display:inline-flex;align-items:center;gap:.45em}

/* Schubladen (Kategorien) */
.drawer-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.drw{position:relative;display:block;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#fbf9f4,#efe9dc);border:1px solid var(--paper-3);border-radius:6px;padding:1.2rem 1.2rem 1rem;box-shadow:0 1px 0 #fff inset,0 3px 0 var(--paper-3),0 10px 24px -14px rgba(27,34,41,.35);transition:transform .25s ease,box-shadow .25s ease;overflow:hidden}
.drw::before{content:"";position:absolute;left:50%;top:10px;width:46px;height:8px;margin-left:-23px;border-radius:4px;background:linear-gradient(180deg,#E3B94D,#B8791D);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.drw:hover{transform:translateY(6px);box-shadow:0 1px 0 #fff inset,0 0 0 var(--paper-3),0 4px 12px -8px rgba(27,34,41,.35)}
.drw .lab{margin-top:1rem;font:700 1.25rem var(--font-c);text-transform:uppercase;letter-spacing:.02em}
.drw .n{position:absolute;right:1rem;top:1rem;font:500 .72rem var(--mono);color:var(--ink-3);letter-spacing:.1em}
.drw p{margin:.2rem 0 0;color:var(--ink-2);font-size:.92rem}
.drw svg{width:44px;height:44px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:.6rem}

/* Header schrumpft */
.site-head{transition:box-shadow .25s ease}
.site-head.small .wrap{min-height:52px}
.site-head.small .logo svg{height:32px}
.site-head.small{box-shadow:0 6px 20px -14px rgba(27,34,41,.4)}
.site-head .wrap{transition:min-height .25s ease}
.logo svg{transition:height .25s ease}

/* Suche */
.srch{position:relative}
.srch-box{position:fixed;inset:0;background:rgba(27,34,41,.55);z-index:120;display:none;align-items:flex-start;justify-content:center;padding:8vh var(--gut)}
.srch-box.on{display:flex}
.srch-in{width:min(680px,100%);background:var(--paper);border-radius:var(--r-l);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);overflow:hidden}
.srch-in input{width:100%;border:0;border-bottom:2px solid var(--brass);padding:1rem 1.2rem;font:500 1.15rem var(--font);background:var(--white);color:var(--ink)}
.srch-in input:focus{outline:none}
.srch-res{max-height:60vh;overflow:auto;list-style:none;margin:0;padding:.4rem}
.srch-res li a{display:flex;gap:.8rem;align-items:center;padding:.6rem .8rem;border-radius:var(--r);text-decoration:none;color:var(--ink)}
.srch-res li a:hover,.srch-res li a.sel{background:var(--paper-2)}
.srch-res .k{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-2);min-width:5.5rem}
.srch-res small{color:var(--ink-3);display:block;font-size:.8rem}
.srch-hint{padding:.5rem 1.2rem .8rem;font:400 .74rem var(--mono);color:var(--ink-3);display:flex;gap:1rem;flex-wrap:wrap}
.srch-hint kbd{background:var(--white);border:1px solid var(--paper-3);border-radius:3px;padding:.05em .4em}

/* Zuletzt angesehen */
.recent{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.86rem}
.recent .lbl{margin:0}
.recent a{color:var(--ink-2);text-decoration:none;border:1px solid var(--paper-3);border-radius:999px;padding:.2rem .7rem;background:var(--white)}
.recent a:hover{border-color:var(--blue);color:var(--blue)}

/* Fadenkreuz-Cursor auf Blaupausen */
@media(hover:hover) and (pointer:fine){
.xh{position:fixed;left:0;top:0;pointer-events:none;z-index:90;opacity:0;transition:opacity .2s ease}
.xh.on{opacity:1}
.xh::before,.xh::after{content:"";position:absolute;background:rgba(227,185,77,.55)}
.xh::before{left:-40px;top:0;width:80px;height:1px}
.xh::after{left:0;top:-40px;width:1px;height:80px}
.xh i{position:absolute;left:10px;top:8px;font:500 .62rem var(--mono);letter-spacing:.08em;color:var(--brass-l);white-space:nowrap;background:rgba(18,56,92,.7);padding:.15em .4em;border-radius:2px}
.hero,.bp{cursor:none}
.hero a,.hero button,.bp a,.bp button,.bp input,.bp select,.hero .hero-art{cursor:auto}
.hero .hero-art{cursor:grab}
}

/* ==== Nachtschicht (Werkstattlicht) ==== */
body.night{--paper:#171b1f;--paper-2:#1f252b;--paper-3:#2c343c;--ink:#EAEEF2;--ink-2:#c9c2b3;--ink-3:#948d7f;--blue:#7fb3e6;--blue-2:#a6cbf0;--white:#1c2127;--bp:#0b2238;--brass-2:#E3B94D;--signal:#ff8a65;--ok:#7bd48f}
body.night .site-head{background:rgba(23,27,31,.9)}
body.night .card,body.night .sheet,body.night .drw,body.night .toc,body.night .calc-in,body.night .fstep,body.night .flist li,body.night .pager a,body.night .dealer a,body.night .table-wrap,body.night .thread,body.night .srch-in input,body.night .field .in,body.night .chip{background:#1c2127;color:var(--ink)}
body.night .drw{background:linear-gradient(180deg,#232a31,#1a1f25)}
body.night .note,body.night .tip,body.night .warn,body.night .ok-box{background:#1f252b}
body.night .sheet{background-image:linear-gradient(transparent 31px,rgba(127,179,230,.08) 31px,rgba(127,179,230,.08) 32px,transparent 32px)}
body.night .btn-line{color:var(--ink);border-color:var(--ink)}
body.night table.data tbody tr:nth-child(even){background:#1f252b}
body.night table.data th{background:#252c33}
body.night code{background:#252c33}
body.night .foot{background:#0f1215}
body.night .tool-card .img,body.night .sheet-img{background-color:#1f252b}
body.night .tool-card .img img,body.night .sheet-img img{mix-blend-mode:normal;background:#EAEEF2;border-radius:4px}
body.night .consent,body.night .drawer,body.night .mnav{background:#1c2127;color:var(--ink)}
body.night::before{opacity:.5}
.lamp{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s ease;background:radial-gradient(circle 420px at var(--lx,50%) var(--ly,30%),rgba(255,214,130,.16),rgba(255,214,130,.06) 45%,rgba(0,0,0,.55) 100%)}
body.night .lamp{opacity:1}
@media(prefers-reduced-motion:reduce){.lamp{background:radial-gradient(circle 600px at 50% 30%,rgba(255,214,130,.12),rgba(0,0,0,.45) 100%)}}
.night-btn svg{transition:transform .4s ease}
body.night .night-btn svg{transform:rotate(180deg)}

/* Katalog-Modus 1955 (Ei) */
body.f8{--paper:#efe3c6;--paper-2:#e3d4b1;--paper-3:#cdbc95;--ink:#3a2e1c;--ink-2:#5a4a30;--blue:#5a3a1c;--bp:#4a3820;--bp-line:#b59a63;--brass:#8a6a2a;--brass-l:#d8b96a}
body.f8{filter:sepia(.25) contrast(1.05)}
body.f8 h1,body.f8 h2,body.f8 h3{font-family:Georgia,"Times New Roman",serif;text-transform:none;letter-spacing:0;font-weight:700}
body.f8 .hero{background-image:none}

/* Prüfstand (Konami) */
body.pruefstand .draw *{stroke-dashoffset:0!important;transition-duration:.3s!important}
body.pruefstand .card{animation:wobble 1.2s ease}
@keyframes wobble{25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}

/* ==== Instrumente ==== */
.gauge{display:block;width:100%;max-width:340px;margin:0 auto 1rem}
.gauge .needle{transform-origin:150px 150px;transition:transform .9s cubic-bezier(.3,1.4,.4,1)}
.gauge text{font-family:var(--mono);font-size:10px;fill:var(--bp-line)}
.gauge .val{font:700 34px var(--font-c);fill:#fff}
.thread-vis{display:block;width:100%;max-width:520px;height:120px;margin:0 auto 1rem}
.explode{display:block;width:100%;max-width:340px;margin:0 auto 1rem}
.explode g{transition:transform .8s cubic-bezier(.3,1.3,.4,1)}
.explode.on .ring-o{transform:translateX(-70px)}
.explode.on .ring-i{transform:translateX(70px)}
.explode.on .balls{transform:translateY(-6px)}
.fan{display:block;width:100%;max-width:460px;height:220px;margin:1rem auto}
.fan g{transform-origin:60px 190px;transition:transform .7s cubic-bezier(.3,1.2,.4,1)}
.fan.on g:nth-child(2){transform:rotate(-8deg)}.fan.on g:nth-child(3){transform:rotate(-16deg)}.fan.on g:nth-child(4){transform:rotate(-24deg)}.fan.on g:nth-child(5){transform:rotate(-32deg)}.fan.on g:nth-child(6){transform:rotate(-40deg)}.fan.on g:nth-child(7){transform:rotate(-48deg)}
.disc{display:block;width:min(100%,360px);margin:1rem auto;touch-action:none;cursor:grab;user-select:none}
.disc:active{cursor:grabbing}
.disc .rot{transform-origin:180px 180px}
.disc .deg{font:700 28px var(--font-c);fill:#fff}
.disc-wrap{background:var(--bp);color:var(--bp-text);background-image:var(--grid);background-size:24px 24px;border-radius:var(--r-l);padding:1rem;text-align:center}
.disc-wrap p{margin:.4rem 0 0;font:500 .78rem var(--mono);color:var(--bp-line);letter-spacing:.08em;text-transform:uppercase}

/* Katalog-Flip */
.book{perspective:1800px;max-width:760px;margin:1.6rem auto}
.book-in{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:3/2;min-height:340px;background:#e9dcbd;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.08)}
.pg{padding:clamp(.8rem,3vw,1.8rem);font-family:Georgia,"Times New Roman",serif;color:#3a2e1c;background:linear-gradient(90deg,#efe3c6,#f6ecd4);overflow:hidden;position:relative}
.pg:first-child{border-right:1px solid #cdbc95;background:linear-gradient(270deg,#e6d8b6,#f2e6cb)}
.pg h3{font:700 clamp(.9rem,2.4vw,1.35rem)/1.15 Georgia,serif;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5em;color:#3a2e1c;border-bottom:2px solid #3a2e1c;padding-bottom:.25em}
.pg p,.pg li{font-size:clamp(.7rem,1.6vw,.86rem);line-height:1.35;margin:0 0 .35em}
.pg ul{padding-left:1.1em;margin:0}
.pg .no{font:400 .7rem var(--mono);position:absolute;bottom:.5rem;color:#8a6a2a}
.pg:first-child .no{left:1rem}.pg:last-child .no{right:1rem}
.pg .pict{width:38%;float:right;margin:0 0 .4rem .6rem;stroke:#3a2e1c;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flip{position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,0,.2,1);pointer-events:none}
.flip.go{transform:rotateY(-180deg)}
.flip .pg{position:absolute;inset:0;backface-visibility:hidden}
.flip .pg.back{transform:rotateY(180deg);border-left:1px solid #cdbc95}
.book-nav{display:flex;justify-content:center;gap:.6rem;margin-top:.8rem}
@media(prefers-reduced-motion:reduce){.flip{transition:none}}

/* Schwebebahn */
.bahn{display:block;width:100%;max-width:1100px;margin:0 auto;height:auto}
.bahn .car{transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
.bahn.go .car{transform:translateX(760px)}
.foot .bahn{opacity:.8;margin-bottom:1.2rem}
.foot .bahn *{stroke:#b9c0c6}
.foot .bahn .car *{stroke:var(--brass-l)}
@media(prefers-reduced-motion:reduce){.bahn .car{transition:none}}

/* Blattnummer + Prüfstempel */
.sheetno{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8f979d;margin-bottom:1rem}
.sheetno .stamp{color:var(--brass-l);transform:rotate(-3deg)}

/* Lehrenprüfung */
.lehre{background:var(--white);border:1px solid var(--paper-3);border-radius:var(--r-l);padding:1rem 1.1rem;margin:1.4rem 0}
.lehre .gap{position:relative;height:70px;background:linear-gradient(90deg,#c7ccd1,#e6e9ec);border-radius:4px;overflow:hidden;margin:.8rem 0}
.lehre .jaw{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#6b7480,#34424D);width:calc(50% - var(--g,20px)/2)}
.lehre .jaw.l{left:0}.lehre .jaw.r{right:0}
.lehre .blade{position:absolute;left:50%;top:14px;bottom:14px;background:linear-gradient(180deg,#e9e4d8,#bfb7a8);transform:translateX(-50%);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.lehre .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.lehre input[type=range]{flex:1 1 200px;accent-color:var(--brass)}
.lehre .res{margin-top:.6rem;font:600 .9rem var(--mono)}

/* Etikett */
.label-prev{display:block;width:100%;max-width:420px;margin:1rem auto;border:1px solid var(--paper-3);background:#fff}

/* ==== Print: Datenblatt als DIN-A4-Karteikarte ==== */
@media print{
  .site-head,.mnav,.foot .cols,.drawer,.scrim,.consent,.toast,.sticky-cta,.pager,.crumbs,.xh,.lamp,.buy .btn,.merk,.skip,.card-grid-hide,.sec-tight>.wrap>h2+.grid{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  body::before{display:none}
  .sheet{box-shadow:none;border:1px solid #000;background:#fff;page-break-inside:avoid}
  .sheet-head{grid-template-columns:1fr 1.4fr}
  .sheet-body{grid-template-columns:1fr}
  .sheet-side{border:0;border-top:1px solid #000;background:#fff}
  a{color:#000;text-decoration:none}
  .foot{background:#fff;color:#000;margin-top:1rem;padding:0}
  .foot .legal{color:#000;font-size:9pt}
  .print-qr{display:block!important;margin:1rem 0}
  h1{font-size:22pt}
}
.print-qr{display:none}
@media(max-width:640px){.book-in{grid-template-columns:1fr;aspect-ratio:auto;min-height:0}.pg{min-height:260px}.pg.under{display:none}.flip{position:relative;width:100%;height:auto;transform:none!important;pointer-events:auto}.flip .pg{position:relative;inset:auto;backface-visibility:visible}.flip .pg.back{display:none;transform:none;border-left:0}.flip.go .pg:not(.back){display:none}.flip.go .pg.back{display:block}.pg:first-child{border-right:0;border-bottom:1px solid #cdbc95}}

/* Kategorie-Loops (Punkt 49): animierte Blaupausen als Hero-Hintergrund, Video-Slot ersetzt sie, sobald eine Datei liegt */
.hero-sm{position:relative}
.hero-sm .wrap{position:relative;z-index:1}
.hero-loop{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(24vw,250px);height:auto;opacity:.55;pointer-events:none;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:0;pointer-events:none}
.hero-video+.wrap{z-index:1}
@media(max-width:900px){.hero-loop{opacity:.22;right:-6%;width:56vw}}
.lp-spin{transform-origin:120px 120px;animation:lp-spin 6s linear infinite}
.lp-blink{animation:lp-blink 1.5s steps(1) infinite}
.lp-piston{animation:lp-piston 1.6s ease-in-out infinite}
.lp-crank{transform-origin:120px 168px;animation:lp-spin 1.6s linear infinite}
.lp-chain{animation:lp-chain 1.2s linear infinite}
.lp-ratchet{transform-origin:120px 120px;animation:lp-ratchet 2.4s steps(6) infinite}
.lp-wrench{transform-origin:120px 120px;animation:lp-wrench 2.4s ease-in-out infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}
@keyframes lp-blink{0%,88%{opacity:.15}90%,100%{opacity:1}}
@keyframes lp-piston{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
@keyframes lp-chain{to{stroke-dashoffset:-28}}
@keyframes lp-ratchet{to{transform:rotate(360deg)}}
@keyframes lp-wrench{0%,100%{transform:rotate(0)}50%{transform:rotate(-40deg)}}
@media(prefers-reduced-motion:reduce){.lp-spin,.lp-blink,.lp-piston,.lp-crank,.lp-chain,.lp-ratchet,.lp-wrench{animation:none}.hero-video{display:none}}
/* Video-Abschnitt auf Datenblaettern (Punkt 100) */
.video-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.video-box video{display:block;width:100%;height:auto;background:#000}
.video-box figcaption{padding:.6rem .9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* Vorher/Nachher-Vergleich (Punkt 50) */
.cmp{position:relative;aspect-ratio:8/5;max-width:100%;border-radius:var(--r);overflow:hidden;background:#003B63;user-select:none;touch-action:pan-y;margin:1.2rem 0}
.cmp svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmp-a,.cmp-b{position:absolute;inset:0}
.cmp-b{clip-path:inset(0 0 0 50%)}
.cmp-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.cmp-h{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#E3B94D;z-index:2;pointer-events:none;transform:translateX(-1px)}
.cmp-h span{position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;border:2px solid #E3B94D;background:#003B63;transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.cmp-h span::before,.cmp-h span::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;transform:translateY(-50%)}
.cmp-h span::before{left:4px;border-right-color:#E3B94D}.cmp-h span::after{right:4px;border-left-color:#E3B94D}
.cmp-cap{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;justify-content:space-between;padding:.4rem .7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#EAF3FA;pointer-events:none;z-index:2;opacity:0}
.cmp .cmp-r:focus-visible~.cmp-h{background:#fff}

/* Sprachwahl (Punkt 99) */
.lang{display:flex;gap:2px;list-style:none;margin:0 .4rem 0 0;padding:0;font:600 .68rem/1 var(--mono);letter-spacing:.08em}
.lang a{display:inline-block;padding:.35rem .4rem;border-radius:3px;color:var(--ink-3);text-decoration:none;border:1px solid transparent}
.lang a:hover{color:var(--blue);border-color:var(--line)}
.lang a[aria-current]{color:var(--blue);border-color:var(--blue)}
@media(max-width:899px){.lang{margin-right:0}.lang a{padding:.35rem .3rem}}
.lang-note{font-size:.85rem;color:var(--ink-3);border-left:3px solid var(--brass);padding:.3rem .8rem;margin:1rem 0}

/* ================= v4: 20 Effekte, Sticker, Grafiken ================= */
/* E1 Logo-Emaille: Glanz beim Hover, Prägung im Footer */
.logo svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.logo{position:relative}
.logo::after{content:"";position:absolute;left:-10%;top:0;width:24px;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg) translateX(-40px);opacity:0;pointer-events:none}
.logo:hover::after{animation:sheen .9s ease forwards}
@keyframes sheen{0%{opacity:0;transform:skewX(-20deg) translateX(-40px)}20%{opacity:1}100%{opacity:0;transform:skewX(-20deg) translateX(200px)}}
.foot .logo svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 -1px 0 rgba(0,0,0,.5))}
/* E2 Messschieber-Fortschritt */
.caliper{position:fixed;left:0;right:0;top:0;height:7px;z-index:60;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,59,99,.35) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,rgba(0,59,99,.5) 0 1px,transparent 1px 50px)}
.cal-bar{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-2));transition:width .12s linear}
.cal-nonius{position:absolute;top:0;left:0;height:7px;width:44px;margin-left:-22px;background:repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 4.4px);opacity:.9;transition:left .12s linear}
.cal-nonius span{position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;background:var(--signal)}
body.night .caliper{background:none}
/* E3 Spaene im Hero (Canvas) */
.spaene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.7}
.hero .wrap{position:relative;z-index:1}
/* E4 Karten-Tilt */
.card{transform-style:preserve-3d;will-change:transform}
.card.tilt{transition:transform .08s linear,box-shadow .25s ease}
.tool-card .img{transform:translateZ(18px)}
/* E5 Marken-Laufband */
.band{overflow:hidden;background:var(--bp-2);color:var(--bp-text);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font:600 .8rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:.7rem 0;white-space:nowrap;position:relative}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.band::before{left:0;background:linear-gradient(90deg,var(--bp-2),transparent)}
.band::after{right:0;background:linear-gradient(270deg,var(--bp-2),transparent)}
.band-in{display:inline-block;animation:band 48s linear infinite}
.band-in span{padding:0 1.2rem}.band-in i{color:var(--brass);font-style:normal;font-size:.72rem;vertical-align:middle}
.band:hover .band-in{animation-play-state:paused}
@keyframes band{to{transform:translateX(-50%)}}
/* E6 Nieten-Trenner */
.rivets{height:14px;margin:0;background:radial-gradient(circle at 7px 7px,var(--paper-3) 0 2.5px,transparent 3px) 0 0/28px 14px repeat-x;opacity:.9}
.sec-tight+.sec-tight::before{content:"";display:block;height:14px;margin:-.5rem auto 1.4rem;max-width:var(--wrap,1180px);background:radial-gradient(circle at 7px 7px,rgba(0,59,99,.16) 0 2.5px,transparent 3px) 0 0/28px 14px repeat-x}
/* E7 Rollzaehler */
.counter{display:inline-flex;overflow:hidden;line-height:1;vertical-align:bottom}
.counter i{display:inline-block;font-style:normal;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
/* E8 Sticker */
.stickers{position:absolute;right:8px;bottom:8px;display:flex;gap:-6px;z-index:2;pointer-events:none}
.sticker{display:block;margin-left:-14px;transform:rotate(var(--rot,-6deg));filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));transform-origin:50% 50%;pointer-events:auto;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.sticker:first-child{margin-left:0}
.sticker:hover{transform:rotate(0deg) scale(1.12)}
.sheet-img:hover .sticker{animation:wobble 1.2s ease-in-out}
@keyframes wobble{0%,100%{transform:rotate(var(--rot,-6deg))}30%{transform:rotate(calc(var(--rot,-6deg) + 6deg))}60%{transform:rotate(calc(var(--rot,-6deg) - 4deg))}}
@media(max-width:640px){.sticker{width:64px!important;height:64px!important}}
/* E9 Kategorie-Icons in den Schubladen */
.drw .cat-ic{width:64px;height:64px;display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.drw:hover .cat-ic{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.drw{transition:transform .3s ease,box-shadow .3s ease}
.drw:hover{transform:translate(10px,4px)}
.drw::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent);opacity:0;transition:opacity .3s}
.drw:hover::after{opacity:1}
/* E10 Mutter dreht sich auf Knoepfen */
.btn-brass::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--ink);opacity:.18;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.btn-brass:hover::after{transform:rotate(120deg);opacity:.35}
.btn-brass:active::after{transform:rotate(240deg)}
/* E11 Masslinien in der Spec-Tabelle */
.spec dt{position:relative}
.spec dt::after{content:"";position:absolute;right:6px;top:50%;height:1px;width:0;background:var(--brass);transition:width .3s ease}
.spec dd:hover~dt::after,.spec dt:hover::after{width:22px}
.spec dd{transition:background .2s,padding-left .2s}
.spec dd:hover{background:rgba(227,185,77,.14);padding-left:.5rem;border-radius:3px}
/* E12 Seitenwechsel als Schubladen-Slide (View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease-in both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes vt-in{from{opacity:0;transform:translateX(28px)}}
/* E13 Nachtschicht: Pendelleuchte */
body.night .night-btn svg{transform-origin:50% 0;animation:pendel 3.4s ease-in-out infinite}
@keyframes pendel{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
body.night .night-btn{color:var(--brass-l)}
/* E14 Gebuerstetes Messing */
.btn-brass{background:linear-gradient(180deg,#EDC85E,#D9AC3C),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);background-blend-mode:overlay}
.btn-brass::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s ease}
.btn-brass:hover::before{transform:translateX(120%)}
/* E15 Gepraegte Hero-Headline */
.hero h1{text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25)}
.hero h1 em{text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.35),0 0 24px rgba(227,185,77,.35)}
/* E16 Skyline unter der Schwebebahn */
.bahn-wrap{position:relative;max-width:1100px;margin:0 auto}
.skyline{position:absolute;left:0;right:0;bottom:14px;width:100%;height:auto;pointer-events:none;transition:transform .2s linear}
.foot .bahn{position:relative}
/* E17 Blaupause zeichnet sich beim Laden */
@keyframes gridin{from{background-size:0 0}to{background-size:32px 32px}}
body.ready .hero{animation:gridin 1.1s cubic-bezier(.2,.8,.2,1) both}
/* E18 Werkzeugkarte hebt das Foto */
.tool-card .img img{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.tool-card:hover .img img{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 14px 12px rgba(0,0,0,.28))}
/* E19 Ritzel-Loader im Finder */
.sprocket{width:22px;height:22px;color:var(--brass);vertical-align:middle;margin-right:.4rem;animation:spin 1.1s linear infinite;display:none}
.busy .sprocket{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* E20 Glossar-Tooltip als Messingschild */
.gtip{background:linear-gradient(180deg,#f2dc93,#d9b652);color:var(--ink);border:1px solid #a8801f;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -8px rgba(0,0,0,.5);font-family:var(--font)}
.gtip::before,.gtip::after{content:"";position:absolute;top:5px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff5cc,#8a6a1c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.gtip::before{left:5px}.gtip::after{right:5px}
/* Konfetti-Canvas (Muttern) */
.konfetti{position:fixed;inset:0;pointer-events:none;z-index:70}
@media(prefers-reduced-motion:reduce){.band-in,.sticker,.drw .cat-ic,.btn-brass::before,.btn-brass::after,body.night .night-btn svg,.sprocket{animation:none!important;transition:none!important}.caliper{display:none}.spaene{display:none}::view-transition-old(root),::view-transition-new(root){animation:none}body.ready .hero{animation:none}}