/* =========================================================
   SECTION MONSTERS – Erklaerfilm im Fernseher (Startseite)
   css/film-tv.css

   Der Film laeuft IM Geraet: media/images/hero-tv.webp hat ein echtes
   Loch an der Stelle der Bildroehre (Alpha = 0). Das Video liegt
   DAHINTER, die Blende maskiert es also von selbst. Deshalb traegt das
   Geraetebild `pointer-events: none` — sonst faengt es jeden Klick ab,
   der eigentlich dem Schirm gilt.

   TRAPEZ (René, 18.09.2026): Der Fernseher steht leicht schraeg, die
   Scheibe ist deshalb KEIN Rechteck — linke Kante 385 px, rechte 418 px,
   obere Kante steigt nach rechts. Ein rechteckiges Video sieht darin
   „reingeklatscht" aus. Das Video wird daher perspektivisch in die
   Scheibe gelegt (matrix3d), Ecke auf Ecke.

   Ausgemessen im Bild 1369x1008 (Fassung 2, 19.09.2026):
     oben links  (578.0|291.9)   oben rechts  (1063.2|260.4)
     unten links (578.0|683.4)   unten rechts (1061.4|691.0)
   Fassung 1 hatte die Unterkante waagerecht angenommen — tatsaechlich faellt sie nach rechts ab,
   und rechts oben/unten blieb ein grauer Glasstreifen zwischen Video und Rahmen stehen (René).
   Das Glas wird unten rechts dunkler; es wird deshalb als alles Graue innerhalb des schwarzen
   Innenrahmens bestimmt, das Loch dann exakt entlang dieses Vierecks mit weicher Kante geschnitten.
   Daraus die Abbildung des Rechtecks 480x270 auf dieses Viereck:
     matrix3d(0.80991, -0.114799, 0, -0.000189065,
              0.00750471, 1.45917, 0, 1.29839e-05,
              0, 0, 1, 0,
              578, 291.852, 0, 1)
   Wird das Bild getauscht, muessen Ecken UND Matrix neu gerechnet werden.

   Der Aufbau hat deshalb zwei Ebenen:
     .ftv-flaeche  rechnet in Quellpixeln des Bildes (1369x1008) und wird
                   per --ftv-k auf die tatsaechliche Breite skaliert
                   (js/film-tv.js). Nur so bleiben feste Pixelwerte in der
                   Matrix ueber alle Bildschirmbreiten richtig.
     .ftv-schirm   ist das 480x270-Rechteck, das die Matrix verzieht.

   KOMPLETT UND UNGEKUERZT
   ========================================================= */

.ftv {
  width: var(--container);
  margin: 0 auto 120px;
  padding-top: clamp(64px, 8vw, 128px);
}

/* ── Kopf ───────────────────────────────────────────────── */
.ftv-kopf {
  max-width: 62ch;
  margin: 0 auto 40px;
  text-align: center;
}

.ftv-eyebrow {
  color: var(--green);
  margin: 0 0 16px;
}

.ftv-titel {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin: 0 0 16px;
  text-wrap: balance;
}

.ftv-titel span { display: block; }
.ftv-titel span + span { color: var(--muted); }

.ftv-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 auto;
  max-width: 56ch;
}

/* ── Buehne: Geraet + Schirm ────────────────────────────── */
.ftv-buehne {
  position: relative;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.ftv-geraet {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  /* Klicks gehen durch das Bild hindurch an den Schirm darunter */
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}

/* Rechenebene in Quellpixeln — js/film-tv.js setzt --ftv-k */
.ftv-flaeche {
  position: absolute;
  left: 0;
  top: 0;
  width: 1369px;
  height: 1008px;
  z-index: 1;
  transform-origin: 0 0;
  transform: scale(var(--ftv-k, 1));
}

/* Das Rechteck, das die Matrix in die Scheibe legt */
.ftv-schirm {
  position: absolute;
  left: 0;
  top: 0;
  width: 480px;
  height: 270px;
  overflow: hidden;
  background: #0b0a16;
  transform-origin: 0 0;
  transform: matrix3d(0.80991, -0.114799, 0, -0.000189065,
                      0.00750471, 1.45917, 0, 1.29839e-05,
                      0, 0, 1, 0,
                      578, 291.852, 0, 1);
}

.ftv-start,
.ftv-schirm iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ftv-start {
  position: relative;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.ftv-poster {
  width: 100%;
  height: 100%;
  object-fit: fill;      /* fuellt die Scheibe genauso wie das Video */
  display: block;
  transition: filter .3s var(--ease);
}

.ftv-start:hover .ftv-poster,
.ftv-start:focus-visible .ftv-poster { filter: brightness(1.1); }

/* ── Abspielknopf ──────────────────────────────────────── */
.ftv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Der Knopf sitzt in der verzogenen Ebene: scaleY gleicht die
     Streckung der Scheibe wieder aus, damit er rund bleibt. */
  transform: translate(-50%, -50%) scaleY(.7);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.ftv-play::before {
  content: "";
  /* Dreieck aus Rahmen: braucht keine Datei */
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #07120a;
  margin-left: 4px;
}

.ftv-start:hover .ftv-play,
.ftv-start:focus-visible .ftv-play {
  transform: translate(-50%, -50%) scaleY(.7) scale(1.08);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 0 14px rgba(139, 214, 38, .16);
}

.ftv-start:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: -3px;
}

/* Glasspiegelung ueber der Scheibe, ganz leicht — nimmt keine Klicks an */
.ftv-glas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 26%, transparent 46%);
}

/* ── Knopf zu YouTube ───────────────────────────────────
   Bewusst in YouTube-Rot und nicht in unserer CI: Er fuehrt aus der
   Seite heraus, und genau das soll man ihm ansehen. */
.ftv-aktion {
  margin: 34px 0 0;
  text-align: center;
}

.ftv-yt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ff0000;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(255, 0, 0, .22);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.ftv-yt:hover,
.ftv-yt:focus-visible {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(255, 0, 0, .3);
}

.ftv-yt:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 3px;
}

.ftv-yt-icon {
  width: 28px;
  height: 20px;
  flex: none;
  color: #fff;
}

/* Das weisse Dreieck im Zeichen wird rot, der Kasten weiss —
   sonst verschwindet das Zeichen im roten Knopf. */
.ftv-yt-icon path:first-child { fill: #fff; }
.ftv-yt-icon path:last-child { fill: #ff0000; }
.ftv-yt:hover .ftv-yt-icon path:last-child { fill: #cc0000; }

/* ── Hinweis auf die YouTube-Einbettung ─────────────────── */
.ftv-hinweis {
  margin: 22px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(242, 244, 239, .45);
}

.ftv-hinweis a { color: rgba(242, 244, 239, .72); }

/* ── Schmale Geraete ────────────────────────────────────
   Unter 720 px waere die Scheibe rund 300 px breit und der Film darin
   kaum zu lesen. Dort faellt das Geraet weg, die Verzerrung wird
   abgeschaltet und der Schirm ist eine normale 16:9-Karte. */
@media (max-width: 720px) {
  .ftv { margin-bottom: 84px; }
  .ftv-geraet { display: none; }

  .ftv-flaeche {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }

  .ftv-schirm {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: none;
    border: 1px solid rgba(139, 214, 38, .28);
    border-radius: var(--radius-md);
  }

  .ftv-poster { object-fit: cover; }
  .ftv-play { transform: translate(-50%, -50%); }
  .ftv-start:hover .ftv-play,
  .ftv-start:focus-visible .ftv-play { transform: translate(-50%, -50%) scale(1.08); }
  .ftv-glas { border-radius: var(--radius-md); }
}