/* ============================================================
   EnergyEng — „Trasse" · Design-System V2
   CI: Schwarz #0A0A0A · Rot #E8331F · Weiß #FFFFFF
   Schrift: Archivo (variabel, wdth-Achse) + IBM Plex Mono
   Konzept: Eine Reise von der Mastspitze bis unter die Erde.
   Bewegung (Dauern, Easings, Reveals, Vorhang, Menü):
   assets/css/motion.css — dort liegt auch die API-Dokumentation.
   Regel: Übergänge nur mit var(--t-*) und var(--ease-*),
   Hover nur in @media (hover:hover).
   ============================================================ */

/* Metrik-Fallback, damit beim Nachladen von Archivo nichts springt */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial");
  size-adjust:96%;
  ascent-override:90%;
}

:root{
  --ink:#0A0A0A;
  --ink-2:#121214;
  --ink-3:#1A1A1E;
  --paper:#FFFFFF;
  --paper-2:#F3F4F6;
  --red:#E8331F;
  --red-deep:#C1220F;
  --line-d:rgba(255,255,255,.14);
  --line-d2:rgba(255,255,255,.28);
  --line-l:rgba(10,10,10,.16);
  --mut-d:rgba(255,255,255,.64);
  --mut-d2:rgba(255,255,255,.84);
  --mut-l:rgba(10,10,10,.64);
  --w:1360px;
  --pad:clamp(20px,5vw,64px);
  --disp:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:var(--ease-out); /* Alias aus V1, Werte in motion.css */
  /* Überschriften */
  --fs-h2:clamp(30px,4.2vw,60px);      /* Sektionskopf */
  --fs-h2-col:clamp(27px,3.35vw,48px); /* H2 in Spalten */
  /* Abstände (px, damit Statik und Live gleich laufen) */
  --sp-1:64px;
  --sp-2:96px;
  --sp-3:128px;
  /* Bauteile */
  --logo:34px;
  --nav-h:80px;
  /* Rundungen */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;
}
@media(max-width:900px){ :root{ --sp-3:104px; } }
@media(max-width:640px){ :root{ --sp-1:48px; --sp-2:72px; --sp-3:88px; } }

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{
  font-family:var(--disp);
  font-size:17px;line-height:1.65;
  background:var(--ink);color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
p{text-wrap:pretty;}
::selection{background:var(--red);color:#fff;}

.wrap{max-width:var(--w);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.mono{font-family:var(--mono);}

/* ---------- Fokus (Tastatur) ---------- */
:focus-visible{outline:2px solid var(--red);outline-offset:4px;}
:focus:not(:focus-visible){outline:none;}
.btn:focus-visible,.tw-band :focus-visible,.vs-head :focus-visible{outline-color:#fff;}
.on-light :focus-visible{outline-color:var(--red-deep);}

/* Skip-Link: unsichtbar, bei Tastaturfokus oben links als roter Button */
.skip{
  position:absolute;left:16px;top:12px;z-index:9600;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
}
.skip:focus-visible{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;outline-color:#fff;}

/* ---------- Typo ---------- */
.display{
  font-family:var(--disp);
  font-variation-settings:"wdth" 120;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.94;
  text-wrap:balance;
}
h1.display{font-size:clamp(42px,7.4vw,116px);}
.h2{
  font-family:var(--disp);
  font-variation-settings:"wdth" 114;
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.0;
  font-size:var(--fs-h2);
  text-wrap:balance;
}
.wp .h2,.tw-band .h2,.under .h2,.case .h2,.foot-cta .h2,.cta-band .h2,.hire .h2{font-size:var(--fs-h2-col);}
.h3{
  font-variation-settings:"wdth" 108;font-weight:700;
  font-size:clamp(20px,2.2vw,27px);line-height:1.15;
  text-wrap:balance;
}
.sub{font-size:clamp(16.5px,1.4vw,19px);max-width:640px;color:var(--mut-d);}
.on-light .sub{color:var(--mut-l);}
.small{font-size:14.5px;}

/* ---------- Mono-Labels: drei Stufen ---------- */
/* .lbl = Kennzeichnung · .lbl-wide = Eyebrow/Leitsystem · .readout = Messwert */
.lbl,
.crumb,.vs-head div,.vs-row .vl,.job .jt .jm,.job .job-body h4,.step .sn,.field label,
.con .cl,.case .facts dt,.svc .num,.det summary .num,.foot-grid h5,.foot-grid h3,.chips span,
.ref-card .rc-meta,.kpi .l,.tw-stats .st .l,.wp-media .meta,.tw-media .meta,.case-media .meta,
.menu-list .mn,.nav-links a.nl{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.lbl-wide,
.eyebrow,.hud-phase,.hero-scroll,.resurface .rs-tag{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
}
.readout,
.hud-read b,.hero-k .hk-alt,.wp-alt b,.foot-end,.groundline .gl-tag{
  font-family:var(--mono);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;text-transform:none;
}
/* Einheiten bleiben klein geschrieben: m statt M */
.wp-alt b,.tw-mark,.gl-tag,.wp-media .meta,.case-media .meta{text-transform:none;}

.eyebrow{color:var(--red);display:flex;align-items:center;gap:12px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red);flex:none;}
.eyebrow.plain::before{display:none;}

/* ---------- Buttons ---------- */
/* Füllung als Schwenk (::before, scaleX), Text liegt darüber (isolation).
   Transform nur für den Druckzustand (--press). */
.btn{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:13.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  padding:17px 28px;border:1px solid var(--red);
  background:var(--red);color:#fff;
  cursor:pointer;white-space:nowrap;
  transform:scale(var(--press,1));
  transition:transform var(--t-2) var(--ease-out),color var(--t-1) var(--ease-out),border-color var(--t-1) var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-2) var(--ease-out);
}
.btn .arr{display:inline-block;transition:transform var(--t-1) var(--ease-out);}
.btn.ghost{background:transparent;border-color:var(--line-d2);color:#fff;}
.btn.ghost::before{background:#fff;}
.on-light .btn.ghost{border-color:var(--line-l);color:var(--ink);text-shadow:none;}
.on-light .btn.ghost::before{background:var(--ink);}
.btn.inv{background:#fff;border-color:#fff;color:var(--ink);text-shadow:none;}
.btn.inv::before{background:var(--ink);}
.btn:active{--press:.985;}
@media(hover:hover){
  .btn:hover::before{transform:scaleX(1);transform-origin:left;}
  .btn:hover .arr{transform:translateX(5px);}
  .btn[href^="#"]:hover .arr{transform:translateY(3px);}
  .btn.ghost:hover{border-color:#fff;color:var(--ink);text-shadow:none;}
  .on-light .btn.ghost:hover{border-color:var(--ink);color:#fff;}
  .btn.inv:hover{color:#fff;}
}

.link-line{
  display:inline-block;min-height:44px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  position:relative;padding:10px 0;margin:-10px 0;
}
.link-line > span{display:inline-block;margin-left:10px;transition:transform var(--t-1) var(--ease-out);}
.link-line::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform var(--t-2) var(--ease-out);}
.on-light .link-line,.ref-card .link-line{color:var(--red-deep);}
.link-line:focus-visible::after,.ref-card:focus-visible .link-line::after{transform:scaleX(1);}
@media(hover:hover){
  .link-line:hover::after,.ref-card:hover .link-line::after{transform:scaleX(1);}
  .link-line:hover > span,.ref-card:hover .link-line > span{transform:translateX(4px);}
}

/* ---------- Nav ---------- */
/* Schwebende Leiste mit Abstand zum Rand. Glas in zwei Ebenen (dunkel/hell), die per
   Opacity blenden; auf breiten Schirmen fluchtet die Leiste mit der Inhaltskante. */
.nav{
  position:fixed;top:14px;z-index:900;
  left:max(12px,calc(var(--pad) - 24px));right:max(12px,calc(var(--pad) - 24px));
  max-width:calc(var(--w) - 2 * var(--pad) + 48px);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 10px 24px;
  border-radius:var(--r-lg);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  transition:box-shadow var(--t-2) var(--ease-inout);
}
.nav::before,.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;border:1px solid transparent;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  transition:opacity var(--t-2) var(--ease-inout),background-color var(--t-2) var(--ease-inout);
}
.nav::before{background-color:rgba(12,13,16,.58);border-color:rgba(255,255,255,.14);}
.nav::after{background-color:rgba(255,255,255,.86);border-color:rgba(10,10,10,.1);opacity:0;}
.nav.scrolled::before{background-color:rgba(12,13,16,.8);}
body:not(.menu-open) .nav.light::before{opacity:0;}
body:not(.menu-open) .nav.light::after{opacity:1;}
body:not(.menu-open) .nav.light{box-shadow:0 14px 40px rgba(10,10,10,.12);}
body.menu-open .nav{box-shadow:none;}
body.menu-open .nav::before{background-color:rgba(12,13,16,0);}
@media(max-width:640px){
  .nav{top:10px;left:10px;right:10px;padding:8px 8px 8px 16px;border-radius:var(--r-md);}
  /* Kontakt-Knopf rechtsbündig, direkt neben dem Menü-Knopf (Sebastian, 29.09.) */
  .nav-links{gap:8px;margin-left:auto;}
  .nav-cta{margin-left:0;}
}
.nav-logo{position:relative;display:block;}
.nav-logo img{height:var(--logo);width:auto;transition:opacity var(--t-2) var(--ease-inout),filter var(--t-2) var(--ease-inout);}
.nav-logo img.dark{position:absolute;left:0;top:0;opacity:0;}
body:not(.menu-open) .nav.light .nav-logo img.dark{opacity:1;}
body:not(.menu-open) .nav.light .nav-logo img:not(.dark):not(:only-child){opacity:0;}
body:not(.menu-open) .nav.light .nav-logo img:only-child{filter:invert(1);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a.nl{
  color:var(--mut-d2);position:relative;padding:6px 0;
  transition:color var(--t-1) var(--ease-out),opacity var(--t-1) var(--ease-out);
}
.nav-links a.nl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out);}
.nav-links a.nl.active,.nav-links a.nl[aria-current="page"],.nav-links a.nl:focus-visible{color:#fff;}
.nav-links a.nl.active::after,.nav-links a.nl[aria-current="page"]::after,.nav-links a.nl:focus-visible::after{transform:scaleX(1);}
body:not(.menu-open) .nav.light a.nl{color:rgba(10,10,10,.72);}
body:not(.menu-open) .nav.light a.nl.active,body:not(.menu-open) .nav.light a.nl[aria-current="page"]{color:var(--ink);}
.nav-cta{margin-left:8px;padding:12px 22px;min-height:44px;}
.nav-cta[aria-current="page"]{background:#fff;color:var(--red);border-color:var(--red);text-shadow:none;}
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:12px;cursor:pointer;
  background:transparent;border:1px solid var(--line-d2);border-radius:var(--r-sm);margin-left:14px;
  transition:border-color var(--t-1) var(--ease-out);
}
.burger span{display:block;height:1.5px;background:#fff;transition:transform var(--t-2) var(--ease-inout),opacity var(--t-1) var(--ease-out),background-color var(--t-1) var(--ease-out);}
body:not(.menu-open) .nav.light .burger{border-color:var(--line-l);}
body:not(.menu-open) .nav.light .burger span{background:var(--ink);}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(hover:hover){
  .nav-links a.nl:hover{color:#fff;}
  .nav-links a.nl:hover::after{transform:scaleX(1);}
  body:not(.menu-open) .nav.light a.nl:hover{color:var(--ink);}
  .burger:hover{border-color:#fff;}
  body:not(.menu-open) .nav.light .burger:hover{border-color:var(--ink);}
}
/* ---------- Nav-Vorschau (main.js) ----------
   Rahmen im Stil des Kontakt-Buttons gleitet unter den Menüpunkt,
   darin Clip bzw. Standbild mit Kamerafahrt aus dem Bereich. */
.nav-links{position:relative;}
.nav-links a.nl,.nav-links .nav-cta{z-index:1;}
.nav-peek{
  position:absolute;left:0;top:50%;z-index:0;width:0;height:44px;
  border-radius:var(--r-sm);overflow:hidden;background:#0B0C0F;
  pointer-events:none;opacity:0;scale:.92;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .5s var(--ease-out),width .5s var(--ease-out),height .5s var(--ease-out),opacity .22s var(--ease-out),scale .35s var(--ease-out);
}
.nav-peek.on{opacity:1;scale:1;}
.nav-peek.jump{transition:none;}
.nav-peek::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(180deg,rgba(8,9,11,.32),rgba(8,9,11,.6));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.nav-peek.cta::after{box-shadow:none;}
.np-l{
  position:absolute;inset:-14%;background:center/cover no-repeat;opacity:0;
  transition:opacity .4s var(--ease-out);
  animation:np-kb 9s ease-in-out infinite alternate;animation-play-state:paused;
}
.np-l:nth-child(even){animation-direction:alternate-reverse;}
.np-l.on{opacity:1;animation-play-state:running;}
.np-l.vid{inset:0;animation:none;}
.np-l video{display:block;width:100%;height:100%;object-fit:cover;}
@keyframes np-kb{from{transform:scale(1) translate3d(-4%,2%,0);}to{transform:scale(1.16) translate3d(4%,-2%,0);}}
.nav-links a.nl.peek,body:not(.menu-open) .nav.light .nav-links a.nl.peek{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);}
.nav-links a.nl.peek::after{transform:scaleX(0);}
.nav-links .nav-cta.peek{background:transparent;color:#fff;}
.nav-links .nav-cta.peek::before{transform:scaleX(0);}
body.menu-open .nav-peek{opacity:0;}
@media(prefers-reduced-motion:reduce){
  .nav-peek{transition:opacity .2s linear;scale:1;}
  .np-l{animation:none;}
}
/* ---------- Kontakt-Button: Mini-Szene (main.js baut die Elemente) ----------
   Beim Überfahren, Schleife 4,8 s: Brief mit roter 1 → Nummer tippen wie am
   iPhone (Tastenpunkte leuchten) → „Senden“ drücken, Papierflieger fliegt.
   Rahmen dahinter: .nav-peek (dunkel, ohne Clip). Nur mit Maus und ab 1101 px. */
.nav-links .nav-peek.cta .np-l{opacity:0;}
.nav-cta .cx-label{position:relative;z-index:1;display:inline-block;}
.nav-cta .cx{position:absolute;inset:0;z-index:0;pointer-events:none;display:none;}
.cx::before{content:"";position:absolute;left:1px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,51,31,.6),rgba(232,51,31,0));opacity:0;}
.cx::after{content:"";position:absolute;left:24px;top:50%;width:74px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75));transform-origin:left center;transform:rotate(-24deg) scaleX(0);opacity:0;}
.cx-ico{position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;opacity:0;}
.cx-ico svg{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cx-pad{display:grid;grid-template-columns:repeat(3,3px);grid-auto-rows:3px;gap:1.8px;place-content:center;}
.cx-pad i{border-radius:50%;background:rgba(255,255,255,.42);}
.cx-pad b{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 5px 1px rgba(255,255,255,.85);opacity:0;}
.cx-mail b{position:absolute;top:-5px;right:-6px;min-width:11px;height:11px;padding:0 2px;border-radius:6px;background:var(--red);color:#fff;font:700 8px/11px var(--mono);letter-spacing:0;text-align:center;text-shadow:none;transform:scale(0);box-shadow:0 0 0 1.5px #0B0C0F;}
.cx-txt{position:absolute;left:34px;right:10px;top:50%;height:18px;margin-top:-9px;display:flex;align-items:center;opacity:0;overflow:hidden;white-space:nowrap;}
.cx-num{justify-content:flex-end;font-size:11.5px;font-weight:500;letter-spacing:0;}
.cx-num span{display:block;flex:none;overflow:hidden;width:0;}
.cx-num::after{content:"";flex:none;width:1px;height:12px;margin-left:1px;background:#fff;animation:cx-caret .9s steps(1) infinite;}
.cx-send{justify-content:center;}
.cx-send span{padding:3px 7px;border:1px solid rgba(255,255,255,.55);border-radius:6px;font-size:9.5px;letter-spacing:.12em;line-height:1;}
@media(min-width:1101px){
  .nav-cta .cx{display:block;}
  .nav-cta.cx-run .cx-label{animation:cx-label 4.8s var(--ease-out) infinite;}
  .nav-cta.cx-run .cx::before{animation:cx-glow 4.8s ease-out infinite;}
  .nav-cta.cx-run .cx::after{animation:cx-trail 4.8s var(--ease-out) infinite;}
  .cx-run .cx-mail{animation:cx-mail 4.8s var(--ease-out) infinite;}
  .cx-run .cx-mail svg{animation:cx-wiggle 4.8s ease-in-out infinite;transform-origin:50% 25%;}
  .cx-run .cx-mail b{animation:cx-badge 4.8s linear infinite;}
  .cx-run .cx-pad,.cx-run .cx-num{animation:cx-phase 4.8s var(--ease-out) infinite;}
  .cx-run .cx-pad b{animation:cx-tap 4.8s ease-out infinite;}          /* Verzögerung je Ziffer: main.js */
  .cx-run .cx-num span{animation:cx-type 4.8s linear infinite;}
  .cx-run .cx-plane{animation:cx-plane 4.8s var(--ease-out) infinite;}
  .cx-run .cx-send{animation:cx-send 4.8s var(--ease-out) infinite;}
  .cx-run .cx-send span{animation:cx-press 4.8s ease-out infinite;}
}
/* Brief 0–30 %, Wählen 31–63 %, Senden 64–96 %, dann „Kontakt“ wieder mittig */
@keyframes cx-label{0%{opacity:1;transform:translate(0,0);}5%,27%{opacity:1;transform:translate(12px,0);}30%{opacity:0;transform:translate(12px,-7px);}96%{opacity:0;transform:translate(0,7px);}100%{opacity:1;transform:translate(0,0);}}
@keyframes cx-mail{0%{opacity:0;transform:translateY(-6px);}5%,27%{opacity:1;transform:none;}30%,100%{opacity:0;transform:translateY(-7px);}}
@keyframes cx-wiggle{0%,10%{transform:none;}12.5%{transform:rotate(-12deg);}15%{transform:rotate(9deg);}17.5%{transform:rotate(-5deg);}20%,100%{transform:none;}}
@keyframes cx-badge{0%,9%{transform:scale(0);}12.5%{transform:scale(1.35);}15.5%{transform:scale(.88);}18%{transform:scale(1.06);}20%,27%{transform:scale(1);}30%,100%{transform:scale(0);}}
@keyframes cx-glow{0%,10%{opacity:0;}14%{opacity:1;}28%,100%{opacity:0;}}
@keyframes cx-phase{0%,30%{opacity:0;transform:translateY(7px);}33%,60%{opacity:1;transform:none;}63%,100%{opacity:0;transform:translateY(-7px);}}
@keyframes cx-tap{0%,33%{opacity:0;transform:scale(1);}33.6%{opacity:1;transform:scale(1.9);}37%,100%{opacity:0;transform:scale(1);}}
/* 18 Zeichen = "+49 202 519 888 10" (NUM in main.js); bei anderer Nummer steps() und ch anpassen */
@keyframes cx-type{0%,33%{width:0;animation-timing-function:steps(18,end);}55%,100%{width:18ch;}}
@keyframes cx-caret{50%{opacity:0;}}
@keyframes cx-plane{0%,63%{opacity:0;transform:translateY(7px);}66%,82%{opacity:1;transform:none;}91%,100%{opacity:0;transform:translate(34px,-17px) rotate(-14deg) scale(.6);}}
@keyframes cx-send{0%,63%{opacity:0;transform:translateY(7px);}66%,88%{opacity:1;transform:none;}93%,100%{opacity:0;transform:translateY(-7px);}}
@keyframes cx-press{0%,76%{transform:none;background:transparent;border-color:rgba(255,255,255,.55);}78.5%{transform:scale(.88);background:var(--red);border-color:var(--red);}81%,88%{transform:none;background:var(--red);border-color:var(--red);}93%,100%{transform:none;background:transparent;border-color:rgba(255,255,255,.55);}}
@keyframes cx-trail{0%,82%{opacity:0;transform:rotate(-24deg) scaleX(0);}86%{opacity:.8;transform:rotate(-24deg) scaleX(.5);}92%,100%{opacity:0;transform:rotate(-24deg) scaleX(1);}}
@media(prefers-reduced-motion:reduce){
  .nav-cta .cx{display:none;}
  .nav-cta.cx-run .cx-label{animation:none;}
}

/* ---------- Overlay-Menü (Layout; Bewegung in motion.css) ---------- */
.menu{
  position:fixed;inset:0;z-index:850;
  display:grid;grid-template-columns:1.15fr .85fr;
  visibility:hidden;pointer-events:none;
}
body.menu-open .menu{visibility:visible;pointer-events:auto;}
body.menu-open{overflow:hidden;}
.menu-list{
  position:relative;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--pad) 60px;gap:2px;
}
.menu-list a{
  position:relative;
  display:flex;align-items:baseline;gap:22px;
  padding:10px 0;border-bottom:1px solid var(--line-d);
}
.menu-list .mn{font-size:11px;color:var(--mut-d);letter-spacing:.15em;width:44px;flex:none;transition:color var(--t-1) var(--ease-out);}
.menu-list .mt{
  display:inline-block;
  font-variation-settings:"wdth" 116;font-weight:760;text-transform:uppercase;
  font-size:clamp(26px,4vw,46px);line-height:1.1;letter-spacing:-.01em;
  transition:color var(--t-1) var(--ease-out),transform var(--t-2) var(--ease-out);
}
.menu-list a[aria-current="page"] .mn{color:var(--red);}
.menu-list a[aria-current="page"] .mt{transform:translateX(10px);}
.menu-view{position:relative;overflow:hidden;background:var(--ink);border-left:1px solid var(--line-d);}
.menu-view .mv{position:absolute;inset:0;background-color:var(--ink-2);background-size:cover;background-position:center;}
.menu-view::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.4),transparent 40%,rgba(10,10,10,.55));}
.menu-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  padding:20px var(--pad);border-top:1px solid var(--line-d);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mut-d2);
}
.menu-foot a{transition:color var(--t-1) var(--ease-out);}
.menu-foot a:focus-visible{color:var(--red);}
@media(hover:hover){ .menu-foot a:hover{color:var(--red);} }

/* ---------- HUD Höhenmesser ---------- */
.hud{
  position:fixed;right:calc(var(--pad) * .55);top:50%;transform:translateY(-50%);
  z-index:600;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:var(--mono);pointer-events:none;
  opacity:0;transition:opacity var(--t-2) var(--ease-inout);
}
.hud.show{opacity:1;}
.hud-scale{
  width:22px;height:150px;overflow:hidden;position:relative;
  border-top:1px solid var(--line-d2);border-bottom:1px solid var(--line-d2);
}
.hud-ticks{
  position:absolute;inset:-200px 0;
  background-image:repeating-linear-gradient(180deg,var(--line-d2) 0 1px,transparent 1px 14px);
  background-position-y:0;
  will-change:transform;
}
.hud-scale::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--red);box-shadow:0 0 10px rgba(232,51,31,.8);}
.hud-read{display:flex;align-items:baseline;gap:6px;color:#fff;}
.hud-read b{font-size:26px;font-weight:600;}
.hud-read span{font-size:12px;color:var(--mut-d);}
.hud-phase{font-size:11px;color:var(--red);writing-mode:vertical-rl;margin-top:4px;}

/* ---------- Reise: Hero ---------- */
.scene-hero{
  position:relative;min-height:clamp(560px,100svh,1600px);display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;}
/* Ruhezustand = Endzustand der Einschaltsequenz (S1); Ausgangswerte legt journey.css fest */
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.05) 34%,rgba(10,10,10,.16) 60%,rgba(13,14,17,.94) 96%,#14161C 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9svh,110px);}
.hero-k{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.hero-k .hk-alt{
  font-size:12px;letter-spacing:.12em;color:#fff;
  border:1px solid var(--line-d2);padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(10,10,10,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-k .hk-alt b{color:var(--red);font-weight:600;}
.scene-hero h1{
  max-width:16ch;text-wrap:balance;hyphens:manual;
  font-size:clamp(42px,6.6vw,104px);
}
.scene-hero h1 .d{color:var(--red);}
.hero-sub{margin-top:26px;max-width:560px;font-size:clamp(16.5px,1.4vw,19px);color:var(--mut-d2);}
.hero-cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--mut-d2);
}
.hero-scroll .hs-line{width:1px;height:44px;background:var(--line-d2);overflow:hidden;position:relative;}
/* Signature-Moment Scroll-Tropfen: Endlos-Keyframe, 1,8 s pro Tropfen (Ruhepuls, kein Token) */
.hero-scroll .hs-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--red);transform:translateY(-100%);animation:scrolldrip 1.8s var(--ease-inout) infinite;}
@keyframes scrolldrip{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ---------- Reise: Abstieg ---------- */
.journey{
  position:relative;
  background:linear-gradient(180deg,#14161C 0%,#101217 38%,#0D0E12 60%,#0A0B0E 78%,#08090B 100%);
}
.jline{
  position:absolute;left:calc(var(--pad) + 6px);top:0;bottom:0;width:1px;
  background:var(--line-d);
}
.jline .jline-fill{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:var(--red);transform:scaleY(0);transform-origin:top;
  box-shadow:0 0 12px rgba(232,51,31,.55);
  will-change:transform;
}
.mast-layer{
  position:absolute;top:0;bottom:0;right:0;width:min(46vw,680px);
  overflow:hidden;pointer-events:none;opacity:.6;
}
.mast-layer svg{position:absolute;top:0;right:-8%;height:100%;width:auto;}
.mast-layer line,.mast-layer path,.mast-layer polyline{stroke:rgba(255,255,255,.22);fill:none;}

.wp{position:relative;padding:var(--sp-3) 0;}
.wp .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center;}
.wp.flip .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}
.wp.flip .wp-media{order:-1;}
.wp-alt{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut-d);display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.wp-alt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(232,51,31,.15);flex:none;margin-left:-4px;}
.wp-alt b{color:#fff;font-weight:600;font-size:13px;}
.wp h2{margin-bottom:18px;}
.wp .h2{overflow-wrap:break-word;}
.wp p{color:var(--mut-d);max-width:54ch;}
.wp-list{margin-top:22px;display:flex;flex-direction:column;gap:0;}
.wp-list li{
  display:flex;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line-d);
  font-size:15.5px;color:var(--mut-d2);
}
.wp-list li::before{content:"—";color:var(--red);font-family:var(--mono);flex:none;}
.wp .link-line{margin-top:16px;}
.wp-media{position:relative;}
.wp-media .frame{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r-md);}
.wp-media.tall .frame{aspect-ratio:3/4;max-width:440px;}
/* Bildzoom über die Einzel-Eigenschaft scale: transform bleibt frei für Parallaxe */
.wp-media img,.rc-img img,.case-media img{width:100%;height:100%;object-fit:cover;scale:1;transition:scale var(--t-4) var(--ease-out);}
.wp-media .meta{
  position:absolute;left:0;bottom:0;z-index:2;font-size:10.5px;
  background:var(--ink);color:var(--mut-d2);padding:9px 14px;border-radius:0 var(--r-sm) 0 var(--r-md);
}
.wp-media .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;}
@media(hover:hover){ .wp-media .frame:hover img,.case-media .frame:hover img{scale:1.04;} }

/* Boden-Übergang */
.groundline{position:relative;padding:0;height:110px;}
.groundline .gl{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line-d2);}
.groundline .gl-tag{
  position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);
  width:max-content;max-width:calc(100% - 2*var(--pad));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;
  background:#0B0C0F;padding:6px 14px;color:var(--mut-d);
  border:1px solid var(--line-d);border-radius:var(--r-pill);
}

/* ---------- Trackway-Band (0 m) ---------- */
.tw-band{position:relative;background:var(--red);color:#fff;overflow:hidden;}
.tw-band .wrap{position:relative;z-index:2;padding-top:var(--sp-2);padding-bottom:var(--sp-2);}
.tw-band .eyebrow{color:#fff;}
.tw-band .eyebrow::before{background:#fff;}
.tw-band .h2{max-width:16ch;}
.tw-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center;}
.tw-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:38px;border-top:1px solid rgba(255,255,255,.35);}
.tw-stats .st{padding:20px 18px 20px 0;border-bottom:1px solid rgba(255,255,255,.35);}
.tw-stats .st .v{font-variation-settings:"wdth" 116;font-weight:800;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.tw-stats .st .l{font-size:11px;letter-spacing:.12em;margin-top:8px;color:#fff;}
.tw-media{position:relative;}
.tw-media .frame{overflow:hidden;aspect-ratio:16/11;position:relative;border-radius:var(--r-md);}
.tw-media img{width:100%;height:100%;object-fit:cover;}
.tw-media .meta{position:absolute;left:0;bottom:0;font-size:10.5px;background:#fff;color:var(--ink);padding:9px 14px;border-radius:0 var(--r-sm) 0 var(--r-md);}
.tw-mark{
  position:absolute;right:-40px;top:-40px;
  font-variation-settings:"wdth" 125;font-weight:850;font-variant-numeric:tabular-nums;
  font-size:clamp(120px,16vw,240px);line-height:1;color:rgba(255,255,255,.08);
  pointer-events:none;user-select:none;white-space:nowrap;
}

/* Einheiten in Kennzahlen */
.v em{font-size:.5em;font-weight:700;font-style:normal;}
.kpi .v em{color:var(--red);}
.tw-stats .v em{color:#fff;}

/* ---------- Untergrund ---------- */
.under{position:relative;background:#08090B;overflow:hidden;}
.under::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(180deg,transparent 0 90px,rgba(255,255,255,.035) 90px 91px),
    linear-gradient(180deg,#0B0C0F 0,#08090B 30%);
}
.under .wrap{position:relative;z-index:2;padding-top:var(--sp-3);padding-bottom:var(--sp-3);}

/* ---------- Auftauchen / Lichtwechsel ---------- */
.resurface{
  position:relative;background:linear-gradient(180deg,#08090B 0%,#23262D 35%,#8E939C 68%,var(--paper) 100%);
  height:260px;
}
.resurface .rs-tag{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:.3em;
  color:#fff;mix-blend-mode:difference;
  white-space:normal;text-align:center;max-width:calc(100% - 2*var(--pad));line-height:1.7;
}

/* ---------- Licht-Sektionen ---------- */
.on-light{background:var(--paper);color:var(--ink);}
.on-light .eyebrow{color:var(--red-deep);}
.on-light .eyebrow::before{background:var(--red-deep);}
.on-light .h2 .d{color:var(--red);}
.sec{padding:var(--sp-3) 0;}
.sec-head{max-width:820px;margin-bottom:var(--sp-1);}
.sec-head .h2{margin:18px 0 20px;}
.sec-tight{padding-top:0;}
.sec-cta{margin-top:var(--sp-1);}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}

/* EPCM-Kacheln */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;}
.svc-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.svc-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.svc{
  background:var(--paper);padding:34px 30px 40px;position:relative;overflow:hidden;isolation:isolate;
  min-height:250px;display:flex;flex-direction:column;
  transition:transform var(--t-2) var(--ease-out);
}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out);}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-2);opacity:0;transition:opacity var(--t-2) var(--ease-out);}
.svc .num{font-size:11px;letter-spacing:.18em;color:var(--mut-l);margin-bottom:40px;display:block;transition:color var(--t-1) var(--ease-out);}
.svc h3{margin-bottom:12px;}
.svc p{font-size:15px;color:var(--mut-l);max-width:34ch;}
.svc .go{
  position:absolute;right:24px;top:26px;font-family:var(--mono);font-size:16px;color:var(--red-deep);
  transform:translate(-6px,6px);opacity:0;
  transition:transform var(--t-2) var(--ease-out),opacity var(--t-2) var(--ease-out);
}
.svc:focus-visible::before{transform:scaleX(1);}
.svc:focus-visible::after{opacity:1;}
.svc:focus-visible .num{color:var(--red-deep);}
.svc:focus-visible .go{transform:none;opacity:1;}
@media(hover:hover){
  .svc:hover::before{transform:scaleX(1);}
  .svc:hover::after{opacity:1;}
  .svc:hover .num{color:var(--red-deep);}
  .svc:hover .go{transform:none;opacity:1;}
}
@media(hover:none){ .svc .go{opacity:1;transform:none;} }
@media(min-width:641px){ .svc h3,.step h3,.step h4{min-height:2.3em;} }

/* Marquee (Lauf und Scroll-Zuschlag in motion.css/motion.js) */
.marq{overflow:hidden;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);padding:20px 0;background:var(--paper-2);}
.marq-track{display:flex;gap:0;width:max-content;will-change:transform;}
.marq-track span{
  font-variation-settings:"wdth" 120;font-weight:780;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:.01em;color:var(--ink);
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;
}
.marq-track span::after{content:"·";color:var(--red);}

/* KPI-Band */
.kpi-band{background:var(--ink);color:#fff;}
.kpi-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.kpi{padding:var(--sp-2) 26px;border-left:1px solid var(--line-d);}
.kpi:first-child{border-left:none;}
.kpi .v{font-variation-settings:"wdth" 118;font-weight:820;font-size:clamp(38px,4.6vw,72px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi .l{font-size:11px;letter-spacing:.14em;color:var(--mut-d);margin-top:12px;max-width:none;text-wrap:balance;}

/* Referenz-Karten (Teaser) */
.ref-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);}
.ref-card{position:relative;background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md);display:flex;flex-direction:column;transition:transform var(--t-2) var(--ease-out);}
/* Schatten ist vorgezeichnet und blendet nur ein */
.ref-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 24px 60px rgba(10,10,10,.12);opacity:0;transition:opacity var(--t-2) var(--ease-out);}
.ref-card .rc-img{aspect-ratio:16/10;overflow:hidden;position:relative;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;}
.ref-card .rc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.14em;color:var(--mut-l);padding:16px 22px 0;}
.ref-card .rc-meta span+span::before{content:"·";margin-right:14px;color:var(--red-deep);}
.ref-card h3{padding:10px 22px 6px;}
.ref-card p{padding:0 22px;font-size:14.5px;color:var(--mut-l);}
.ref-card .rc-foot{margin-top:auto;padding:18px 22px 22px;}
.ref-card:focus-visible::after{opacity:1;}
@media(hover:hover){
  .ref-card:hover{transform:translateY(-6px);}
  .ref-card:hover::after{opacity:1;}
  .ref-card:hover .rc-img img{scale:1.04;}
}
.svc:active,.ref-card:active{transform:scale(.985);}

/* Karriere-Strip */
.hire{position:relative;color:#fff;overflow:hidden;background:var(--ink);}
.hire-bg{position:absolute;inset:0;}
.hire-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;}
.hire-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 15%,rgba(10,10,10,.45) 70%,rgba(10,10,10,.25));}
.hire .wrap{position:relative;z-index:2;padding-top:var(--sp-3);padding-bottom:var(--sp-3);}

/* ---------- Unterseiten ---------- */
.page-hero{
  position:relative;padding:calc(var(--nav-h) + var(--sp-2)) 0 var(--sp-2);
  background:var(--ink);overflow:hidden;
}
.page-hero .crumb{color:var(--mut-d);margin-bottom:26px;display:flex;gap:10px;align-items:flex-start;}
.page-hero .crumb b{color:var(--red);font-weight:500;}
.page-hero h1{font-size:clamp(38px,6vw,92px);max-width:14ch;}
.page-hero .sub{margin-top:24px;}
.page-hero .ph-img{position:absolute;inset:0;opacity:.34;}
.page-hero .ph-img img{width:100%;height:100%;object-fit:cover;}
.page-hero .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 22%,rgba(10,10,10,.55) 60%,rgba(10,10,10,.3));}
.page-hero .wrap{position:relative;z-index:2;}

/* Detail-Listen (Leistungen, Academy) */
.det-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px);align-items:start;}
.det{background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md);}
.det summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;
  padding:24px 26px;user-select:none;
}
.det summary::-webkit-details-marker{display:none;}
.det summary .num{font-size:11px;color:var(--mut-l);flex:none;}
.det summary h3{flex:1;font-size:clamp(17px,1.6vw,21px);}
.det summary .pm,.job .pm{
  flex:none;align-self:center;position:relative;border:1px solid var(--line-l);border-radius:var(--r-xs);
  transition:transform var(--t-2) var(--ease-inout);
}
.det summary .pm{width:30px;height:30px;}
/* Rote Füllung des Plus als eigene Ebene (Opacity statt Hintergrund-Animation) */
.det summary .pm::before,.det summary .pm::after,.job .pm::before,.job .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%);}
.det summary .pm::before{width:12px;height:1.5px;}
.det summary .pm::after{width:1.5px;height:12px;}
.det[open] summary .pm,.job[open] .pm{transform:rotate(45deg);background:var(--red);border-color:var(--red);}
.det[open] summary .pm::before,.det[open] summary .pm::after,.job[open] .pm::before,.job[open] .pm::after{background:#fff;}
.det .det-body{padding:0 26px 26px;}
.det .det-body p{font-size:15px;color:var(--mut-l);margin-bottom:14px;}
.det .det-body li{
  display:flex;gap:12px;align-items:baseline;font-size:14.5px;color:var(--ink);
  padding:9px 0;border-bottom:1px solid rgba(10,10,10,.08);
}
.det .det-body li::before{content:"—";color:var(--red-deep);font-family:var(--mono);flex:none;}

/* Referenzen-Seite: Fallreihen */
.case{padding:var(--sp-3) 0;border-top:1px solid var(--line-l);}
.case:first-of-type{border-top:none;}
.case .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:start;}
.case.flip .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
.case.flip .case-media{order:2;}
.case-media{position:sticky;top:110px;}
.case-media .frame{overflow:hidden;aspect-ratio:16/11;position:relative;border-radius:var(--r-md);}
.case-media .meta{position:absolute;left:0;bottom:0;font-size:10.5px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:0 var(--r-sm) 0 var(--r-md);}
.case h2{margin:16px 0 18px;}
.case .h2{font-variation-settings:"wdth" 106;overflow-wrap:break-word;}
.case .facts{display:grid;grid-template-columns:auto 1fr;gap:0 26px;font-size:14.5px;border-top:1px solid var(--line-l);margin:26px 0;}
.case .facts dt{font-size:11px;color:var(--mut-l);padding:12px 0;border-bottom:1px solid var(--line-l);}
.case .facts dd{padding:12px 0;border-bottom:1px solid var(--line-l);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.chips span{font-size:11px;letter-spacing:.1em;border:1px solid var(--line-l);padding:7px 14px;color:var(--ink);background:#fff;border-radius:var(--r-pill);}

/* Prozessleiste (Wertschöpfungskette) */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);counter-reset:step;}
.step{background:var(--paper);padding:26px 22px 30px;position:relative;}
.step .sn{color:var(--red-deep);display:block;margin-bottom:34px;}
.step h4{font-variation-settings:"wdth" 108;font-weight:700;font-size:16.5px;line-height:1.25;margin-bottom:8px;}
.step p{font-size:13.5px;color:var(--mut-l);}
.step::after{content:"→";position:absolute;right:14px;top:24px;font-family:var(--mono);color:var(--mut-l);font-size:14px;}
.step:last-child::after{content:"■";color:var(--red-deep);font-size:10px;}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){
  .steps{grid-template-columns:1fr;}
  .step::after{content:"↓";}
  .step h4{min-height:0;}
}

/* Vergleich Trackway vs. konventionell */
.vs{border:1px solid var(--line-l);background:#fff;border-radius:var(--r-md);overflow:hidden;overflow:clip;}
.vs-head{display:grid;grid-template-columns:180px 1fr 1fr;background:var(--ink);color:#fff;}
.vs-head div{padding:16px 22px;letter-spacing:.18em;}
.vs-head div:nth-child(2){color:#fff;background:var(--red);}
.vs-row{display:grid;grid-template-columns:180px 1fr 1fr;border-top:1px solid var(--line-l);}
.vs-row>div{padding:18px 22px;font-size:15px;}
.vs-row .vl{font-size:11px;color:var(--mut-l);display:flex;align-items:center;}
.vs-row .va{font-variation-settings:"wdth" 110;font-weight:700;border-left:1px solid var(--line-l);border-right:1px solid var(--line-l);}
.vs-row .vb{color:var(--mut-l);}
@media(max-width:760px){
  .vs-head,.vs-row{grid-template-columns:minmax(100px,auto) 1fr 1fr;}
  .vs-head div{letter-spacing:.1em;padding:14px 10px;}
  .vs-row>div{padding:14px 10px;font-size:13.5px;}
}
@media(max-width:640px){
  .vs-head,.vs-row{grid-template-columns:1fr 1fr;}
  .vs-head div:first-child,.vs-row .vl{grid-column:1/-1;padding-bottom:4px;}
  .vs-row .va{border-left:0;}
  /* Kopf bleibt unter der festen Nav stehen */
  .vs-head{position:sticky;top:calc(var(--nav-h) - 1px);z-index:2;}
}

/* CTA-Band */
.cta-band{background:var(--ink);color:#fff;}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:var(--sp-2);padding-bottom:var(--sp-2);}
.cta-band .h2{max-width:18ch;}

/* Jobs */
.job{border:1px solid var(--line-l);background:#fff;margin-bottom:14px;border-radius:var(--r-md);}
.job summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:20px;padding:24px 28px;}
.job summary::-webkit-details-marker{display:none;}
.job .jt{flex:1;}
.job .jt h3{font-size:clamp(18px,1.9vw,24px);}
.job .jt .jm{letter-spacing:.12em;color:var(--mut-l);margin-top:6px;display:flex;gap:16px;flex-wrap:wrap;}
.job .pm{width:34px;height:34px;}
.job .pm::before{width:13px;height:1.5px;}
.job .pm::after{width:1.5px;height:13px;}
.job .job-body{padding:0 28px 30px;display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.job .job-body h4{color:var(--red-deep);margin-bottom:12px;}
.job .job-body li{display:flex;gap:12px;align-items:baseline;font-size:14.5px;padding:7px 0;border-bottom:1px solid rgba(10,10,10,.08);}
.job .job-body li::before{content:"—";color:var(--red-deep);font-family:var(--mono);flex:none;}
.job .job-cta{grid-column:1/-1;}

/* Formular */
#contactForm{max-width:880px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{position:relative;display:flex;flex-direction:column;gap:10px;}
.field.full{grid-column:1/-1;}
.field label{font-size:11px;color:var(--mut-l);transition:color var(--t-1) var(--ease-out),transform var(--t-1) var(--ease-out);}
.field input,.field textarea{
  font-family:var(--disp);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line-l);padding:15px 16px;outline:none;
  resize:vertical;border-radius:var(--r-sm);
  transition:border-color var(--t-1) var(--ease-out);
}
.field input{height:56px;}
.field input:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px var(--red);}
/* Unterlinie zeichnet sich beim Fokus von links */
.field::after{content:"";position:absolute;left:var(--r-sm);right:var(--r-sm);bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out);pointer-events:none;}
.field:focus-within::after{transform:scaleX(1);}
.field:focus-within label{color:var(--red-deep);transform:translateY(-2px);}
.form-note{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.6;color:var(--mut-l);margin-top:14px;max-width:60ch;}

/* Kontakt-Karten */
.con-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);}
.con{background:#fff;padding:30px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.con .cl{font-size:11px;color:var(--mut-l);}
.con .cv{font-variation-settings:"wdth" 108;font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:1.3;}
.con a.cv{display:inline-block;padding:6px 0;transition:color var(--t-1) var(--ease-out);}
.con a.cv:focus-visible{color:var(--red-deep);}
@media(hover:hover){ .con a.cv:hover{color:var(--red-deep);} }

/* Rechtstexte */
.legal{max-width:820px;}
.legal h2{font-size:clamp(20px,2.2vw,28px);margin:36px 0 12px;font-variation-settings:"wdth" 110;font-weight:740;text-transform:none;letter-spacing:0;}
.legal p{color:var(--mut-l);margin-bottom:14px;font-size:15.5px;}
.legal .note{border:1px dashed var(--red-deep);border-radius:var(--r-sm);padding:16px 20px;font-family:var(--mono);font-size:12.5px;color:var(--red-deep);margin:26px 0;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.foot-cta{
  display:flex;align-items:baseline;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:var(--sp-2) 0 var(--sp-1);
  border-bottom:1px solid var(--line-d);
}
.foot-cta .h2{max-width:12ch;}
.foot-mail{
  font-variation-settings:"wdth" 112;font-weight:740;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:14px;
  border-bottom:2px solid var(--red);padding-bottom:6px;
  transition:color var(--t-1) var(--ease-out),transform var(--t-2) var(--ease-out);
}
.foot-mail:focus-visible{color:var(--red);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:var(--sp-1) 0;}
.foot-grid h5,.foot-grid h3{font-size:11px;letter-spacing:.2em;color:var(--mut-d);margin-bottom:16px;font-weight:500;}
.foot-grid a,.foot-grid p{display:block;font-size:15px;color:var(--mut-d2);padding:5px 0;}
.foot-grid a{transition:color var(--t-1) var(--ease-out);}
.foot-grid a:focus-visible{color:var(--red);}
.foot-logo img{height:var(--logo);width:auto;margin-bottom:18px;}
.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 0 30px;border-top:1px solid var(--line-d);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mut-d);
}
.foot-bottom a{transition:color var(--t-1) var(--ease-out);}
.foot-end{font-size:11.5px;color:var(--mut-d);}
.foot-end b{color:var(--red);font-weight:500;}
@media(hover:hover){
  .foot-mail:hover{color:var(--red);transform:translateX(6px);}
  .foot-grid a:hover{color:var(--red);}
  .foot-bottom a:hover{color:#fff;}
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .nav-links a.nl{display:none;}
  .hud{right:10px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .kpi-band .wrap{grid-template-columns:1fr 1fr;}
  .kpi:nth-child(3){border-left:none;}
  .kpi{border-top:1px solid var(--line-d);}
  .kpi:nth-child(-n+2){border-top:none;}
}
@media(max-width:900px){
  .wp .wrap,.wp.flip .wrap,.tw-grid,.case .wrap,.case.flip .wrap{grid-template-columns:1fr;}
  .wp.flip .wp-media,.case.flip .case-media{order:0;}
  .case-media{position:relative;top:0;}
  /* Kachelraster: !important schlägt die Inline-Spalten aus V1, bis die Seiten .cols-* nutzen */
  .svc-grid.cols-3,.svc-grid[style*="repeat(3"]{grid-template-columns:repeat(2,1fr)!important;}
  .det-grid{grid-template-columns:1fr;}
  .ref-row{grid-template-columns:1fr;}
  .con-grid{grid-template-columns:1fr;}
  .job .job-body{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .mast-layer{opacity:.22;}
  .hud{top:auto;bottom:18px;right:14px;transform:none;flex-direction:row;align-items:center;gap:10px;background:rgba(10,10,10,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 14px;border:1px solid var(--line-d);}
  .hud-scale,.hud-phase{display:none;}
  .hud-read b{font-size:18px;}
  .hero-scroll{display:none;}
  .foot-grid a{padding:9px 0;}
  .menu-foot a{padding:10px 0;}
  /* Menü mobil: Bildstreifen oben, Liste scrollbar, Kontaktzeile unten */
  .menu{grid-template-columns:1fr;grid-template-rows:0 minmax(0,1fr) auto;}
  .menu:has(.mv){grid-template-rows:clamp(120px,34vh,300px) minmax(0,1fr) auto;}
  .menu-view{display:contents;}
  /* Bilder und Verlauf liegen als Grid-Kinder übereinander in Zeile 1 */
  .menu-view .mv,.menu-view::after{position:relative;inset:auto;grid-row:1;grid-column:1;min-height:0;}
  .menu-list{grid-row:2;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:22px var(--pad) 22px;}
  .menu:not(:has(.mv)) .menu-list{padding-top:calc(90px + env(safe-area-inset-top));}
  .menu-foot{position:relative;grid-row:3;background:var(--ink);gap:6px 22px;padding:10px var(--pad) calc(20px + env(safe-area-inset-bottom));}
  .menu-foot a{min-height:44px;display:inline-flex;align-items:center;}
}
@media(max-width:640px){
  body{font-size:16px;}
  .svc-grid,.svc-grid.cols-2,.svc-grid[style]{grid-template-columns:1fr!important;}
  .svc{min-height:0;padding:24px 20px 28px;}
  .svc .num{margin-bottom:16px;}
  .tw-stats{grid-template-columns:1fr 1fr;}
  .kpi-band .wrap{grid-template-columns:1fr 1fr;}
  .kpi{padding:40px 18px;}
  .kpi .l{font-size:10px;letter-spacing:.08em;overflow-wrap:anywhere;}
  .kpi .v{white-space:nowrap;font-size:34px;}
  .nav-cta{display:inline-flex;padding:10px 14px;font-size:11px;}
  .page-hero .crumb{flex-wrap:wrap;}
  .page-hero .crumb span:last-child{flex-basis:100%;line-height:1.5;}
  .hero-k .hk-alt{font-size:11px;letter-spacing:.1em;white-space:normal;line-height:1.5;}
  .groundline .gl-tag{font-size:10.5px;letter-spacing:.02em;}
  #contactForm .btn{width:100%;justify-content:center;}
}
@media(max-width:480px){
  h1.display{font-size:clamp(34px,9.5vw,42px);font-variation-settings:"wdth" 108;}
  .scene-hero h1{font-size:clamp(34px,9.5vw,42px);}
  .hero-inner > *{max-width:100%;}
  .hero-sub{font-size:16px;max-width:100%;}
}

/* Kennzahl als Text (D-A-CH): bricht nie um, eine Stufe kleiner als die Zahlen */
.kpi .v-txt{white-space:nowrap;font-size:clamp(30px,3.2vw,50px);}
@media(max-width:640px){
  .kpi .v-txt{font-size:26px;}
  /* Keine automatische Trennung (ergab „GE-GEN“, „PROJEKTSTEUE-RUNG“): nur feste Trennstellen (­) */
  .h2{-webkit-hyphens:manual;hyphens:manual;}
  .cta-band .h2{max-width:none;}
}
/* Schmale Handys: Spalten-Überschriften so, dass lange Wörter in die Zeile passen */
@media(max-width:420px){ :root{ --fs-h2-col:clamp(22px,6.6vw,27px); } }

/* ---------- Statik-Modus (Tests/Screenshots) ---------- */
html.static{scroll-behavior:auto;}
html.static .scene-hero{min-height:900px;height:900px;}
html.static .hero-inner{padding-bottom:80px;}
html.static .page-hero{padding:170px 0 80px;}
html.static .hero-scroll{bottom:26px;}
html.static .hs-line::after{animation:none;transition:none;}
html.static .hud{opacity:1;}
html.static .resurface{height:260px;}
html.static .cta-band .wrap,html.static .hire .wrap,html.static .foot-cta{padding-top:110px;padding-bottom:110px;}
html.static .marq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
html.static .menu{visibility:hidden;}
@media(min-width:901px){ html.static .hud{top:450px;transform:none;} }
@media(min-width:641px){ html.static .kpi{padding:60px 26px;} }

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;}
  .marq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .hs-line::after,.jline-fill,.hud{animation:none;transition:none;}
}

/* ============================================================
   Termin 29.09. (Nr. 1–8, 10): keine Menüleiste mehr — freigestellte Rahmen-Buttons.
   Nur das Logo passt den Kontrast an (.nav.light), die Buttons bleiben fix lesbar.
   ============================================================ */
.nav{background:transparent;box-shadow:none;}
.nav::before,.nav::after{display:none;}
body:not(.menu-open) .nav.light{box-shadow:none;}
.nav-links{gap:10px;}
.nav-links a.nl{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  background:rgba(12,13,16,.72);
  color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color var(--t-1) var(--ease-out),background-color var(--t-1) var(--ease-out);
}
.nav-links a.nl::after{display:none;}                       /* alte Unterstreichung */
.nav-links a.nl:hover,.nav-links a.nl.peek{border-color:#fff;}
.nav-links a.nl[aria-current="page"]{border-color:var(--red);}
body:not(.menu-open) .nav.light .nav-links a.nl{color:#fff;}  /* bleibt fix, nur das Logo wechselt */
.nav-links a.nl.nl-in{padding:0 12px;}
.nav-links a.nl.nl-in svg{display:block;}
/* Vorschau-Rahmen liegt exakt IM Button: Video füllt den Rahmen bei Mausberührung */
.nav-peek{border-radius:var(--r-pill);z-index:0;}
.nav-peek::after{border-radius:var(--r-pill);}
.nav-links a.nl.peek{background:transparent;}
/* Sebastian, 29.09. abends: kein Weichzeichner, das Video füllt den Rahmen klar sichtbar */
.nav-peek::after{background:linear-gradient(180deg,rgba(8,9,11,.08),rgba(8,9,11,.34));box-shadow:none;}
.nav-links a.nl.peek,body:not(.menu-open) .nav.light .nav-links a.nl.peek{text-shadow:0 1px 3px rgba(0,0,0,.85);}
/* Kontakt und Menü in derselben Rahmenform wie die übrigen Buttons: ein Rahmen, keine Doppelkante */
.nav-links .nav-cta{min-height:44px;padding:0 22px;border-radius:var(--r-pill);}
.nav-links .nav-cta.peek{border-color:#fff;}
.nav-peek.cta{box-shadow:none;}
.burger{border-radius:50%;border-color:rgba(255,255,255,.55);background:rgba(12,13,16,.72);}
body:not(.menu-open) .nav.light .burger{border-color:rgba(255,255,255,.55);}
body:not(.menu-open) .nav.light .burger span{background:#fff;}
@media(hover:hover){ body:not(.menu-open) .nav.light .burger:hover{border-color:#fff;} }
@media(max-width:640px){ .nav-links .nav-cta{padding:0 14px;min-height:42px;} }
/* Aufklappmenü: Hauptpunkte betont */
.menu-list a.mn-haupt .mt{color:#fff;}
.menu-list a:not(.mn-haupt):not([data-view="start"]) .mt{color:rgba(255,255,255,.72);}
@media(max-width:900px){
  .nav-links a.nl{display:none;}
  .nav-links a.nl.nl-in{display:inline-flex;}   /* LinkedIn bleibt auch mobil oben (Nr. 8) */
}

/* Fußzeile (Termin 29.09., Nr. 30): Kontakt mit Mail und Telefon links, auffälliges Karriere-Element rechts */
.foot-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,48px);align-items:stretch;}
.foot-kontakt .foot-mail{display:inline-block;}
.foot-tel{display:block;margin-top:10px;font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.8);text-decoration:none;}
.foot-tel:hover{color:#fff;}
.foot-karriere{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:26px 28px;
  background:var(--red);color:#fff;text-decoration:none;border-radius:var(--r-md);
  transition:transform var(--t-1) var(--ease-out),box-shadow var(--t-1) var(--ease-out);
}
.foot-karriere:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(232,51,31,.35);}
.foot-karriere .fk-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;}
.foot-karriere .fk-titel{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.01em;}
.foot-karriere .fk-titel .d{color:#fff;}
.foot-karriere .fk-cta{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;}
@media(max-width:900px){ .foot-cta{grid-template-columns:1fr;} }

/* Überschriften trennen nur an festen Trennstellen (­), nie automatisch (Sebastian, 29.09. abends) */
.h2,.display,h1,h2{-webkit-hyphens:manual;hyphens:manual;}

/* Schmale Handys (Prüfung 29.09. abends): nichts steht seitlich über.
   Ursache war jedes Mal dieselbe: ein langes Wort oder das Datei-Feld erzwingt eine Mindestbreite der Spalte. */
.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.form-grid .field{min-width:0;}
.form-grid input,.form-grid select,.form-grid textarea{min-width:0;max-width:100%;}
.case .facts{grid-template-columns:auto minmax(0,1fr);}
.case .facts dd{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
.det summary h3{min-width:0;overflow-wrap:break-word;}
@media(max-width:900px){
  .form-grid{grid-template-columns:minmax(0,1fr);}
  .det-grid{grid-template-columns:minmax(0,1fr);}
  .kj-titel{overflow-wrap:break-word;}
}
@media(max-width:360px){ .btn{padding:15px 18px;letter-spacing:.08em;} }

/* Logo freigestellt, passt sich Punkt für Punkt selbst an (Sebastian, 29.09. abends): Das Logo ist eine Schablone,
   durch die der Untergrund in Graustufen umgekehrt und kontrastverstärkt erscheint. Dunkler Grund → weißes Logo,
   heller Grund → schwarzes Logo, läuft weiße Schrift darunter durch, wird genau dieser Teil schwarz. Keine Fläche
   dahinter, die rote Linie bleibt sichtbar. Ohne backdrop-filter/mask gilt weiter das weiße Logo mit .nav.light (motion.js). */
@supports ((backdrop-filter:invert(1)) or (-webkit-backdrop-filter:invert(1))) and ((mask-image:none) or (-webkit-mask-image:none)){
  .nav-logo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    -webkit-mask:url("../img/logo-energyeng-white-2x.png") center/100% 100% no-repeat;
    mask:url("../img/logo-energyeng-white-2x.png") center/100% 100% no-repeat;
    -webkit-backdrop-filter:grayscale(1) invert(1) contrast(8);
    backdrop-filter:grayscale(1) invert(1) contrast(8);
  }
  .nav-logo img,body:not(.menu-open) .nav.light .nav-logo img{opacity:0;}
}