/* ══════════════════════════════════════════════════════════════════════════
   VIDEOTHUMBS (DEV-LOG [137], Texte beim Hover [142])

   Steht seit [142] in einer eigenen Datei, wie carousel.css (DEV-LOG [108]):
   Seite UND Bedienfeld laden sie — die Vorschau der Hover-Texte im Tab
   „Videos" benutzt dieselben Regeln. Auf der Seite gleich nach layout.css
   (dort stehen .mtile und .mgrid, auf denen das hier aufbaut).
   ══════════════════════════════════════════════════════════════════════════ */

/* Das Standbild liegt unten, der Loop darüber — unsichtbar, bis vthumb.js
   .is-play setzt, und das erst, wenn das Video WIRKLICH läuft ('playing'):
   so blitzt nie ein schwarzer Frame auf. Die Dauer ist eine Einstellung
   (schemaFieldsVthumb(), --vt-fade in Sekunden); ohne Settings-Block gilt 0,5. */
.mtile__loop {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity calc(var(--vt-fade, 0.5) * 1s) ease;
  pointer-events: none;
}
.mtile--vt.is-play .mtile__loop { opacity: 1; }
/* Standbild und Loop ragen je 1 px über jede Kante — die Kachel schneidet es
   ab. Der Loop ist während der Überblendung (opacity) und als laufendes Video
   eine eigene Ebene, und deren Ursprung rastet auf Gerätepixel ein; bei einer
   gebrochenen Kachelhöhe (aspect-ratio, fr-Spalten) schien an einer Kante eine
   1-px-Linie durch. Dieselbe Ursache wie beim Hover-Effekt (tilefx.css,
   DEV-LOG [87]), hier ringsum, weil die Rundung in beide Richtungen geht.
   max-width: none, weil base.css Medien auf 100 % deckelt. */
.mtile--vt img, .mtile--vt .mtile__loop {
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  max-width: none;
}
/* Die Nachbarn treten zurück: läuft unter der Maus ein Loop, werden die
   anderen Kacheln DESSELBEN Rasters abgedunkelt (am Raster per :has(), wie
   „Andere Bilder zurücknehmen" in tilefx.css). Ausgelöst nur von einer Kachel
   MIT Loop — eine ohne zeigt beim Hover nichts, dann soll auch nichts
   zurücktreten. Eine Fläche über der Kachel statt filter am Bild: kein
   Eingriff in die Ebenen von Standbild und Loop. Schwarz ist hier kein
   Farbwert aus den Einstellungen, sondern ein Abdunkeln — deshalb kein Token.
   Nur Maus (auf Touch bliebe es nach dem Antippen stehen), nicht im
   Bearbeitungsmodus (dort ist die Kachel ein Klickziel des Editors). */
.mtile--vt::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #000; opacity: 0;
  transition: opacity calc(var(--vt-fade, 0.5) * 1s) ease;
  pointer-events: none;
}
/* Abschaltbar je Raster (cellProps()['vtnbr'], DEV-LOG [142] Nachtrag): „Nein"
   setzt an der Zelle --vt-nbr auf 0. Ohne Klasse bleibt es beim Bestandswert. */
.mcell--vtn-off { --vt-nbr: 0; }
@media (hover: hover) {
  body:not(.ck-edit) .mgrid--vt:has(.mtile--vt:hover > .mtile__loop) .mtile--vt:not(:hover)::before {
    opacity: var(--vt-nbr, 0.55);
  }
}
/* Wer Bewegung reduziert haben will, sieht nur das Standbild — vthumb.js
   startet dann gar nicht erst (Doppelt, falls das Skript fehlt). */
@media (prefers-reduced-motion: reduce) { .mtile__loop { display: none; } }

/* Der Link liegt als Fläche über der Kachel (renderGrid()). Im Bearbeitungs-
   modus fällt der Klick durch auf die Kachel — dort öffnet er den Editor.
   Ebene 3: über dem Text beim Hover (2), der selbst keine Zeigerereignisse
   nimmt. */
.mtile__link { position: absolute; inset: 0; z-index: 3; }
body.ck-edit .mtile__link { pointer-events: none; }

/* Der Zeigefinger: DIESELBE Bedingung wie in lightbox.js (data-full bzw.
   data-vfull an einer Kachel in .mgrid--vt). Den Link zeigt :any-link von
   selbst an, seit der body cursor: default trägt (DEV-LOG [132]). */
body:not(.ck-edit) .mgrid--vt .mtile:is([data-full], [data-vfull]) { cursor: pointer; }

/* ── Abdunklung der EIGENEN Kachel beim Hover (DEV-LOG [142]) ──────────────
   Je Raster (cellProps()['vtdim']): die Klasse an der Zelle setzt nur die
   Zahl, die Regel steht einmal. Dieselbe Fläche ::before wie bei den
   Nachbarn — die Kachel unter der Maus ist nie ihr eigener Nachbar
   (:not(:hover) oben), die beiden Regeln treffen sich also nicht. Ausgelöst
   nur von einer Kachel MIT Loop, wie oben. Auf Touch gilt .is-play (der Loop
   läuft im Sichtfeld, vthumb.js). */
.mcell--vtd-20 { --vt-dim: 0.2; }
.mcell--vtd-35 { --vt-dim: 0.35; }
.mcell--vtd-50 { --vt-dim: 0.5; }
.mcell--vtd-65 { --vt-dim: 0.65; }
body:not(.ck-edit) .mtile--vt.is-play::before { opacity: var(--vt-dim, 0); }
@media (hover: hover) {
  body:not(.ck-edit) .mtile--vt:hover:has(> .mtile__loop)::before { opacity: var(--vt-dim, 0); }
}

/* ── Muster beim Hover (DEV-LOG [146]) ─────────────────────────────────────
   Dasselbe Muster wie am Keyvisual (Maske: die Regel .mtile__pt, .sec-bg__pt
   in layout.css), je Raster per Rechtsklick. Es blendet mit dem Loop ein und
   faehrt dabei dezent zurueck (Zoom-out 1,08 -> 1), etwas langsamer als die
   Ueberblendung, damit die Bewegung nachklingt. Ueber der Abdunklung
   (::before, gleiche Ebene, spaeter im DOM), unter dem Text. Die Deckkraft
   ist --vt-pt-o; opacity selbst gehoert dem Einblenden. */
.mtile__pt {
  z-index: 1;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity calc(var(--vt-fade, 0.5) * 1s) ease,
              transform calc(var(--vt-fade, 0.5) * 1s + 0.8s) cubic-bezier(0.2, 0.6, 0.2, 1);
}
body:not(.ck-edit) .mtile--vt.is-play .mtile__pt { opacity: var(--vt-pt-o, 1); transform: none; }
@media (hover: hover) {
  body:not(.ck-edit) .mtile--vt:hover .mtile__pt { opacity: var(--vt-pt-o, 1); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mtile__pt { transform: none; transition: none; }
}

/* ── Text beim Hover (DEV-LOG [142]) ───────────────────────────────────────
   Bildunterschrift (.mtile__vtt) und Subline (.mtile__vts) des Loops, nur im
   Markup, wenn das Raster es will (cellProps()['vttext']).

   DIE GROESSE FOLGT DER KACHEL, nicht dem Fenster: .mtile__vtx ist ein
   Container, und 1em im Inneren sind 4 % seiner Breite (16 px bei einer
   400 px breiten Kachel). Die Schriftgroessen aus dem Tab „Videos" stehen in
   em (--vt-title-size, --vt-sub-size) und skalieren damit mit. Der Container
   ist die Textflaeche selbst (inset: 0 = so gross wie die Kachel), NICHT die
   Kachel: container-type bringt Layout-Eingrenzung mit, und die soll die
   Kachel mit ihrem Raster, Ziehen und Karussell nicht bekommen.
   Untergrenze 7 px je em — darunter ist nichts mehr zu lesen; bis dahin
   (Kachel ab 175 px) bleibt es streng proportional.

   Lage und Abstaende sind Einstellungen (--vt-ay, --vt-ax; --vt-pad in % der
   Kachelbreite und --vt-gap in em, beide als nackte Zahl). Farbe
   „Automatisch" heisst hier Weiss: der Text steht auf einem Video, nicht auf
   der Sektion. */
.mtile__vtx {
  position: absolute; inset: 0; z-index: 2;
  container-type: inline-size;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity calc(var(--vt-fade, 0.5) * 1s) ease;
}
.mtile__vtb {
  box-sizing: border-box;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: var(--vt-ay, end);
  align-items: var(--vt-ax, start);
  text-align: var(--vt-ax, start);
  gap: calc(var(--vt-gap, 0.3) * 1em);
  padding: calc(var(--vt-pad, 6) * 1cqi);
  /* --vt-k: Schriftskalierung je Raster (Rechtsklick, mobil eigener Wert). */
  font-size: calc(max(7px, 4cqi) * var(--vt-k, 1));
}
/* Schlagschatten (DEV-LOG [142] Nachtrag): an jeder Zeile selbst, nicht an
   der Huelle — ein vererbter text-shadow traegt seine em schon als px, und die
   Subline bekaeme den Schatten in Titelgroesse. „Aus" = Deckkraft mal 0. */
.mtile__vtt, .mtile__vts {
  text-shadow: 0 0.05em calc(var(--vt-sh-b, 0.3) * 1em)
               rgb(0 0 0 / calc(var(--vt-sh-on, 0) * var(--vt-sh-o, 60) / 100));
}
.mtile__vtt, .mtile__vts {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.mtile__vtt {
  -webkit-line-clamp: 3; line-clamp: 3;
  font-family: var(--vt-title-family, inherit);
  font-size: var(--vt-title-size, 1.3em);
  font-weight: var(--vt-title-weight, 500);
  letter-spacing: var(--vt-title-ls, 0);
  line-height: var(--vt-title-lh, 1.15);
  text-transform: var(--vt-title-tt, none);
  color: var(--vt-title-color, var(--ci-white));
}
.mtile__vts {
  -webkit-line-clamp: 2; line-clamp: 2;
  font-family: var(--vt-sub-family, inherit);
  font-size: var(--vt-sub-size, 0.85em);
  font-weight: var(--vt-sub-weight, 400);
  letter-spacing: var(--vt-sub-ls, 0);
  line-height: var(--vt-sub-lh, 1.3);
  text-transform: var(--vt-sub-tt, none);
  color: var(--vt-sub-color, var(--ci-white));
}
/* Sichtbar im selben Takt wie Loop und Abdunklung: Maus beim Hover (auch bei
   „Bewegung reduzieren" — dann ohne Übergang über dem Standbild), Touch
   solange der Loop im Sichtfeld läuft. Im Bearbeitungsmodus nie; die
   Alt-Taste zeigt, was der Besucher sieht. */
body:not(.ck-edit) .mtile--vt.is-play .mtile__vtx { opacity: 1; }
@media (hover: hover) {
  body:not(.ck-edit) .mtile--vt:hover .mtile__vtx { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mtile__vtx, .mtile--vt::before { transition: none; }
}