/* ============================================================
   HorosCode — Immersive / Liquid-Glass Layer
   ------------------------------------------------------------
   Wird NACH style.css geladen und legt die Active-Theory-Optik
   ueber das bestehende Layout: lebendiger WebGL-Hintergrund
   scheint durch frosted-glass Panels, Neon-Akzente, Tiefe.
   Alles degradiert sauber (kein WebGL -> nur dunkler Verlauf).
   ============================================================ */

/* ---- Bühne: WebGL scheint hinter der ganzen Seite durch ---- */
html {
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(168, 85, 247, 0.14), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(249, 115, 22, 0.08), transparent 60%),
    #0a0514;
}
body {
  background: transparent;
}

#webgl-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Inhalt liegt über dem Canvas */
.site-header,
#main-content,
.footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Lesbarkeits-Schleier pro Sektion (Glas-Bühne, nicht Wand)
   ============================================================ */
.section {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 5, 20, 0.58), rgba(10, 5, 20, 0.78));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(139, 92, 246, 0.08);
}
.section-alt {
  background: linear-gradient(180deg, rgba(18, 8, 31, 0.72), rgba(10, 5, 20, 0.82));
  border-color: rgba(139, 92, 246, 0.12);
}
.section-dark {
  background: linear-gradient(180deg, rgba(12, 6, 22, 0.78), rgba(8, 4, 16, 0.88));
}

/* Hero bleibt offen, damit das Partikel-Universum voll sichtbar ist */
.hero {
  background: transparent;
}
.hero-orb {
  opacity: 0.16 !important;
}
.hero-grid {
  opacity: 0.5;
}

/* ============================================================
   Liquid-Glass Panels
   ============================================================ */
.content-pillar,
.service-card,
.support-card,
.pricing-card,
.hc-tech-section,
.hc-more-features,
.onsite-price-card,
.cloud-mockup,
.faq-item,
.contact-form,
.contact-person-card,
.support-path,
.services-spotlight,
.trust-strip,
.audit-eye-frame,
.audit-eye-caption {
  background: rgba(18, 8, 31, 0.48) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.audit-eye-caption {
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mystic-card {
  background: rgba(18, 8, 31, 0.48) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 60px rgba(139, 92, 246, 0.05);
}

/* Glas-Glanzkante (Refraktions-Highlight) oben */
.service-card,
.support-card,
.pricing-card,
.onsite-price-card,
.cloud-mockup,
.contact-form {
  position: relative;
  overflow: hidden;
}
.service-card::before,
.support-card::before,
.pricing-card::before,
.onsite-price-card::before,
.cloud-mockup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 38%
  );
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* Hover: Glas hebt ab, Neon-Rand leuchtet auf */
.service-card:hover,
.support-card:hover,
.pricing-card:hover,
.onsite-price-card:hover,
.mystic-card:hover {
  border-color: rgba(168, 85, 247, 0.55) !important;
  transform: translateY(-6px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(139, 92, 246, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.service-card.featured,
.pricing-card.popular,
.mystic-card--featured {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.24),
    rgba(249, 115, 22, 0.08)
  ) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
}

/* ============================================================
   Navbar — frosted glass (index immersive: do not override nav.css)
   ============================================================ */

/* ============================================================
   Neon-Akzente & Tiefe
   ============================================================ */
h1,
h2 {
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}
.gradient-text {
  filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.5));
}

.btn-primary {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}
.btn-primary:hover {
  box-shadow:
    0 10px 32px rgba(139, 92, 246, 0.55),
    0 0 24px rgba(249, 115, 22, 0.25);
}
.btn-outline {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.03);
}

/* Trust-Strip: dezenter Glas-Streifen */
.trust-strip {
  border-radius: 16px;
}

/* CTA-Boxen leuchten */
.hc-cta-strip,
.hc-cta-box,
.support-banner {
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(139, 92, 246, 0.14);
}

/* Tech-Chips als kleine Glas-Pills */
.hc-tech-item {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Fallback: kein backdrop-filter -> solidere Panels
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .content-pillar,
  .service-card,
  .support-card,
  .pricing-card,
  .onsite-price-card,
  .cloud-mockup,
  .faq-item,
  .contact-form,
  .contact-person-card,
  .services-spotlight {
    background: rgba(17, 17, 26, 0.92) !important;
  }
  .section {
    background: rgba(7, 7, 15, 0.94);
  }
}

/* ============================================================
   Reduced Motion: WebGL ist aus -> kraeftigerer statischer BG
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    background:
      radial-gradient(1000px 700px at 20% 0%, rgba(139, 92, 246, 0.2), transparent 60%),
      radial-gradient(900px 600px at 100% 10%, rgba(168, 85, 247, 0.16), transparent 55%),
      #0a0514;
  }
}

/* ============================================================
   Active-Theory Mode (wenn WebGL aktiv)
   ============================================================ */
body.immersive-active .hero {
  min-height: auto;
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 44px;
}
body.immersive-active .hero-layout {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
body.immersive-active .hero-visual {
  display: none;
}
body.immersive-active .hero-content {
  position: relative;
  z-index: 2;
  text-shadow: 0 4px 48px rgba(0, 0, 0, 0.95);
}
/* Lese-Schleier: hebt den Text klar vom 3D-Hintergrund ab */
body.immersive-active .hero-content::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    60% 55% at 50% 45%,
    rgba(2, 2, 10, 0.78),
    rgba(2, 2, 10, 0.45) 55%,
    transparent 80%
  );
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.immersive-active .hero-badge,
body.immersive-active .hero-points,
body.immersive-active .hero-stats {
  justify-content: center;
}
body.immersive-active .hero-actions {
  justify-content: center;
}
body.immersive-active .hero-bg .hero-orb,
body.immersive-active .hero-bg .hero-grid {
  opacity: 0 !important;
}
body.immersive-active h1 .gradient-text {
  background: linear-gradient(135deg, #c4b5fd, #a855f7, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(139, 92, 246, 0.55));
}

/* Produkt-Rail links (HorosCode / HorOS / HorosCloud) */
body.immersive-active .hero::before {
  content: "";
  position: absolute;
  left: clamp(16px, 4vw, 48px);
  bottom: clamp(80px, 14vh, 160px);
  width: 220px;
  height: 200px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)) 0 0 / 8px 1px no-repeat,
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) 0 28px / 8px 1px no-repeat,
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) 0 56px / 8px 1px no-repeat;
  opacity: 0.55;
}
body.immersive-active .hero::after {
  content: "→ HOROSCODE\A→ HOROS\A→ HOROSCLOUD\A→ IT-SUPPORT";
  white-space: pre;
  position: absolute;
  left: clamp(32px, 5vw, 64px);
  bottom: clamp(72px, 13vh, 152px);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

body.immersive-active .intro-banner {
  background: #020208;
}
body.immersive-active .intro-orb {
  filter: blur(90px);
  opacity: 0.55 !important;
}
body.immersive-active .intro-title-main {
  background: linear-gradient(135deg, #ff2d95, #00e5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  body.immersive-active .hero::before,
  body.immersive-active .hero::after {
    display: none;
  }
  body.immersive-active .hero {
    padding-top: 44px;
    padding-bottom: 36px;
  }
}