/* Click-to-load video (Zwei-Klick-Lösung), ASTR-104.
 *
 * A video box shows only a local poster image until the visitor clicks it.
 * Nothing is requested from Vimeo or Vidalytics before that click, so no IP
 * address reaches them and nothing is stored on the device. The behaviour
 * lives in js/video-consent.js. Used by index.html and
 * danke-fuer-den-termin.html.
 */
.video-consent {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-blue);
}

.video-consent.is-loaded {
  overflow: visible;
  background-color: transparent;
}

.video-consent__trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--dark-blue);
  cursor: pointer;
}

.video-consent__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A flex column: the play button centres itself in whatever space the caption
   leaves, so the two never overlap, however small the box gets on a phone. */
.video-consent__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(26, 38, 52, .25);
  color: var(--white-smoke);
  font-family: Poppins Regular, sans-serif;
  line-height: 1.4;
  text-align: center;
  transition: background-color .2s ease;
}

.video-consent__trigger:hover .video-consent__overlay,
.video-consent__trigger:focus-visible .video-consent__overlay {
  background-color: rgba(26, 38, 52, .4);
}

.video-consent__play {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  margin: auto 0;
  border-radius: 50%;
  background-image: linear-gradient(21deg, var(--pale-red), var(--medium-orchid));
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}

.video-consent__trigger:hover .video-consent__play,
.video-consent__trigger:focus-visible .video-consent__play {
  transform: scale(1.1);
}

.video-consent__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .75rem 0 .75rem 1.2rem;
  border-color: transparent transparent transparent var(--white-smoke);
}

.video-consent__caption {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem 1rem;
  background-color: rgba(26, 38, 52, .9);
}

.video-consent__label {
  font-family: Poppins Bold, sans-serif;
  font-size: 1rem;
}

.video-consent__note {
  font-size: .8rem;
  opacity: .9;
}

@media screen and (max-width: 479px) {
  .video-consent__play {
    width: 2.75rem;
    height: 2.75rem;
  }

  .video-consent__caption {
    padding: .5rem .75rem;
  }

  .video-consent__note {
    font-size: .7rem;
  }
}

.video-consent__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}