/* HERMES Solution – Bewegungsebene.
   Ergänzt style.css, ändert dort nichts. Alles Bewegte greift nur unter html.m-on:
   motion.js setzt die Klasse, wenn JavaScript läuft und keine „reduzierte Bewegung“ eingestellt ist.
   Ohne sie sieht die Seite genau so aus wie bisher. */

:root{--m-ease:cubic-bezier(.22,.7,.12,1);--m-out:cubic-bezier(.16,1,.3,1)}

/* Blaupausen und Illustration in den Zeichnungsrahmen */
figure.drawing :is(img.blueprint,img.illustration){width:100%;height:auto;display:block}

/* Fortschrittslinie oben */
.m-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:50;background:var(--copper);
  transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

html.m-on body{overflow-x:clip}

/* ---------- Überschriften: Wort für Wort aus der Maske ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .07em .1em 0;margin:0 -.07em -.1em 0}
.m-w>span{display:inline-block}
html.m-on .m-split .m-w>span{transform:translateY(108%) rotate(4deg);transform-origin:0 100%;
  transition:transform 1s var(--m-out);transition-delay:calc(var(--i)*75ms + 80ms)}
html.m-on .m-split.in .m-w>span{transform:none}

/* Firmenname: Buchstabe für Buchstabe */
html.m-on .m-chars .m-w>span{transform:translateY(110%);
  transition:transform 1.1s var(--m-out);transition-delay:calc(var(--i)*45ms + 150ms)}

/* kursives Schlüsselwort: Kupferstrich zeichnet sich */
html.m-on main :is(h1,h2) em{background:linear-gradient(var(--copper),var(--copper)) 0 94%/0% 2px no-repeat;
  transition:background-size 1s var(--m-ease);transition-delay:calc(var(--n,4)*75ms + 450ms)}
html.m-on main :is(h1,h2).in em{background-size:100% 2px}

/* ---------- Augenbrauen-Zeile: Linie fährt vor ---------- */
html.m-on .eyebrow.m-r::before{content:"";display:inline-block;vertical-align:middle;height:1px;width:0;
  margin-right:0;background:currentColor;transition:width .8s var(--m-ease) .1s,margin .8s var(--m-ease) .1s}
html.m-on .eyebrow.m-r.in::before{width:26px;margin-right:10px}

/* ---------- allgemeines Hereinkommen ---------- */
html.m-on .m-r{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--m-ease),transform 1s var(--m-out);transition-delay:var(--d,0ms)}
html.m-on .m-r.in{opacity:1;transform:none}
html.m-on .eyebrow.m-r{transform:translateX(-10px)}
html.m-on .eyebrow.m-r.in{transform:none}

/* ganze Überschrift (h2) als ein Block aus der Maske – bleibt für Übersetzer ein zusammenhängender Satz */
.m-w.m-line{display:inline-block;max-width:100%}
.m-w.m-line>span{display:inline}
html.m-on .m-split .m-w.m-line>span{display:inline-block}

/* Zitat wird als Ganzes scharf */
html.m-on .m-quote{opacity:0;filter:blur(8px);transform:translateY(10px);
  transition:opacity 1s var(--m-ease),filter 1.2s var(--m-ease),transform 1.2s var(--m-out);transition-delay:.35s}
html.m-on .m-quote.in{opacity:1;filter:none;transform:none}

/* Anspruch: Fläche wischt herein (Abdeckung fährt weg; clip-path am Element selbst
   würde der IntersectionObserver als „unsichtbar“ werten) */
html.m-on .claim.m-r{opacity:1;transform:none;position:relative;overflow:hidden}
html.m-on .claim.m-r::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:100% 50%;
  transition:transform 1.2s var(--m-ease);transition-delay:var(--d,0ms);pointer-events:none}
html.m-on .claim.m-r.in::after{transform:scaleX(0)}

/* ---------- Leistungen: Kupferlinie beim Überfahren ---------- */
.field{position:relative}
html.m-on .field::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--m-ease)}
html.m-on .field:nth-child(even)::after{left:22px}
html.m-on .field:hover::after{transform:scaleX(1)}
html.m-on .field h3{transition:color .3s,transform .5s var(--m-out)}
html.m-on .field:hover h3{color:var(--green);transform:translateX(4px)}

/* ---------- Zeichnungen ---------- */
html.m-on figure.drawing{transition:transform .6s var(--m-out),box-shadow .6s var(--m-ease)}
html.m-on figure.drawing:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(24,32,27,.45)}

/* Blaupause wird geplottet: Abtastlinie legt das Blatt frei */
.m-plot{position:relative;display:block;overflow:hidden}
html.m-on .m-plot img{clip-path:inset(0 0 100% 0);transition:clip-path 2.4s var(--m-ease) .2s}
html.m-on .m-plot.in img{clip-path:inset(0 0 0 0)}
html.m-on .m-plot::after{content:"";position:absolute;left:-4%;right:-4%;top:0;height:2px;opacity:0;pointer-events:none;
  background:#dcebff;box-shadow:0 0 10px 2px rgba(150,200,255,.9),0 0 34px 10px rgba(70,140,255,.35)}
html.m-on .m-plot.in::after{animation:m-scan 2.4s var(--m-ease) .2s both}
@keyframes m-scan{0%{top:0;opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
/* Schnittdarstellung füllt sich von unten wie der Tank, mit Wasserlinie */
html.m-on .m-plot.m-fill img{clip-path:inset(100% 0 0 0);transition:clip-path 2.6s var(--m-ease) .2s}
html.m-on .m-plot.m-fill.in img{clip-path:inset(0 0 0 0)}
html.m-on .m-plot.m-fill::after{top:auto;bottom:0;height:3px;background:#7cc4ff;
  box-shadow:0 0 10px 2px rgba(80,170,255,.7),0 -14px 30px 4px rgba(80,170,255,.18)}
html.m-on .m-plot.m-fill.in::after{animation:m-fill 2.6s var(--m-ease) .2s both}
@keyframes m-fill{0%{bottom:0;opacity:1}88%{opacity:1}100%{bottom:100%;opacity:0}}

/* Fadenkreuz-Raster schimmert beim Überfahren */
.m-plot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(160px circle at var(--hx,50%) var(--hy,50%),rgba(200,225,255,.22),transparent 70%)}
html.m-on .m-plot:hover::before{opacity:1}

/* Skizze von 2017 zeichnet sich Strich für Strich */
html.m-on .m-sketch :is(path,line,ellipse,circle,rect){stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  transition:stroke-dashoffset 1.3s var(--m-ease),fill-opacity .9s ease;
  transition-delay:calc(var(--k)*28ms),calc(var(--k)*28ms + 900ms)}
html.m-on .m-sketch.in :is(path,line,ellipse,circle,rect){stroke-dashoffset:0;fill-opacity:1}
html.m-on .m-sketch text{opacity:0;transition:opacity 1s ease 1.6s}
html.m-on .m-sketch.in text{opacity:1}

/* ---------- Schienen: Arbeitsweise und Zeitleiste ---------- */
.chain,.timeline{position:relative}
.m-rail{position:absolute;top:0;bottom:0;width:2px;pointer-events:none}
.m-rail i{position:absolute;inset:0;background:var(--copper);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.chain>.m-rail{left:-22px;background:var(--rule)}
.timeline>.m-rail{left:-2px}
html.m-on .stage .num{opacity:.28;transform:scale(.8);transform-origin:0 50%;
  transition:opacity .5s ease,transform .7s var(--m-out),color .4s}
html.m-on .stage.on .num{opacity:1;transform:none}
html.m-on .timeline li::before{border-color:var(--rule);transition:border-color .4s,background .4s,transform .6s var(--m-out)}
html.m-on .timeline li.on::before{border-color:var(--copper);background:var(--copper);transform:scale(1.2)}
html.m-on .timeline .yr{opacity:.35;transition:opacity .5s}
html.m-on .timeline li.on .yr{opacity:1}

/* ---------- Team ---------- */
html.m-on .portrait.m-port{position:relative}
html.m-on .portrait.m-port::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:50% 0;
  transition:transform 1.2s var(--m-ease);transition-delay:var(--d,0ms);pointer-events:none}
html.m-on .portrait.m-port.in::after{transform:scaleY(0)}
html.m-on .portrait img{transform:scale(1.14);transition:transform 1.8s var(--m-out);transition-delay:var(--d,0ms)}
html.m-on .portrait.in img{transform:none}
html.m-on .person:hover .portrait img{transform:scale(1.04);transition-delay:0ms}

/* ---------- Einstieg: Konstruktionsraster folgt der Maus ---------- */
.hero{position:relative;isolation:isolate}
html.m-on .hero::before{content:"";position:absolute;inset:-40px -40px -10px -40px;z-index:-1;pointer-events:none;
  --m-grid:color-mix(in srgb,var(--green) 22%,transparent);
  background-image:linear-gradient(var(--m-grid) 1px,transparent 1px),linear-gradient(90deg,var(--m-grid) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,var(--green) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--green) 9%,transparent) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(380px circle at var(--mx,70%) var(--my,25%),#000,transparent 72%);
  mask-image:radial-gradient(380px circle at var(--mx,70%) var(--my,25%),#000,transparent 72%)}
html.m-on .hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:22px;height:22px;
  left:var(--mx,70%);top:var(--my,25%);translate:-50% -50%;opacity:.55;
  background:linear-gradient(var(--copper),var(--copper)) center/1px 100% no-repeat,
             linear-gradient(var(--copper),var(--copper)) center/100% 1px no-repeat}

/* ---------- Navigation: Marke zeigt die aktuelle Stelle ---------- */
nav.toc{position:relative}
nav.toc a{transition:color .3s,padding .4s var(--m-out)}
nav.toc a.m-act{color:var(--green);padding-left:12px}
.m-mark{position:absolute;left:0;top:0;width:2px;background:var(--copper);pointer-events:none;
  transition:transform .55s var(--m-out),height .55s var(--m-out),opacity .3s;opacity:0}
.m-mark.on{opacity:1}

/* ---------- Blaupause groß ansehen (Klick) ---------- */
.m-zoom{cursor:zoom-in}
.m-zoom:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
dialog.m-lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;cursor:zoom-out}
dialog.m-lb:not([open]){display:none}
dialog.m-lb::backdrop{background:rgba(10,18,32,.86);backdrop-filter:blur(4px)}
dialog.m-lb img{max-width:min(94vw,900px);max-height:94vh;width:auto;height:auto;display:block;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:no-preference){
  dialog.m-lb[open] img{animation:m-pop .45s var(--m-out)}
  @keyframes m-pop{from{opacity:0;transform:scale(.94) translateY(12px)}}
}

@media (max-width:900px){
  .m-mark{display:none}
  nav.toc a.m-act{padding-left:0}
  html.m-on .hero::before{inset:-20px 0 0 0}
}
@media (max-width:720px){
  .chain>.m-rail{left:-12px}
}
@media (hover:none){
  html.m-on .hero::after{display:none}
}