/* Solinava mobile Web-App layout — desktop stays untouched */
@media (max-width:900px){
  :root{--mobile-nav-h:64px}
  html,body{
    width:100%;
    min-height:100%;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#020914!important;
  }
  body{
    padding:0 0 calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    -webkit-text-size-adjust:100%;
    overscroll-behavior-y:none;
  }
  .viewport{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-height:100dvh!important;
    overflow:visible!important;
    background:#020914!important;
  }
  .sheet{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    transform:none!important;
    transform-origin:center!important;
    overflow:visible!important;
    background:
      radial-gradient(circle at 50% 4%,rgba(0,126,255,.20),transparent 18%),
      linear-gradient(180deg,#031122 0%,#020914 48%,#01060c 100%)!important;
  }
  .sheet:after{display:none!important}

  .nav{
    position:sticky!important;
    left:auto!important;right:auto!important;top:0!important;
    height:calc(66px + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 16px 0!important;
    display:flex!important;
    justify-content:center!important;
    border-bottom:1px solid rgba(57,176,255,.42)!important;
    background:rgba(2,9,20,.94)!important;
    backdrop-filter:blur(18px)!important;
  }
  .nav:after{display:none!important;content:none!important}
  .logo{
    width:auto!important;height:64px!important;
    justify-content:center!important;
  }
  .logo img{
    width:min(240px,62vw)!important;
    max-width:none!important;
    max-height:44px!important;
    object-position:center!important;
  }
  .nav nav{
    position:fixed!important;
    z-index:200!important;
    left:0!important;right:0!important;bottom:0!important;
    height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:0 4px env(safe-area-inset-bottom)!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    align-items:stretch!important;
    background:rgba(2,9,20,.97)!important;
    border-top:1px solid rgba(71,188,255,.48)!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.35)!important;
    backdrop-filter:blur(18px)!important;
  }
  .nav nav a{
    height:var(--mobile-nav-h)!important;
    min-width:0!important;
    padding:0 3px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    font-weight:800!important;
    white-space:normal!important;
    color:#c7d9e5!important;
  }
  .nav nav a.active{color:#fff!important}
  .nav nav a.active:after{
    left:18%!important;right:18%!important;bottom:5px!important;height:3px!important;
  }

  .hero{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    border-bottom:0!important;
  }
  .hero:before{display:none!important}
  .hero-art{
    order:-1!important;
    position:relative!important;
    right:auto!important;top:auto!important;
    width:100%!important;
    min-width:0!important;
    height:220px!important;
    overflow:hidden!important;
  }
  .hero-art:before{
    background:linear-gradient(180deg,rgba(2,9,20,.04),rgba(2,9,20,.22) 58%,#031122 100%)!important;
  }
  .hero-art img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .demo-data-badge{display:none!important}
  .hero-copy{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:auto!important;
    padding:12px 18px 28px!important;
  }
  .eyebrow{
    margin:0 0 8px!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    letter-spacing:.13em!important;
  }
  .hero h1{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(39px,11vw,48px)!important;
    line-height:.94!important;
    letter-spacing:-.04em!important;
    overflow-wrap:anywhere!important;
  }
  .hero h1 em{display:inline!important}
  .lead{
    width:auto!important;
    max-width:100%!important;
    margin:16px 0 0!important;
    font-size:16px!important;
    line-height:1.42!important;
    font-weight:550!important;
  }
  .hero-cta{
    width:100%!important;
    height:52px!important;
    margin-top:18px!important;
    font-size:18px!important;
    border-radius:13px!important;
  }

  .service-strip{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0 14px 26px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .service-strip>a{
    min-height:116px!important;
    padding:13px 11px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px!important;
    border-right:1px solid rgba(45,156,255,.45)!important;
    border-bottom:1px solid rgba(45,156,255,.45)!important;
  }
  .service-strip>a:nth-child(2n){border-right:0!important}
  .service-strip>a:nth-last-child(-n+2){border-bottom:0!important}
  .ico{
    width:40px!important;height:40px!important;
    border-radius:10px!important;
    font-size:23px!important;
  }
  .service-strip b{
    font-size:13px!important;
    line-height:1.15!important;
    margin-bottom:5px!important;
  }
  .service-strip small{
    font-size:10.5px!important;
    line-height:1.28!important;
  }

  .examples{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:0 14px 24px!important;
    background:
      linear-gradient(rgba(2,10,21,.82),rgba(2,9,18,.97)),
      url("assets/pixel/bg-mountains.jpg") center top/cover no-repeat!important;
  }
  .examples-heading{
    height:auto!important;
    padding:18px 2px 16px!important;
  }
  .examples-heading p{
    margin-bottom:7px!important;
    font-size:10.5px!important;
  }
  .examples-heading h2{
    font-size:clamp(31px,9vw,40px)!important;
    line-height:1!important;
  }
  .cards{
    height:auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .visual{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .visual img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .card-copy{
    min-height:145px!important;
    padding:14px 15px 15px!important;
  }
  .card h3{
    margin:0 0 7px!important;
    font-size:23px!important;
    line-height:1.08!important;
    white-space:normal!important;
  }
  .card p{
    min-height:0!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  .card-cta{
    height:48px!important;
    margin-top:14px!important;
    font-size:15px!important;
    border-radius:11px!important;
  }
}

@media (max-width:430px){
  .hero-art{height:200px!important}
  .hero-copy{padding-left:16px!important;padding-right:16px!important}
  .hero h1{font-size:clamp(37px,10.7vw,46px)!important}
  .service-strip{margin-left:12px!important;margin-right:12px!important}
  .examples{padding-left:12px!important;padding-right:12px!important}
}

/* Mobile app-nav containment fix: keep logo at top, tabs fixed to viewport bottom. */
@media (max-width:900px){
  .nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}
/* Mobile project discovery lock — make the six clickable projects unmistakable. */
@media (max-width:900px){
  .sheet{
    display:flex!important;
    flex-direction:column!important;
  }
  .nav{order:0!important}
  .hero{order:1!important}
  .examples{order:2!important}
  .service-strip{order:3!important}

  .examples{
    padding-top:8px!important;
    border-top:1px solid rgba(74,209,255,.42)!important;
  }
  .examples-heading{
    padding:20px 2px 18px!important;
    text-align:left!important;
  }
  .examples-heading p{
    font-size:0!important;
    margin:0 0 9px!important;
  }
  .examples-heading p::after{
    content:"6 PROJEKTE · ANTIPPEN & ANSEHEN";
    display:block;
    font-size:12px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.13em;
    color:#59e8ff;
  }
  .examples-heading h2{
    max-width:100%!important;
    font-size:clamp(31px,9vw,40px)!important;
    line-height:1.02!important;
  }
  .card{
    box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 1px rgba(47,167,255,.12)!important;
  }
  .card-cta{
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 16px!important;
    font-size:16px!important;
    font-weight:900!important;
  }
}

/* Mobile project launcher — unmistakable 2x3 project selector. Desktop untouched. */
.mobile-project-jump,
.mobile-project-nav{display:none}

@media (max-width:900px){
  .mobile-project-jump{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    margin-top:10px!important;
    padding:0 16px!important;
    border:1px solid rgba(89,232,255,.78)!important;
    border-radius:12px!important;
    color:#dff9ff!important;
    background:rgba(5,35,63,.72)!important;
    text-decoration:none!important;
    font-size:15px!important;
    font-weight:900!important;
    box-shadow:0 0 18px rgba(52,201,255,.16)!important;
  }
  .mobile-project-jump span{font-size:20px!important;color:#59e8ff!important}

  .nav nav .mobile-project-nav{display:flex!important}
  .nav nav a[href="impressum.html"]{display:none!important}

  .examples{
    scroll-margin-top:76px!important;
    padding:8px 12px 22px!important;
  }
  .examples-heading{
    padding:18px 2px 14px!important;
  }
  .examples-heading p::after{
    content:"UNSERE 6 PROJEKTE · ANTIPPEN & ANSEHEN"!important;
  }
  .examples-heading h2{
    font-size:30px!important;
    line-height:1.04!important;
  }
  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .card{
    min-height:0!important;
    grid-template-rows:auto auto!important;
    border-radius:14px!important;
  }
  .visual{
    aspect-ratio:1.25/1!important;
    height:auto!important;
  }
  .visual img{
    object-fit:cover!important;
    object-position:center!important;
  }
  .card-copy{
    min-height:116px!important;
    padding:11px 11px 12px!important;
  }
  .card h3{
    font-size:16px!important;
    line-height:1.08!important;
    margin:0 0 8px!important;
  }
  .card p{display:none!important}
  .card-cta{
    min-height:40px!important;
    height:40px!important;
    margin-top:auto!important;
    padding:0 10px!important;
    font-size:12px!important;
    border-radius:9px!important;
  }
}

/* MOBILE HOME SCROLL CONTAINER — real-device fix */
@media (max-width:900px){
  html,body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body{
    padding:0!important;
  }
  .viewport{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))!important;
  }
  .sheet{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
    touch-action:pan-y!important;
  }
  .hero,.examples,.cards,.card,.service-strip{
    touch-action:pan-y!important;
  }
}

/* MOBILE PROJECT ORDER LOCK — user-approved 2026-10-05
   Creator, Merch, Tattoo, Activity, Business, Dashboard.
   Desktop DOM/order stays untouched. */
@media (max-width:900px){
  #projects .cards .card:nth-child(3){order:1!important}
  #projects .cards .card:nth-child(2){order:2!important}
  #projects .cards .card:nth-child(5){order:3!important}
  #projects .cards .card:nth-child(4){order:4!important}
  #projects .cards .card:nth-child(1){order:5!important}
  #projects .cards .card:nth-child(6){order:6!important}
}

/* MOBILE APP NAV FINAL — keep Projekte and restore explicit Impressum. */
@media (max-width:900px){
  .nav nav{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .nav nav a[href="impressum.html"]{
    display:flex!important;
  }
  .nav nav a{
    padding-left:1px!important;
    padding-right:1px!important;
    font-size:9.5px!important;
  }
}
@media (max-width:430px){
  .nav nav a{font-size:9px!important}
}