/* Modern Floating Navigation Bar */
nav {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 1200px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 50 !important;
  transition: all 0.3s ease !important;
}

nav:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Remove red bottom border from sections */
body,
section,
.border-b,
.border-t,
.border-gray-800 {
  border-bottom: none !important;
  border-top: none !important;
}

/* Remove all borders and white stripes */
* {
  border-left: none !important;
  border-right: none !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Remove any sticky bottom elements */
[style*="position: fixed"][style*="bottom"],
[style*="position: sticky"][style*="bottom"],
.fixed.bottom-0,
.sticky.bottom-0 {
  display: none !important;
  visibility: hidden !important;
}

/* Hide error messages and alerts */
[role="alert"],
.error,
.alert,
div[class*="error"],
div[style*="background: red"],
div[style*="background-color: red"] {
  display: none !important;
  visibility: hidden !important;
}

nav > div {
  padding: 0 30px !important;
}

nav .flex {
  height: 70px !important;
  border-radius: 50px !important;
}

/* Navigation Links Styling */
.nav-link {
  position: relative;
  padding: 10px 20px !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
}

.nav-link:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
}

.nav-link:after {
  display: none !important;
}

/* Logo/Brand Styling */
.text-2xl.font-black {
  font-size: 1.5rem !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
}

.text-2xl.font-black .text-red-600 {
  color: #dc2626 !important;
}

/* Center Urban Productions Header on Landing Page */
section.relative.h-screen .text-7xl,
section.relative.h-screen .text-8xl,
section.relative.h-screen .text-9xl {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2rem !important;
}

/* Center subtitle text */
section.relative.h-screen .text-xl,
section.relative.h-screen .text-2xl,
section.relative.h-screen .text-3xl {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 3rem !important;
}

/* Enhance the hero section text centering */
section.relative.h-screen > div.relative.z-10 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 100px !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Ensure all hero text elements are centered */
section.relative.h-screen h1,
section.relative.h-screen p,
section.relative.h-screen button {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Video container relative wrapper - full coverage */
section.relative.h-screen .relative.w-full.h-full,
section.h-screen .relative.w-full.h-full {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero section - video starts under navbar, no black bar */
section.relative.h-screen,
section.h-screen {
  position: relative !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure hero video is visible and properly sized - NO black bar on top */
section.relative.h-screen iframe,
section.h-screen iframe {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 177.78vh !important;
  height: 100vh !important;
  min-width: 100% !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  border: none !important;
  pointer-events: none !important;
  object-fit: cover !important;
}

/* Video container - full height, no gaps */
section.relative.h-screen .absolute.inset-0,
section.h-screen .absolute.inset-0 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure overlay doesn't hide video */
section.relative.h-screen .absolute.inset-0.bg-black\/50,
section.h-screen .absolute.inset-0.bg-black\/50 {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.65) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  nav {
    top: 10px !important;
    width: 95% !important;
    border-radius: 25px !important;
  }
  
  nav > div {
    padding: 0 15px !important;
  }
  
  nav .flex {
    height: 60px !important;
  }
  
  /* Logo size on mobile */
  .text-2xl.font-black {
    font-size: 1.1rem !important;
  }
  
  /* Mobile menu dropdown with rounded corners */
  .md\:hidden.bg-black {
    border-radius: 0 0 25px 25px !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    margin-top: -1px !important;
  }
  
  /* Hero section mobile optimization */
  section.relative.h-screen {
    min-height: 100vh !important;
    height: auto !important;
    padding: 100px 0 60px !important;
  }
  
  section.relative.h-screen .relative.z-10 {
    padding: 0 1rem !important;
  }
  
  /* Improve video overlay for better text readability */
  section.relative.h-screen .absolute.inset-0.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.65) !important;
  }
  
  /* Hero title responsive sizing */
  h1.text-7xl,
  h1.text-8xl,
  h1.text-9xl {
    font-size: 3rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  
  /* Extra optimization for very small screens */
  @media (max-width: 375px) {
    h1.text-7xl,
    h1.text-8xl,
    h1.text-9xl {
      font-size: 2.25rem !important;
    }
  }
  
  /* Improve title contrast and readability */
  section.relative.h-screen h1 {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8),
                 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
  }
  
  /* Subtitle mobile sizing */
  section.relative.h-screen .text-xl,
  section.relative.h-screen .text-2xl,
  section.relative.h-screen .text-3xl {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    padding: 0 1.5rem !important;
    font-weight: 300 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  }
  
  @media (max-width: 375px) {
    section.relative.h-screen .text-xl,
    section.relative.h-screen .text-2xl,
    section.relative.h-screen .text-3xl {
      font-size: 1rem !important;
      padding: 0 1rem !important;
    }
  }
  
  /* CTA button mobile */
  .cta-button {
    font-size: 0.9rem !important;
    padding: 12px 30px !important;
    width: auto !important;
    max-width: 90% !important;
  }
  
  /* Section headings mobile */
  .text-6xl.font-black,
  .text-7xl.font-black {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2rem !important;
  }
  
  /* Service cards mobile */
  .service-card-minimal h3 {
    font-size: 1.5rem !important;
  }
  
  .service-card-minimal p {
    font-size: 0.95rem !important;
  }
  
  /* Portfolio cards mobile spacing */
  .portfolio-card {
    margin-bottom: 1rem !important;
  }
  
  /* Contact form mobile */
  .contact-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 16px !important;
  }
  
  /* Footer mobile */
  footer .text-3xl.font-black {
    font-size: 1.5rem !important;
  }
  
  footer .flex.space-x-8 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Contact info cards mobile */
  #kontakt .flex.items-start {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  
  #kontakt .w-12.h-12 {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  
  /* Improve touch targets */
  button,
  a,
  .nav-link {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Optimize spacing for mobile */
  .py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Grid optimization for mobile */
  .grid.gap-12 {
    gap: 2rem !important;
  }
  
  .grid.gap-8 {
    gap: 1.5rem !important;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  nav {
    width: 95% !important;
  }
  
  h1.text-7xl,
  h1.text-8xl,
  h1.text-9xl {
    font-size: 4rem !important;
  }
  
  section.relative.h-screen .text-xl,
  section.relative.h-screen .text-2xl,
  section.relative.h-screen .text-3xl {
    font-size: 1.25rem !important;
  }
}

/* Smooth transitions for all elements */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhance button styling */
.cta-button {
  border-radius: 50px !important;
  padding: 16px 40px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3) !important;
  transition: all 0.3s ease !important;
}

.cta-button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.5) !important;
}

/* Additional enhancement for hero text */
h1.text-7xl,
h1.text-8xl,
h1.text-9xl {
  line-height: 1.1 !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* COMPLETELY HIDE/DELETE Work Section */
#work,
section#work,
section#work.py-32 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  overflow: hidden !important;
}

/* Hide all children of Work section */
#work *,
section#work * {
  display: none !important;
  visibility: hidden !important;
}

/* SHOW Services Section - with ultra-wide slim video banner */
#dienstleistungen,
section#dienstleistungen,
#services,
section#services,
section[class*="services"],
section.py-32:not(#work):has(.service-card-minimal),
section:has(.service-card-minimal) {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 3rem 1rem !important;
  opacity: 1 !important;
  position: relative !important;
  left: 0 !important;
  overflow: visible !important;
}

/* Style the fullscreen cinematic video banner - 16:9 responsive */
.services-video-banner {
  margin-bottom: 4rem !important;
  padding: 56.25% 0 0 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Mobile optimization for services cinematic banner */
@media (max-width: 768px) {
  .services-video-banner {
    padding: 56.25% 0 0 0 !important;
    margin-bottom: 3rem !important;
  }
}

/* Keep service cards visible */
.service-card-minimal,
.service-card {
  display: block !important;
  visibility: visible !important;
}

/* Hide Brand Showcase subtitle */
#work .text-xl.text-gray-400,
#work p.text-xl,
#work .mb-20.max-w-3xl,
section#work .text-gray-400 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove SHOWREEL badge and branding text from showreel banner */
.showreel-banner div[style*="bottom"],
.showreel-banner span,
.showreel-banner .showreel-label,
#work .showreel-banner > div:last-child,
.showreel-banner > div:last-of-type {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Modern Fullscreen Showreel Banner for Work Section */
#work::before {
  content: '';
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 600px;
  background: #000;
  margin-bottom: 3rem;
  position: relative;
}

/* Create fullscreen video banner container */
#work .max-w-7xl.mx-auto::before {
  content: '';
  display: block;
  position: relative;
  width: 100vw;
  height: 80vh;
  min-height: 600px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -2rem;
  margin-bottom: 4rem;
  background: linear-gradient(to bottom, #000 0%, #111827 100%);
  overflow: hidden;
}

/* Remove SHOWREEL badge from header */
#work h2::after {
  display: none !important;
}

/* Fix section spacing */
section {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

section.py-32 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* Reduce Work section spacing */
#work {
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

/* Reduce Work section title margin */
#work h2 {
  margin-bottom: 1rem !important;
}

/* Reduce showreel banner margin */
#work .showreel-banner,
.showreel-banner {
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* Force override inline styles on showreel banner */
#work .showreel-banner[style],
.showreel-banner[style] {
  margin-bottom: 2rem !important;
}

/* Mobile optimization for banner */
@media (max-width: 768px) {
  #work::before,
  #work .max-w-7xl.mx-auto::before {
    height: 50vh;
    min-height: 400px;
  }
  
  /* Reduce mobile spacing further */
  #work {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  
  #work .showreel-banner,
  .showreel-banner {
    margin-bottom: 1.5rem !important;
  }
  
  #work h2 {
    margin-bottom: 0.75rem !important;
  }
  
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  section.py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* Hide Studio Besuch section */
#kontakt .bg-gray-900.rounded-lg,
#kontakt .bg-gray-900,
#kontakt div.bg-gray-900.rounded-lg.p-6,
section#kontakt .space-y-8 > div:last-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove 'Projekt Starten' button from hero section */
section.relative.h-screen button.cta-button,
section.relative.h-screen .cta-button,
section.h-screen button,
section.h-screen .relative.z-10 button {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide all Bolt.new references and badges */
script[src*="bolt.new"],
script[src*="bolt"],
[class*="bolt"],
[id*="bolt"],
a[href*="bolt.new"],
a[href*="bolt"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide any external badge scripts */
iframe[src*="bolt"],
div[class*="badge"] {
  display: none !important;
  visibility: hidden !important;
}

/* CLEAN - All video embedding handled by JavaScript */

/* Hide all Bolt badges and references */
[class*="bolt"],
[id*="bolt"],
[data-bolt],
a[href*="bolt.new"],
a[href*="bolt.host"],
img[src*="bolt"],
img[alt*="bolt" i],
img[alt*="Made in Bolt" i],
[aria-label*="bolt" i],
[title*="bolt" i],
.bolt-badge,
#bolt-badge,
[class*="badge"][class*="bolt"],
iframe[src*="bolt"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}