/* STEP45 HOTFIX 20
   - Scrollbar noch duenner und unauffaelliger
   - Textblock links weiter nach links
   - Markierung unter jedem Wort bis Wortende
   Diese Datei ersetzt die bisherige step45.css und braucht zusaetzlich die index.html aus diesem Hotfix.
*/

/* sehr kleine, unauffaellige Scrollbar */
html{
  scrollbar-width:thin;
  scrollbar-color:#fff #000;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:1px;
  height:1px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:#000;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.96);
  border:0 solid #000;
  border-radius:0;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:#fff;
}

/* Header erst nach Intro sichtbar */
.step45-body .head{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:0!important;
  z-index:60!important;
  background:rgba(244,241,234,.88)!important;
  border-bottom:1px solid rgba(13,15,14,.06)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.05)!important;
  backdrop-filter:saturate(1.06) blur(12px)!important;
  -webkit-backdrop-filter:saturate(1.06) blur(12px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-14px)!important;
  transition:opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s!important;
}
.step45-body.step40-menu-live .head{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
  transition-delay:0s!important;
}
.step45-body .head-in{
  position:relative;
  height:74px!important;
  justify-content:space-between!important;
  align-items:center!important;
}
.step45-body .brand{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  margin-right:auto!important;
}

/* HERO */
.step45-body .step41-hero{
  min-height:100svh!important;
}
.step45-body .step41-hero-inner{
  width:calc(100% - clamp(2px,.35vw,8px))!important;
  max-width:1720px!important;
  grid-template-columns:minmax(208px, 22.5%) minmax(0, 77.5%)!important;
  gap:clamp(0px,.2vw,4px)!important;
  align-items:center!important;
}
.step45-body .step41-hero-copy{
  max-width:490px!important;
  justify-self:start!important;
  align-self:center!important;
  padding:clamp(92px,10vh,124px) 0 clamp(80px,9vh,108px)!important;
  margin-left:0!important;
  position:relative;
  z-index:4!important;
  transform:translateX(-18px) translateY(18px)!important;
}
.step45-body.step40-menu-live .step41-hero-copy{
  transform:translateX(-18px) translateY(0)!important;
}
.step45-body .step41-hero-kicker,
.step45-body .step41-hero-copy h1,
.step45-body .step41-hero-copy p,
.step45-body .step41-hero-copy .step41-hero-actions{
  margin-left:0!important;
}

/* Headline-Woerter einzeln markieren */
.step45-body .step41-hero h1 span{
  width:max-content!important;
  max-width:none!important;
}
.step45-body .step41-hero h1 span::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:-.018em!important;
  width:100%!important;
  height:.068em!important;
  border-radius:999px!important;
  background:rgba(216,240,36,.58)!important;
  opacity:.72!important;
  filter:saturate(.92)!important;
  transform-origin:left center!important;
}
.step45-body .step41-hero h1 span:nth-child(1)::after{width:103%!important;transform:scaleX(1)!important;}
.step45-body .step41-hero h1 span:nth-child(2)::after{width:100%!important;}
.step45-body .step41-hero h1 span:nth-child(3)::after{width:98%!important;}
.step45-body .step41-hero h1 span + span{margin-top:.02em!important;}
.step45-body .step41-hero h1 span::after{transform:scaleX(1)!important;}

/* Tiger gross, rechts, ohne hartes Abschneiden */
.step45-body .step41-hero-visual{
  width:min(76vw, 1280px)!important;
  min-width:860px!important;
  right:0!important;
  overflow:hidden!important;
  opacity:.26;
  filter:brightness(.84) saturate(.94);
  transform:translateX(0) translateY(20px)!important;
  transition:opacity .78s ease, filter .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)!important;
}
.step45-body .step41-hero-visual img{
  object-fit:cover!important;
  object-position:49% center!important;
  filter:contrast(1.02) brightness(1) saturate(1)!important;
  transform:scale(1.03)!important;
}
.step45-body.step40-menu-live .step41-hero-copy,
.step45-body.step40-menu-live .step41-hero-visual{
  opacity:1;
  filter:brightness(1) saturate(1);
}
.step45-body.step40-menu-live .step41-hero-visual{
  transform:translateX(0) translateY(0)!important;
}

.step45-body .step41-hero-visual::before,
.step45-body .step41-hero-visual::after{
  display:none!important;
  content:none!important;
  background:none!important;
}
.step45-body .step44-hero-allgaeu,
.step45-body .step41-hero-meta{display:none!important;}

.step45-body .step41-hero-scroll{
  bottom:clamp(8px, 2vh, 18px)!important;
  left:0!important;
}

@media (max-width: 1280px){
  .step45-body .step41-hero-inner{
    width:calc(100% - 6px)!important;
    max-width:1500px!important;
    grid-template-columns:minmax(205px, 22.5%) minmax(0, 77.5%)!important;
    gap:14px!important;
  }
  .step45-body .step41-hero-visual{
    width:min(74vw, 1100px)!important;
    min-width:740px!important;
  }
  .step45-body .step41-hero-visual img{
    object-position:49.5% center!important;
    transform:scale(1.028)!important;
  }
}

@media (max-width: 1100px){
  .step45-body .step41-hero-inner{
    grid-template-columns:minmax(260px, 37%) minmax(0, 63%)!important;
    gap:12px!important;
  }
  .step45-body .step41-hero-copy{max-width:490px!important;}
  .step45-body .step41-hero-visual{
    width:71vw!important;
    min-width:640px!important;
  }
  .step45-body .step41-hero-visual img{
    object-position:50% center!important;
    transform:scale(1.024)!important;
  }
}

@media (max-width: 980px){
  .step45-body .head-in{height:68px!important;}
  .step45-body .step41-hero-inner{
    width:calc(100% - 10px)!important;
    grid-template-columns:minmax(0,34.5%) minmax(0,65.5%)!important;
    gap:10px!important;
  }
  .step45-body .step41-hero-copy{
    max-width:470px!important;
    padding:88px 0 84px!important;
  }
  .step45-body .step41-hero-visual{
    width:69vw!important;
    min-width:540px!important;
  }
  .step45-body .step41-hero-visual img{
    object-position:50.5% center!important;
    transform:scale(1.018)!important;
  }
  .step45-body .step41-hero-scroll{bottom:8px!important;}
}

@media (max-width: 760px){
  .step45-body .head{transform:translateY(-12px)!important;}
  .step45-body .head-in{height:64px!important;}
  .step45-body .step41-hero-copy{
    width:calc(100% - 20px)!important;
    margin:0 auto!important;
    padding:86px 0 30px!important;
  }
  .step45-body .step41-hero h1 span::after{
    height:.062em!important;
    opacity:.68!important;
  }
  .step45-body .step41-hero-visual{
    width:100%!important;
    min-width:0!important;
  }
  .step45-body .step41-hero-visual img{
    object-position:51% center!important;
    transform:scale(1.01)!important;
  }
  .step45-body .step41-hero-scroll{
    display:flex!important;
    left:12px!important;
    bottom:8px!important;
    font-size:.6rem!important;
  }
}


/* HOTFIX 21: Scrollbar noch duenner, Text weiter links, LANGWEILIG voll unterstrichen. */


/* HOTFIX 22: Scrollbar maximal duenn und Text noch weiter links. */


/* HF29: Textblock gezielt weiter nach links, ohne Tiger/Layout anzufassen */
@media (max-width:1100px){
  .step45-body .step41-hero-copy{transform:translateX(-12px) translateY(18px)!important;}
  .step45-body.step40-menu-live .step41-hero-copy{transform:translateX(-12px) translateY(0)!important;}
}
@media (max-width:760px){
  .step45-body .step41-hero-copy{transform:translateX(-6px) translateY(18px)!important;}
  .step45-body.step40-menu-live .step41-hero-copy{transform:translateX(-6px) translateY(0)!important;}
}


/* HOTFIX 30: echte Verlangsamung der scrollgetriebenen Logo-Sequenz.
   STEP43 hatte den Intro-Bereich auf 138svh verkürzt; hier wird der
   Scrollweg bewusst wieder verlängert, damit die Bewegung sichtbar langsamer ist. */
.step45-body .mn-scroll-hero{
  height:182svh!important;
  min-height:1120px!important;
}
@media(max-width:760px){
  .step45-body .mn-scroll-hero{
    height:198svh!important;
    min-height:1240px!important;
  }
}

/* HOTFIX 33: sehr schmale, aber wirklich benutzbare Custom-Scrollbar.
   Sichtbar bleibt nur eine feine schwarze Linie; die Klick-/Drag-Zone ist groesser. */
html{scrollbar-width:none!important;}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

.mn-mini-scrollbar{
  position:fixed;
  z-index:9999;
  right:0;
  top:50%;
  width:10px;              /* unsichtbare Bedienflaeche */
  height:min(46vh,420px);  /* lang genug zum Bedienen */
  min-height:220px;
  transform:translateY(-50%);
  background:transparent;
  pointer-events:auto;
  cursor:pointer;
  touch-action:none;
  user-select:none;
  opacity:.82;
}
.mn-mini-scrollbar::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:2px;
  width:2px;               /* sichtbar extrem schmal */
  background:#000;
}
.mn-mini-scrollbar__thumb{
  position:absolute;
  right:0;
  top:0;
  width:6px;
  height:30px;
  background:#fff;
  border:1px solid #000;
  box-sizing:border-box;
  transform:translateY(0);
  will-change:transform;
  cursor:grab;
}
.mn-mini-scrollbar__thumb:active,
.mn-mini-scrollbar.is-dragging .mn-mini-scrollbar__thumb{
  cursor:grabbing;
}
@media (max-width:760px){
  .mn-mini-scrollbar{
    width:9px;
    height:min(40vh,320px);
    min-height:180px;
    opacity:.76;
  }
  .mn-mini-scrollbar::before{right:1px;width:1px;}
  .mn-mini-scrollbar__thumb{width:5px;height:26px;}
}

/* HOTFIX 34: Custom-Scrollbar auf Mobil komplett ausblenden */
@media (max-width:760px){
  .mn-mini-scrollbar{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

/* HOTFIX 35: Mobile Feinschliff
   - Custom-Scrollbar bleibt mobil aus
   - horizontalen Seiten-Scroll sicher verhindern
   - "Scrollen & entdecken" mobil zentriert unten statt links am Rand */
@media (max-width:760px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .step45-body,
  .step45-body main,
  .step45-body .step41-hero,
  .step45-body .step41-hero-inner{
    max-width:100vw!important;
    overflow-x:clip!important;
  }

  .step45-body .step41-hero-visual{
    max-width:100vw!important;
  }

  .step45-body .step41-hero-scroll{
    left:50%!important;
    right:auto!important;
    bottom:18px!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 28px)!important;
    justify-content:center!important;
    font-size:.56rem!important;
    gap:8px!important;
    letter-spacing:.16em!important;
    white-space:nowrap!important;
    z-index:8!important;
  }

  .step45-body .step41-hero-scroll i{
    width:19px!important;
    height:31px!important;
    border-width:1.5px!important;
  }

  .step45-body .step41-hero-scroll i::after{
    top:6px!important;
    width:2px!important;
    height:5px!important;
    margin-left:-1px!important;
  }
}

/* HOTFIX 36: 'Scrollen & entdecken' mobil noch weiter nach unten */
@media (max-width:760px){
  .step45-body .step41-hero-scroll{
    bottom:2px!important;
    transform:translateX(-50%) translateY(4px)!important;
  }
}


/* HOTFIX 38 · Mobile Video + Scroll-Hinweis
   Native Play-Overlays ausblenden und Scroll-Hinweise auf dieselbe Site-Schrift zwingen. */
.mn-scroll-cue,
.mn-scroll-cue span,
.step45-body .step41-hero-scroll{
  font-family:var(--sans)!important;
  font-style:normal!important;
  font-variant:normal!important;
  font-stretch:normal!important;
}

@media (max-width:760px){
  .mn-scroll-video--mobile{
    pointer-events:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-appearance:none!important;
  }

  .mn-scroll-video--mobile::-webkit-media-controls,
  .mn-scroll-video--mobile::-webkit-media-controls-enclosure,
  .mn-scroll-video--mobile::-webkit-media-controls-panel,
  .mn-scroll-video--mobile::-webkit-media-controls-overlay-play-button,
  .mn-scroll-video--mobile::-webkit-media-controls-start-playback-button,
  .mn-scroll-video--mobile::-webkit-media-controls-play-button{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    -webkit-appearance:none!important;
  }

  .mn-scroll-cue,
  .mn-scroll-cue span,
  .step45-body .step41-hero-scroll{
    font-family:var(--sans)!important;
  }
}


/* HOTFIX 39
   Mobile: Safari-Playbutton sicher verdecken, bis das Video wirklich läuft.
   "Scrollen & entdecken" bekommt eigenen Platz unterhalb des Hero-Inhalts. */
.mn-scroll-mobile-poster{
  display:none;
}

@media (max-width:760px){
  .mn-scroll-media{
    position:absolute!important;
  }

  .mn-scroll-mobile-poster{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    pointer-events:none!important;
    background:
      url("assets/intro/mn-media-tiger-intro-mobile-poster.jpg")
      center center / cover no-repeat!important;
    opacity:1!important;
    transition:opacity .22s ease!important;
  }

  .mn-scroll-hero.mobile-video-playing .mn-scroll-mobile-poster{
    opacity:0!important;
  }

  .mn-scroll-video--mobile{
    z-index:2!important;
  }

  /* Eigenen Platz unter dem mobilen Hero schaffen,
     damit der Hinweis nicht mehr hinter Text/Bild liegt. */
  .step45-body .step41-hero{
    padding-bottom:76px!important;
    overflow:visible!important;
  }

  .step45-body .step41-hero-scroll{
    display:flex!important;
    left:50%!important;
    right:auto!important;
    bottom:14px!important;
    transform:translateX(-50%)!important;
    z-index:20!important;
    white-space:nowrap!important;
  }
}


/* HOTFIX 40
   Mobile Scroll-Hinweise sauber trennen:
   1) Intro "Scrollen" sitzt UNTER dem Claim.
   2) Hero "Scrollen & entdecken" sitzt in eigenem Bereich UNTER dem Tiger.
*/
@media (max-width:760px){

  /* Bild 1 / Intro:
     Nicht mehr zwischen Video und Claim, sondern ganz unten unter dem Claim. */
  .mn-scroll-cue{
    left:50%!important;
    right:auto!important;
    bottom:max(5px, env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    z-index:10!important;
    width:max-content!important;
    white-space:nowrap!important;
    font-size:.58rem!important;
    line-height:1!important;
    gap:8px!important;
    letter-spacing:.16em!important;
    color:rgba(18,19,18,.58)!important;
  }

  .mn-scroll-cue i{
    width:28px!important;
  }

  /* Bild 2 / Startseiten-Hero:
     Reservierter Weißraum nach dem Tiger, damit der Hinweis weder
     hinter den Buttons noch im Tigerbild sitzt. */
  .step45-body .step41-hero{
    position:relative!important;
    padding-bottom:72px!important;
    overflow:hidden!important;
  }

  .step45-body .step41-hero-scroll{
    position:absolute!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    left:50%!important;
    right:auto!important;
    bottom:18px!important;
    width:max-content!important;
    max-width:calc(100vw - 24px)!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    z-index:12!important;
    white-space:nowrap!important;
    font-size:.56rem!important;
    line-height:1!important;
    letter-spacing:.16em!important;
    color:#4b514c!important;
  }
}

@media (max-width:420px){
  .mn-scroll-cue{
    bottom:max(4px, env(safe-area-inset-bottom))!important;
  }

  .step45-body .step41-hero{
    padding-bottom:68px!important;
  }

  .step45-body .step41-hero-scroll{
    bottom:16px!important;
  }
}