/* =========================================================================
   Variante F — "Der Aufbau"
   Kernidee: Beim Scrollen entsteht aus der leeren Halle eine ganze Produktion.
   Die sechs Gewerke sind die Animation, nicht ein Kachelraster daneben.
   Farben je Gewerk von lleyendecker.de übernommen.
   ========================================================================= */

/* --gw ist die Farbe des aktuellen Gewerks. Als @property registriert,
   damit sie weich überblendet statt zu springen. */
@property --gw {
  syntax: '<color>';
  inherits: true;
  initial-value: #ee7203;
}

:root { --gw: #ee7203; }

.sec { padding: var(--pad-y) var(--pad-x); max-width: var(--maxw); margin-inline: auto; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 95; }
.progress span {
  display: block; height: 100%; background: var(--orange);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; max-width: none; padding: 0;
  display: grid; align-content: end; isolation: isolate; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.75); }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.8) 78%, #000 100%),
    radial-gradient(115% 80% at 50% 115%, rgba(238,114,3,.2), transparent 60%);
}
.hero-in {
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: clamp(7rem,14vh,9rem) var(--pad-x) clamp(2.5rem,6vh,4rem);
}
.hero-eyebrow { color: var(--grey); margin-bottom: clamp(1.25rem,3vh,2rem); }
.hero-eyebrow b { color: var(--orange); font-weight: 500; }
.hero-title {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.9rem, 11.5vw, 9.5rem); line-height: .86; letter-spacing: -.048em;
}
.hero-title span { display: block; }
.hero-title i { color: var(--orange); font-style: normal; }
.hero-lede {
  font-family: var(--ff-display); font-weight: 200;
  font-size: clamp(1.1rem, 1vw + .9rem, 1.6rem); line-height: 1.4;
  max-width: 42ch; margin-top: 1.75rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-hint { display: flex; align-items: center; gap: .8rem; color: var(--grey-dim); margin-top: clamp(2rem,5vh,3.5rem); }
.hero-hint::before {
  content: ""; width: 46px; height: 1px; background: var(--orange);
  animation: growline 2.4s var(--ease) infinite;
}
@keyframes growline { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

/* =========================================================================
   Der Aufbau — Text links, Bühne rechts. Kein Überlagern mehr.
   ========================================================================= */
.build { position: relative; max-width: none; padding: 0; border: 0; }
.build-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  transition: --gw .55s var(--ease);
}
@media (min-width: 1000px) {
  .build-sticky { grid-template-columns: minmax(20rem, 34%) minmax(0, 1fr); }
}

.build-panel {
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem;
  padding: clamp(5.5rem,12vh,7.5rem) clamp(1.25rem,3vw,2.5rem) clamp(1.75rem,4vh,2.5rem) var(--pad-x);
  position: relative; z-index: 2; min-width: 0;
}
.build-top .eyebrow { color: var(--gw); margin: 0 0 .5rem; transition: color .55s var(--ease); }
.build-top .sec-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.stage-cards { position: relative; align-self: center; min-height: 19rem; }
.stage-card {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.stage-card.is-on { opacity: 1; transform: none; }
.stage-card .num { color: var(--gw); font-size: .7rem; font-weight: 600; letter-spacing: .2em; transition: color .55s var(--ease); }
.stage-card h3 {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1; letter-spacing: -.04em; margin-top: .55rem;
}
.stage-card .claim {
  font-family: var(--ff-display); font-weight: 200; color: var(--gw);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem); margin-top: .4rem;
  transition: color .55s var(--ease);
}
.stage-card p.txt { color: var(--grey); font-size: .95rem; margin-top: 1rem; }

/* Ablaufleiste */
.stage-steps { display: grid; gap: .55rem; }
.stage-step {
  display: grid; grid-template-columns: 1.2rem 1fr auto; align-items: center; gap: .7rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-dim); transition: color .35s var(--ease);
}
.stage-step .bar { grid-column: 1 / -1; height: 2px; background: var(--line); overflow: hidden; }
.stage-step .bar i { display: block; height: 100%; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.stage-step .no { font-variant-numeric: tabular-nums; opacity: .6; }
.stage-step.is-done { color: var(--grey); }
.stage-step.is-done .bar i { transform: scaleX(1); }
.stage-step.is-on { color: var(--gw); }
.stage-step.is-on .bar i { transform: scaleX(1); }
@media (max-width: 999px) {
  .stage-steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3rem; }
  .stage-step { grid-template-columns: 1fr; font-size: 0; }
  .stage-step .bar { margin: 0; }
  .stage-step .no, .stage-step .nm { display: none; }
}

/* Bühne */
.stage-wrap { position: relative; display: grid; place-items: center; min-width: 0; }
@media (max-width: 999px) {
  /* Bühne bekommt den freien Platz, der Textblock bleibt kompakt darunter —
     andersherum wächst nur die Lücke zwischen Text und Ablaufleiste. */
  /* Bühne und Text als ein mittig sitzender Block — eine querformatige Szene
     wird auf einem Hochkant-Display nun mal nicht höher, also wenigstens gewollt gesetzt. */
  .build-sticky { grid-template-rows: auto auto; align-content: center; gap: 1.5rem; }
  .stage-wrap { order: -1; align-items: center; padding: 3rem 0 0; }
  .stage-svg { width: 100%; height: auto; }
  .build-panel {
    padding: 0 var(--pad-x) 1.5rem; gap: .9rem;
    grid-template-rows: auto auto; align-content: end;
  }
  .stage-cards { min-height: 8.5rem; align-self: start; }
  .stage-card p.txt { display: none; }
  .build-top { display: none; }
}
.stage-svg { width: 100%; height: 100%; max-height: 100%; }
.lyr { transform-box: view-box; }

.hall    { opacity: var(--t); }
.floor   { opacity: var(--t); }
.tower   { transform-origin: 50% 100%; transform: scaleY(var(--t)); opacity: var(--t); }
.trussM  { transform: translateY(calc((var(--t) - 1) * 300px)); opacity: var(--t); }
.trussB  { transform: translateY(calc((var(--t) - 1) * 200px)); opacity: calc(var(--t) * .9); }
.motor   { opacity: var(--t); transform: translateY(calc((var(--t) - 1) * -30px)); }
.head    { transform-origin: 50% 0; transform: translateY(calc((var(--t) - 1) * 46px)); opacity: var(--t); }
.headB   { opacity: var(--t); }
.uplight { transform-origin: 50% 100%; transform: scaleY(var(--t)); opacity: var(--t); }
.beam    { transform-origin: 50% 0; transform: scaleY(var(--t)); opacity: calc(var(--t) * .9); }
.beamB   { transform-origin: 50% 100%; transform: scaleY(var(--t)); opacity: calc(var(--t) * .8); }
.tile    { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(calc(.3 + .7 * var(--t))); opacity: var(--t); }
.side    { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(calc(.2 + .8 * var(--t))); opacity: var(--t); }
.spk     { transform-origin: 50% 0; transform: translateY(calc((var(--t) - 1) * 130px)); opacity: var(--t); }
.sub     { transform: translateY(calc((1 - var(--t)) * 40px)); opacity: var(--t); }
.wedge   { opacity: var(--t); }
.kin     { transform: translateY(calc((var(--t) - 1) * -240px)); opacity: var(--t); }
.kinbar  { transform: translateY(calc((var(--t) - 1) * -180px)); opacity: var(--t); }
.crowd   { opacity: calc(var(--t) * .96); transform: translateY(calc((1 - var(--t)) * 34px)); }
.haze    { opacity: calc(var(--t) * .85); }
.laserw  { opacity: calc(var(--t) * .9); }
.pyro    { opacity: var(--t); }
.confetti { opacity: var(--t); }

/* Dauerbewegungen laufen erst, wenn die Ebene sichtbar ist (is-live vom Skript). */
.sway, .bob, .gerb, .laser, .conf { animation-play-state: paused; }
.is-live .sway, .is-live .bob, .is-live .gerb,
.is-live .laser, .is-live .conf { animation-play-state: running; }

.sway {
  transform-box: view-box;
  animation: sway 11s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

.bob {
  transform-box: view-box;
  animation: bob 6.5s ease-in-out infinite alternate;
}
@keyframes bob { from { transform: translateY(-14px); } to { transform: translateY(16px); } }

.gerb {
  transform-box: view-box;
  animation: gerb 2.6s ease-out infinite;
}
@keyframes gerb {
  0%   { transform: scaleY(.15); opacity: 0; }
  18%  { transform: scaleY(1.05); opacity: 1; }
  70%  { transform: scaleY(.92); opacity: .55; }
  100% { transform: scaleY(.15); opacity: 0; }
}

.laser {
  transform-box: view-box;
  animation: laser 7s ease-in-out infinite alternate;
}
@keyframes laser {
  from { transform: rotate(-7deg); opacity: .25; }
  to   { transform: rotate(7deg);  opacity: .7; }
}

.conf {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fall {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: .9; }
  to   { transform: translateY(980px) rotate(760deg); opacity: .15; }
}

.reduce .sway, .reduce .bob, .reduce .gerb, .reduce .laser, .reduce .conf { animation: none !important; }
.no-js .lyr, .reduce .lyr { --t: 1 !important; }
.no-js .build-sticky, .reduce .build-sticky { position: static; height: auto; }
.no-js .stage-card, .reduce .stage-card { position: static; opacity: 1; transform: none; margin-bottom: 1.75rem; }
.no-js .stage-cards, .reduce .stage-cards { min-height: 0; }

/* ---------- Zahlen ---------- */
.counters-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
@media (min-width: 780px) { .counters-in { grid-template-columns: repeat(4, 1fr); } }
.counter .v {
  display: block; font-family: var(--ff-display); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.counter .k { color: var(--grey-dim); margin-top: .6rem; display: block; }

/* ---------- Unternehmen ---------- */
.about-in { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 900px) { .about-in { grid-template-columns: 45fr 55fr; } }
.about-fig { margin: 0; overflow: hidden; }
.about-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about .facts { margin-top: clamp(2rem,4vw,3rem); }
@media (min-width: 900px) { .about .facts { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   Portfolio: sechs Schaustücke, danach die vollständige Liste
   ========================================================================= */
.work-featured { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
@media (min-width: 1100px) { .work-featured { grid-template-columns: repeat(3, 1fr); } }
.feat { position: relative; overflow: hidden; align-self: start; }
.feat.is-hidden { display: none; }
.feat-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.feat-img img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.82);
  transition: transform .75s var(--ease), filter .5s var(--ease);
}
.feat:hover .feat-img img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.feat-cap {
  position: absolute; inset: auto 0 0 0; padding: 2rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 55%);
}
.feat-cat { color: var(--orange); font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.feat-cap h3 {
  font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; margin-top: .45rem;
}
.feat-cap .meta { display: block; margin-top: .3rem; color: var(--grey); font-size: .84rem; }

.ref-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: clamp(3rem,6vw,4.5rem) 0 1.5rem; padding-top: clamp(2rem,4vw,3rem);
  border-top: 1px solid var(--line);
}
.ref-head h3 {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; font-size: clamp(1.1rem,2vw,1.4rem);
}
/* Der Hinweis gilt nur für Zeigergeräte — auf dem Handy gibt es kein Überfahren. */
.ref-hint { color: var(--grey-dim); }
@media (max-width: 900px), (hover: none) { .ref-hint { display: none; } }

.ref-group { margin-bottom: 2.25rem; }
.ref-group.is-hidden { display: none; }
.ref-group > h4 {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gw); margin-bottom: .35rem; transition: color .55s var(--ease);
}
.ref-group > h4 .cnt { color: var(--grey-dim); font-weight: 500; letter-spacing: .1em; }

/* Schmal: Kunde in Zeile 1, Anlass und Jahr teilen sich Zeile 2 — sonst braucht
   jede Referenz drei Zeilen Höhe und die Liste wird auf dem Handy wieder lang. */
.ref-row {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .9rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
  cursor: default; transition: background .25s var(--ease);
}
.ref-client { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .ref-row { grid-template-columns: minmax(0,7fr) minmax(0,9fr) 5rem; align-items: baseline; }
  .ref-client { grid-column: auto; }
}
.ref-row:hover { background: rgba(255,255,255,.035); }
.ref-client { font-family: var(--ff-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.ref-event { color: var(--grey); font-size: .9rem; }
.ref-year { color: var(--grey-dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .ref-year { text-align: right; } }

/* Vorschaubild folgt dem Zeiger */
.ref-preview {
  position: fixed; z-index: 120; width: 300px; aspect-ratio: 3 / 2;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.96);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  border: 1px solid var(--line-2); background: var(--surface); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
.ref-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ref-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px), (hover: none) { .ref-preview { display: none; } }

/* ---------- News ---------- */
.news-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Jobs ---------- */
.jobs-grid { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (min-width: 900px) { .jobs-grid { grid-template-columns: 1fr 1fr; } }
.jobs-fig { margin: 2rem 0 0; overflow: hidden; }
.jobs-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.apprentice { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.5rem,3vw,2.15rem); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.05fr .95fr; } }