/* ============================================================
   DURAMECHANIK AG — Stylesheet
   «Technisches Dossier» · helles Präzisions-Theme · 2026
   Palette: Papier / Werkzeugstahl / Graphit / Dura-Orange
   Typo:    Archivo (Display) · Instrument Sans (Text) · IBM Plex Mono (Masse)
   ============================================================ */

:root{
  --bg:        #f5f6f7;   /* Papier */
  --bg-2:      #eef0f2;   /* Silber */
  --bg-3:      #e7eaec;
  --surface:   #ffffff;
  --line:      #dcdfe3;   /* Haarlinie */
  --line-2:    #c6cbd1;
  --text:      #16191d;   /* Werkzeugstahl */
  --muted:     #59616c;   /* Graphit */
  --muted-2:   #838b96;
  --accent:    #e8500a;   /* Dura-Orange (auf hell) */
  --accent-2:  #ff6a2b;
  --accent-dim:#b23d06;
  --stahl:     #16191d;   /* dunkle Werkhallen-Inseln */
  --white:     #ffffff;

  --ff-head: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --header-glass: rgba(245,246,247,.72);
  --overlay-glass: rgba(245,246,247,.88);
  --grid-line: rgba(22,25,29,.05);
  --tray: rgba(22,25,29,.035);

  --wrap: 1200px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --radius: 10px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-lux: cubic-bezier(.32,.72,0,1);
  --shadow: 0 40px 80px -44px rgba(22,25,29,.35);
  --shadow-accent: 0 18px 44px -18px rgba(232,80,10,.4);
  color-scheme: light;
}

/* ---------- Dunkler Skin (Werkhalle als Grundstimmung) ---------- */
:root[data-theme="dark"]{
  --bg:        #101216;
  --bg-2:      #15181d;
  --bg-3:      #1a1e24;
  --surface:   #181c21;
  --line:      #262b32;
  --line-2:    #363d46;
  --text:      #e9edf2;
  --muted:     #9aa4b1;
  --muted-2:   #6e7784;
  --accent:    #ff6a2b;
  --accent-2:  #ff8a4d;
  --accent-dim:#d8541a;
  --header-glass: rgba(16,18,22,.66);
  --overlay-glass: rgba(10,12,15,.86);
  --grid-line: rgba(233,237,242,.05);
  --tray: rgba(255,255,255,.045);
  --map-filter: grayscale(.25) invert(.88) hue-rotate(180deg) contrast(.92) brightness(.92);
  --shadow: 0 44px 90px -44px rgba(0,0,0,.75);
  --shadow-accent: 0 18px 44px -18px rgba(255,106,43,.35);
  color-scheme: dark;
}

/* Dunkle Sektionen (Werkhalle): lokale Umfärbung über Custom Properties */
.section--dark{
  background:var(--stahl);
  --bg:      #16191d;
  --bg-2:    #1c2025;
  --bg-3:    #22272d;
  --surface: #1c2025;
  --line:    #2b3037;
  --line-2:  #3a414a;
  --text:    #edf0f3;
  --muted:   #9aa4b0;
  --muted-2: #6d7681;
  --accent:  #ff6a2b;
  --accent-dim:#c14e1c;
  --white:   #ffffff;
  --shadow:  0 24px 50px -22px rgba(0,0,0,.65);
  color:var(--text);
  border-block:1px solid var(--line);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.4rem); }
.accent{ color:var(--accent); }

/* Filmkorn über der ganzen Seite — fix, damit es beim Scrollen nicht neu gerastert wird */
body::after{
  content:""; position:fixed; inset:0; z-index:1150; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{ opacity:.07; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ width:64px; height:64px; }
.preloader__mark .pl-ring{ transform-origin:center; animation:spin 1.4s linear infinite; }
.preloader__word{ font-family:var(--ff-mono); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color:var(--muted); }
.preloader__word em{ color:var(--accent); font-style:normal; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--accent);
  z-index:1200;
}

/* ============================================================
   HEADER / NAV — schwebende Glas-Insel
   ============================================================ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:1100;
  padding:clamp(.6rem,1.6vw,1rem) clamp(.8rem,2.5vw,1.4rem) 0;
  pointer-events:none;
}
.header__inner{
  position:relative;
  max-width:calc(var(--wrap) - 1rem); margin-inline:auto;
  padding:.5rem .6rem .5rem .55rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  pointer-events:auto;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 14px 44px -22px rgba(22,25,29,.22);
  transition:box-shadow .6s var(--ease-lux);
}
/* Glas liegt auf dem Pseudo-Element — backdrop-filter auf dem Inner selbst
   würde das fixe Vollbild-Menü (.nav) in der Pille einsperren */
.header__inner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--header-glass);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}
.header.is-scrolled .header__inner{
  box-shadow:0 22px 60px -24px rgba(22,25,29,.36);
}
:root[data-theme="dark"] .header__inner{ box-shadow:0 14px 44px -20px rgba(0,0,0,.55); }
:root[data-theme="dark"] .header.is-scrolled .header__inner{ box-shadow:0 24px 64px -22px rgba(0,0,0,.75); }
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand__d{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-2); color:#16191d;
  font-family:var(--ff-head); font-weight:700; font-size:1.5rem; line-height:1;
  border-radius:9px 12px 9px 9px;
  padding-bottom:.2rem;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__d{ transform:rotate(-6deg); }
.brand__text{ font-family:var(--ff-head); font-weight:700; font-size:1.3rem; letter-spacing:-.01em; line-height:1; color:var(--text); }
.brand__text em{ font-style:normal; font-weight:400; color:var(--muted-2); }
.brand__logo{ height:42px; width:auto; max-width:none; flex:none; display:block; }
.brand__logo--footer{ height:42px; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); margin-left:auto; }
.nav__link{ position:relative; font-size:.94rem; font-weight:500; color:var(--muted); padding:.3rem 0; transition:color .3s; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .35s var(--ease); }
.nav__link:hover,.nav__link.is-active{ color:var(--text); }
.nav__link.is-active::after,.nav__link:hover::after{ width:100%; }
.nav__cta{
  font-family:var(--ff-head); font-size:.9rem; font-weight:600; color:#fff;
  padding:.55rem 1.25rem; background:var(--accent); border-radius:999px;
  transition:all .5s var(--ease-lux);
}
.nav__cta:hover{ background:var(--accent-dim); }
.nav__cta:active{ transform:scale(.97); }

.burger{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; }
.burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Skin-Umschalter (hell/dunkel) */
.theme-btn{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--muted); transition:color .25s, border-color .25s, transform .3s var(--ease);
}
.theme-btn:hover{ color:var(--accent); border-color:var(--accent); transform:rotate(12deg); }
.theme-btn svg{ width:18px; height:18px; display:block; }
.theme-btn svg[hidden]{ display:none; }

/* Sprachumschalter */
.lang{ display:inline-flex; align-items:center; gap:2px; margin-left:.25rem; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--surface); flex:none; }
.lang__btn{ font-family:var(--ff-mono); font-size:.74rem; font-weight:500; letter-spacing:.03em; color:var(--muted); padding:.34rem .5rem; border-radius:6px; transition:color .25s, background .25s; line-height:1; }
.lang__btn:hover{ color:var(--text); }
.lang__btn.is-active{ background:var(--accent); color:#fff; }

/* ============================================================
   BUTTONS — Pillen mit «Button-in-Button»-Chip
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family:var(--ff-head); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.85rem 1.7rem; border-radius:999px;
  transition:transform .5s var(--ease-lux), background .5s var(--ease-lux), box-shadow .5s var(--ease-lux), color .5s var(--ease-lux), border-color .5s var(--ease-lux);
  will-change:transform;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent); }
.btn--primary:hover{ background:var(--accent-dim); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--text); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
/* Chip: der Pfeil sitzt in seiner eigenen Kapsel, bündig am rechten Innenrand */
.btn--chip{ padding-right:.45rem; }
.btn__chip{
  width:2.1rem; height:2.1rem; flex:none;
  display:grid; place-items:center; border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22);
  transition:transform .5s var(--ease-lux);
}
.btn__chip svg{ width:15px; height:15px; }
.btn--chip:hover .btn__chip{ transform:translate(3px,-1px) scale(1.06); }
.btn--ghost .btn__chip{ background:rgba(22,25,29,.06); box-shadow:none; }
:root[data-theme="dark"] .btn--ghost .btn__chip{ background:rgba(255,255,255,.09); }

/* ============================================================
   HERO — Dossier-Deckblatt auf technischem Raster
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(7rem,15vh,9.5rem) 0 0;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px 64px);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
}
.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(1.4rem,4vw,3.5rem); align-items:end;
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
.hero__side{ padding-bottom:.35rem; }
/* Dezenter Glut-Orb im dunklen Skin (Ethereal-Akzent) */
:root[data-theme="dark"] .hero::after{
  content:""; position:absolute; right:-12%; top:-18%;
  width:56%; aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(255,106,43,.12), transparent 62%);
  filter:blur(34px);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-mono); font-size:.76rem; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
  padding:.5rem .85rem; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); margin-bottom:1.6rem;
}
.hero__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(232,80,10,.5); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(232,80,10,.45);} 70%{ box-shadow:0 0 0 10px rgba(232,80,10,0);} 100%{ box-shadow:0 0 0 0 rgba(232,80,10,0);} }

.hero__title{
  font-family:var(--ff-head); font-weight:700; font-stretch:116%;
  font-size:clamp(2.8rem,6.4vw,5.2rem); line-height:.99; letter-spacing:-.028em;
  margin-bottom:1.5rem;
}
.hero__title .line{ display:block; }
.hero__lead{ max-width:44ch; font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--muted); margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.fig-no{ color:var(--accent); font-weight:600; }

/* ---------- Cinematisches 5-Achs-Band (Rennwagen als Werkstück) ---------- */
.cine{ position:relative; width:100%; }
.cine__frame{
  position:relative; isolation:isolate; overflow:hidden;
  background:#04060a; border-block:1px solid var(--line);
  height:clamp(300px,46vh,540px);
}
.cine__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 77%;
  filter:contrast(1.14) brightness(1.06);
  transform:scale(1.09); will-change:transform;   /* Reserve für die Parallaxe */
}
/* Sucher-Eckwinkel — per CSS, damit sie den SVG-Zuschnitt überleben */
.cine__frame::before,.cine__frame::after{
  content:""; position:absolute; z-index:3; width:36px; height:36px; pointer-events:none;
  border-color:rgba(255,255,255,.3); border-style:solid; border-width:0;
}
.cine__frame::before{ top:20px; left:20px; border-top-width:2px; border-left-width:2px; }
.cine__frame::after{ bottom:20px; right:20px; border-bottom-width:2px; border-right-width:2px; }
/* Lichtkegel am Werkzeug — hebt das Material an, wo gefräst wird */
.cine__glow{
  position:absolute; top:0; left:0; width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%; pointer-events:none; mix-blend-mode:screen; will-change:transform;
  background:radial-gradient(circle, rgba(255,171,112,.55), rgba(255,106,43,.17) 40%, transparent 68%);
}
.cine__scan{
  position:absolute; inset:-10% -32%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(104deg, transparent 44%, rgba(150,190,255,.09) 50%, transparent 56%);
  animation:cineScan 9.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cineScan{ from{ transform:translateX(-38%); } to{ transform:translateX(38%); } }
.cine__hud{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  background:radial-gradient(118% 88% at 50% 56%, transparent 44%, rgba(3,5,8,.62)); }

.hud-c ellipse{ fill:none; }
.hud-c-rim{ stroke:rgba(255,255,255,.12); stroke-width:1.4; }
.hud-c-dash{ stroke:rgba(255,138,77,.5); stroke-width:1.6; stroke-dasharray:5 17; }
.hud-track{ fill:none; stroke:rgba(255,138,77,.34); stroke-width:1.4; stroke-dasharray:3 9; }
.hud-ring{ fill:none; stroke:#ff8a4d; stroke-width:1.8; }
.hud-cross{ fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.6; }
.hud-holder,.hud-shank{ fill:rgba(214,224,236,.92); }
.hud-flute{ fill:rgba(255,255,255,.8); }
.hud-tip{ fill:#ff8a4d; }

/* Koordinatenleiste wie am CNC-Pult */
.cine__bar{
  display:flex; align-items:center; gap:clamp(.7rem,2vw,1.8rem); flex-wrap:wrap;
  max-width:var(--wrap); margin-inline:auto;
  padding:.9rem clamp(1.1rem,4vw,2.4rem);
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted);
}
.cine__axes{ display:inline-flex; gap:.95rem; flex-wrap:wrap; }
.cine__axes b{ color:var(--accent); font-weight:600; margin-right:.3rem; }
.cine__axes i{ font-style:normal; font-variant-numeric:tabular-nums; color:var(--text); }
.cine__cap{ margin-left:auto; }
@media (max-width:760px){
  .cine__cap{ margin-left:0; width:100%; }
  .cine__frame{ height:clamp(240px,40vh,340px); }
  .cine__frame::before,.cine__frame::after{ width:24px; height:24px; }
}
@media (prefers-reduced-motion: reduce){
  .cine__scan{ animation:none; }
}

/* ============================================================
   STATS — Zeichnungs-Titelblock
   ============================================================ */
.stats{ position:relative; z-index:5; border-block:1px solid var(--line); background:var(--surface); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ text-align:left; position:relative; padding:clamp(1.5rem,3.2vw,2.3rem) clamp(1.1rem,2.4vw,2rem); }
.stat + .stat{ border-left:1px solid var(--line); }
.stat__num{ font-family:var(--ff-mono); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1; color:var(--text); letter-spacing:-.04em; }
.stat__num .stat__unit{ color:var(--accent); font-size:.44em; letter-spacing:0; }
.stat__label{ margin-top:.55rem; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }

/* ============================================================
   SECTION SHELL — Kicker als Masslinien-Annotation
   ============================================================ */
.section{ padding:clamp(5.5rem,12vw,10rem) 0; position:relative; }
.section__head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__kicker{
  display:inline-block; font-family:var(--ff-mono); font-size:.76rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1.1rem;
  position:relative; padding-left:2.7rem;
}
.section__kicker::before{ content:""; position:absolute; left:0; top:50%; width:2.1rem; height:1px; background:var(--accent); }
.section__kicker::after{
  content:""; position:absolute; left:0; top:calc(50% - 4px); width:1px; height:9px; background:var(--accent);
  box-shadow:2.1rem 0 0 var(--accent);   /* zweiter Mass-Tick am Linienende */
}
.section__title{ font-family:var(--ff-head); font-weight:700; font-stretch:110%; font-size:clamp(1.9rem,4.4vw,3.15rem); line-height:1.05; letter-spacing:-.022em; }
.section__intro{ margin-top:1.2rem; font-size:clamp(1rem,1.4vw,1.12rem); color:var(--muted); }

/* ============================================================
   TIMELINE (FIRMA)
   ============================================================ */
.timeline{ position:relative; margin-top:1rem; padding-left:0; }
.timeline__line{ position:absolute; left:clamp(58px,9vw,120px); top:8px; bottom:8px; width:2px; background:var(--line); overflow:hidden; }
.timeline__fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--accent); }
.tl{ position:relative; display:grid; grid-template-columns:clamp(58px,9vw,120px) 1fr; gap:clamp(1.2rem,3vw,2.6rem); padding:1.1rem 0 2.4rem; }
.tl__year{
  font-family:var(--ff-mono); font-weight:500; font-size:clamp(.95rem,2vw,1.25rem);
  color:var(--muted-2); text-align:right; padding-right:.2rem; position:relative;
  transition:color .4s;
}
.tl::before{
  content:""; position:absolute; left:clamp(52px,9vw,114px); top:1.45rem;
  width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--line-2);
  transition:all .4s var(--ease); z-index:2;
}
.tl.in-view::before{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px rgba(232,80,10,.14); }
.tl.in-view .tl__year{ color:var(--accent); }
.tl__body{ padding-top:.15rem; }
.tl__body h3{ font-family:var(--ff-head); font-weight:600; font-size:1.18rem; margin-bottom:.35rem; }
.tl__body p{ color:var(--muted); font-size:.98rem; max-width:60ch; }
.tl--now .tl__body h3{ color:var(--accent); }

.values{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.value{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem 1.1rem; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); font-size:.92rem; font-weight:500;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.value:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.value__ico{ color:var(--accent); font-weight:700; }

/* ============================================================
   LEISTUNGEN / CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.card{
  position:relative; padding:1.9rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface);
  transition:border-color .4s, transform .4s var(--ease), box-shadow .4s;
  overflow:hidden;
  transform-style:preserve-3d;
}
.card::before{ content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(232,80,10,.06),transparent 60%); opacity:0; transition:opacity .4s; }
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.card:hover::before{ opacity:1; }
.card__ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:10px; background:rgba(232,80,10,.09); color:var(--accent); margin-bottom:1.3rem; transition:transform .4s var(--ease); }
.card__ico svg{ width:27px; height:27px; }
.card:hover .card__ico{ transform:translateZ(30px) scale(1.05); }
.card h3{ font-family:var(--ff-head); font-weight:600; font-size:1.2rem; margin-bottom:.55rem; }
.card p{ color:var(--muted); font-size:.95rem; }

/* Teilespektrum */
.spektrum{ margin-top:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.spektrum__text h3{ font-family:var(--ff-head); font-weight:700; font-stretch:108%; font-size:clamp(1.4rem,2.6vw,1.85rem); margin-bottom:.8rem; }
.spektrum__text p{ color:var(--muted); max-width:60ch; }
.spektrum__points{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.spektrum__points li{ display:flex; align-items:center; gap:.6rem; font-weight:500; }
.spektrum__img{ position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow); }
.spektrum__img img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) contrast(1.08) brightness(.96);
  transition:transform .9s var(--ease-lux), filter .6s var(--ease-lux); }
.spektrum__img:hover img, .spektrum__img:focus-visible img{ transform:scale(1.04); filter:grayscale(0) contrast(1) brightness(1); }

/* Branchen — Positionsnummern wie in der Stückliste */
.branchen{ margin-top:clamp(3rem,6vw,5rem); }
.branchen__title{ font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:1.4rem; }
.branchen__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.branche{
  display:flex; align-items:baseline; gap:.8rem;
  font-family:var(--ff-head); font-weight:600; font-size:clamp(1.02rem,1.7vw,1.28rem);
  padding:1.2rem 1.1rem; border-top:2px solid var(--line-2); background:linear-gradient(var(--surface),transparent 70%);
  transition:border-color .4s, color .4s;
}
.branche span:first-child{ font-family:var(--ff-mono); font-size:.76rem; color:var(--accent); font-weight:600; }
.branche:hover{ border-color:var(--accent); }

/* ============================================================
   MASCHINEN — Werkstattzeichnungen auf Papier
   ============================================================ */
.machines{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.9rem; }
.machine{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow);
  transition:transform .6s var(--ease-lux), box-shadow .6s var(--ease-lux);
  transform-style:preserve-3d;
}
.machine:hover{ box-shadow:0 0 0 1px var(--line-2), 0 0 0 7px var(--tray), 0 0 0 8px var(--line-2), var(--shadow); }
.machine__info{ padding:1.4rem 1.5rem 1.7rem; position:relative; }
.machines--text .machine:hover{ transform:translateY(-3px); }
.machines--text .machine__info{ padding:1.2rem 1.6rem 1.8rem; }
.machine__sketch{
  aspect-ratio:3/2;
  padding:.55rem;
  overflow:hidden;
  background:#fcfcfb;
  border-bottom:1px solid var(--line);
}
.machine__sketch img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  mix-blend-mode:multiply;
  transition:transform .6s var(--ease), filter .4s;
}
.machine:hover .machine__sketch img{
  transform:scale(1.025);
  filter:contrast(1.05);
}
.machine__tag{
  display:inline-block; font-family:var(--ff-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  padding:.3rem .65rem; border:1px solid rgba(232,80,10,.35); border-radius:6px; margin-bottom:.8rem;
}
.machine__info h3{ font-family:var(--ff-head); font-weight:700; font-stretch:106%; font-size:1.3rem; letter-spacing:-.01em; margin-bottom:.5rem; }
.machine__info p{ color:var(--muted); font-size:.94rem; }

/* Live-Clips im Maschinenpark */
.mach-clips{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-bottom:clamp(2rem,4vw,3.2rem); }
.mach-clip{ position:relative; height:clamp(190px,24vw,300px);
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow); }
@media (max-width:760px){ .mach-clips{ grid-template-columns:1fr; } }
.mach-clip__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .9s ease; filter:contrast(1.04); }
.mach-clip__video.is-playing{ opacity:1; }
.mach-clip__badge{ position:absolute; left:clamp(1rem,2vw,1.4rem); bottom:clamp(1rem,2vw,1.4rem); z-index:2;
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:7px;
  background:rgba(22,25,29,.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
  font-family:var(--ff-mono); font-size:.76rem; font-weight:500; letter-spacing:.03em; color:#fff; }
.mach-clip__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); animation:pulse 2s infinite; }

/* ============================================================
   LEITBILD
   ============================================================ */
.leitbild{ background:var(--bg-2); border-block:1px solid var(--line); }
.leitbild__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.leitbild__aside{ padding:2rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.leitbild__aside-title{ font-family:var(--ff-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:1.2rem; }
.stakeholders li{
  display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line);
  font-weight:500; font-size:1.02rem;
}
.stakeholders li:last-child{ border-bottom:none; }
.stakeholders span{ font-family:var(--ff-mono); font-size:.78rem; font-weight:600; color:var(--accent); min-width:1.7rem; }

/* ============================================================
   GALERIE
   ============================================================ */
/* Kontaktbogen-Raster: gleichmässige Letterbox-Kacheln, breites Schlussbild */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; counter-reset:fig; }
.gallery__item{
  position:relative; margin:0; aspect-ratio:3/2; border-radius:var(--radius);
  overflow:hidden; cursor:pointer; background:#0b0e12;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .6s var(--ease-lux);
}
.gallery__item:last-child{ grid-column:1 / -1; aspect-ratio:3/1; }
/* Filmische Grundgradierung — volle Farbe erst beim Hover */
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) contrast(1.1) brightness(.94);
  transition:transform .9s var(--ease-lux), filter .6s var(--ease-lux);
}
.gallery__item::before{
  counter-increment:fig;
  content:counter(fig,decimal-leading-zero);
  position:absolute; top:.7rem; left:.9rem; z-index:2;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em;
  color:rgba(255,255,255,.62); text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.gallery__item::after{
  content:attr(data-caption);
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.8rem .95rem .9rem;
  font-family:var(--ff-mono); font-size:.72rem; line-height:1.45; color:#eef2f6;
  background:linear-gradient(transparent, rgba(3,5,8,.92));
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-lux), transform .5s var(--ease-lux);
}
.gallery__item:hover{ box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.gallery__item:hover img{ transform:scale(1.05); filter:grayscale(0) contrast(1.05) brightness(1); }
.gallery__item:hover::after{ opacity:1; transform:none; }
.gallery__item.is-hidden{ display:none; }

/* ============================================================
   TEAM
   ============================================================ */
.team__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.member{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.member:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.member__photo{ aspect-ratio:4/5; overflow:hidden; }
.member__photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.38) contrast(1.05) brightness(.99); transition:transform .9s var(--ease-lux), filter .6s var(--ease-lux); }
.member:hover .member__photo img{ transform:scale(1.05); filter:grayscale(0) contrast(1) brightness(1); }
.member figcaption{ padding:1.05rem 1.2rem 1.2rem; }
.member figcaption h3{ font-family:var(--ff-head); font-weight:600; font-size:1.08rem; }
.member figcaption p{ color:var(--accent); font-family:var(--ff-mono); font-size:.78rem; margin-top:.2rem; }

/* ============================================================
   MEDIEN
   ============================================================ */
.mediacard{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0; align-items:stretch;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow);
  transition:transform .6s var(--ease-lux), box-shadow .6s var(--ease-lux);
}
.mediacard:hover{ box-shadow:0 0 0 1px var(--accent), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow); transform:translateY(-4px); }
.mediacard__img{ min-height:300px; background-size:cover; background-position:center;
  filter:grayscale(.32) contrast(1.08) brightness(.96); transition:filter .6s var(--ease-lux); }
.mediacard:hover .mediacard__img{ filter:grayscale(0) contrast(1) brightness(1); }
.mediacard__body{ padding:clamp(1.8rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.mediacard__body h3{ font-family:var(--ff-head); font-weight:700; font-stretch:108%; font-size:clamp(1.4rem,3vw,1.9rem); margin:.4rem 0 .8rem; }
.mediacard__body p{ color:var(--muted); margin-bottom:1.4rem; }
.mediacard__more{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ff-head); font-weight:600; color:var(--accent); }
.mediacard__more svg{ width:20px; height:20px; transition:transform .4s var(--ease); }
.mediacard:hover .mediacard__more svg{ transform:translateX(6px); }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{ background:var(--bg-2); border-top:1px solid var(--line); }
.kontakt__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
.contacts{ margin:2rem 0; display:flex; flex-direction:column; gap:1.2rem; }
.contacts li{ display:flex; align-items:center; gap:1rem; }
.contacts__ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:10px; background:rgba(232,80,10,.09); color:var(--accent); }
.contacts__ico svg{ width:22px; height:22px; }
.contacts div{ display:flex; flex-direction:column; line-height:1.4; }
.contacts strong{ font-family:var(--ff-mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.contacts a:hover{ color:var(--accent); }
.maplink{ margin-top:.15rem; font-size:.9rem; color:var(--accent); }
.maplink:hover{ text-decoration:underline; }

.map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:220px; box-shadow:var(--shadow); }
.map iframe{ width:100%; height:100%; border:0; filter:var(--map-filter, grayscale(.15) contrast(1.02)); }

/* Form */
.form{ align-self:start; padding:clamp(1.6rem,3vw,2.4rem); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--tray), 0 0 0 8px var(--line), var(--shadow); }
.field{ position:relative; margin-bottom:1.3rem; }
.field input,.field textarea{
  width:100%; padding:1.05rem 1rem .55rem; font-family:inherit; font-size:1rem; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; resize:vertical;
  transition:border-color .3s, box-shadow .3s;
}
.field textarea{ min-height:110px; }
.field label{
  position:absolute; left:1rem; top:.95rem; color:var(--muted-2); font-size:1rem;
  pointer-events:none; transition:all .22s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,80,10,.13); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  top:.3rem; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.field__err{ display:none; margin-top:.35rem; font-size:.8rem; color:#c92a2a; }
.field.is-invalid input,.field.is-invalid textarea{ border-color:#c92a2a; }
.field.is-invalid .field__err{ display:block; }
.form__submit{ width:100%; margin-top:.4rem; }
.form__note{ margin-top:.9rem; font-size:.78rem; color:var(--muted-2); text-align:center; }
.form__success{
  display:flex; align-items:center; gap:.6rem; justify-content:center; margin-top:1rem;
  padding:.9rem; border-radius:8px; background:rgba(232,80,10,.1); color:var(--accent);
  font-weight:600; font-size:.95rem;
}
.form__success[hidden]{ display:none; }
.form__success svg{ width:20px; height:20px; }

/* ============================================================
   FOOTER — Werkhalle
   ============================================================ */
.footer{
  background:var(--stahl); color:#e8ecf0;
  --line:#2b3037; --line-2:#3a414a; --muted:#9aa4b0; --muted-2:#6d7681; --accent:#ff6a2b;
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,4.5rem);
}
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; }
.footer__brand p{ margin-top:1rem; color:var(--muted); max-width:38ch; font-size:.94rem; }
.footer__nav{ display:flex; flex-direction:column; gap:.7rem; }
.footer__nav a{ color:var(--muted); transition:color .3s; width:fit-content; }
.footer__nav a:hover{ color:var(--accent); }
.footer__addr{ color:var(--muted); font-size:.94rem; display:flex; flex-direction:column; gap:1rem; }
.footer__addr a:hover{ color:var(--accent); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 0; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted-2); }
.totop{ font-family:var(--ff-mono); font-size:.8rem; color:var(--muted); transition:color .3s; }
.totop:hover{ color:var(--accent); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  background:rgba(14,16,19,.93); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; gap:.8rem; }
.lightbox__stage img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); transform:scale(.96); transition:transform .4s var(--ease); }
.lightbox.is-open .lightbox__stage img{ transform:scale(1); }
.lightbox__stage figcaption{ text-align:center; color:#aeb6bf; font-family:var(--ff-mono); font-size:.85rem; }
.lightbox__close{ position:absolute; top:1.2rem; right:1.6rem; font-size:2.4rem; line-height:1; color:#aeb6bf; transition:color .3s, transform .3s; }
.lightbox__close:hover{ color:var(--accent-2); transform:rotate(90deg); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; color:#aeb6bf; width:56px; height:56px; border-radius:50%; transition:all .3s; }
.lightbox__nav:hover{ color:#fff; background:rgba(255,255,255,.08); }
.lightbox__nav--prev{ left:1rem; }
.lightbox__nav--next{ right:1rem; }

/* ============================================================
   3D-SCHAUSTÜCK (interaktives Laufrad · dunkle Werkhalle)
   ============================================================ */
.showpiece{ border-block:1px solid var(--line); }
.showpiece__stage{ position:relative; }
.showpiece__stage::before{ content:""; position:absolute; left:50%; top:48%; width:58%; height:52%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,106,43,.15), transparent 70%); filter:blur(16px); }
.showpiece__stage canvas{ position:relative; display:block; width:min(100%,860px); height:auto; margin-inline:auto; cursor:grab; touch-action:pan-y; }
.showpiece__stage canvas.is-dragging{ cursor:grabbing; }
.showpiece__facts{ position:absolute; left:0; bottom:.4rem; display:flex; flex-direction:column; gap:.55rem; }
.showpiece__facts li{ display:flex; align-items:baseline; gap:.6rem; font-weight:500; font-size:.92rem; color:var(--muted); }
.showpiece__facts li span:first-child{ font-family:var(--ff-mono); color:var(--accent); font-weight:600; font-size:.78rem; }
.showpiece__hint{ position:absolute; right:0; bottom:.4rem; color:var(--muted-2); font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px){
  .showpiece__facts{ position:static; margin-top:1.2rem; }
  .showpiece__hint{ position:static; display:block; margin-top:.9rem; }
}

/* ============================================================
   REFERENZEN / BRANCHEN
   ============================================================ */
.brefs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.bref{
  position:relative; padding:1.5rem 1.4rem 1.7rem; border-radius:var(--radius);
  border:1px solid var(--line); border-top:2px solid var(--line-2); background:var(--surface);
  transition:border-color .4s, transform .45s var(--ease), box-shadow .45s;
}
.bref:hover{ border-top-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-4px); }
.bref__num{ font-family:var(--ff-mono); font-size:.78rem; font-weight:600; color:var(--accent); }
.bref h3{ font-family:var(--ff-head); font-weight:600; font-size:1.06rem; margin:.55rem 0 .5rem; }
.bref p{ color:var(--muted); font-size:.9rem; }

/* ============================================================
   EXPLOSIONSZEICHNUNG / 5-ACHS-ANIMATION (dunkle Werkhalle)
   ============================================================ */
.explosion{ border-block:1px solid var(--line); }
.exp-track{ position:relative; height:240vh; }
.exp-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.exp-sticky .exp-wrap{ width:100%; margin-block:0; }
.exp-wrap{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.exp-legend{ display:flex; flex-direction:column; gap:.5rem; }
.exp-legend li{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.exp-legend li:last-child{ border-bottom:none; }
.exp-legend li > span{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:#fff; font-family:var(--ff-mono); font-weight:600; font-size:.85rem; }
.exp-legend div{ display:flex; flex-direction:column; line-height:1.35; }
.exp-legend strong{ font-family:var(--ff-head); font-weight:600; font-size:1rem; }
.exp-legend div{ color:var(--muted); font-size:.86rem; }
.exp-hint{ margin-top:.4rem; color:var(--muted-2); font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; gap:.5rem !important; }
.exp-hint svg{ width:18px; height:18px; color:var(--accent); animation:hintbob 1.8s var(--ease) infinite; }
@keyframes hintbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

.exp-stage{ position:relative; max-width:720px; margin-inline:auto; }
.exp-stage::before{ content:""; position:absolute; left:50%; top:50%; width:78%; height:64%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,106,43,.16),transparent 68%); filter:blur(14px); z-index:0; }
.exp-stage canvas{ position:relative; z-index:1; width:100%; height:auto; display:block; }
.exp-stage svg{ position:relative; z-index:1; width:100%; height:auto; display:block; overflow:visible;
  max-height:78vh; margin-inline:auto; filter:drop-shadow(0 30px 44px rgba(0,0,0,.55)); }
.exp-top{ fill:#1c232d; stroke:#3d4857; stroke-width:1.6; }
.exp-side{ fill:#0f141a; stroke:#2a323d; stroke-width:1; }
.exp-hole{ fill:#0a0c0f; stroke:#333b46; stroke-width:1.2; }
.exp-rim{ fill:none; stroke:var(--accent); stroke-width:2; opacity:.85; }
.exp-ball{ fill:#7f8b99; }
.exp-bolt .exp-top{ fill:#2b333e; }
.exp-axis{ stroke:var(--accent); stroke-width:1.3; stroke-dasharray:2 8; opacity:.45; }
.exp-anno{ opacity:var(--p,1); transition:opacity .15s linear; }
.exp-lead{ stroke:#4a5563; stroke-width:1; stroke-dasharray:3 3; }
.exp-badge{ fill:var(--accent); }
.exp-badge-t{ fill:#fff; font-family:var(--ff-mono); font-weight:600; font-size:15px; text-anchor:middle; }

/* 5-Achs-Fräs-Animation */
.mill-raw{ fill:#20262e; stroke:#333b46; stroke-width:1.4; }
.mill-fin{ fill:#2b333d; }
.mill-fin-top{ fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.mill-groove{ fill:none; stroke:#171c22; stroke-width:2; stroke-linejoin:round; }
.mill-table-top{ fill:#222932; stroke:#3a4453; stroke-width:1.4; }
.mill-table-side{ fill:#12161c; stroke:#2a323d; stroke-width:1; }
.mill-slot{ stroke:#11151b; stroke-width:5; stroke-linecap:round; }
.mill-base{ fill:#141a20; stroke:#2a323d; stroke-width:1.2; stroke-linejoin:round; }
.mill-tool-body{ fill:#39424f; stroke:#59647a; stroke-width:1.4; }
.mill-shank{ fill:#2b333d; stroke:#455063; stroke-width:1.2; }
.mill-housing{ fill:#1c222b; stroke:#3d4857; stroke-width:1.6; }
.mill-flute{ stroke:#95a1b1; stroke-width:1.6; }
.mill-flute-group{ animation:fluteSpin .45s linear infinite; }
.mill-tip{ fill:var(--accent); }
.mill-spark{ stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; }
.mill-axis-arrow{ fill:none; stroke:var(--accent); stroke-width:2.2; }
.mill-axis-head{ fill:var(--accent); }
.mill-axis-label{ fill:var(--accent); font-family:var(--ff-mono); font-weight:600; font-size:15px; text-anchor:middle; }
.mill-anno{ opacity:var(--p,1); }
#millSparks{ opacity:0; transition:opacity .16s; }
#millSparks.cutting{ opacity:1; }
#millSparks .mill-spark{ animation:sparkFlick .16s steps(2,end) infinite; }
@keyframes fluteSpin{ from{ transform:translateY(0); } to{ transform:translateY(14px); } }
@keyframes sparkFlick{ 0%{ opacity:1; } 100%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){
  .mill-flute-group{ animation:none; }
  #millSparks .mill-spark{ animation:none; }
}
@media (max-width:820px){
  .exp-track{ height:auto; }
  .exp-sticky{ position:static; height:auto; padding-block:1rem; }
  .exp-wrap{ grid-template-columns:1fr; }
  .exp-stage{ max-width:460px; margin-inline:auto; }
  .exp-stage svg{ max-height:none; }
}
@media (prefers-reduced-motion: reduce){
  .exp-track{ height:auto; }
  .exp-sticky{ position:static; height:auto; }
  .exp-stage{ transform:none; }
  .exp-hint svg{ animation:none; }
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(34px); filter:blur(9px);
  transition:opacity .9s var(--ease-lux), transform .9s var(--ease-lux), filter .9s var(--ease-lux);
  transition-delay:var(--d,0ms);
}
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .cards,.branchen__list,.team__grid,.brefs{ grid-template-columns:repeat(2,1fr); }
  .machines{ grid-template-columns:repeat(2,1fr); }
  .spektrum{ grid-template-columns:1fr; }
  .hero__grid{ grid-template-columns:1fr; gap:1.8rem; align-items:start; }
  .hero__side{ padding-bottom:0; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:none; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .leitbild__grid,.kontakt__grid{ grid-template-columns:1fr; }
  .mediacard{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 1080px){
  /* Vollbild-Glas-Overlay mit gestaffelter Link-Enthüllung */
  .nav{
    position:fixed; inset:0; min-height:100dvh; width:100%;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.1rem; padding:clamp(1.6rem,7vw,3.5rem);
    background:var(--overlay-glass);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    backdrop-filter:blur(26px) saturate(140%);
    opacity:0; visibility:hidden;
    transition:opacity .55s var(--ease-lux), visibility .55s;
    z-index:1050;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav__link{
    font-family:var(--ff-head); font-weight:600; font-stretch:108%;
    font-size:clamp(1.7rem,6vw,2.4rem); letter-spacing:-.02em;
    transform:translateY(26px); opacity:0;
    transition:transform .7s var(--ease-lux), opacity .7s var(--ease-lux), color .3s;
  }
  .nav.is-open .nav__link{ transform:none; opacity:1; }
  .nav.is-open .nav__link:nth-child(1){ transition-delay:.06s; }
  .nav.is-open .nav__link:nth-child(2){ transition-delay:.11s; }
  .nav.is-open .nav__link:nth-child(3){ transition-delay:.16s; }
  .nav.is-open .nav__link:nth-child(4){ transition-delay:.21s; }
  .nav.is-open .nav__link:nth-child(5){ transition-delay:.26s; }
  .nav.is-open .nav__link:nth-child(6){ transition-delay:.31s; }
  .nav__cta{
    font-size:1.1rem; padding:.8rem 1.7rem; margin-top:.8rem;
    transform:translateY(26px); opacity:0;
    transition:transform .7s var(--ease-lux) .36s, opacity .7s var(--ease-lux) .36s, background .3s;
  }
  .nav.is-open .nav__cta{ transform:none; opacity:1; }
  .theme-btn, .lang{
    transform:translateY(26px); opacity:0;
    transition:transform .7s var(--ease-lux) .42s, opacity .7s var(--ease-lux) .42s;
  }
  .nav.is-open .theme-btn, .nav.is-open .lang{ transform:none; opacity:1; }
  .lang{ margin:.4rem 0 0; align-self:flex-start; }
  .burger{ display:flex; z-index:1100; }
  @media (prefers-reduced-motion: reduce){
    .nav, .nav__link, .nav__cta, .theme-btn, .lang{ transition:none; }
  }
}
@media (max-width: 760px){
  .cards,.branchen__list,.machines,.team__grid,.brefs{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .gallery__item:last-child{ aspect-ratio:3/2; }
  .footer__inner{ grid-template-columns:1fr; gap:1.8rem; }
  .footer__bottom{ flex-direction:column; gap:.8rem; text-align:center; }
  .hero{ padding-top:6.5rem; }
  .tl{ grid-template-columns:52px 1fr; }
  .timeline__line,.tl::before{ display:none; }
}
@media (max-width: 420px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat + .stat{ border-left:none; border-top:1px solid var(--line); }
}
@media (max-width: 560px){
  .hero__eyebrow{ font-size:.64rem; letter-spacing:.04em; padding:.45rem .7rem; }
}

/* ============================================================
   RECHTLICHE SEITEN (Impressum / Datenschutz)
   ============================================================ */
.footer__legal{ display:flex; gap:1.2rem; }
.footer__legal a{ color:var(--muted-2); transition:color .3s; }
.footer__legal a:hover{ color:var(--accent); }

.legal-hero{
  position:relative; padding:clamp(8rem,16vw,11rem) 0 clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px 64px);
}
.legal-hero h1{ font-family:var(--ff-head); font-weight:700; font-stretch:112%; font-size:clamp(2.1rem,5.5vw,3.4rem); line-height:1.05; letter-spacing:-.02em; }
.legal-hero p{ margin-top:1rem; color:var(--muted); max-width:60ch; }
.legal-hero .updated{ margin-top:1.4rem; font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }

.legal{ padding:clamp(3rem,7vw,5rem) 0 clamp(4rem,8vw,6rem); }
.prose{ max-width:800px; }
.prose h2{ font-family:var(--ff-head); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:-.01em; margin:2.6rem 0 .9rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.prose h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.prose h3{ font-family:var(--ff-head); font-weight:600; font-size:1.1rem; margin:1.6rem 0 .5rem; color:var(--text); }
.prose p{ color:var(--muted); margin-bottom:1rem; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--accent-dim); }
.prose ul{ list-style:none; margin:0 0 1.2rem; padding:0; }
.prose ul li{ position:relative; padding-left:1.5rem; margin-bottom:.55rem; color:var(--muted); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose strong{ color:var(--text); font-weight:600; }
.prose .lead{ font-size:1.08rem; color:var(--text); }

.addr-card{
  margin:1.4rem 0 1.8rem; padding:1.5rem 1.7rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); line-height:1.8;
}
.addr-card strong{ font-family:var(--ff-head); }
.addr-card a{ text-decoration:none; }

.datatable{ margin:1rem 0 1.6rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.datatable div{ display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:1rem; padding:.85rem 1.3rem; border-bottom:1px solid var(--line); }
.datatable div:last-child{ border-bottom:none; }
.datatable dt{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); align-self:center; }
.datatable dd{ margin:0; color:var(--text); }
@media (max-width:560px){ .datatable div{ grid-template-columns:1fr; gap:.2rem; } }

.legal-back{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2.5rem; font-family:var(--ff-head); font-weight:600; color:var(--accent); }
.legal-back svg{ width:18px; height:18px; }
.legal-back:hover{ gap:.75rem; }