/* Mobile-spezifische Ergänzungen für bessere Handy-Ansicht */
/* Reserve space for fixed navbar so hero content isn't hidden */
:root{
  --nav-height-lg:64px;
  --nav-height-sm:56px;
}

@media (max-width:768px){
  .hero{min-height:calc(100vh - var(--nav-height-lg)) !important; box-sizing:border-box}
  .navbar{height:var(--nav-height-lg)}
  .nav-links{top:var(--nav-height-lg) !important}
  .logo img{height:56px !important}
  .hero-content{padding-top:1rem;padding-bottom:2rem}
  .portrait-placeholder{height:320px}
  /* Push page content below the fixed navbar so it's never overlapped */
  body{padding-top:calc(var(--nav-height-lg) + env(safe-area-inset-top, 0))}
}

@media (max-width:480px){
  .hero{min-height:calc(100vh - var(--nav-height-sm)) !important}
  .navbar{height:var(--nav-height-sm)}
  .logo img{height:48px !important}
  .portrait-placeholder{height:240px}
  .hero-content{padding-left:0.75rem;padding-right:0.75rem}
  body{padding-top:calc(var(--nav-height-sm) + env(safe-area-inset-top, 0))}
}

/* small tweaks for viewport-fit on iOS */
@supports (padding: env(safe-area-inset-top)){
  :root{--safe-top: env(safe-area-inset-top)}
  .navbar{padding-top:calc(.4rem + var(--safe-top))}
}