/* ── Produktvideo ───────────────────────────────────────────── */

/* Der Mitschnitt einer echten Sitzung. Vorher stand auf beiden Seiten, die ihn
   heute zeigen, ein Nachbau aus Text — das echte Bild schlaegt jeden Nachbau.

   Diese Datei steht neben landing.css und produkt.css, weil der Block auf
   beiden Seiten derselbe ist: Startseite und Produktseite. Zweimal dasselbe
   gepflegt heisst nach der ersten Aenderung zwei verschiedene Videobuehnen.

   Alles hier ist eigenstaendig. Die Masse der Startseite (`--v1`, `--s`)
   stehen unter `.landing-page` in landing.css und fehlen anderswo —
   deshalb tragen sie hier ihren Ruhewert als Rueckfallwert. Auf der Startseite
   greift damit weiter die Leiter, die dort auf 640px kleiner wird, auf jeder
   anderen Seite die feste Groesse.

   Das Video steht ohne aeussere Flaeche auf dem Papier. Ein Versuch mit einem
   getoenten Rahmen darum (nach dem Vorbild von cursor.com) ist wieder raus:
   Auf einer Seite, die sonst nur Haarlinien kennt, war er der einzige farbige
   Kasten und zog mehr Aufmerksamkeit auf sich als der Inhalt darin. */
.lp-stage {
  /* Eine Rastereinheit plus eine Rem: Der Hero-Block oben haelt mit 18/20px
     zusammen, hier soll die Naht dazwischen deutlich groesser sein. */
  margin: calc(var(--v1, 33.6px) + 1rem) 0 0;
}

.lp-stage-frame {
  /* Die Hoehe der Fensterleiste steht hier, weil mehrere Regeln sie brauchen:
     die Leiste selbst, der Knopf, der um sie versetzt in der Mitte des Bildes
     sitzt, und derselbe Knopf auf dem Telefon, wo er in der Leiste liegt. */
  --lp-bar: 34px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  /* Derselbe Radius wie Karten und Tafeln: Das Video ist jetzt wieder eine
     Flaeche erster Ordnung und keine, die in einer anderen sitzt. */
  border-radius: 10px;
  background: #0d0f0e;
  box-shadow: 0 24px 70px rgba(28, 32, 34, 0.18), inset 0 1px rgba(255, 255, 255, 0.06);
  line-height: 0;
}

/* Die Leiste macht aus dem Videoblock ein Fenster. Cursor hat dieselbe
   Zutat ("Cursor Desktop" mit drei Punkten) — sie ist der Unterschied
   zwischen „hier laeuft ein Video" und „hier steht ein Programm". Die Toene
   liegen dicht am Videohintergrund (#0d0f0e), damit die Leiste zum Fenster
   gehoert und nicht als eigener Balken davorliegt. */
.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lp-bar);
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #15181a;
}

.lp-window-dots {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.lp-window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.lp-window-bar p {
  margin: 0 34px 0 0;
  flex: 1;
  color: rgba(255, 255, 255, 0.42);
  font-size: calc(var(--s, 1) * 11px);
  line-height: 1;
  text-align: center;
}

.lp-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: filter 160ms ease;
}

/* Das Bild geht zurueck, sobald die Maus im Fenster steht: Der Pfeil liegt
   blank darauf, und je nach Stelle im Video traf er vorher auf Weiss. Gedimmt
   wird das Video selbst und nicht mit einer Lage darueber — dann bleiben
   Fensterleiste und Pfeil hell, statt mit abzusacken.

   Die Abfrage steht davor, weil beruehrbare Geraete `:hover` nach dem Tippen
   haengen lassen („sticky hover“): Ohne sie bleibt das Video nach einem
   Fingertipp dunkel, bis irgendwo anders hingetippt wird. Und gebraucht wird
   das Abdunkeln dort ohnehin nicht — der Pfeil steht auf Touch in der Leiste
   und nicht auf dem Bild (siehe `@media (hover: none)` weiter unten). */
@media (hover: hover) {
  .lp-stage-frame:hover .lp-video,
  .lp-stage-frame:focus-within .lp-video {
    filter: brightness(0.6);
  }
}

/* Der Knopf setzt das Video zurueck (siehe video.js). Er liegt in der Mitte des
   Bildes, dort, wo die Maus beim Hinsehen ohnehin steht und wo jeder eine
   Videobedienung sucht.

   Es steht nur der Pfeil da — kein Kreis, keine Flaeche, kein Rand. Ueber
   einem laufenden Bild ist jede Schaltflaeche ein zweiter Kasten; die Linie
   allein sagt dasselbe. Lesbar bleibt sie ueber hellen Stellen durch den
   Schlagschatten, nicht durch eine Unterlage.

   In Ruhe liegt er unsichtbar da: Das Video laeuft von allein, also braucht
   niemand eine Bedienung zu sehen, solange er nichts will. Wer mit der Maus
   ins Fenster geht, bekommt sie. Ohne Zeiger geht das nicht — was dort
   stattdessen gilt, steht weiter unten unter `@media (hover: none)`.

   Zentriert wird mit `inset` und `margin: auto` statt mit `transform`: Auf
   `button:active` legt app.css ein `translateY(1px)`, das eine Verschiebung
   hier ueberschriebe und den Knopf beim Druecken in die Ecke springen liesse.
   Der Versatz oben um die Leiste haelt ihn auf der Mitte des Bildes. */
.lp-video-restart {
  position: absolute;
  inset: var(--lp-bar) 0 0;
  width: 64px;
  height: 64px;
  min-height: 0;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  line-height: 0;
  opacity: 0;
  /* Unsichtbar heisst auch unklickbar — sonst faengt eine Stelle mitten im
     Video Klicks ab, an der nichts zu sehen ist. Die Tastatur kommt trotzdem
     hin: `pointer-events` gilt nur fuer den Zeiger. */
  pointer-events: none;
  /* Der Schatten haengt an der Linie, nicht am Kasten — deshalb `filter` und
     nicht `box-shadow`. Er traegt den Pfeil ueber helle Stellen des Videos. */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
  transition: opacity 160ms ease, color 160ms ease;
}

.lp-video-restart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Der Weg ueber die Tastatur gilt auf jedem Geraet, also ohne Abfrage. */
.lp-stage-frame:focus-within .lp-video-restart {
  opacity: 1;
  pointer-events: auto;
}

/* Alles, was am Zeiger haengt, steht beisammen — aus demselben Grund wie oben:
   Was hier ohne Abfrage staende, bliebe auf dem Telefon nach einem Tipp
   haengen. */
@media (hover: hover) {
  .lp-stage-frame:hover .lp-video-restart {
    opacity: 1;
    pointer-events: auto;
  }

  /* Klasse plus Pseudoklasse wiegt schwerer als `button:hover` aus app.css —
     sonst legte die Grundregel dem Pfeil die helle Knopffarbe unter. */
  .lp-video-restart:hover {
    border-color: transparent;
    background: none;
    color: #fff;
  }
}

/* Ohne Zeiger gibt es kein „draufgehen“: Der Knopf muss auf dem Telefon
   stehen bleiben, sonst waere er dort gar nicht zu erreichen. In der Mitte des
   Bildes hiesse das aber, dass der Pfeil dauerhaft auf dem laufenden Video
   liegt — genau das, was der Hover-Weg auf dem Rechner vermeidet, und das
   Abdunkeln, das ihn dort lesbar macht, gibt es hier bewusst nicht.

   Also wandert er auf beruehrbaren Geraeten in die Fensterleiste. Die haelt
   rechts ohnehin 34px frei, damit ihre Beschriftung mittig bleibt (siehe
   `.lp-window-bar p`) — genau dort sitzt er, sichtbar und erreichbar, ohne dem
   Bild etwas wegzunehmen. Die Leiste selbst ist `aria-hidden`; der Knopf liegt
   als Geschwister darueber und bleibt fuer Screenreader wie zuvor. */
@media (hover: none) {
  .lp-video-restart {
    inset: 0 0 auto auto;
    width: var(--lp-bar);
    height: var(--lp-bar);
    margin: 0;
    /* Die 34px der Leiste sind der Anfassbereich, der Pfeil darin misst 16px:
       gut anderthalbmal die 11px der Beschriftung daneben. In Leistengroesse
       waere er dort ein Fremdkoerper. */
    padding: 9px;
    color: rgba(255, 255, 255, 0.55);
    /* Auf der ruhigen Leiste traegt die Linie sich selbst; der Schlagschatten
       war fuer helle Stellen im Video da. */
    filter: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Ohne Zeiger gibt es kein `:hover` — die Rueckmeldung kommt vom Druck. */
  .lp-video-restart:active {
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-video,
  .lp-video-restart {
    transition: none;
  }
}

@media (max-width: 620px) {
  .lp-stage-frame {
    border-radius: 8px;
  }
}