/* 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;
}

html, body {
  overflow-x: hidden;
}

@media (max-width:768px){
  .hero{min-height:auto !important; height:auto !important; box-sizing:border-box; padding-bottom:3rem; overflow:visible !important}
  .hero-slider{overflow:hidden}
  .hero-content,
  .hero-inner{height:auto !important; min-height:0 !important; overflow:visible !important}
  .navbar{height:var(--nav-height-lg)}
  .nav-links{top:var(--nav-height-lg) !important; max-height:calc(100vh - var(--nav-height-lg)); overflow-y:auto}
  .logo img{height:56px !important}
  .hero-content{padding-top:1rem;padding-bottom:2.2rem}
  .hero-left,
  .hero-right{width:100% !important; max-width:100% !important}
  .hero-buttons{width:100%; display:flex; flex-direction:column; align-items:center}
  .hero-content h1{font-size:1.28rem !important; line-height:1.28 !important; text-align:center !important}
  .hero-content p{font-size:1.02rem !important; letter-spacing:0.6px !important}
  .hero-subtitle{font-size:0.95rem !important; line-height:1.55 !important}
  .hero-right .customer-btn{width:min(92vw,340px) !important; white-space:normal; text-align:center; line-height:1.25}
  .hero-mid p,
  .hero-content h1,
  .hero-subtitle,
  .quick-filter-label,
  .trust-item span{overflow-wrap:anywhere; word-break:normal}
  .hero-quick-filter{padding:0 0.6rem}
  .quick-filter-btn{min-height:40px; padding:0.55rem 0.85rem}
  .hero-trust-strip{gap:0.55rem !important; margin-top:1.15rem !important}
  .trust-item{padding:0.52rem 0.6rem !important}
  .trust-item strong{font-size:0.76rem !important}
  .trust-item span{font-size:0.76rem !important}

  .service-intent-section,
  .local-signal-section,
  .faq-section,
  .contact-section,
  .reviews-section {
    padding:2.2rem 0.9rem !important;
  }

  .service-intent-container,
  .local-signal-container,
  .faq-container,
  .contact-container,
  .reviews-container {
    padding:1.2rem !important;
    border-radius:10px !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .submit-button,
  .step-nav-btn,
  .optional-toggle-btn {
    font-size:16px !important;
  }

  .contact-step-nav {
    gap:0.6rem !important;
  }

  .contact-step-nav .step-nav-btn,
  .contact-step-nav .step-submit-btn {
    min-height:44px;
  }

  .video-grid {
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }

  .video-chapters {
    gap:0.4rem !important;
  }

  .video-chapter-btn {
    min-height:36px;
  }

  .mobile-sticky-cta {
    min-height:44px;
    padding:0.72rem 1.05rem !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .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)); padding-bottom:calc(5.2rem + env(safe-area-inset-bottom, 0))}
}

@media (max-width:480px){
  .hero{min-height:auto !important; height:auto !important; padding-bottom:2.2rem; overflow:visible !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}
  .hero-content h1{font-size:1.14rem !important; line-height:1.3 !important}
  .hero-content p{font-size:0.93rem !important}
  .quick-filter-label{width:100%; text-align:center}
  .hero-trust-strip{margin-top:0.95rem !important}
  body{padding-top:calc(var(--nav-height-sm) + env(safe-area-inset-top, 0)); padding-bottom:calc(5rem + env(safe-area-inset-bottom, 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))}
}

@media (max-width:768px){
  .portfolio-categories{
    grid-template-columns:1fr;
    gap:1.5rem;
    justify-content:stretch;
  }

  .category-card{
    aspect-ratio:3 / 4;
  }
}

@media (max-width:768px) and (prefers-reduced-motion: reduce){
  .reveal-on-scroll,
  .reveal-on-scroll.revealed {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}