/* ============================================================
   MONTAGE — Industriemontage / Anlagenmontage (Beispielinhalt)
   Plantilla 12 · Space Grotesk + IBM Plex Sans · self-hosted
   Signature: procedural gas-turbine rotor assembled on scroll.
   ============================================================ */

/* ---- Fonts (variable, self-hosted) ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --steel-50:  #eef1f4;
  --steel-100: #dbe0e6;
  --steel-200: #b7c0c9;
  --steel-300: #8b96a1;
  --ink:    #101215;
  --ink-2:  #15181c;
  --panel:  #191d22;
  --panel-2:#20252b;
  --graphite: #2b3138;
  --muted:  #7d8791;
  --signal: #ff6b1c;   /* the ONE accent — locked page-wide */
  --signal-2: #ff8a3d;
  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.14);

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  --shell: 1220px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font-body); font-weight: 400;
  color: var(--steel-100); background: var(--ink); line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.06; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
strong { color: #fff; font-weight: 600; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--signal); color: #10120f; padding: .6rem 1rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---- Branded loader ---- */
.loader {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--ink); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.is-loading .loader { opacity: 1; pointer-events: auto; }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; gap: 1.2rem; }
.loader__mark {
  width: 46px; height: 46px; border: 3px solid var(--line-2);
  border-top-color: var(--signal); border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader__word { font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; font-size: .85rem; color: var(--steel-200); padding-left: .3em; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  padding: .9rem 1.7rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--primary { background: var(--signal); color: #17130d; font-weight: 600; }
.btn--primary:hover { background: var(--signal-2); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(.985); }
.btn--ghost { border-color: var(--line-2); color: var(--steel-100); }
.btn--ghost:hover { border-color: var(--signal); color: #fff; transform: translateY(-2px); }
.btn--block { width: 100%; }

/* ---- Eyebrows / heads ---- */
.eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: .76rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--signal);
  margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--signal); }
.section__head { max-width: 48rem; margin: 0 auto clamp(2.4rem,5vw,3.6rem); }
.section__head--center { text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__title { font-size: clamp(1.95rem, 4.4vw, 3.1rem); color: #fff; }
.section__intro { margin-top: 1.15rem; color: var(--steel-300); font-size: 1.06rem; max-width: 42rem; }
.section__head--center .section__intro { margin-inline: auto; }

/* ---- Header ---- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 120; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.05rem; }
.site-header.is-scrolled { background: rgba(16,18,21,.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__word { font-family: var(--font-display); font-weight: 700; letter-spacing: .18em; font-size: 1.05rem; }
.brand__sub { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); }
@media (max-width: 560px) { .brand__sub { display: none; } }

.site-nav ul { display: flex; align-items: center; gap: 1.9rem; }
.site-nav a { color: var(--steel-200); font-size: .93rem; font-family: var(--font-display); font-weight: 500; position: relative; padding: .2rem 0; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.site-nav a:not(.nav-cta):hover { color: #fff; }
.nav-cta { border: 1px solid var(--line-2); padding: .5rem 1.1rem; border-radius: var(--radius); }
.nav-cta:hover { border-color: var(--signal); color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.nav-toggle span { width: 20px; height: 2px; background: var(--steel-100); }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 330px); background: rgba(14,16,19,.98); backdrop-filter: blur(12px); transform: translateX(100%); transition: transform .38s var(--ease); padding: 6rem var(--pad) 2rem; box-shadow: -20px 0 60px rgba(0,0,0,.5); }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .site-nav a { font-size: 1.15rem; }
}

/* ---- Hero copy (reused inside the turbine stage overlay) ---- */
.hero__title { font-size: clamp(2.5rem, 6.6vw, 4.9rem); font-weight: 500; letter-spacing: -0.03em; }
.hero__title .accent { color: var(--signal); }
.hero__lead { margin-top: 1.6rem; max-width: 38rem; font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--steel-200); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2.4rem; }
.hero__badge { font-family: var(--font-display); font-size: .78rem; letter-spacing: .06em; color: var(--steel-300); display: inline-flex; align-items: center; gap: .5rem; }
.hero__badge::before { content: ""; width: 7px; height: 7px; background: var(--signal); border-radius: 50%; flex: none; }
.scroll-cue { margin-top: clamp(2rem,4vw,2.8rem); font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-300); display: inline-flex; align-items: center; gap: .7rem; }
.scroll-cue::before { content: ""; width: 22px; height: 1px; background: var(--signal); }

/* ============================================================
   SIGNATURE TURBINE STAGE (also the hero)
   ============================================================ */
.build-stage { position: relative; color: var(--steel-100);
  background: radial-gradient(120% 90% at 82% 2%, #23282f 0%, rgba(35,40,47,0) 52%), linear-gradient(180deg, #0e1014 0%, #14171b 60%, var(--ink-2) 100%); }

/* Hero overlay — static flow by default (no-JS / mobile / reduced).
   Asymmetric: title on the left third, turbine large on the right two thirds. */
.stage-hero { position: relative; z-index: 3; }
.stage-hero__inner { padding-block: clamp(6.5rem,13vh,9rem) clamp(1.5rem,4vh,2.6rem);
  display: grid; gap: clamp(1.6rem,4vw,3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .stage-hero__inner { grid-template-columns: 5fr 7fr; } }
.build-track { position: relative; }
.build-viz { position: relative; padding: clamp(2rem,6vw,4rem) 0; }
.build-canvas { display: none; }
.build-fallback { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 1px solid var(--line); }
.build-hud { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.build-hud__kicker { font-family: var(--font-display); font-weight: 500; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--signal); margin: clamp(1.6rem,4vw,2.4rem) 0 1.4rem; }
.phase-hud { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.phase { border-top: 1px solid var(--line-2); padding-top: 1.1rem; display: grid; gap: .4rem; }
.phase__no { font-family: var(--font-display); font-weight: 700; color: var(--signal); font-size: .9rem; letter-spacing: .1em; }
.phase__title { font-size: 1.5rem; color: #fff; }
.phase__text { color: var(--steel-200); font-size: .98rem; max-width: 30rem; }
.build-progress { display: none; }
@media (min-width: 720px) { .phase-hud { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }

/* JS 3D mode: pin canvas, hold finished turbine, disassemble + reassemble on scroll */
.js-build .build-track { height: 780vh; }
.js-build .build-viz { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; display: block; }
.js-build .build-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.js-build .build-fallback { display: none; }

/* Hero overlay pinned over the spinning turbine; JS fades its opacity on scroll.
   Copy is held to the left third; the turbine is lens-shifted into the right two thirds. */
.js-build .stage-hero { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; pointer-events: none; opacity: 1; }
.js-build .stage-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(11,13,16,.96) 0%, rgba(11,13,16,.8) 30%, rgba(11,13,16,.28) 52%, rgba(11,13,16,0) 68%); }
.js-build .stage-hero__inner { padding-block: 0; pointer-events: auto; display: block; }
.js-build .hero-copy { max-width: min(40vw, 33rem); pointer-events: auto; }
@media (max-width: 920px) { .js-build .hero-copy { max-width: 33rem; } }

/* Phones (iteration 5): the rotor now runs here too. The copy spans the full width, so
   the scrim turns vertical (readable text over the live scene) and the pinned hero is
   shorter — 780vh of scroll is a desktop budget, far too long on a phone. */
@media (max-width: 920px) {
  .js-build .build-track { height: 480vh; }
  .js-build .stage-hero { align-items: flex-start; }
  .js-build .stage-hero__inner { padding-block: clamp(5.5rem, 14vh, 8rem) 0; }
  /* The copy runs almost the full height on a phone, so the scrim has to hold until the
     text ends (a soft fade mid-way left the lead paragraph sitting on the blades). */
  .js-build .stage-hero::before {
    background: linear-gradient(180deg, rgba(10,12,15,.96) 0%, rgba(10,12,15,.93) 55%, rgba(10,12,15,.86) 78%, rgba(10,12,15,.45) 92%, rgba(10,12,15,.1) 100%);
  }
  .js-build .hero__lead { max-width: 32rem; }
}
.js-build .stage-hero.is-past .stage-hero__inner { pointer-events: none; }

.js-build .build-hud { position: absolute; inset: auto auto clamp(1.6rem,5vh,3rem) 0; width: 100%; padding-inline: var(--pad); margin: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.js-build .build-hud__kicker { margin: 0 0 1rem; }
.js-build .phase-hud { display: block; position: relative; min-height: 10rem; max-width: 35rem; }
.js-build .phase { position: absolute; inset: 0 auto auto 0; width: 100%; border-top: none; padding-top: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-build .phase.is-active { opacity: 1; transform: translateY(0); }
.js-build .phase__title { font-size: clamp(1.8rem,3.4vw,2.5rem); margin: .2rem 0 .5rem; }
.js-build .phase__title::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--signal); vertical-align: middle; margin-right: .7rem; }
.js-build .phase__text { font-size: 1.02rem; }
.js-build .build-progress { display: block; position: static; height: 2px; background: var(--line-2); max-width: 35rem; margin-top: 1.5rem; }
.build-progress__bar { display: block; height: 100%; width: 0%; background: var(--signal); transition: width .15s linear; }
.build-hint { position: absolute; top: clamp(1.4rem,4vh,2.4rem); right: var(--pad); font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); }

/* ---- Generic sections ---- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--panel { background: var(--ink-2); }
.section--soft { background: var(--panel); }

/* ---- Leistungen (services) ---- */
.leistung-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .leistung-grid { grid-template-columns: repeat(2, 1fr); } }
.leistung { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.7rem 2rem; overflow: hidden; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.leistung::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.leistung:hover { transform: translateY(-5px); border-color: var(--line-2); }
.leistung:hover::before { transform: scaleY(1); }
.leistung__icon { width: 46px; height: 46px; color: var(--signal); margin-bottom: 1.1rem; }
.leistung h3 { font-size: 1.32rem; color: #fff; }
.leistung p { margin-top: .7rem; color: var(--steel-300); font-size: .98rem; }
.leistung__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.leistung__tags span { font-family: var(--font-display); font-size: .72rem; letter-spacing: .04em; color: var(--steel-200); border: 1px solid var(--line-2); border-radius: 100px; padding: .25rem .7rem; }

/* ---- Horizontal-scroll turnaround timeline ---- */
.hstage { background: var(--ink); }
.htrack-wrap { position: relative; overflow: hidden; }
.htrack { display: flex; gap: clamp(1rem,3vw,2rem); padding: 2rem var(--pad); }
.hphase { flex: 0 0 min(78vw, 380px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: grid; align-content: start; gap: .7rem; }
.hphase__no { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--signal); letter-spacing: -.02em; line-height: 1; }
.hphase h3 { font-size: 1.3rem; color: #fff; }
.hphase p { color: var(--steel-300); font-size: .96rem; }
.hphase__meta { margin-top: auto; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-200); padding-top: 1rem; border-top: 1px solid var(--line); }
.hbar { height: 2px; background: var(--line-2); max-width: 35rem; margin: 1.4rem auto 0; }
.hbar__fill { display: block; height: 100%; width: 0%; background: var(--signal); }
/* default (no-JS / mobile / reduced): normal horizontal scroll strip */
.htrack-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.hphase { scroll-snap-align: start; }
.htrack-wrap::-webkit-scrollbar { height: 6px; }
.htrack-wrap::-webkit-scrollbar-thumb { background: var(--graphite); border-radius: 100px; }
.hbar { display: none; }

/* JS pinned horizontal-pan mode */
.js-hscroll .hstage { position: relative; height: 320vh; }
.js-hscroll .htrack-wrap { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.js-hscroll .htrack { flex: none; will-change: transform; }
.js-hscroll .htrack-wrap { scroll-snap-type: none; }
.js-hscroll .hbar { display: block; }
.js-hscroll .hstage-head { position: absolute; top: clamp(4.5rem,10vh,7rem); left: 0; right: 0; }

/* ---- Schweißtechnik: welding head traces the plant point by point ---- */
.circuit { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(88vh, 780px); padding-block: clamp(4.5rem,10vw,8rem);
  background: radial-gradient(130% 110% at 80% 6%, #1c2027 0%, #12151a 42%, #0c0e11 100%); }
.circuit__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; }
.circuit__inner { position: relative; z-index: 1; width: 100%; display: grid; gap: clamp(2rem,5vw,3.5rem);
  grid-template-columns: 1fr; align-content: center; }
@media (min-width: 920px) { .circuit__inner { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.circuit__lead { max-width: 34rem; }
.circuit__certs { display: grid; gap: .9rem; }
@media (min-width: 920px) { .circuit__certs { align-self: end; margin-top: clamp(3rem,10vh,7rem); } }
.circuit-cert { border-top: 1px solid var(--line-2); padding-top: .8rem; }
.circuit-cert dt { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: .98rem; }
.circuit-cert dd { color: var(--steel-300); font-size: .9rem; margin-top: .25rem; }
/* the particle build is an enhancement — shown only where it can run well */
@media (min-width: 920px) { .circuit.is-live .circuit__canvas { display: block; } }
@media (prefers-reduced-motion: reduce) { .circuit__canvas { display: none !important; } }

/* ---- Sicherheit / Nachweise (safety + carnets) ---- */
.safe-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .safe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .safe-grid { grid-template-columns: repeat(4, 1fr); } }
.safe-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.safe-card__icon { width: 34px; height: 34px; color: var(--signal); margin-bottom: .9rem; }
.safe-card h3 { font-size: 1.08rem; color: #fff; }
.safe-card p { margin-top: .5rem; color: var(--steel-300); font-size: .9rem; }

/* ---- Zahlen ---- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.5rem; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: left; border-top: 2px solid var(--signal); padding-top: 1.3rem; }
.stat__value { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.6rem); color: #fff; letter-spacing: -0.02em; }
.stat__label { margin-top: .5rem; color: var(--steel-300); font-size: .92rem; }

/* ---- Team ---- */
.team-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.6rem; }
.team-card__avatar { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(140deg, var(--signal), var(--signal-2)); color: #17130d; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }
.team-card__name { font-size: 1.18rem; color: #fff; }
.team-card__role { margin-top: .35rem; color: var(--steel-300); font-size: .92rem; }

/* ---- Kontakt ---- */
.kontakt { background: var(--ink-2); }
.kontakt__inner { display: grid; gap: clamp(2.4rem,5vw,4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kontakt__inner { grid-template-columns: 1fr 1fr; } }
.kontakt__facts { margin-top: 2rem; display: grid; gap: 1rem; }
.kontakt__facts li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1rem; }
.kontakt__facts span { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); min-width: 5rem; }
.kontakt__facts a:hover { color: var(--signal); }
.kontakt-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem,4vw,2.4rem); display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; color: var(--steel-200); }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--steel-50); background: rgba(0,0,0,.3); border: 1px solid var(--line-2); border-radius: var(--radius); padding: .8rem .9rem; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(219,224,230,.38); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal); background: rgba(0,0,0,.42); outline: none; }
.field select { appearance: none; }
.form-note { font-size: .8rem; color: var(--steel-300); text-align: center; }

/* ---- Footer ---- */
.site-footer { background: #0c0e11; color: var(--steel-300); padding-block: clamp(2.6rem,6vw,4rem); }
.site-footer__inner { display: grid; gap: 1.8rem; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; } }
.site-footer__brand .brand__word { color: #fff; font-size: 1.2rem; }
.site-footer__brand p { color: var(--steel-300); font-size: .9rem; margin-top: .3rem; }
.site-footer__nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.site-footer__nav a { font-family: var(--font-display); font-size: .9rem; }
.site-footer__nav a:hover { color: var(--signal); }
.site-footer__note { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ============================================================
   GLOBAL WELD CORD — one continuous seam welded down the whole page
   Iteration 4: ONE document-tall SVG path in a fixed lane (no side-to-
   side sweeps across the content), layered dark-halo → groove → bright
   steel bead → ripple texture → gloss so it keeps contrast over every
   background on the page, plus a visible dashed "joint to be welded"
   ahead of the head so the route reads top-to-bottom at all times.
   A fixed canvas paints the hot head, its cooling trail and sparks.
   Iteration 6 (María, 26/07) — the cord is DESKTOP ONLY (≥1024px):
   live head there, static finished seam under reduced-motion. Below
   that width the cord is not built at all by app.js (no spine, no
   plate seams, no tack points) and the page keeps its normal padding
   — the iteration-5 mobile gutter is gone with it. no-JS: nothing.
   ============================================================ */
.weld-layer { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 2; overflow: clip; }
.weld-layer svg { display: block; }
.weld-head { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .weld-head { display: none; } }

/* ---- Plate seams: rows of panels welded along their top edge (the joint) ---- */
.weld-plate__seam {
  fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round;
  opacity: .9; transition: stroke-dashoffset .85s var(--ease), stroke .9s var(--ease) .2s;
}
.weld-plate.is-welded .weld-plate__seam { stroke: #7e8892; }
.weld-plate__point {
  fill: #0e1116; stroke: #97a1ab; stroke-width: 1.4;
  opacity: 0; transition: opacity .5s var(--ease) .35s;
}
.weld-plate.is-welded .weld-plate__point { opacity: 1; }
.js-weld .weld-plate.is-welded .weld-plate__point { animation: weldTack 1s var(--ease) .3s; }
@media (prefers-reduced-motion: reduce) {
  .weld-plate__seam { transition: none; stroke: #7e8892; }
  .weld-plate__point { transition: none; }
}

/* tack points at the tip of each spur — lit as the head welds them */
.weld-tack { fill: #0e1116; stroke: #97a1ab; stroke-width: 1.6; opacity: 0; transition: opacity .45s var(--ease); }
.weld-tack.is-welded { opacity: 1; }
.js-weld .weld-tack.is-welded { animation: weldTack .9s var(--ease); }
@keyframes weldTack {
  0%   { fill: #fff6e6; stroke: #ffd9a8; }
  45%  { fill: var(--signal); stroke: var(--signal-2); }
  100% { fill: #0e1116; stroke: #97a1ab; }
}
@media (prefers-reduced-motion: reduce) { .weld-tack { transition: none; } }

/* headings: a weld-bead underline that draws in as the head reaches it */
.section__title { position: relative; }
.section__title::after {
  content: ""; position: absolute; left: 0; bottom: -.34em; height: 2px; width: 2.6em;
  background: var(--signal); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.section__head--center .section__title::after { left: 50%; transform-origin: center; transform: translateX(-50%) scaleX(0); }
.section__title.is-welded::after { transform: scaleX(1); }
.section__head--center .section__title.is-welded::after { transform: translateX(-50%) scaleX(1); }
.js-weld .section__title.is-welded::after { animation: weldSeam .85s var(--ease); }
@keyframes weldSeam {
  0%   { background: #fff8ec; box-shadow: 0 0 16px 3px rgba(255,224,180,.9); }
  40%  { background: var(--signal-2); box-shadow: 0 0 12px 2px rgba(255,138,61,.55); }
  100% { background: var(--signal); box-shadow: 0 0 0 0 rgba(255,138,61,0); }
}
/* cards / stats flash hot then cool when the head arrives */
.js-weld .leistung.is-welded, .js-weld .safe-card.is-welded, .js-weld .team-card.is-welded { animation: weldCard 1s var(--ease); }
@keyframes weldCard {
  0%   { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal-2), 0 0 30px 2px rgba(255,138,61,.5); }
  100% { box-shadow: 0 0 0 0 rgba(255,138,61,0); }
}
.js-weld .stat.is-welded { animation: weldStat 1s var(--ease); }
@keyframes weldStat {
  0%   { border-top-color: #fff2df; box-shadow: 0 -2px 16px rgba(255,184,120,.5); }
  100% { border-top-color: var(--signal); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the finished cold seam visible, drop only the live head + draw-in */
  .section__title::after { transition: none; }
}

/* ---- Reveals (fail-open) ---- */
[data-reveal].reveal-init { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
[data-reveal].reveal-init.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .leistung, .phase, .site-header, .site-nav, .leistung::before { transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .loader__mark { animation: none; }
}