/* ══════════════════════════════════════════════════════════════════════
   SCROLL-ANIMATION AUF DEN DREI ANGEBOTSSEITEN
   ══════════════════════════════════════════════════════════════════════

   Franky, 26.08.: "nutze dieses bild mit der scrollbaren 3d animation
   bei den 3 seiten unser Angebot."

   Gemeint ist die Technik der Startseite: eine Bildfolge, die an der
   Scrollposition haengt. Sie steckt in hero.js und hero.css und ist
   ueber Datenattribute parametrisiert (`data-frames`, `data-stellen`,
   `data-pfad`). Beides wird hier unveraendert wiederverwendet, damit
   es nur EINE Fassung dieser Mechanik gibt.

   Was vorher da stand: dasselbe Motiv als Standbild
   (`kamui-kaliber.jpg`) hinter dem Auftakt. Jetzt laeuft es.

   Die Bildfolge kommt aus `kopf-16zu9-variante-2-4k-8s.mp4`:
   192 Bilder, 1600x900, rund 20 MB. Zum Vergleich traegt die
   Startseite 502 Bilder mit 22 MB, es bleibt also im selben Rahmen.
   Alle drei Seiten teilen sich dieselbe Folge, der Browser laedt sie
   also nur einmal.

   ── Was hier anders ist als auf der Startseite ────────────────────

   1. Kuerzerer Scrollweg. Die Startseite nimmt sich 320vh, weil sie
      drei Textstationen nacheinander zeigt. Hier steht nur der
      Auftakt, 200vh reichen und die Seite bleibt begehbar.

   2. Der Text liegt IN der Buehne. Auf der Startseite ist das schon
      so; hier stand er als Geschwister neben dem Hintergrund und
      waere weggescrollt, waehrend das Bild stehen bleibt.

   3. Kein eigener Textablauf. Die Zeilen der Startseite blenden nach
      Scrollanteil ein und aus (`data-ab`/`data-bis`). Der Auftakt
      einer Produktseite ist eine Aussage, keine Abfolge, also steht
      er durchgehend. hero.js kommt damit klar: ohne `.kamui-hero__zeile`
      ueberspringt es die Mission.
   ══════════════════════════════════════════════════════════════════ */

/* !important ist hier kein Wettruesten, sondern noetig: das Theme setzt
   `.fr-hero-india { height: 100vh }`, und seine Stylesheets liegen im
   Fastpixel-Block `<noscript id="fpo-styles">`. Die haengt ein Skript
   erst nachtraeglich in den Kopf, also stehen sie in der Kaskade HINTER
   dieser Datei und gewinnen bei gleicher Spezifitaet. Gemessen: ohne
   !important blieb die Sektion bei 900px statt 1800px, und damit gab es
   keinen Scrollweg fuer die Bildfolge.

   Das Theme haengt unten 30px Innenabstand an. Die wuerden die Buehne
   um 30px vom Ende der Sektion abruecken und am Schluss einen Streifen
   Grund zeigen. */
.kamui-hero--angebot {
  height: 200vh !important;
  padding: 0 !important;
}

/* Franky, 26.08.: Standbild statt Sequenz. Die 200vh oben sind Scrollweg
   fuer die Bildfolge - ohne Folge waere eine ganze Bildschirmhoehe leer.

   Die Regel MUSS hier stehen, nicht in hero.css: .kamui-hero--fest und
   .kamui-hero--angebot haben dieselbe Spezifitaet, und angebot-hero.css
   laedt spaeter. Gemessen mit der Regel in hero.css: 1800px statt 900px,
   also genau das leere Loch. Zwei Klassen zusammen schlagen eine. */
.kamui-hero--angebot.kamui-hero--fest {
  height: 100vh !important;
}

/* ── HELLES MOTIV: Textträger hinter der Überschrift ──────────────────

   Franky, 26.08.: Zahnrad zurueck auf Scale Yourself. Das Uhrwerk ist
   ein HELLES Motiv, anders als die dunklen Goldbilder der anderen
   Seiten. Gemessen bei 1440x900: der hellste Grund unter "SCALE
   YOURSELF" liegt bei L=0.643, die Schrift ist Creme mit L=0.761.
   Das sind 1.17:1 - die Schrift steht praktisch auf gleich hellem
   Metall und verschwindet darin.

   Der Schleier von oben ist hier KEINE Loesung: der Block darueber
   erklaert, warum er entfernt wurde (er nimmt dem Motiv die Plastik,
   141 Helligkeitsstufen runter auf 79). Diese Begruendung gilt aber
   fuer eine Decke ueber dem GANZEN Bild.

   Deshalb hier ein begrenzter Trager: eine weiche Tusche-Ellipse nur
   in der Textzone. Das Uhrwerk drumherum bleibt unangetastet, die
   Schrift bekommt Grund. Keine dritte Farbe - nur Tusche mit
   Transparenz, wie die Marke es zulaesst. */
.kamui-hero--hell .kamui-hero__schleier {
  background:
    radial-gradient(
      ellipse 46% 30% at 50% 47%,
      rgba(22, 27, 25, 0.82) 0%,
      rgba(22, 27, 25, 0.68) 45%,
      rgba(22, 27, 25, 0.30) 72%,
      rgba(22, 27, 25, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(22, 27, 25, 0) 0%,
      rgba(22, 27, 25, 0) 72%,
      rgba(22, 27, 25, 0.55) 100%
    ) !important;
}

/* Der Auftakt sitzt jetzt in der Buehne und wird mitgeheftet.
   z-index 3 wie die Mission der Startseite: ueber Bild und Schleier.
   pointer-events bleibt aus, damit der Text keine Klicks abfaengt -
   ausser bei echten Bedienelementen, siehe unten. */
.kamui-hero--angebot .fr-hero-india__inner {
  position: relative;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  max-width: min(90vw, 62rem);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.kamui-hero--angebot .fr-hero-india__inner a,
.kamui-hero--angebot .fr-hero-india__inner button {
  pointer-events: auto;
}

/* Der Trennstrich des Themas steht mittig statt links. */
.kamui-hero--angebot .brxe-divider .line {
  margin-left: auto;
  margin-right: auto;
}

/* Franky, 26.08.: "Die Verdunklung vor dem Zahnrad kann weg, nur unten
   fuer rahmenlosen Uebergang halten."

   Vorher lag hier ein Schleier ueber dem GANZEN Bild (0.55 oben, 0.38
   in der Mitte, 0.55 unten). Er sollte den Text tragen, hat aber das
   Kaliber stumpf gemacht: gemessen bei 1440x900 auf p=903 lag die
   Helligkeitsspanne des Motivs bei 79 Stufen (18..97). Ohne Schleier
   sind es 141 (15..156). Fast die doppelte Tiefe, und genau die
   Plastik, die das Uhrwerk teuer aussehen laesst.

   Der Text braucht ihn auch nicht: der Grund hinter der Ueberschrift
   steigt nur von 43 auf 55, die Schrift ist Creme (237). Der Abstand
   bleibt weit ueber dem, was man zum Lesen braucht.

   Der randlose Uebergang nach unten kommt NICHT von hier, sondern von
   .kamui-hero::after in hero.css (46vh, laeuft in Tusche aus). Der
   bleibt unangetastet - deshalb hier nur noch ein kurzer Fuss, der die
   letzten Prozent abfaengt, damit zwischen Motiv und ::after keine
   Stufe entsteht. Oben und Mitte: nichts. */
.kamui-hero--angebot .kamui-hero__schleier {
  background:
    linear-gradient(to bottom,
      rgba(22, 27, 25, 0) 0%,
      rgba(22, 27, 25, 0) 72%,
      rgba(22, 27, 25, 0.10) 88%,
      rgba(22, 27, 25, 0.22) 100%);
}

/* Bei reduzierter Bewegung steht das Bild still, der Text muss
   trotzdem lesbar sein. hero.js zeigt dann das letzte Bild. */
@media (prefers-reduced-motion: reduce) {
  .kamui-hero--angebot { height: 100vh; }
}