/* Film auf der Prozessseite: der Beratungsspot (04.10.2026).
   Selbst gehostet, kein Drittanbieter, deshalb keine Einwilligung nötig.
   Startet erst auf Klick, mit Ton. */
.film { padding-top: 0; }
.film .section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.film-frame {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(17, 21, 26, 0.14), 0 4px 14px rgba(17, 21, 26, 0.06);
}
.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}
.film-play {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(17, 21, 26, 0) 60%, rgba(17, 21, 26, 0.22));
  cursor: pointer;
  font: inherit;
}
.film-play-pill {
  position: absolute;
  left: clamp(0.85rem, 2.4vw, 1.6rem);
  bottom: clamp(0.85rem, 2.4vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.15rem 0.4rem 0.4rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(17, 21, 26, 0.16);
  transition: transform var(--dur) var(--ease);
}
.film-play-icon {
  display: grid;
  place-items: center;
  width: clamp(40px, 4.4vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  transition: background-color var(--dur) var(--ease);
}
.film-play-icon svg { width: 40%; height: 40%; margin-left: 8%; }
.film-play-label { font-size: var(--size-small); font-weight: 600; white-space: nowrap; }
.film-play-time { margin-left: 0.35rem; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.film-play:hover .film-play-pill { transform: translateY(-2px); }
.film-play:hover .film-play-icon { background: var(--gold-hover); }
.film-play:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: -3px; border-radius: var(--radius-panel); }
.film-frame.is-playing .film-play { display: none; }
.film-note { max-width: 1040px; margin: 1rem auto 0; text-align: center; }
@media (max-width: 560px) {
  .film-play-pill { left: 0.7rem; bottom: 0.7rem; padding: 0.3rem; gap: 0; }
  .film-play-label { display: none; }
  .film-play-icon { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-play-pill, .film-play-icon { transition: none; }
}