/* Homepage — section scroll, videos, slide layers (not Webflow flex boxes) */

body.machbar-home {
  margin: 0;
  overflow: hidden;
  /* svh = chrome expanded (matches first paint with toolbars visible) */
  height: 100vh;
  height: 100svh;
}

/* Poster + video must share the same crop box (no 1px video-only clip from pages.css) */
.machbar-home .slide-media .machbar-bg-video {
  clip-path: none;
}

body.machbar-home.nav-open {
  overflow: hidden;
}

/* Homepage nav — logo + links follow active slide CTA tone */
body.machbar-home #NavBar {
  --home-nav-color: #fff;
}

body.machbar-home #NavBar .headline.logo,
body.machbar-home #NavBar .navbar-text-link {
  color: var(--home-nav-color) !important;
  transition: color 0.4s ease;
}

body.machbar-home #NavBar #nav-toggle svg,
body.machbar-home #NavBar #nav-toggle svg * {
  transition:
    fill 0.4s ease,
    stroke 0.4s ease,
    filter 0.4s ease;
}

#fullpage.fp-wrapper {
  /* One measured height for viewport + every section (set by machbar-home.js) */
  --machbar-slide-h: 100vh;
  --machbar-slide-h: 100svh;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: var(--machbar-slide-h);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

#fullpage.machbar-scroll-animating {
  pointer-events: none;
}

#fullpage > .section {
  height: var(--machbar-slide-h);
  min-height: var(--machbar-slide-h);
  max-height: var(--machbar-slide-h);
  position: relative;
  box-sizing: border-box;
  /* Avoid subpixel gaps between slides leaking the previous background */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Beat Webflow .slide-content-wrapper { height: 100vh } — that large viewport
   pushes flex-end / centered copy below the visible middle on mobile Chrome. */
.machbar-home #fullpage .slide-content-wrapper {
  height: var(--machbar-slide-h) !important;
  min-height: var(--machbar-slide-h) !important;
  max-height: var(--machbar-slide-h) !important;
  box-sizing: border-box;
}

/* --- Slide stack (z-index: video 0, hit 2, overlay 50, copy 100) --- */
.machbar-home .machbar-slide {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.machbar-home .slide-hit-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: transparent;
}

.machbar-home .slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Override Webflow .header_embed_video (contain, relative, auto height) on homepage */
.machbar-home .slide-media,
.machbar-home .slide-media.header_embed_video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  object-fit: unset;
  background: transparent !important;
  border: none !important;
}

/* Fill the slide box identically for poster + video (case-hero style).
   Do NOT use width/height:auto + min-100%: different intrinsic ARs then scale
   differently and the poster→video handoff jumps on mobile. Parent overflow
   already contains subpixel bleed — do not clip-path the video here. */
.machbar-home .slide-media .machbar-bg-video,
.machbar-home .slide-media .slide-video-poster {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  transform: none;
  object-fit: cover;
  object-position: center center;
}

/* While video/poster cover the stage, keep any gap black — not brand green.
   Also drop legacy Webflow JPG backgrounds (often missing → Lighthouse 404s). */
.machbar-home .machbar-slide:has(.slide-media) {
  background-color: #000;
  background-image: none !important;
}

/* Hero / Sonor still used color1/color4 JPG fallbacks that are not in /public/images */
.machbar-home .slide-content-wrapper.color1,
.machbar-home .slide-content-wrapper.color4 {
  background-image: none !important;
}

.machbar-home .slide-media .slide-video-poster {
  z-index: 1;
  display: block;
  transition: none;
}

.machbar-home .slide-media .machbar-bg-video {
  z-index: 2;
  opacity: 0;
  transition: none;
}

.machbar-home .slide-media .machbar-bg-video.is-playing.is-ready {
  opacity: 1;
}

.machbar-home .slide-media:has(.machbar-bg-video.is-playing.is-ready) .slide-video-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Center overlay graphic — size from CMS (--overlay-max) */
.machbar-home .slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  pointer-events: none;
  box-sizing: border-box;
}

.machbar-home .slide-overlay__img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--overlay-max, min(92vw, 1200px));
  max-height: min(calc(var(--machbar-slide-h, 100svh) * 0.78), 900px);
  object-fit: contain;
}

/* Hero: large centered logo (Element-1) + room for scroll Lottie */
.machbar-home .slide-overlay--hero-center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(72px, 10svh, 100px) clamp(24px, 5vw, 80px) clamp(100px, 14svh, 140px);
}

.machbar-home .slide-overlay--hero-center .slide-overlay__img {
  max-width: var(--overlay-max, min(92vw, 1400px));
  max-height: min(calc(var(--machbar-slide-h, 100svh) * 0.72), 820px);
}

/* Video slides: optional centered graphic over video (usually empty) */
.machbar-home .slide-overlay--center {
  justify-content: center;
  align-items: center;
  padding: clamp(72px, 10svh, 100px) clamp(24px, 5vw, 80px);
}

.machbar-home .slide-overlay--center .slide-overlay__img {
  max-width: var(--overlay-max, min(80vw, 1100px));
  max-height: min(calc(var(--machbar-slide-h, 100svh) * 0.7), 800px);
}

/* Sonor badge — top right */
.machbar-home .slide-overlay--badge-top-right {
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(88px, 12svh, 128px) clamp(24px, 6vw, 100px) clamp(24px, 4svh, 48px);
}

.machbar-home .slide-overlay--badge-top-right .slide-overlay__img {
  max-width: var(--overlay-max, min(42vw, 480px));
  max-height: min(calc(var(--machbar-slide-h, 100svh) * 0.48), 520px);
  margin: 0 0 0 auto;
  opacity: 0.75;
}

.machbar-home .slide-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5svh, 48px);
  transform: translateX(-50%);
  z-index: 60;
  width: clamp(80px, 12vw, 150px);
  height: clamp(80px, 12vw, 150px);
  pointer-events: none;
}

.machbar-home #lottie-scroll {
  width: 100%;
  height: 100%;
}

/* Copy uses Webflow .startseite-contentbox.text / .unterseite (flex-start = logo column) */
.machbar-home .startseite-contentbox.text,
.machbar-home .startseite-contentbox.unterseite {
  pointer-events: none;
  box-sizing: border-box;
}

.machbar-home .startseite-contentbox .startseite-textbox,
.machbar-home .startseite-contentbox .link-block {
  pointer-events: auto;
  box-sizing: border-box;
}

.machbar-home .startseite-textbox .link-block {
  color: inherit;
  text-decoration: none;
}

/* Webflow: .startseite-textbox = 500px; .unterseite = up to 1440px (Profil, Team, machbar.home) */
.machbar-home .startseite-textbox.unterseite,
.machbar-home .machbar-slide.machbarhome .startseite-textbox,
.machbar-home .machbar-slide.profil .startseite-textbox,
.machbar-home .machbar-slide.team .startseite-textbox {
  max-width: 1440px;
  width: 100%;
}

.machbar-home .headline.startseite-teaser {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 20px;
}

/* Match Webflow desktop (100px / 106px); clamp only on smaller breakpoints below */
.machbar-home .headline.startseite {
  font-size: 100px;
  line-height: 106px;
}

.machbar-home .paragraph.white.startseite,
.machbar-home .paragraph.startseite {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Webflow: .link-block.startseite { margin-top: 40px } — paragraph → Mehr erfahren */
.machbar-home .startseite-textbox .link-block.startseite {
  margin-top: 40px;
}

.machbar-home .startseite-textbox-link {
  pointer-events: auto;
}

/* Copy tone on textbox — case-sized CTA inherits via color below */
.machbar-home .startseite-textbox.white {
  color: #fff;
}

.machbar-home .startseite-textbox.maus {
  color: var(--black);
}

.machbar-home .startseite-textbox.dunkelgr-n {
  color: #407f72;
}

.machbar-home .startseite-textbox.hellblau {
  color: #5fb4ac;
}

.machbar-home .startseite-textbox.hellgr-n {
  color: var(--machbar-green);
}

/* Footer slide — use Webflow .footer-content (not .footer-content.startseite which is display:none) */
.machbar-home .section.footer .slide-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #2f2f2f;
}

.machbar-home .section.footer .startseite-contentbox.footer {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: clamp(24px, 6vw, 100px);
  box-sizing: border-box;
}

.machbar-home .section.footer .footer-content {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  gap: 24px 40px;
}

.machbar-home .section.footer .footer-content.startseite {
  display: none !important;
}

.machbar-home .section.footer .footer-textbox {
  align-items: flex-start;
  margin-bottom: 0;
}

.machbar-home .section.footer .footer-textbox.icons {
  margin-bottom: 0;
}

.machbar-home .section.footer .footer-divider.startseite {
  width: 100%;
  max-width: 1440px;
}

.machbar-home .section.footer .footer-bottombar.startseite {
  width: 100%;
  max-width: 1440px;
  justify-content: space-between;
}

@media screen and (max-width: 991px) {
  .machbar-home .slide-overlay--badge-top-right {
    display: none;
  }

  .machbar-home .section.footer .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .machbar-home .section.footer .footer-textbox {
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
  }

  .machbar-home .section.footer .footer-bottombar.startseite {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 991px) {
  .machbar-home .startseite-textbox .link-block.startseite {
    margin-top: 32px;
  }
}

@media screen and (max-width: 767px) {
  .machbar-home .slide-overlay--hero-center {
    padding-bottom: 100px;
  }

  .machbar-home .slide-overlay--hero-center .slide-overlay__img {
    max-width: min(94vw, 520px);
  }

  /* Keep CTA copy above iOS Chrome / Safari bottom toolbars */
  .machbar-home .startseite-contentbox.text {
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  }

  .machbar-home .startseite-textbox .link-block.startseite {
    margin-top: 0;
  }

  .machbar-home .headline.startseite-teaser {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .machbar-home .headline.startseite {
    font-size: clamp(2rem, 10vw, 5rem);
    line-height: 1.06;
  }
}

@media screen and (max-width: 479px) {
  .machbar-home .startseite-contentbox.text:not(.unterseite) .startseite-textbox:not(.unterseite) {
    max-width: 260px;
  }
}

/* Desktop-only round stage cues (48px = snapshots indicators) */
.machbar-home-indicators {
  --machbar-home-indicator-size: 48px;
  position: fixed;
  right: max(28px, calc(env(safe-area-inset-right, 0px) + 28px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.machbar-home-indicators__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.machbar-home-indicators__item {
  margin: 0;
  padding: 0;
}

.machbar-home-indicator {
  display: block;
  width: var(--machbar-home-indicator-size);
  height: var(--machbar-home-indicator-size);
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition:
    opacity 0.35s ease,
    border-color 0.35s ease,
    transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.machbar-home-indicator:hover {
  opacity: 0.75;
}

.machbar-home-indicator.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.92);
}

.machbar-home-indicator__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.machbar-home-indicator__monogram {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  font-family: Informative, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

@media (max-width: 991px) {
  .machbar-home-indicators {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fullpage.fp-wrapper {
    height: auto;
    overflow: visible;
  }

  #fullpage > .section {
    height: auto;
    min-height: var(--machbar-slide-h, 100svh);
    max-height: none;
  }

  .machbar-home .machbar-bg-video {
    display: none;
  }

  body.machbar-home {
    overflow: auto;
    height: auto;
  }

  .machbar-home-indicators {
    display: none;
  }
}