/* ELDI Welle 5 - Haptik, Piktogramme, Farbdifferenzierung.
   Additiv zu eldi.css und motion.css. Nichts hier ueberschreibt Layout, nur Oberflaeche.
   Regeln: overflow-wrap:break-word bleibt global, kein anywhere (Schmitt-Lernpunkt fix4).
   Alle Bewegungen enden in @media (prefers-reduced-motion:reduce) am Dateiende. */

/* ==== Tokens: Federkurven, Zeiten, Akzente ==== */
:root{
  --e-out:cubic-bezier(.22,.68,0,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-snap:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.55,0,1,.45);
  --t-fast:.12s;--t-mid:.24s;--t-slow:.42s;
  --eic-acc:var(--brass);
  --acc:var(--blue);--acc-2:var(--blue-2);--acc-soft:rgba(0,81,134,.10);--acc-ink:#003049;
  --ink-hl:#0B1A24;
  --ruler:rgba(184,121,29,.14);
  --lift:0 2px 4px rgba(20,33,43,.06),0 14px 34px -16px rgba(20,33,43,.34);
}
.bp,.dark{--eic-acc:var(--brass-l);--acc:var(--bp-line);--acc-2:var(--brass-l);--acc-soft:rgba(79,151,208,.16);--acc-ink:var(--bp-text);--ruler:rgba(227,185,77,.16);--ink-hl:#fff}

/* Vier Schubladen, vier Frequenzen. Wird per data-cat am body gesetzt. */
body[data-cat="motor"]{--acc:#9C4A22;--acc-2:#C25F2C;--acc-soft:rgba(156,74,34,.10);--eic-acc:#C25F2C}
body[data-cat="zuendung"]{--acc:#B8791D;--acc-2:#E3B94D;--acc-soft:rgba(184,121,29,.12);--eic-acc:#B8791D}
body[data-cat="antrieb-fahrwerk"]{--acc:#005186;--acc-2:#0A6BAE;--acc-soft:rgba(0,81,134,.10);--eic-acc:#0A6BAE}
body[data-cat="werkstatt-pflege"]{--acc:#2F6B55;--acc-2:#3E8A6D;--acc-soft:rgba(47,107,85,.10);--eic-acc:#3E8A6D}
body.bp[data-cat],body.dark[data-cat]{--acc:var(--bp-line);--acc-soft:rgba(79,151,208,.16)}

/* Akzentkante: jede Kategorie bekommt ihren eigenen Rand, ohne neue Bauteile */
body[data-cat] .kicker{color:var(--acc)}
body[data-cat] .card:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
body[data-cat] .sec-tight h2::after,body[data-cat] .sec h2::after{background:var(--acc)}
.sec h2,.sec-tight h2{position:relative}
.sec h2::after,.sec-tight h2::after{content:"";display:block;width:2.4rem;height:3px;margin-top:.5rem;background:var(--brass);transition:width var(--t-slow) var(--e-out)}
.sec:hover h2::after,.sec-tight:hover h2::after{width:4.2rem}

/* ==== Piktogramme ==== */
.eic{width:1.15em;height:1.15em;flex:0 0 auto;display:inline-block;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-mid) var(--e-spring),opacity var(--t-fast) linear}
.eic-lg{width:1.6em;height:1.6em}
.eic-xl{width:2.6em;height:2.6em;stroke-width:1.3}
.eic-acc{color:var(--acc)}
.eic-brass{--eic-acc:var(--brass-l);color:var(--brass)}
.eic-thin{stroke-width:1.2}
.ic-lead{margin-right:.45em}
.ic-trail{margin-left:.4em}

/* Piktogramm-Leben: jede Gattung bewegt sich anders */
a:hover>.eic-spin,button:hover>.eic-spin,.eic-spin:hover{transform:rotate(180deg)}
a:hover>.eic-push,button:hover>.eic-push{transform:translateX(3px)}
a:hover>.eic-lift,button:hover>.eic-lift{transform:translateY(-2px)}
a:hover>.eic-tick,button:hover>.eic-tick{transform:rotate(-9deg) scale(1.06)}
.nav a:hover>.eic,.mnav a:hover>.eic{transform:translateY(-1px) rotate(-4deg)}
.ic-btn:active>.eic{transform:scale(.88)}

/* Piktogramm-Kachel: Icon in Blaupausenrahmen, fuer Karten und Listen */
.ic-tile{display:inline-grid;place-items:center;width:2.7rem;height:2.7rem;border:1px solid var(--paper-3);
  border-radius:var(--r);background:var(--white);color:var(--acc);
  background-image:var(--grid-paper);background-size:9px 9px;
  transition:border-color var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid) var(--e-out)}
.bp .ic-tile,.dark .ic-tile{background:rgba(0,42,71,.55);border-color:rgba(79,151,208,.35);color:var(--bp-line);background-image:var(--grid)}
a:hover>.ic-tile,.card:hover .ic-tile,.drw:hover .ic-tile{border-color:var(--acc);transform:translateY(-2px) rotate(-2deg);box-shadow:var(--lift)}

/* ==== Farbliche Differenzierung im Text ==== */
.val{font-family:var(--mono);font-weight:500;color:var(--brass-2);white-space:nowrap;
  border-bottom:1px dotted color-mix(in srgb,var(--brass) 55%,transparent);cursor:help;
  transition:color var(--t-fast) linear,background var(--t-fast) linear}
.val:hover,.val[aria-expanded="true"]{color:var(--brass);background:rgba(184,121,29,.10)}
.bp .val,.dark .val{color:var(--brass-l);border-bottom-color:rgba(227,185,77,.5)}
.val-thread{color:var(--blue);border-bottom-color:color-mix(in srgb,var(--blue) 50%,transparent)}
.val-thread:hover{color:var(--blue-2);background:var(--acc-soft)}
.bp .val-thread,.dark .val-thread{color:var(--bp-line);border-bottom-color:rgba(79,151,208,.55)}
.val-warn{color:var(--signal);border-bottom-color:color-mix(in srgb,var(--signal) 50%,transparent)}
.val u{text-decoration:none;opacity:.72;font-size:.9em;margin-left:.08em}
/* Abgestufte Schrift: Lede heller, Merksatz dunkler, Zahl schwerer */
.prose strong,.sheet-main strong{color:var(--ink-hl);font-weight:600}
.prose em{color:var(--acc);font-style:normal;font-weight:600}
.num,.counter,.sku{font-variant-numeric:tabular-nums}
.sku{color:var(--ink-3)}
.sku b,.sku strong{color:var(--brass-2)}

/* ==== Haptik: Druckpunkt ==== */
.btn,.chip,.ic-btn,.card,.drw,.pager a,.crumbs a,.foot a,.toc a,.merk,.seg button,.opt{
  transition:transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid) var(--e-out),
             background var(--t-mid) var(--e-out),border-color var(--t-mid) var(--e-out),color var(--t-fast) linear}
.btn:active,.chip:active,.ic-btn:active,.seg button:active,.opt:active{transform:translateY(1px) scale(.978)}
.card:active,.drw:active{transform:translateY(0) scale(.995)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%);transition:opacity var(--t-fast) linear}
.btn:hover::after{opacity:1;animation:h-sheen .9s var(--e-out)}
@keyframes h-sheen{to{transform:translateX(120%)}}
.btn-brass:hover{box-shadow:0 0 0 1px var(--brass-l),0 10px 24px -14px rgba(184,121,29,.9)}

/* Magnetischer Zug: JS setzt --mx/--my in Pixeln */
.h-mag{transition:transform .28s var(--e-out)}
.h-mag.h-mag-on{transform:translate(var(--mx,0px),var(--my,0px))}

/* Oelfleck-Ripple */
.h-rip{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(184,121,29,.42) 0%,rgba(184,121,29,0) 70%);
  animation:h-rip .62s var(--e-out) forwards;z-index:0}
@keyframes h-rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* Karten-Neigung mit Glanzkante */
.h-tilt{transform-style:preserve-3d;transition:transform .34s var(--e-out)}
.h-tilt.h-tilt-on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
.h-tilt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.34),transparent 62%);
  transition:opacity var(--t-mid) linear;z-index:2}
.h-tilt:hover::before{opacity:1}
.bp .h-tilt::before,.dark .h-tilt::before{background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(227,185,77,.16),transparent 62%)}

/* Fokusring, der sich zeichnet statt zu blinken */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px dashed var(--brass);outline-offset:3px;border-radius:3px;animation:h-focus .3s var(--e-out)}
@keyframes h-focus{from{outline-offset:9px;outline-color:transparent}}

/* Unterstrich, der von links laeuft */
.prose a:not(.btn):not(.chip),.sheet-main a:not(.btn),.lede a{
  text-decoration:none;background-image:linear-gradient(var(--acc),var(--acc));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .32s var(--e-out),color var(--t-fast) linear;padding-bottom:1px}
.prose a:not(.btn):not(.chip):hover,.sheet-main a:not(.btn):hover,.lede a:hover{background-size:100% 1.5px;color:var(--acc)}

/* Lineal-Hover in Datentabellen: Zeile leuchtet, Spalte bekommt Anschlag */
.data tbody tr{transition:background var(--t-fast) linear,box-shadow var(--t-fast) linear}
.data tbody tr:hover{background:var(--ruler);box-shadow:inset 3px 0 0 var(--brass)}
.data td,.data th{transition:color var(--t-fast) linear}
.data tbody tr:hover td:first-child{color:var(--ink-hl);font-weight:600}
.data th[data-copycol]{cursor:copy;position:relative}
.data th[data-copycol]::after{content:"Spalte kopieren";position:absolute;left:50%;top:100%;transform:translate(-50%,4px);
  font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-2);
  background:var(--white);border:1px solid var(--paper-3);padding:.25em .5em;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast) linear;white-space:nowrap;z-index:5}
.data th[data-copycol]:hover::after{opacity:1}

/* Eingabefelder mit Rastgefuehl */
.field input,.field select,.calc-in input,input[type="number"]{
  transition:border-color var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-out),background var(--t-mid) var(--e-out)}
.field input:focus,.calc-in input:focus,input[type="number"]:focus{
  border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.h-notch{animation:h-notch .18s var(--e-snap)}
@keyframes h-notch{50%{transform:translateY(-2px)}}

/* Sanfter Sprung zum Ankerziel */
:target{animation:h-target 1.5s var(--e-out)}
@keyframes h-target{0%,22%{background:rgba(227,185,77,.35);box-shadow:-6px 0 0 rgba(227,185,77,.35)}100%{background:transparent;box-shadow:none}}

/* ==== Messwert-Popover: Umrechnung direkt am Wort ==== */
.h-pop{position:fixed;z-index:120;max-width:min(20rem,88vw);
  background:var(--bp);color:var(--bp-text);border:1px solid var(--bp-line);border-radius:var(--r);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7);padding:.62rem .72rem;
  font:400 .82rem/1.45 var(--font);opacity:0;transform:translateY(6px) scale(.97);pointer-events:none;
  transition:opacity var(--t-fast) linear,transform var(--t-mid) var(--e-spring)}
.h-pop.on{opacity:1;transform:none;pointer-events:auto}
.h-pop b{display:block;font:700 .68rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-l);margin-bottom:.35rem}
.h-pop dl{display:grid;grid-template-columns:auto 1fr;gap:.14rem .7rem;margin:0}
.h-pop dt{font-family:var(--mono);font-size:.74rem;color:var(--bp-line)}
.h-pop dd{margin:0;font-family:var(--mono);font-size:.8rem;color:#fff}
.h-pop .h-thr{margin-top:.5rem;border-top:1px dashed rgba(79,151,208,.5);padding-top:.45rem}
.h-pop svg{display:block;width:100%;height:38px;overflow:visible}
.h-pop .h-note{margin:.4rem 0 0;font-size:.72rem;color:var(--bp-line)}

/* ==== Quick-Look: Datenblatt-Vorschau ohne Seitenwechsel ==== */
.h-quick{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:var(--gut);
  background:rgba(10,20,28,.58);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--t-mid) linear}
.h-quick.on{opacity:1;pointer-events:auto}
.h-quick-box{width:min(46rem,94vw);max-height:86vh;overflow:auto;background:var(--white);border-radius:var(--r-l);
  border:1px solid var(--paper-3);box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.985);transition:transform var(--t-slow) var(--e-spring)}
.h-quick.on .h-quick-box{transform:none}
.bp .h-quick-box,.dark .h-quick-box{background:var(--bp-2);border-color:var(--bp-line);color:var(--bp-text)}
.h-quick-h{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid var(--paper-3)}
.h-quick-h h3{margin:0;font:800 1.16rem/1.2 var(--font-c);text-transform:uppercase;letter-spacing:.02em}
.h-quick-h p{margin:.2rem 0 0;font-size:.84rem;color:var(--ink-3)}
.h-quick-b{padding:1rem 1.1rem;display:grid;gap:.8rem}
.h-quick-b .h-kv{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;font-family:var(--mono);font-size:.82rem}
.h-quick-b .h-kv dt{color:var(--ink-3)}
.h-quick-f{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 1.1rem 1.1rem}
.h-quick-x{margin-left:auto;background:none;border:1px solid var(--paper-3);border-radius:var(--r);
  width:2rem;height:2rem;display:grid;place-items:center;cursor:pointer;color:inherit}

/* ==== Werkbank-Rad: Langdruck oder rechte Maustaste ==== */
.h-radial{position:fixed;z-index:125;width:0;height:0;pointer-events:none}
.h-radial .h-spoke{position:absolute;left:0;top:0;width:3.5rem;height:3.5rem;margin:-1.75rem 0 0 -1.75rem;
  display:grid;place-items:center;border-radius:50%;background:var(--bp);color:var(--bp-text);
  border:1px solid var(--bp-line);box-shadow:0 10px 26px -12px rgba(0,0,0,.8);text-decoration:none;
  transform:translate(0,0) scale(.2);opacity:0;pointer-events:auto;
  transition:transform .34s var(--e-spring),opacity .2s linear,background var(--t-fast) linear}
.h-radial.on .h-spoke{transform:translate(var(--dx),var(--dy)) scale(1);opacity:1}
.h-radial .h-spoke:hover{background:var(--brass);border-color:var(--brass-l);color:#fff}
.h-radial .h-spoke span{position:absolute;top:calc(100% + 4px);font:600 .6rem/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--bp-text);
  background:rgba(0,42,71,.9);padding:.2em .4em;border-radius:2px}
.h-radial .h-hub{position:absolute;left:0;top:0;width:.9rem;height:.9rem;margin:-.45rem 0 0 -.45rem;
  border-radius:50%;background:var(--brass-l);opacity:0;transition:opacity .2s linear}
.h-radial.on .h-hub{opacity:1}

/* ==== Tastatur-Werkstatt ==== */
.h-keys{position:fixed;inset:0;z-index:132;display:grid;place-items:center;padding:var(--gut);
  background:rgba(10,20,28,.6);opacity:0;pointer-events:none;transition:opacity var(--t-mid) linear}
.h-keys.on{opacity:1;pointer-events:auto}
.h-keys-box{width:min(34rem,94vw);background:var(--white);border:1px solid var(--paper-3);border-radius:var(--r-l);
  padding:1.2rem 1.3rem;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);transform:scale(.97);transition:transform var(--t-slow) var(--e-spring)}
.h-keys.on .h-keys-box{transform:none}
.bp .h-keys-box,.dark .h-keys-box{background:var(--bp-2);border-color:var(--bp-line);color:var(--bp-text)}
.h-keys-box h3{margin:0 0 .2rem;font:800 1.1rem/1.2 var(--font-c);text-transform:uppercase;letter-spacing:.04em}
.h-keys-box p{margin:0 0 .9rem;font-size:.82rem;color:var(--ink-3)}
.bp .h-keys-box p,.dark .h-keys-box p{color:var(--bp-line)}
.h-keys-box dl{display:grid;grid-template-columns:auto 1fr;gap:.42rem .9rem;margin:0;align-items:center}
.h-keys-box dd{margin:0;font-size:.86rem}
kbd{display:inline-block;min-width:1.5em;text-align:center;font:600 .74rem/1.4 var(--mono);
  background:var(--paper-2);border:1px solid var(--paper-3);border-bottom-width:2px;border-radius:3px;padding:.1em .4em;color:var(--ink-2)}
.bp kbd,.dark kbd{background:rgba(79,151,208,.16);border-color:var(--bp-line);color:var(--bp-text)}

/* ==== Kopier-Stempel ==== */
.h-stamp{position:fixed;z-index:140;pointer-events:none;font:700 .68rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);border:2px solid currentColor;border-radius:3px;padding:.34em .55em;
  background:rgba(255,255,255,.92);transform:translate(-50%,-50%) rotate(-11deg) scale(.5);opacity:0;
  animation:h-stamp 1.05s var(--e-out) forwards}
@keyframes h-stamp{18%{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1.06)}
  30%{transform:translate(-50%,-50%) rotate(-11deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-140%) rotate(-11deg) scale(1)}}

/* ==== Schubladen-Dock: wo stehe ich im Sortiment ==== */
.h-dock{position:fixed;right:14px;bottom:14px;z-index:60;display:none;flex-direction:column;gap:6px;
  padding:7px;border-radius:var(--r-l);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--paper-3);box-shadow:var(--lift)}
@media (min-width:1100px){.h-dock{display:flex}}
.bp .h-dock,.dark .h-dock{background:rgba(0,42,71,.86);border-color:rgba(79,151,208,.4)}
.h-dock a{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--r);color:var(--ink-3);
  text-decoration:none;position:relative;transition:background var(--t-fast) linear,color var(--t-fast) linear,transform var(--t-mid) var(--e-spring)}
.bp .h-dock a,.dark .h-dock a{color:var(--bp-line)}
.h-dock a:hover{background:var(--acc-soft);color:var(--acc);transform:translateX(-2px)}
.h-dock a[aria-current="true"]{color:var(--brass);background:rgba(184,121,29,.14)}
.h-dock a[aria-current="true"]::before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:2px;background:var(--brass)}
.h-dock a span{position:absolute;right:calc(100% + 8px);white-space:nowrap;font:600 .64rem/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;background:var(--bp);color:var(--bp-text);padding:.34em .5em;
  border-radius:3px;opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--t-fast) linear,transform var(--t-mid) var(--e-out)}
.h-dock a:hover span{opacity:1;transform:none}
.h-dock hr{width:100%;height:1px;border:0;background:var(--paper-3);margin:1px 0}

/* ==== Abschnitte, die sich aufbauen ==== */
.h-up{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .6s var(--e-out)}
.h-up.h-in{opacity:1;transform:none}
.h-stagger>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--e-out),transform .5s var(--e-out)}
.h-stagger.h-in>*{opacity:1;transform:none}
.h-stagger.h-in>*:nth-child(2){transition-delay:.06s}
.h-stagger.h-in>*:nth-child(3){transition-delay:.12s}
.h-stagger.h-in>*:nth-child(4){transition-delay:.18s}
.h-stagger.h-in>*:nth-child(5){transition-delay:.24s}
.h-stagger.h-in>*:nth-child(6){transition-delay:.3s}
.h-stagger.h-in>*:nth-child(n+7){transition-delay:.36s}

/* Kopfzeile: Logo nimmt beim Scrollen Haltung an */
.site-head .logo svg{transition:transform var(--t-slow) var(--e-out)}
.site-head.xh .logo svg{transform:scale(.88) rotate(-1.2deg)}

/* Gewindeprofil, das im Popover gezeichnet wird */
.h-thr-path{stroke:var(--brass-l);stroke-width:1.4;fill:none;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);animation:h-draw .9s var(--e-out) forwards}
@keyframes h-draw{to{stroke-dashoffset:0}}

/* Ladefortschritt oben, als Nonius-Skala statt Balken */
.h-prog{position:fixed;left:0;top:0;height:3px;z-index:70;width:var(--p,0%);
  background:linear-gradient(90deg,var(--brass-2),var(--brass-l));transition:width .1s linear}
.h-prog::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--brass-l);
  box-shadow:0 0 8px 1px rgba(227,185,77,.8)}

/* Werkzeugliste: Zaehler schlaegt aus */
.ic-btn .cnt{transition:transform var(--t-mid) var(--e-spring),background var(--t-fast) linear}
.ic-btn .cnt.h-pop-n{transform:scale(1.5)}

/* Bildplatzhalter atmet, bis das Foto da ist */
.card .img picture img{transition:opacity .5s var(--e-out),transform .6s var(--e-out)}
.card:hover .img picture img{transform:scale(1.03)}
.card .img{overflow:hidden}

/* ==== Rueckzug fuer alle, die keine Bewegung wollen ==== */
@media (prefers-reduced-motion:reduce){
  .eic,.ic-tile,.btn,.chip,.ic-btn,.card,.drw,.h-mag,.h-tilt,.h-up,.h-stagger>*,.site-head .logo svg,.card .img picture img{
    transition-duration:.01ms!important;animation:none!important;transform:none!important}
  .h-up,.h-stagger>*{opacity:1!important}
  .h-rip,.h-stamp,.btn::after{display:none!important}
  .h-tilt.h-tilt-on{transform:none!important}
  .sec h2::after,.sec-tight h2::after{transition:none}
  :target{animation:none}
}

/* ==== Druck: das Blatt bleibt ein Blatt ==== */
@media print{
  .h-dock,.h-radial,.h-pop,.h-quick,.h-keys,.h-prog,.h-stamp{display:none!important}
  .h-up,.h-stagger>*{opacity:1!important;transform:none!important}
  .eic{stroke:#000}
  .val{border-bottom:0;color:#000}
}

/* ==== Nachtschicht: dieselben Bauteile, anderes Licht ==== */
body.night{--eic-acc:#E3B94D;--acc:#7fb3e6;--acc-2:#a6cbf0;--acc-soft:rgba(127,179,230,.14);
  --ink-hl:#fff;--ruler:rgba(227,185,77,.14);
  --lift:0 2px 4px rgba(0,0,0,.5),0 14px 34px -16px rgba(0,0,0,.85)}
body.night[data-cat]{--acc:#7fb3e6;--acc-2:#a6cbf0}
body.night[data-cat="motor"]{--eic-acc:#E08A5A}
body.night[data-cat="zuendung"]{--eic-acc:#E3B94D}
body.night[data-cat="antrieb-fahrwerk"]{--eic-acc:#7fb3e6}
body.night[data-cat="werkstatt-pflege"]{--eic-acc:#7FC3A6}
body.night .ic-tile{background:#1c2127;border-color:#2c343c;color:var(--blue);background-image:none}
body.night .h-dock{background:rgba(23,27,31,.92);border-color:#2c343c}
body.night .h-dock a{color:var(--ink-3)}
body.night .h-dock hr{background:#2c343c}
body.night .h-quick-box,body.night .h-keys-box{background:#1c2127;border-color:#2c343c;color:var(--ink)}
body.night .h-quick-h{border-bottom-color:#2c343c}
body.night .h-quick-x{border-color:#2c343c}
body.night kbd{background:#232a31;border-color:#2c343c;color:var(--ink)}
body.night .val{color:#E3B94D;border-bottom-color:rgba(227,185,77,.5)}
body.night .val:hover{background:rgba(227,185,77,.12)}
body.night .val-thread{color:#7fb3e6;border-bottom-color:rgba(127,179,230,.5)}
body.night .val-thread:hover{background:rgba(127,179,230,.14)}
body.night .h-stamp{background:rgba(28,33,39,.94);color:#E3B94D}
body.night .h-tilt::before{background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(227,185,77,.12),transparent 62%)}
body.night .data th[data-copycol]::after{background:#1c2127;border-color:#2c343c;color:#E3B94D}
body.night .btn::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.16) 50%,transparent 80%)}
body.night .sec h2::after,body.night .sec-tight h2::after{background:#E3B94D}