/* Film-Spot im Seitenkopf (19.10.2026, Alexander; zuerst /loesungen). Markup: partials/kopf/_spot.html.twig, Steuerung:
   js/kopf/film-spot.js. Randlose stumme Schleife hinter dem Kopftext (Text links, dezenter Verlauf, kein Glow), kleines „KI“
   unten rechts ohne Hinterlegung, Knopf „Film ansehen“ und ein ruhiges schwarzes Vollbild-Overlay (<dialog>) für den Spot mit
   Ton. Reduzierte Bewegung: nur Poster. */

/* ── Kopf mit Spot ─────────────────────────────────────────────────────────────── */
.bb-m-kopf.bb-m-kopf--spot {
  --spot-grund: var(--bb-grund, #000);
  position: relative;
  isolation: isolate;
  min-height: max(30rem, min(56.25vw, calc(88svh - var(--bm-kopf-h, 4rem))));
  background: var(--spot-grund);
}
/* Glas-Stil: Seite ist schwarz, der Spot geht in Schwarz über */
html.stil-glas .bb-m-kopf.bb-m-kopf--spot { --spot-grund: #000; }
.bb-m-kopf.bb-m-kopf--spot > .bb-sektion__innen { position: static; justify-content: flex-end; }
.bb-m-kopf--spot .bb-m-kopf__text { position: relative; z-index: 2; }
.bb-m-kopf.bb-m-kopf--spot .bb-m-kopf__neben { margin-left: 0; padding-left: 0; }
.bb-m-kopf--spot .bb-m-kopf__titel,
.bb-m-kopf--spot .bb-m-kopf__subline { text-shadow: 0 1px 18px rgb(0 0 0 / .35); }
.bb-m-kopf--spot .bb-m-kopf__knoepfe { flex-wrap: wrap; }

.bm-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--spot-grund, #000);
  pointer-events: none;
}
.bm-spot__medium {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: 50% 50%;
  background: transparent;
}
.bm-spot__schleife { z-index: 1; }
/* Verlauf für die Lesbarkeit: links unter dem Text, unten weich in den Grund (keine harte Kante zur nächsten Sektion) */
.bm-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, var(--spot-grund) 0%, color-mix(in srgb, var(--spot-grund) 55%, transparent) 16%, transparent 38%),
    linear-gradient(to right, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .42) 30%, rgb(0 0 0 / 0) 62%);
}
/* Glas-Shell blendet Bilder/Filme im ersten Kopf bis zur Kopf-Entscheidung bzw. bei 3D aus (glas/shell.css) – der Spot
   ist der Kopf selbst und bleibt sichtbar (Spezifität über der Shell-Regel) */
html.stil-glas main#inhalt > .bb-vorlage > section:first-child .bm-spot .bm-spot__medium.bm-spot__medium {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
.bm-spot__ki {
  position: absolute;
  z-index: 3;
  right: max(var(--bm-rand, 1rem), calc((100% - var(--bm-inhalt-max, 1200px)) / 2));
  bottom: .75rem;
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  color: rgb(244 243 240 / .62);
  background: none;
  pointer-events: none;
}

/* ── Knopf „Film ansehen“ (Pille wie die vorhandenen, Kontur) ─────────────────── */
.bb-knopf.bm-spot__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.bm-spot__knopf-icon { flex: none; width: .875rem; height: .875rem; }

/* ── Overlay ─────────────────────────────────────────────────────────────────── */
.bm-film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #f4f3f0;
  overflow: hidden;
}
.bm-film:not([open]) { display: none; }
.bm-film::backdrop { background: #000; }
.bm-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.bm-film__video::cue { font-family: system-ui, sans-serif; font-size: clamp(15px, 1.6vw, 22px); background: rgb(0 0 0 / .55); }
.bm-film__zu {
  position: absolute;
  z-index: 2;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(244 243 240 / .4);
  border-radius: 999px;
  background: rgb(0 0 0 / .45);
  color: #f4f3f0;
  cursor: pointer;
}
.bm-film__zu:hover { border-color: #f4f3f0; }
.bm-film__zu:focus-visible { outline: 2px solid #f4f3f0; outline-offset: 2px; }
html.bm-film-offen { overflow: hidden; }

/* ── Mobil ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bb-m-kopf.bb-m-kopf--spot { min-height: max(30rem, calc(82svh - var(--bm-kopf-h, 4rem))); }
  .bm-spot::after {
    background:
      linear-gradient(to top, var(--spot-grund) 0%, color-mix(in srgb, var(--spot-grund) 70%, transparent) 30%, rgb(0 0 0 / .15) 62%, rgb(0 0 0 / .25) 100%);
  }
}
@media (max-width: 767px) {
  .bb-m-kopf--spot .bb-m-kopf__knoepfe > * { flex: 1 1 auto; }
  .bb-m-kopf--spot .bm-spot__knopf { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-spot__schleife { display: none; }
}