/* film.ki – ruhige Video-Vorschau am Computer (ab 0.8.4)
   Nur bei Maus/Trackpad: Standbild mit Play-Button und einer Zeile „Lädt den …-Player“.
   Der vollständige Hinweis erscheint bei Mouseover oder Tastaturfokus, VOR dem Klick.
   Handy/Tablet (kein Hover): unverändert – Hinweis und „Video laden“ sofort sichtbar. */
.fk-play__btn,
.fk-play__hint { display: none; }

@media (hover: hover) and (pointer: fine) {
  .fk-play__btn {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: clamp(42px, 4.6vw, 57px);
    height: clamp(42px, 4.6vw, 57px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1efe8;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
  }
  .fk-play__btn svg { width: 36%; height: 36%; margin-left: 8%; fill: #080808; }
  .fk-play__btn:hover,
  .fk-play__btn:focus-visible { transform: scale(1.06); background: var(--signal, #ff4a30); outline: 0; }
  .fk-play__btn .fk-play__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* „.fk-play p.“ schlägt seitenweite Regeln wie „.youtube-consent__content p“ (gleiche Schrift für Vimeo und YouTube) */
  .fk-play p.fk-play__hint,
  .fk-play__hint {
    display: block;
    margin: .9rem 0 0;
    color: #f1efe8;
    font: 700 .62rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
  }

  /* Ruhezustand: Original-Text und -Knopf ausblenden, Link zum Anbieter in die Ecke */
  .fk-play .fk-play__text,
  .fk-play .fk-play__orig { display: none !important; }
  .fk-play .fk-play__ext {
    position: absolute !important;
    left: 1rem;
    right: auto !important;
    bottom: .9rem;
    z-index: 4;
    margin: 0 !important;
    font-size: .55rem !important;
    opacity: .8;
  }
  .fk-play .fk-play__ext:hover { opacity: 1; }
  .fk-play.filmki-vimeo__notice::after,
  .fk-play.youtube-consent::before { background: linear-gradient(180deg, rgba(8, 8, 8, .04), rgba(8, 8, 8, .42)); transition: background .3s ease; }

  /* Maus darüber oder Tastaturfokus: vollständiger Hinweis */
  .fk-play:hover .fk-play__hint,
  .fk-play:focus-within .fk-play__hint { display: none !important; }
  .fk-play:hover .fk-play__text,
  .fk-play:focus-within .fk-play__text { display: block !important; margin-top: 1rem !important; animation: fk-play-in .25s ease both; }
  .fk-play.filmki-vimeo__notice:hover::after,
  .fk-play.filmki-vimeo__notice:focus-within::after,
  .fk-play.youtube-consent:hover::before,
  .fk-play.youtube-consent:focus-within::before { background: linear-gradient(180deg, rgba(8, 8, 8, .32), rgba(8, 8, 8, .86)); }
}

@keyframes fk-play-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fk-play__btn { transition: none; } .fk-play:hover .fk-play__text { animation: none; } }