/* 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;
}

/* /portal embeds the booking portal instead of the map. The framework's
   default .wrap padding (40px 45px) letterboxes the frame on a phone — the
   portal ran 285px wide inside a 375px screen. Release it so the portal runs
   edge to edge, as the other brands' inline CSS already does for their map
   slides. Scoped to .portalSlide so the home page's map slide keeps today's
   look, and to mobile because desktop shows the map embed, not the portal. */
@media (max-width: 768px) {
  #embedded.portalSlide .wrap {
    padding: 0;
  }
}