/* ==========================================================================
   Welle an der Hero-Unterkante
   Markup: <div class="hero__wave" aria-hidden="true"> + assets/svg/wave-inline.html
   Geometrie: assets/svg/wave-geometry.json (Periode 1440, Stoßlinie y = 0)
   Ohne JS: statische Welle mit linearer CSS-Drift nach rechts (Fallback).
   Mit JS: wave.js setzt data-wave und steuert Lage, Heben und Tiefe organisch
   (Gerstner-Prinzip); die CSS-Keyframes sind dann aus.
   ========================================================================== */

.hero__wave {
  /* Skalierung: --wave-scale = clamp(0.5, 100vw / 1440px, 1).
     Als Länge notiert (1 SVG-Einheit = 1px × Skalierung), weil Länge ÷ Länge
     noch nicht in allen Browsern funktioniert. Gleichmäßig in x und y, Bögen bleiben rund. */
  --wave-unit: clamp(0.5px, 100vw / 1440, 1px);

  position: absolute;
  left: 0;
  /* Die Stoßlinie (y = 0) liegt exakt auf der Hero-Unterkante; der SVG-Streifen
     beginnt bei y = −2 und überlappt die rote Fläche damit um 1 bis 2 px (keine Haarlinie). */
  top: calc(100% - 2 * var(--wave-unit));
  z-index: 1;
  width: 100%;
  /* viewBox-Höhe 68 (y −2 … 66): Platz für die tiefste Bogenhöhe der statischen Welle (55,425). */
  height: calc(68 * var(--wave-unit));
  margin: 0;
  padding: 0;
  overflow: hidden;           /* schneidet die überbreite Kachelreihe horizontal ab */
  contain: strict;            /* Neuzeichnen der Welle bleibt auf diesen Streifen begrenzt */
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

/* Mit JS: viewBox y −2 … 78 (wave.js setzt sie passend), Platz für die größte
   Tiefe (55,425 × 1,162 × 1,10 ≈ 70,9) plus Heben (2). */
.hero__wave[data-wave] {
  height: calc(80 * var(--wave-unit));
}

.hero__wave-svg {
  display: block;
  /* 6 Kacheln à 1440 Einheiten: deckt bei voller Drift Viewports bis 5 × 1440 = 7200 px ab
     (bei Skalierung 1, z. B. 32:9-Monitore oder herausgezoomte Fenster). */
  width: calc(8640 * var(--wave-unit));
  max-width: none;            /* gegen globale „svg { max-width: 100% }“-Resets */
  height: 100%;
  overflow: visible;
  transform: translate3d(calc(-1440 * var(--wave-unit)), 0, 0);
  animation: hero-wave-drift 28s linear infinite;
  will-change: transform;
}

.hero__wave-path {
  fill: var(--accent, #FF5029);
}

/* Fallback ohne JS: Drift nach rechts, genau eine Periode (1440 Einheiten) pro
   Durchlauf, nahtlos, unabhängig von der Anzahl der Kacheln. */
@keyframes hero-wave-drift {
  from { transform: translate3d(calc(-1440 * var(--wave-unit)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Mit JS: Lage (--wave-x, −1440 … 0) und Heben (--wave-y, 0 … 2) in SVG-Einheiten,
   pro Frame von wave.js gesetzt. Nur transform, kein Layout. */
.hero__wave[data-wave="running"] .hero__wave-svg,
.hero__wave[data-wave="paused"] .hero__wave-svg {
  animation: none;
  transform: translate3d(calc(var(--wave-x, -1440) * var(--wave-unit)), calc(var(--wave-y, 0) * var(--wave-unit)), 0);
}

.hero__wave[data-wave="static"] .hero__wave-svg {
  animation: none;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero__wave .hero__wave-svg,
  .hero__wave[data-wave] .hero__wave-svg {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

@media print {
  .hero__wave .hero__wave-svg,
  .hero__wave[data-wave] .hero__wave-svg {
    animation: none;
    transform: none;
  }
}