/* medienwerkstatt006 · Index stability layer v2
   Desktop hero cleanup + mobile/browser hardening for external embeds. */

html,
body.mw-index-page {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.mw-index-page.mw4-active {
  padding-top: 0 !important;
}

body.mw-index-page #mw-global-header-v4 + .site-main,
body.mw-index-page .site-main {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.mw-index-page .hero {
  min-height: 100svh !important;
  min-height: 100vh !important;
  padding-top: var(--mw4-height, 70px) !important;
  box-sizing: border-box !important;
  background: #050508 !important;
}

body.mw-index-page .hero-sketchfab {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 100svh !important;
  min-height: 100vh !important;
  pointer-events: auto !important;
  background:
    radial-gradient(ellipse 80% 58% at 50% 45%, rgba(180,0,255,.20) 0%, rgba(0,229,255,.09) 34%, transparent 72%),
    linear-gradient(135deg, #050508 0%, #0b0b14 48%, #050508 100%) !important;
}

body.mw-index-page .hero-sketchfab iframe {
  display: block !important;
  visibility: visible !important;
  opacity: .92 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100svh !important;
  min-height: 100vh !important;
  border: 0 !important;
}

/* The fallback image must not sit permanently behind the live Sketchfab model.
   It is enabled only by JS when the external embed fails. */
body.mw-index-page .hero-sketchfab-fallback {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity .35s ease, visibility .35s ease !important;
}

body.mw-index-page .hero-sketchfab-fallback img {
  display: block !important;
  visibility: inherit !important;
  opacity: inherit !important;
}

body.mw-index-page.mw-sketchfab-fallback-active .hero-sketchfab-fallback,
body.mw-index-page.mw-sketchfab-fallback-active .hero-sketchfab-fallback img {
  visibility: visible !important;
  opacity: 1 !important;
}

body.mw-index-page.mw-sketchfab-fallback-active .hero-sketchfab iframe {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mw-index-page .vid2-ratio {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 220px !important;
  overflow: hidden !important;
  background: #050508 !important;
}

body.mw-index-page .vid2-ratio iframe,
body.mw-index-page .vid2-ratio .mw-ph {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
}

body.mw-index-page iframe[src*="yt_latest.php"],
body.mw-index-page iframe[src="/yt_latest.php"] {
  display: block !important;
  width: min(240px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

body.mw-index-page .kooperation-section img,
body.mw-index-page .kooperation-section iframe {
  max-width: 100% !important;
}

body.mw-index-page .mw-ph {
  color: rgba(232,224,212,.72) !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,45,85,.18), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(0,229,255,.12), transparent 38%),
    rgba(5,5,8,.94) !important;
}

@media (max-width: 768px) {
  body.mw-index-page .hero {
    min-height: 100svh !important;
    padding-top: var(--mw4-height, 64px) !important;
  }

  body.mw-index-page .hero-sketchfab,
  body.mw-index-page .hero-sketchfab iframe {
    min-height: 100svh !important;
  }

  body.mw-index-page .hero-sketchfab iframe {
    opacity: .56 !important;
  }

  body.mw-index-page .hero-title {
    max-width: calc(100vw - 28px) !important;
    left: 14px !important;
    right: 14px !important;
  }

  body.mw-index-page .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.mw-index-page .vid2-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.mw-index-page .vid2-ratio {
    min-height: 190px !important;
  }
}

@media (max-width: 420px) {
  body.mw-index-page .hero-sketchfab iframe {
    opacity: .48 !important;
  }

  body.mw-index-page .vid2-ratio {
    min-height: 176px !important;
  }
}