/* ===========================================================================
   Digitalhilfe Deutschland — "So entsteht Ihre Website" scrollytelling
   Apple-/animejs.com-style: a tall section pins a stage; on scroll the eight
   website building blocks fade in across four phases. Image stays static.

   HOW TO TWEAK (no JS needed for these):
   · Label positions  -> edit the inline `--x` / `--y` on each .build-label in
                          unternehmen.html (percent of the image box).
   · Label order/phase -> change the `data-phase` (1–4) on each .build-label.
   · Caption texts     -> edit the .build-caption blocks in unternehmen.html.
   · Phase pacing/dur. -> assets/build-scroll.js (PHASE constant + durations).

   NOTE: For now the lime leader lines come from the background image itself.
   When a label-free image exists, hide the image's lines and enable the
   `.build-label::after` connector (commented at the bottom of this file).
   =========================================================================== */

.build-scroll{
  position:relative;
  height:400vh;              /* scroll length that drives the timeline */
  padding-block:0;           /* override generic section padding so the sticky
                                stage pins from scroll 0 (no upward "settling") */
}

/* The stage stays put while the section scrolls past it */
.build-stage{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  display:block;
  perspective:1600px; perspective-origin:50% 44%;   /* enables the figure's 3D tilt */
}

/* Intro (top of the pinned stage) */
.build-intro{
  position:absolute; top:clamp(6.5rem, 13vh, 8.5rem); left:50%; transform:translateX(-50%);
  width:min(74rem, calc(100% - 2.5rem)); text-align:center; z-index:3;   /* zentriert über dem MacBook (User-Wunsch), klärt die fixe Navbar */
}
.build-intro .section-title{font-size:clamp(1.8rem,4vw,3rem); margin-top:.5rem;}

/* ---- Centered image ("visual") ---- */
.build-figure{
  position:absolute; left:50%; top:16.5rem; bottom:4rem; transform:translateX(-50%);
  height:auto; aspect-ratio:1443/1920; max-width:92vw;
  margin:0; transform-style:preserve-3d; will-change:transform;   /* fills the space between intro and scrubber, stays fully in view */
}
/* Transparent cut-out floats on the dark stage; drop-shadow grounds it */
.build-img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
/* Soft brand halo behind the floating device */
.build-glow{
  position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 38% at 52% 40%, rgba(192,75,214,.30), transparent 70%),
    radial-gradient(34% 30% at 66% 28%, rgba(195,216,48,.18), transparent 72%);
  filter:blur(26px);
}
/* Brand rocket — steht jetzt allein mittig über dem Geraet (der eingebrannte
   Schriftzug im Bild wurde entfernt). Nudge via left/top/width here. */
.build-rocket{
  position:absolute; left:49%; top:2.5%; width:38%; height:auto; z-index:2;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
}

/* While the build diagram is on screen, fade the ambient WebGL glow + dial ring
   so the clean MacBook diagram is the clear focus (toggled by build-scroll.js).
   :not([data-motion="off"]) keeps the manual "Effekte aus" state authoritative. */
#scene, #dial{ transition:opacity .6s ease; }
html.build-in-view:not([data-motion="off"]) #scene{ opacity:.12; }
html.build-in-view:not([data-motion="off"]) #dial{ opacity:.10; }

/* ---- Label chips (real HTML over the diagram) ---- */
.build-labels{position:absolute; inset:0; margin:0; padding:0; list-style:none; z-index:2;}
/* li = positioning + centering ONLY (anime never overwrites this transform) */
.build-label{
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  transform:translate(-50%,-50%);
}
/* span = the visible pill — this is what fades + translates in on scroll */
.build-label > span{
  display:inline-flex; align-items:center; gap:.36rem; white-space:nowrap;
  padding:.26rem .58rem; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.005em;
  color:#fff; background:rgba(13,8,19,.94);     /* opaque enough to cover baked text */
  border:1px solid rgba(195,216,48,.45);
  box-shadow:0 5px 14px -8px rgba(0,0,0,.7), 0 0 14px -8px rgba(195,216,48,.5);
  backdrop-filter:blur(2px); will-change:transform, opacity;
}
.build-label > span::before{        /* small lime anchor dot */
  content:""; width:.42rem; height:.42rem; border-radius:50%; flex:none;
  background:var(--lime); box-shadow:0 0 9px var(--lime);
}

/* ---- Phase captions (only one visible at a time while scrolling) ---- */
.build-captions{
  position:absolute; left:3%; top:50%; transform:translateY(-50%);
  width:min(21rem, 28%); z-index:3;
}
.build-caption{
  position:absolute; left:0; top:0; margin:0;
  padding:1.4rem 1.5rem; border-radius:1.1rem;
  background:linear-gradient(160deg, rgba(30,17,42,.72), rgba(16,9,24,.55));
  border:1px solid var(--line); backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
.build-caption__phase{
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime-lit); margin-bottom:.5rem;
}
.build-caption p{font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); line-height:1.3; margin:0;}

/* ===========================================================================
   Mobil (<=767px) UND reduced-motion: KEIN Pin (sticky ist auf Handys zu
   fehleranfaellig). Robust gestapelt + linksbuendig: Bild, dann die acht
   Stichwoerter, dann die vier Phasen. Ohne JS ist alles sofort sichtbar.
   =========================================================================== */
@media (max-width:767px), (prefers-reduced-motion:reduce){
  .build-scroll{ height:auto; }
  /* mehr Platz oben (klaert den fixen Header, Eyebrow nicht abgeschnitten); mobil zentriert */
  .build-stage{ position:static; height:auto; overflow:visible; padding:5rem 1.25rem 1.75rem; perspective:none; text-align:center; }
  .build-intro{ position:static; transform:none; width:auto; text-align:center; }
  .build-intro .eyebrow{ margin-bottom:1rem; }
  .build-intro .section-title{ font-size:clamp(1.6rem,6.4vw,2.2rem); margin-top:.2rem; }

  /* Geraet zentriert, fuellt die Inhaltsbreite */
  .build-figure{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
    height:auto; aspect-ratio:auto; max-height:none; width:100%; max-width:400px; margin:1.9rem auto 1.75rem; }
  .build-img{ height:auto; }
  .build-glow{ display:none; }
  /* Rakete neben den Schriftzug ueber dem MacBook, wie am Desktop */
  .build-rocket{ width:42%; top:0%; left:49%; right:auto; }

  /* Stichwoerter als zentrierte, umgebrochene Liste */
  .build-labels{ position:static; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width:none; margin:0 auto 2rem; }
  .build-label{ position:static; transform:none; }
  .build-label > span{ font-size:.8rem; padding:.34rem .7rem; }

  /* Phasen als gestapelte Karten, zentriert */
  .build-captions{ position:static; transform:none; width:auto; height:auto; margin:0; display:grid; gap:1rem; text-align:center; }
  .build-caption{ position:static; text-align:center; }
}

/* Sanftes Reveal beim Scrollen — NUR Mobil + Motion erlaubt, per JS (.reveal-on)
   aktiviert. Ohne JS oder bei reduced-motion bleibt alles sichtbar (Fallback). */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  /* Geraet + Titel bleiben sofort sichtbar; nur Stichwoerter + Phasen blenden
     beim Scrollen ein -> klarer Scroll-Effekt, nie eine leere Flaeche. */
  .build-stage.reveal-on .build-label,
  .build-stage.reveal-on .build-caption{
    opacity:0; transform:translateY(22px);
    transition:opacity .55s ease, transform .55s ease;
  }
  .build-stage.reveal-on .in-view{ opacity:1; transform:none; }
}

/* No-JS: keep the build visible & stacked even though .build-scroll is 400vh */
.no-js .build-scroll{height:auto;}
.no-js .build-stage{position:static; height:auto; overflow:visible; padding:4rem 0;}
.no-js .build-figure{position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; height:auto; aspect-ratio:auto; width:min(440px,86vw); margin:2rem auto;}
.no-js .build-img{height:auto;}
.no-js .build-glow{display:none;}
.no-js .build-labels{position:static; display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; max-width:38rem; margin:0 auto 2rem;}
.no-js .build-label{position:static; transform:none;}
.no-js .build-captions{position:static; transform:none; width:min(40rem,92%); margin:0 auto; display:grid; gap:1rem;}
.no-js .build-caption{position:static;}

/* ===========================================================================
   OPTIONAL: custom CSS leader lines for a LABEL-FREE background image.
   Enable by setting --len (line length) and --angle on each .build-label and
   removing the `display:none` below. Then the chip draws its own lime line.
   =========================================================================== */
.build-label::after{
  content:""; display:none;          /* enable for a clean (label-free) image */
  position:absolute; left:50%; top:50%;
  width:var(--len,0); height:1.5px; transform-origin:left center;
  transform:rotate(var(--angle,0deg));
  background:linear-gradient(90deg, var(--lime), transparent);
}