/* ====================  css/film-tv.css  ====================
   Erklärfilm im Fernseher im Einstieg von /section-monsters/ (René, 03.10.2026),
   übernommen von section-monsters.de (css/film-tv.css dort). Nur auf dieser Seite
   geladen; die Geometrie ist dieselbe, Farben und Abstände folgen renekress.de.

   Der Film läuft IM Gerät: /bilder/section-monsters/fernseher.webp hat ein echtes
   Loch an der Stelle der Bildröhre (Alpha = 0). Das Video liegt DAHINTER, die Blende
   maskiert es von selbst; das Gerätebild nimmt deshalb keine Klicks an.

   Die Scheibe ist kein Rechteck (der Fernseher steht leicht schräg). Das Video wird
   per matrix3d Ecke auf Ecke in die Scheibe gelegt, ausgemessen im Bild 1369x1008:
     oben links  (578.0|291.9)   oben rechts  (1063.2|260.4)
     unten links (578.0|683.4)   unten rechts (1061.4|691.0)
   Wird das Bild getauscht, müssen Ecken UND Matrix neu gerechnet werden.

   Zwei Ebenen: .ftv-flaeche rechnet in Quellpixeln (1369x1008) und wird per --ftv-k
   auf die dargestellte Breite skaliert (js/film-tv.js); .ftv-schirm ist das
   480x270-Rechteck, das die Matrix verzieht. */

.ftv{ width: 100% }
.ftv-buehne{ position: relative; width: 100% }

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

.ftv-flaeche{
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 1369px; height: 1008px;
  transform-origin: 0 0;
  transform: scale(var(--ftv-k, 1));
}

.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{
  display: block; width: 100%; height: 100%;
  object-fit: fill;                  /* füllt die Scheibe genauso wie das Video */
  transition: filter .3s ease-out;
}
.ftv-start:hover .ftv-poster, .ftv-start:focus-visible .ftv-poster{ filter: brightness(1.1) }

/* Abspielknopf in der Farbe des Fernsehers. Er sitzt in der verzogenen Ebene:
   scaleY gleicht die Streckung der Scheibe aus, damit er rund bleibt. */
.ftv-play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scaleY(.7);
  width: 64px; height: 64px; border-radius: 50%;
  background: #8bd626;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display: grid; place-items: center;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.ftv-play::before{
  content: "";
  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(--papier); outline-offset: -3px }

/* Glasspiegelung über 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%);
}

/* Bildunterschrift und Hinweis auf YouTube: so ruhig wie die übrigen Bildunterschriften */
.ftv figcaption a{ color: var(--text) }
.ftv-hinweis{
  display: block; margin: 10px auto 0; max-width: 46ch; text-align: center;
  text-transform: none; letter-spacing: 0;          /* steht in der versalen Bildunterschrift */
  font-size: .78rem; line-height: 1.5; color: var(--text-leise);
}
.ftv-hinweis a{ color: var(--text-leise) }

/* Schmale Geräte: Unter 720 px wäre die Scheibe kaum 120 px breit. Dort fällt das
   Gerät weg, die Verzerrung wird abgeschaltet, der Schirm ist eine 16:9-Karte. */
@media (max-width: 720px){
  .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 var(--linie); border-radius: 2px;
  }
  .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) }
}

/* Einstieg mit Fernseher: Das Gerät ist breit, die Scheibe nur ein gutes Drittel davon.
   Es bekommt mehr Platz als die Telefone der Leistungsseiten, die Überschrift dafür etwas
   weniger Größe (sonst bräche „jeden Morgen“ um). Diese Datei lädt nach mockups.css,
   gleiche Gewichtung gewinnt also hier - die Telefonregeln deshalb noch einmal. */
.kopf-raster--tv{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) }
.kopf-raster--tv h1{ font-size: clamp(2.2rem, 3.6vw, 3.6rem) }
@media (max-width: 900px){ .kopf-raster--tv{ grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 480px){ .kopf-raster--tv h1{ font-size: clamp(2rem, 8.6vw, 2.6rem) } }

/* Das Logo von Section Monsters über der Überschrift (René, 03.10.2026) */
.app-marke--kopf{ margin: 0 0 22px; width: clamp(150px, 14vw, 210px) }