/* Video im Fokus - Masse aus Figma: Video links ~50%, 80px Abstand,
   Text rechts vertikal zentriert: Label 14px Versalien, Titel 36px blau,
   Text 18px/150%, Button + Textlink. Hintergrund hellgrau.
   Hochformat (Shorts, haeufig): Box 7:6 mit dunklem Grund, Player 9:16
   mittig. Querformat: Box 16:9, Player fuellt die Box. */

#content section.mantik-video,
.mantik-video { padding: 80px 0; margin: 0; }
.mantik-video--bg-grey { background: #fafafa; }
.mantik-video--bg-blue { background: #e5f5fc; }
.mantik-video--bg-none { background: transparent; }

.mantik-video__inner { display: flex; align-items: center; gap: 80px; }
.mantik-video--media-right .mantik-video__inner { flex-direction: row-reverse; }
.mantik-video__media, .mantik-video__content { flex: 1 1 0; min-width: 0; }
.mantik-video__media { flex-basis: 52%; }
.mantik-video__content { flex-basis: 48%; }

/* ---- Medienbox ---- */
.mantik-video__media {
  position: relative; overflow: hidden; border-radius: 4px; cursor: pointer;
  background: #76766f; /* Grau aus dem Design, seitlich neben dem Hochformat */
}
.mantik-video__media--landscape { aspect-ratio: 16 / 9; }
.mantik-video__media--portrait { aspect-ratio: 7 / 6; }

#content .mantik-video .mantik-video__poster,
.mantik-video .mantik-video__poster {
  /* !important: mantik.css setzt "section img { height: auto !important }" */
  position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; max-width: none;
  object-fit: cover; transition: transform .4s ease;
}
/* Hochformat: YouTube liefert fuer Shorts ein 16:9-Bild, in dem das
   Hochkant-Bild genau in der Mitte steht (seitlich unscharfe Kopie).
   Nur diesen mittleren 9:16-Streifen zeigen -> Start-Bild hochkant auf Grau. */
#content .mantik-video .mantik-video__media--portrait .mantik-video__poster,
.mantik-video .mantik-video__media--portrait .mantik-video__poster {
  left: 50%; right: auto; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%);
}
.mantik-video__media--landscape:hover .mantik-video__poster { transform: scale(1.02); }

.mantik-video .mantik-video__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0 0 0 4px;
  border: 0; border-radius: 50%; background: #fff; color: #3c474f; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.mantik-video__media:hover .mantik-video__play { transform: scale(1.08); background: #009fe3; color: #fff; }
.mantik-video .mantik-video__play:focus-visible { outline: 3px solid #009fe3; outline-offset: 3px; }

.mantik-video__media.is-playing { cursor: default; }
/* Beim Abspielen: Player ersetzt Vorschaubild und Play-Button (Grau bleibt seitlich) */
.mantik-video .mantik-video__media.is-playing .mantik-video__play,
.mantik-video .mantik-video__media.is-playing .mantik-video__poster { display: none; }

.mantik-video__player { position: absolute; border: 0; }
.mantik-video__media--landscape .mantik-video__player { inset: 0; width: 100%; height: 100%; }
.mantik-video__media--portrait .mantik-video__player {
  top: 0; bottom: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%);
}

/* ---- Text ---- */
.mantik-video__copy { display: flex; flex-direction: column; gap: 6px; }
#content .mantik-video .mantik-video__kicker,
.mantik-video .mantik-video__kicker {
  margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 500; text-transform: uppercase; color: #212529;
}
#content .mantik-video .mantik-video__title,
.mantik-video .mantik-video__title {
  margin: 0; font-size: 2.25rem; line-height: 1.3; font-weight: 500; color: #009fe3;
}
#content .mantik-video .mantik-video__text,
.mantik-video .mantik-video__text {
  margin: 24px 0 0; font-size: 1.125rem; line-height: 1.5; color: #212529;
}

.mantik-video__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 40px; }
#content .mantik-video .mantik-video__button,
.mantik-video .mantik-video__button {
  display: inline-flex; align-items: center; height: 46px; padding: 0 1.5rem;
  border-radius: 2rem; background: #009fe3; color: #fff; text-decoration: none;
  font-size: 1rem; line-height: 1.5; font-weight: 500; transition: background-color .2s ease;
}
#content .mantik-video .mantik-video__button:hover,
.mantik-video .mantik-video__button:hover { background: #0089c4; color: #fff; text-decoration: none; }
#content .mantik-video .mantik-video__more,
.mantik-video .mantik-video__more {
  display: inline-block;
  font-size: 1rem; line-height: 1.5; font-weight: 500; color: #009fe3; text-decoration: none;
}
#content .mantik-video .mantik-video__more:hover,
.mantik-video .mantik-video__more:hover { color: #009fe3; text-decoration: none; }
.mantik-video__arrow { display: inline-block; transition: transform .2s ease; }
.mantik-video__more:hover .mantik-video__arrow { transform: translateX(4px); }

@media (max-width: 991px) {
  #content section.mantik-video, .mantik-video { padding: 48px 0; }
  .mantik-video__inner,
  .mantik-video--media-right .mantik-video__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  /* Hochformat auf dem Handy hoeher, damit der Short nicht winzig ist */
  .mantik-video__media--portrait { aspect-ratio: 4 / 5; }
  #content .mantik-video .mantik-video__title,
  .mantik-video .mantik-video__title { font-size: 1.75rem; }
  .mantik-video__actions { margin-top: 32px; }
}