/* ═══════════════════════════════════════════════════════════════
   HEX-CARDS — wiederverwendbare Feld-Video-Kachel (Qigong-Blau ODER Codex-Schwarz)
   KEINE festen Farben: Scrim, Kachel-Hintergrund und Hover-Helligkeit kommen aus
   CSS-Variablen mit neutralen Fallbacks. Drop-in auf jeder Karte:
     <a class="…karte… hex-thumb-host"> <video class="hex-thumb" …></video> …Inhalt… </a>
   Für die schwarze Haut einfach die Variablen umsetzen (siehe Beispiel unten).
   ═══════════════════════════════════════════════════════════════ */

.hex-thumb-host { position: relative; overflow: hidden; }

/* Das Feld-Video als gedimmter Hintergrund hinter dem Karten-Inhalt */
.hex-thumb-host > .hex-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  opacity: var(--hex-thumb-opacity, .5);            /* alle Kacheln gleich hell */
  background: var(--hex-thumb-bg, rgba(0,0,0,.45));  /* Fläche bis das Video lädt */
  transition: opacity .35s ease, transform .35s ease;
}

/* Lesbarkeits-Schleier über dem Video (neutral dunkel, in Schwarz wie in Blau brauchbar) */
.hex-thumb-host::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hex-scrim, linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.72)));
}

/* Karten-Inhalt (Nummer, Symbol, Punkte …) liegt ÜBER Video + Schleier */
.hex-thumb-host > *:not(.hex-thumb) { position: relative; z-index: 2; }

/* Hover: Video tritt hervor */
.hex-thumb-host:hover > .hex-thumb {
  opacity: var(--hex-thumb-opacity-hover, .82);
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .hex-thumb-host:hover > .hex-thumb { transform: none; }
}

/* ── So sieht die Wiederverwendung auf einer SCHWARZEN Codex-Seite aus ───────────
   .codex-grid {                                       (Container der schwarzen Seite)
     --hex-scrim: linear-gradient(180deg, rgba(4,5,13,.30), rgba(4,5,13,.78));
     --hex-thumb-bg: #06070f;
     --hex-thumb-opacity: .46;
   }
   Karten + HexHover.videoThumb({src:'…/mein-video.mp4', poster:'…/mein-bild.jpg'})
   und HexHover.wireSequence(container) — fertig, gleiche Mechanik in Schwarz.
   ──────────────────────────────────────────────────────────────────────────────── */