/* Ported from the original mba-static-website inline <style id="js-slides-fonts">.
   Asset paths made absolute (/assets/...) so they resolve from /public. Loaded
   LAST so these win over the framework stylesheet (slides.min.css).

   mba does NOT ship the Slides framework runtime (_all-header.js). Everything it
   used to do — entrance animations, Ken-Burns hero, side-nav dots, the "how it
   works" tab-slider, the video popup, store-button OS detection — is either
   reimplemented in React or neutralised here so the statically-rendered markup
   is fully visible. */

/* Global font override (mirrors the static inline style). Montserrat isn't
   shipped locally, so it falls back to sans-serif exactly as the static site did. */
.slides span,
.slides div,
.slides p,
.slides a {
  font-family: "Montserrat-Regular", sans-serif !important;
}

/* --- Neutralise the Slides entrance animations ---------------------------- */
/* `.ae-*`, `.fromLeft`, `.fromCenter`, `.later` start hidden (opacity:0 /
   translated / scaled) until the framework JS adds `.done`. With no framework JS
   running, force them into their final, visible state. */
.slides [class*="ae-"],
.slides .fromLeft,
.slides .fromRight,
.slides .fromCenter,
.slides .later {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.page-loaded .scroll .slide {
  transition: none !important;
}

/* --- Ken-Burns hero ------------------------------------------------------- */
/* The hero background is a blurred <div class="background">. The framework
   normally fades/zooms it in via `.zoomin`; keep it visible regardless and let
   it fill the slide. */
.slides .background {
  height: 100vh;
  width: 100%;
}
.slides .kenBurns .background {
  opacity: 1 !important;
}

/* --- "How it works" tab-slider (data-slider-id=60) ------------------------ */
/* Driven by React state: only the `.selected` slide/tab is active. */
.slides ul.slider > li {
  display: none;
}
.slides ul.slider > li.selected {
  display: block;
}
.slides ul.tabs.controller li {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.slides ul.tabs.controller li:not(.selected) {
  opacity: 0.55;
}

/* --- Video popup (Erklärvideo) -------------------------------------------- */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
}
.video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
}
.video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}
.video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Sidebar colours are the theme's own (mainMenu #83C99F green, subMenu white) —
   we intentionally do NOT override them so the sidebar matches the static site. */
.menu-subheadline {
  position: relative;
  font-weight: 800 !important;
  color: #666666;
}

.center .menu .material-icons {
  font-size: 13px;
}

/* --- Vehicles grid (#vehicles) -------------------------------------------- */
/* The original used the framework's `equalElement` JS to give the floated
   `box-69_custom` image-cards equal heights (all matched the tall CTA card,
   ~500px) with text centred via the `.table`/`.cell` (table/table-cell) chain.
   With no framework JS, lay the grid out with flexbox and give every card the
   same fixed height with centred content, matching the static site. */
#vehicles ul.grid {
  display: flex;
  flex-wrap: wrap;
}
#vehicles ul.grid > li {
  float: none;
}
#vehicles ul.grid > li.col-4-12 {
  width: 33.333%;
}
@media (max-width: 1023px) {
  #vehicles ul.grid > li.col-4-12 {
    width: 50%;
  }
}
@media (max-width: 768px) {
  #vehicles ul.grid > li.col-4-12 {
    width: 100%;
  }
}

/* Image cards: full-height dark overlay, centred white text, rounded. */
#vehicles .box-69_custom {
  position: relative;
  width: 100%;
  min-height: 500px;
  border-radius: 6px;
  overflow: hidden;
}
#vehicles .box-69_custom > .cell-69_custom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
#vehicles .box-69_custom .cell h3,
#vehicles .box-69_custom .cell h6 {
  color: #fff;
}

/* The final "Entdecke jetzt …" card carries no background image. */
#vehicles li > .rounded:not(.box-69_custom) {
  width: 100%;
  min-height: 500px;
  border-radius: 6px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Legal pages: full-height, vertically-centred content slide ----------- */
.legalPage .slide.whiteSlide:not(.autoHeight),
.legalPage .slide.whiteSlide:not(.autoHeight) .container {
  min-height: 100vh;
}

/* PDF download tiles on legal pages. */
.icon-pdf {
  max-width: 70px;
  max-height: 70px;
  margin: 0 auto 10px;
  transition: all 250ms ease;
}
a:hover .icon-pdf {
  transform: translate(0, -10px);
}

/* --- Side navigation dots (populated at runtime by Header) ---------------- */
.side .navigation li {
  pointer-events: auto;
  cursor: pointer;
}
.side.on-light .navigation li:after {
  border-color: #202020 !important;
}
.side.on-light .navigation li.selected:after,
.side.on-light .navigation li:hover:after {
  background: #202020 !important;
  border-color: #202020 !important;
}