/* Videoabschnitt der Leistungsseiten: Motiv ueber die volle Breite, gleich- maessig abgedunkelt, Text mittig davor, darunter drei Aussagen mit Strichzeichnung */

.vf {
  --vf-pos: 50% 50%;
  --vf-skala: 1;      /* Weg der Einblendung, mobil halbiert */
  --vf-tempo: 1;      /* Dauer der Einblendung, mobil verkuerzt */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(640px, 92vh, 920px);
  background: var(--night);
  color: #fff;
  text-align: center;
}
/* In der Buehne (sd-stage/sd-top wie beim Seitenkopf) steht der Abschnitt fest ueber eine Fensterhoehe, die naechste Sektion faehrt darueber */
.sd-top > .vf { min-height: 100vh; min-height: 100svh; height: 100%; }

.vf__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vf__still,
.vf__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vf-pos);
}
.vf__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}
.vf.is-video .vf__video { opacity: 1; }
/* Gleichmaessig dunkel, damit weisser Text ueberall steht; oben und unten ein ruhiger Uebergang in den dunklen Grund */
.vf__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,.72) 0%, rgba(11,11,13,.58) 20%, rgba(11,11,13,.58) 80%, rgba(11,11,13,.78) 100%);
}

.vf__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.vf__copy {
  max-width: 52rem;
  margin-inline: auto;
}

.vf__thema {
  margin: 0 0 1.25rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.vf__titel {
  margin: 0 0 1.4rem;
  color: #fff;
}
.vf__titel span { display: inline; }
.vf__titel span + span::before { content: " "; }
.vf__text {
  margin: 0 auto 3.5rem;
  max-width: 44rem;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: #e6e7ea;
}

/* Drei Aussagen: grosse Strichzeichnung in Markenrot, Beschriftung darunter */
.vf__punkte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 5vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vf__punkte li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.vf__icon {
  display: block;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  color: var(--accent);
}
.vf__icon svg { width: 100%; height: 100%; display: block; }

.vf__aktion { display: flex; justify-content: center; }

.vf__steuer {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  padding: .55rem 1rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(11,11,13,.55);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vf__steuer:hover,
.vf__steuer:focus-visible { border-color: #fff; }

/* Einblendung: erst wenn das Skript den Abschnitt beobachtet (is-init), werden die Anfangszustaende gesetzt; ohne Skript steht alles sofort da */
.vf.is-init .vf__thema  { --vf-y: 10px; }
.vf.is-init .vf__titel  { --vf-y: 24px; }
.vf.is-init .vf__text   { --vf-y: 16px; }
.vf.is-init .vf__punkte li { --vf-y: 12px; }
.vf.is-init .vf__aktion { --vf-y: 10px; }
.vf.is-init .vf__thema,
.vf.is-init .vf__titel,
.vf.is-init .vf__text,
.vf.is-init .vf__punkte li,
.vf.is-init .vf__aktion {
  opacity: 0;
  transform: translateY(calc(var(--vf-y) * var(--vf-skala)));
}
/* Der Uebergang haengt am Einblendzustand, damit das Verstecken beim Initialisieren sofort greift und nicht selbst animiert */
.vf.is-in .vf__thema,
.vf.is-in .vf__titel,
.vf.is-in .vf__text,
.vf.is-in .vf__punkte li,
.vf.is-in .vf__aktion {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.vf.is-in .vf__thema  { transition-duration: calc(350ms * var(--vf-tempo)); transition-delay: 0ms; }
.vf.is-in .vf__titel  { transition-duration: calc(650ms * var(--vf-tempo)); transition-delay: calc(80ms * var(--vf-tempo)); }
.vf.is-in .vf__text   { transition-duration: calc(550ms * var(--vf-tempo)); transition-delay: calc(280ms * var(--vf-tempo)); }
.vf.is-in .vf__punkte li:nth-child(1) { transition-duration: calc(450ms * var(--vf-tempo)); transition-delay: calc(430ms * var(--vf-tempo)); }
.vf.is-in .vf__punkte li:nth-child(2) { transition-duration: calc(450ms * var(--vf-tempo)); transition-delay: calc(520ms * var(--vf-tempo)); }
.vf.is-in .vf__punkte li:nth-child(3) { transition-duration: calc(450ms * var(--vf-tempo)); transition-delay: calc(610ms * var(--vf-tempo)); }
.vf.is-in .vf__aktion { transition-duration: calc(400ms * var(--vf-tempo)); transition-delay: calc(760ms * var(--vf-tempo)); }

@media (max-width: 900px) {
  .vf {
    --vf-skala: .5;
    --vf-tempo: .8;
    min-height: 0;
  }
  .vf__inner { padding-block: 4rem 3.5rem; }
  .vf__titel span { display: block; }
  .vf__titel span + span::before { content: none; }
  .vf__text { margin-bottom: 2.5rem; }
  .vf__punkte {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .vf__punkte li { gap: 1rem; }
  .vf__icon { width: 60px; height: 60px; }
  .vf__steuer { bottom: auto; top: .9rem; right: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vf.is-init .vf__thema,
  .vf.is-init .vf__titel,
  .vf.is-init .vf__text,
  .vf.is-init .vf__punkte li,
  .vf.is-init .vf__aktion {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .vf__video { transition: none; }
}