/* Bedienknopf für die lokalen Hintergrundvideos im Startbereich. */

@keyframes media-control-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Position, Mindestgröße und kontrastreiche Grunddarstellung. */
.media-control {
  position: absolute;
  z-index: 4;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  min-width: 88px;
  min-height: var(--control-min-size);
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: var(--radius-navigation);
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
  color: var(--color-text);
  font: 500 0.84rem/1 var(--font-family-body);
  cursor: pointer;
}

/* Unterstützte Browser erhalten denselben leichten Glaseffekt wie die Navigation. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .media-control {
    background: rgb(255 255 255 / 66%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
  }
}

/* JavaScript blendet den Knopf erst nach erfolgreicher Initialisierung ein. */
.media-control[hidden] {
  display: none;
}

/* Nach erfolgreichem Videostart erscheint der Bedienknopf einmalig. */
@media (prefers-reduced-motion: no-preference) {
  .media-control:not([hidden]) {
    animation: media-control-enter var(--motion-standard) var(--motion-easing) both;
  }
}

/* Auf kleinen Geräten rückt der Knopf näher an den sicheren Bildschirmrand. */
@media (max-width: 520px) {
  .media-control {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Barrierefreiheit: solide Fläche statt Transparenz und Hintergrundunschärfe. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .media-control {
    background: rgb(255 255 255 / 96%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}