.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-panel {
  background: rgba(17, 19, 24, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.text-glow-primary {
  text-shadow: 0 0 20px rgba(178, 197, 255, 0.3);
}

.hero-logo-wrap {
  position: relative;
}

.hero-logo {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Responsive Typography */
@media (max-width: 768px) {
  /* Hero Section */
  .font-headline.text-5xl.md\:text-8xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  /* Section titles */
  .font-headline.text-5xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  /* Reduce padding on mobile */
  section.py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  /* Container padding */
  .max-w-7xl.px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Ensure all sections have same dark background - no transitions visible */
body.index-fiber-bg {
  background-color: #131313;
}

body.index-fiber-bg section {
  background-color: transparent !important;
}

/* Remove individual section backgrounds */
.section-bg {
  position: relative;
  background: none !important;
}

/* Mobile responsive background images for portal cards */
@media (max-width: 768px) {
  /* Portal cards - better image positioning on mobile */
  .group.relative.aspect-\[4\/5\] img {
    object-position: center !important;
    min-height: 400px;
  }
  
  /* Reduce padding on mobile for better content fit */
  .group.relative.aspect-\[4\/5\] .absolute.inset-0.p-12 {
    padding: 2rem !important;
  }
  
  /* Adjust text sizes on mobile */
  .group.relative.aspect-\[4\/5\] h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .group.relative.aspect-\[4\/5\] p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* Ensure images scale properly on all screens */
.group.relative img[alt="Energie"],
.group.relative img[alt="Bau"] {
  object-fit: cover;
  object-position: center;
}

/* Better image display on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .group.relative.aspect-\[4\/5\] .absolute.inset-0.p-12 {
    padding: 2.5rem !important;
  }
}

/* Services Section - Leistungsspektrum - Fix overflow */
@media (max-width: 768px) {
  /* Fix grid layout on mobile */
  .grid.grid-cols-1.md\:grid-cols-6 {
    grid-template-columns: 1fr !important;
  }
  
  /* Cards - better spacing and text */
  .bg-surface-container-low.p-8 {
    padding: 1.5rem !important;
  }
  
  /* Prevent text overflow */
  .font-headline.text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    word-wrap: normal;
    overflow-wrap: normal;
  }
  
  .font-headline.text-xl {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    word-wrap: normal;
    overflow-wrap: normal;
  }
  
  /* Section header spacing */
  .flex.flex-col.md\:flex-row.mb-20 {
    margin-bottom: 2rem !important;
  }
}

/* Why Us Section - Stats grid responsive */
@media (max-width: 640px) {
  /* Stack stats on mobile */
  .grid.grid-cols-2.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Remove translate offset on mobile */
  .translate-y-8 {
    transform: translateY(0) !important;
  }
  
  /* Stat cards padding */
  .bg-surface.p-10 {
    padding: 2rem !important;
  }
  
  /* Stat numbers */
  .text-5xl {
    font-size: 2.5rem !important;
  }
}

/* Contact Form - Better mobile spacing */
@media (max-width: 768px) {
  .glass-panel.p-8.md\:p-12 {
    padding: 1.5rem !important;
  }
  
  /* Form inputs */
  input, textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* Keep words intact; no automatic hyphenation */
h1, h2, h3, h4, h5, h6, p {
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

/* Ensure no horizontal scroll */
body, html {
  overflow-x: hidden;
  max-width: 100vw;
}

section {
  overflow-x: hidden;
}