/* Der Erklärfilm in Entwurf A.
   Startknopf liegt über dem Standbild und verschwindet beim Abspielen —
   die eigenen Steuerelemente des Browsers bleiben erhalten. */

.filmbuehne {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: #14432F;
  box-shadow: var(--shadow-card);
  margin-top: 1.6rem;
  /* Goldrahmen wie bei den Kapitelbildern, nur zurückhaltender */
  outline: 1px solid rgba(192, 160, 80, .45);
  outline-offset: 4px;
}
.filmbuehne video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #14432F;
}

/* Startknopf über dem Standbild */
.film-start {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(180deg, rgba(20, 43, 33, .18), rgba(20, 43, 33, .52));
  transition: opacity .35s ease, background .35s ease;
  color: var(--ivory);
}
.film-start:hover { background: linear-gradient(180deg, rgba(20, 43, 33, .10), rgba(20, 43, 33, .42)); }
.film-start[hidden] { display: none; }

.film-knopf {
  width: 74px; height: 74px; flex: none;
  border-radius: 50%;
  background: var(--gold); color: var(--deep);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(20, 43, 33, .45);
  transition: transform .25s ease;
}
.film-start:hover .film-knopf { transform: scale(1.07); }
.film-knopf svg { margin-left: 4px; }

.film-text {
  font: 600 1.05rem/1.3 var(--sans);
  text-align: left;
  text-shadow: 0 2px 12px rgba(20, 43, 33, .55);
}
.film-text small {
  display: block;
  font: 500 10px/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; margin-top: 3px;
}

.film-note {
  font: 400 .82rem/1.6 var(--sans);
  color: var(--mut);
  margin: .9rem 0 0;
  max-width: 62ch;
}

@media (max-width: 640px) {
  .film-knopf { width: 60px; height: 60px; }
  .film-text { font-size: .95rem; }
}