/* =========================================================================
   Imagefilm (Startseite + Referenzen)
   -------------------------------------------------------------------------
   Rahmen im Kinoformat des Films (1920 × 908). Darin läuft eine stumme
   Vorschau im Loop, sobald der Rahmen sichtbar ist; ein Klick spielt den
   ganzen Film mit Ton. Logik: shared/imagefilm.js
   ========================================================================= */
.mz-film {
  --film-navy: var(--mz-navy-deep, #0F172A);
  --film-orange: var(--mz-cta-orange, #d97706);
  /* oben knapper: auf beiden Seiten folgt der Film auf einen hellen Block mit eigenem Abstand */
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 8vw, 104px);
  background: #fff;
}
/* Startseite und Referenzen rechnen Boxen unterschiedlich – hier einheitlich */
.mz-film, .mz-film *, .mz-film *::before, .mz-film *::after { box-sizing: border-box; }
.mz-film__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.mz-film__kopf { max-width: 660px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.mz-film__eyebrow {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--film-orange);
}
.mz-film__titel {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--film-navy);
  text-wrap: balance;
}
.mz-film__text { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #5F6673; text-wrap: pretty; }

/* ---- Rahmen ---- */
.mz-film__rahmen {
  position: relative; isolation: isolate;
  aspect-ratio: 1920 / 908;
  border-radius: 22px; overflow: hidden;
  background: var(--film-navy);
  box-shadow: 0 28px 64px rgba(24, 48, 84, .20);
}
.mz-film__poster,
.mz-film__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mz-film__video { z-index: 1; }

/* ---- Play-Fläche über der Vorschau ---- */
.mz-film__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 0; border: 0; cursor: pointer;
  font: inherit; color: #fff;
  background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .48) 100%);
  transition: background .3s ease;
}
.mz-film__play:hover { background: linear-gradient(180deg, rgba(15, 23, 42, .2) 0%, rgba(15, 23, 42, .58) 100%); }
.mz-film__play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; border-radius: 22px; }

.mz-film__kreis {
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--film-orange);
  box-shadow: 0 6px 24px rgba(180, 83, 9, .45);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.mz-film__kreis svg { width: 28px; height: 28px; margin-left: 5px; }
/* Leuchten in der Aktionsfarbe, wie Preise und Buttons der Karten */
.mz-film__play:hover .mz-film__kreis,
.mz-film__play:focus-visible .mz-film__kreis {
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(245, 158, 11, .6), 0 0 28px rgba(217, 119, 6, .45), 0 6px 24px rgba(180, 83, 9, .45);
}
.mz-film__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.mz-film__dauer {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .55);
  font-size: .85rem; font-variant-numeric: tabular-nums; text-shadow: none;
}

/* Film läuft: Play-Fläche weg, Steuerleiste des Browsers übernimmt */
.mz-film__rahmen.is-film .mz-film__play { display: none; }

@media (max-width: 640px) {
  .mz-film__inner { padding: 0 16px; }
  .mz-film__rahmen { border-radius: 16px; }
  .mz-film__play { gap: 10px; }
  .mz-film__play:focus-visible { border-radius: 16px; }
  .mz-film__kreis { width: 60px; height: 60px; }
  .mz-film__kreis svg { width: 22px; height: 22px; margin-left: 4px; }
  .mz-film__label { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-film__play, .mz-film__kreis { transition: none; }
  .mz-film__play:hover .mz-film__kreis, .mz-film__play:focus-visible .mz-film__kreis { transform: none; }
}