/* Scroll-Erlebnis ab dem Hero. Die Engine (scrollcraft) liegt in einer niedrigen Cascade-Ebene,
   damit ihr Reset keine Regel dieser Seite überschreibt. Alles hier ist Seitenstil. */
@import url("engine/scrollcraft.css") layer(sc);

/* Engine-Tokens auf die Marke gelegt, falls eine Engine-Regel doch durchgreift. */
:root {
  --sc-canvas: var(--surface-base);
  --sc-ink: var(--text);
  --sc-accent: var(--himmelblau);
  --sc-font-text: var(--font-body);
  --sc-font-display: var(--font-head);
}
/* Der Engine-Reset setzt Medien auf display:block. Die Seite hat Icons inline. */
svg,
video,
canvas {
  display: revert;
  max-width: revert;
}

/* ---------- Hero: Text steigt gestaffelt ein (Überschrift, Unterzeile, Aktionen) ---------- */
/* Reine CSS-Animation beim Laden, ohne JS-Abhängigkeit. fill-mode "backwards" hält den Startzustand nur während
   der Verzögerung, danach gilt der normale Stil. Ohne .js (kein Skript) bleibt alles sichtbar. */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
}
.js .hero-content > * {
  animation: hero-in 1s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
}
.js .hero-content > :nth-child(1) { animation-delay: 150ms; }
.js .hero-content > :nth-child(2) { animation-delay: 330ms; }
.js .hero-content > :nth-child(3) { animation-delay: 510ms; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-content > :nth-child(n) {
    animation: hero-fade 0.4s linear backwards;
  }
  @keyframes hero-fade {
    from {
      opacity: 0;
    }
  }
}

/* ---------- Herkunft: der Kamm wird über den Strichversatz gezeichnet ---------- */
/* Der Strich skaliert nicht (vector-effect), also zählt die Länge in Bildschirmpixeln. scroll-init.js misst sie
   (--ridge-len) und liefert --ridge-p: 0, sobald der ganze Kamm im Fenster steht, 1 nach 40 % Fensterhöhe Scroll.
   Mindestens 0,2 % bleiben gezeichnet, damit der runde Strichanfang immer sichtbar ist.
   Ohne Messung (kein JS) steht die Linie fertig da. */
.origin-ridge.is-measured path {
  stroke-dasharray: var(--ridge-len) calc(var(--ridge-len) * 2);
  stroke-dashoffset: calc(var(--ridge-len) * (1 - max(0.002, var(--ridge-p, 1))));
}
.origin-container.is-driven .origin-b {
  --b: clamp(0, calc((var(--ridge-p, 1) - 0.55) * 3), 1);
  opacity: var(--b);
  transform: translateY(calc((1 - var(--b)) * 0.9rem));
}
@media (prefers-reduced-motion: reduce) {
  .origin-ridge.is-measured path {
    stroke-dashoffset: 0;
  }
  .origin-container.is-driven .origin-b {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Wertschöpfung: das Windrad dreht sich im Uhrzeigersinn mit dem Scroll ---------- */
/* --sc-p (0..1) kommt vom Engine-Akt der Sektion. Der Rotor dreht sich um die Nabe, der Mast bleibt stehen. */
.share-windrad .windrad-rotor {
  transform-box: view-box;
  transform-origin: 36.1185px 33.3003px;
  transform: rotate(calc(var(--sc-p, 0) * 450deg));
}
@media (prefers-reduced-motion: reduce) {
  .share-windrad .windrad-rotor {
    transform: none;
  }
}

/* ---------- Team: Welle. Geschäftsführung und Team steigen auf, jede Spalte etwas später. ---------- */
.team .person[data-sc-in] {
  transform: translateY(2.4rem);
  transition:
    opacity 0.9s var(--ease) var(--wave, 0ms),
    transform 1.1s var(--ease) var(--wave, 0ms);
}
.team .person[data-sc-in].sc-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .team .person[data-sc-in] {
    transform: none;
    transition: opacity 0.3s var(--ease);
  }
}
.team-lead .person:nth-child(2) { --wave: 110ms; }
.team-lead .person:nth-child(3) { --wave: 220ms; }
@media (max-width: 899px) {
  .team-lead .person:nth-child(n) { --wave: 0ms; }
}
.team-rest .person:nth-child(5n + 2) { --wave: 110ms; }
.team-rest .person:nth-child(5n + 3) { --wave: 220ms; }
.team-rest .person:nth-child(5n + 4) { --wave: 330ms; }
.team-rest .person:nth-child(5n + 5) { --wave: 440ms; }
@media (max-width: 1099px) {
  .team-rest .person:nth-child(n) { --wave: 0ms; }
  .team-rest .person:nth-child(3n + 2) { --wave: 140ms; }
  .team-rest .person:nth-child(3n + 3) { --wave: 280ms; }
}
@media (max-width: 639px) {
  .team-rest .person:nth-child(n) { --wave: 0ms; }
  .team-rest .person:nth-child(2n + 2) { --wave: 140ms; }
}