/* =========================================================
   Mirage Artistik – Smartphone Startseite v800
   Aufbau nach dem Prinzip der bereitgestellten Light-on-Stage-Seite:
   fixer Header + normaler Seitenfluss + Hero min-height + absolute cover background
   ========================================================= */

@media(max-width:700px){

  :root{ --home-header:58px; }

  html{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
  }

  body.home-page{
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    height:auto!important;
    margin:0!important;
    padding:var(--home-header) 0 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#050304!important;
  }

  /* Header wie bei LOS: fester Bereich, darunter beginnt der eigentliche Hero */
  body.home-page .topbar,
  body.home-page header.topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--home-header)!important;
    min-height:var(--home-header)!important;
    z-index:10000!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    background:rgba(5,3,4,.96)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  body.home-page .topbar .wrap,
  body.home-page .topbar .nav{
    width:100%!important;
    max-width:none!important;
    height:var(--home-header)!important;
    min-height:var(--home-header)!important;
    margin:0!important;
    padding:0 10px 0 96px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }

  body.home-page .mirage-corner-logo{
    position:fixed!important;
    top:6px!important;
    left:9px!important;
    width:78px!important;
    max-width:78px!important;
    height:46px!important;
    z-index:10020!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.home-page .mirage-corner-logo img{
    width:100%!important;
    height:100%!important;
    max-height:46px!important;
    object-fit:contain!important;
  }

  /* Kernprinzip:
     Hero NICHT auf 100dvh festklemmen.
     Er bekommt eine Mindesthöhe und darf sauber auf den echten mobilen Viewport reagieren. */
  body.home-page .hero.hero-clean{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - var(--home-header))!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#050304!important;
  }

  /* Hintergrund liegt wie bei LOS absolut unter allen Inhalten */
  body.home-page .stage-clean-wrap{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#050304!important;
    transform:none!important;
  }

  body.home-page .stage-clean-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
    transform:none!important;
    animation:none!important;
  }

  /* leichte Lesbarkeit, aber kein zusätzlicher Bild-Layer */
  body.home-page .stage-clean-wrap::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.03) 0%,
        rgba(0,0,0,0) 68%,
        rgba(0,0,0,.28) 100%)!important;
  }

  /* Originales Mirage-Logo separat über der Bühne */
  body.home-page .mirage-main-logo{
    position:absolute!important;
    z-index:5!important;
    left:50%!important;
    top:45%!important;
    display:block!important;
    width:min(84vw,430px)!important;
    max-width:84vw!important;
    height:auto!important;
    max-height:34dvh!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    object-fit:contain!important;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.68))!important;
  }

  /* Buttons wie LOS als echter Hero-Inhalt über dem Hintergrund */
  body.home-page .hero-cta-bar{
    position:absolute!important;
    z-index:8!important;
    left:14px!important;
    right:14px!important;
    bottom:30px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    transform:none!important;
  }

  body.home-page .hero-cta-bar .actions{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  body.home-page .hero-cta-bar .btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.15!important;
    background:rgba(5,3,4,.74)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
  }

  body.home-page .hero-cta-bar .btn.primary{
    background:linear-gradient(90deg,rgba(92,5,22,.91),rgba(141,8,28,.96),rgba(92,5,22,.91))!important;
  }

  /* nur die beiden Rechtslinks unten – keine zweite Footerfläche */
  body.home-page .mirage-floor-footer{
    position:absolute!important;
    z-index:9!important;
    left:50%!important;
    bottom:7px!important;
    width:max-content!important;
    max-width:calc(100vw - 18px)!important;
    margin:0!important;
    padding:2px 7px!important;
    transform:translateX(-50%)!important;
    background:rgba(0,0,0,.20)!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.home-page .mirage-floor-footer .footer,
  body.home-page .mirage-floor-footer .footer .wrap{
    position:static!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body.home-page .mirage-floor-footer .footer nav{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
  }

  body.home-page .mirage-floor-footer .footer .wrap>div:last-child{
    display:none!important;
  }

  /* Intro bleibt möglich, verändert aber nach seinem Ende das Layout nicht */
  body.home-page.intro-lock{
    overflow:hidden!important;
  }

  #mirageLogoReveal,
  #mirageCurtainReveal{
    width:100vw!important;
    height:100dvh!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
}

/* kleinere Geräte */
@media(max-width:430px){
  body.home-page .stage-clean-image{
    object-position:50% 48%!important;
  }
  body.home-page .mirage-main-logo{
    top:44%!important;
    width:86vw!important;
    max-width:86vw!important;
  }
  body.home-page .hero-cta-bar{
    left:10px!important;
    right:10px!important;
  }
}

/* sehr schmale Geräte */
@media(max-width:360px){
  body.home-page .mirage-main-logo{
    top:42%!important;
    width:88vw!important;
    max-height:31dvh!important;
  }
  body.home-page .hero-cta-bar .btn{
    min-height:40px!important;
    font-size:9px!important;
  }
}

/* Smartphone Querformat: wie LOS über min-height statt künstlichem Vollbild-Zwang */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  body.home-page{
    --home-header:52px;
  }
  body.home-page .mirage-corner-logo{
    top:4px!important;
    width:70px!important;
    max-width:70px!important;
    height:43px!important;
  }
  body.home-page .hero.hero-clean{
    min-height:calc(100dvh - var(--home-header))!important;
  }
  body.home-page .mirage-main-logo{
    top:42%!important;
    width:min(52vw,390px)!important;
    max-height:50dvh!important;
  }
  body.home-page .hero-cta-bar{
    left:18px!important;
    right:18px!important;
    bottom:24px!important;
  }
  body.home-page .hero-cta-bar .actions{
    grid-template-columns:1fr 1fr!important;
  }
  body.home-page .hero-cta-bar .btn{
    min-height:36px!important;
    padding:7px 10px!important;
  }
}