/* ═══════════════════════════════════════════════════════════════
   MASSGEBUNG — Section Layout System
   Version: 1.0
   Dependencies: tokens.css
   Includes: Grid Pattern (Hero), später: Alternierende Backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HERO SECTION: GRID PATTERN (32px SurfaceFlow) ═══ */
.section-hero {
  position: relative; /* Containert hero-overlay, hero-bg-* und hero-glow-container */
  background: #121212;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(255,255,255,0.04) 31px,
      rgba(255,255,255,0.04) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      rgba(255,255,255,0.04) 31px,
      rgba(255,255,255,0.04) 32px
    );
}

/* ═══ RESPONSIVE: Mobile (Grid deaktiviert) ═══ */
@media (max-width: 768px) {
  .section-hero {
    background-image: none; /* Grid-Pattern entfernen */
  }
}

/* ═══ HERO: Background Toggle ═══ */
.section-hero.bg-grid .hero-bg-photo,
.section-hero.bg-grid .hero-bg-wireframe { display: none; }
.section-hero.bg-crossfade { background-image: none; }
.section-hero.bg-crossfade .hero-bg-photo,
.section-hero.bg-crossfade .hero-bg-wireframe { display: block; }
.hero-bg-photo {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2A2A2A 0%, #383E42 50%, #4A4A4A 100%);
  animation: fadeToWireframe 6s ease-in-out infinite alternate;
}
.hero-bg-wireframe {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(204,85,0,0.15) 19px, rgba(204,85,0,0.15) 20px),
              repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(204,85,0,0.15) 19px, rgba(204,85,0,0.15) 20px);
  opacity: 0;
  animation: wireframeIn 6s ease-in-out infinite alternate;
}
.hero-overlay { position: absolute; inset: 0; background: rgba(18,18,18,0.7); pointer-events: none; }
@keyframes fadeToWireframe { 0%, 40% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes wireframeIn { 0%, 40% { opacity: 0; } 60%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg-photo, .hero-bg-wireframe { animation: none !important; }
  .hero-bg-photo { opacity: 1 !important; }
  .hero-bg-wireframe { opacity: 0 !important; }
}

/* ═══ TICKER SECTION ═══ */
.section-ticker {
  width: 100%;
}

/* ═══ ALTERNIERENDE SEKTIONS-HINTERGRÜNDE ═══ */
.section-hero,
.section-upload,
.social-proof {
  background-color: var(--bg-primary) !important;
}
.section-ticker,
.s5 {
  background-color: var(--bg-elevated) !important;
}

/* ═══ HERO VIDEO BACKGROUND ═══ */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* Video-Overlay verstärken für Lesbarkeit */
.section-hero .hero-overlay {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0.85) 0%,
    rgba(18,18,18,0.6) 40%,
    rgba(18,18,18,0.75) 100%
  );
}

/* Glow über Video */
.section-hero .hero-glow-container { z-index: 2; }

/* Content über allem */
.section-hero .hero-content { z-index: 3; }

/* Mobile: Video ausblenden (spart Bandbreite + Akku) */
@media (max-width: 768px) {
  .hero-video-bg { display: none; }
}

/* Reduced Motion: Video pausieren */
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg { display: none; }
}

/* ═══ HERO SECTION: Video-Höhe ═══ */
.section-hero {
  min-height: 100vh;
  overflow: hidden;
}

/* ═══ HERO: Mobile Poster-Fallback ═══ */
@media (max-width: 768px) {
  .section-hero {
    background-image: url('/assets/video/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}