/*
 * Gemeinsame Geometrie der großen Seiten- und Reiterbanner.
 * Motive, Farben und thematische Ebenen bleiben in den jeweiligen Bereichsdateien.
 */
:root,
#inhalt {
  --site-main-banner-reference-width: min(1212px, calc(100vw - 56px));
}

#inhalt .site-main-banner {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: var(--site-main-banner-reference-width) !important;
  max-width: var(--site-main-banner-reference-width) !important;
  height: clamp(170px, 28vw, 260px) !important;
  min-height: clamp(170px, 28vw, 260px) !important;
  margin-left: calc((100% - var(--site-main-banner-reference-width)) / 2) !important;
  margin-right: calc((100% - var(--site-main-banner-reference-width)) / 2) !important;
  padding: clamp(18px, 3vw, 34px) !important;
  display: grid;
  align-content: center;
  justify-content: stretch !important;
  overflow: hidden;
  border: 1px solid var(--site-main-banner-line, rgba(255, 213, 106, 0.72));
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 58px var(--site-main-banner-inner-light, rgba(255, 213, 106, 0.12)),
    0 22px 62px rgba(0, 0, 0, 0.36),
    0 0 38px var(--site-main-banner-outer-light, rgba(255, 213, 106, 0.12)) !important;
}

/*
 * Gemeinsame Geometrie der Seitenabschluesse.
 * Bild, Farbe, Rahmen und Effekte bleiben weiterhin bereichsspezifisch.
 */
#inhalt .universe-edge {
  box-sizing: border-box;
  width: var(--site-main-banner-reference-width) !important;
  max-width: var(--site-main-banner-reference-width) !important;
  height: clamp(300px, 31vw, 372px) !important;
  min-height: clamp(300px, 31vw, 372px) !important;
  margin-right: calc((100% - var(--site-main-banner-reference-width)) / 2) !important;
  margin-left: calc((100% - var(--site-main-banner-reference-width)) / 2) !important;
  padding: clamp(210px, 22vw, 258px) clamp(18px, 3vw, 34px) clamp(28px, 4vw, 44px) !important;
  align-content: flex-end !important;
  overflow: hidden;
}

#inhalt .site-main-banner > :not(.site-main-banner-sweep) {
  position: relative;
  z-index: 1;
}

#inhalt .site-main-banner-sweep {
  position: absolute;
  z-index: 0;
  inset: -40% -18%;
  display: block;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.22) 42%, transparent 58%);
  opacity: 0;
  transform: translateX(-105%) rotate(7deg);
  animation: site-main-banner-sweep 7s ease-in-out infinite paused;
}

#inhalt > .page-section.active .site-main-banner-sweep {
  animation-play-state: running;
}

@keyframes site-main-banner-sweep {
  0%,
  56% {
    opacity: 0;
    transform: translateX(-105%) rotate(7deg);
  }
  68% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(105%) rotate(7deg);
  }
}

#inhalt .site-main-banner.gratitude-banner::before {
  content: none;
  display: none;
}

#inhalt .danksagung-page .gratitude-banner > .site-main-banner-sweep {
  width: auto;
  max-width: none;
}

#inhalt > .about-page .site-main-banner {
  --site-main-banner-line: rgba(255, 154, 67, 0.52);
  --site-main-banner-inner-light: rgba(255, 106, 0, 0.10);
  --site-main-banner-outer-light: rgba(255, 106, 0, 0.10);
}

#inhalt > .magnetar-subsection .site-main-banner {
  --site-main-banner-line: rgba(120, 173, 255, 0.62);
  --site-main-banner-inner-light: rgba(70, 137, 247, 0.12);
  --site-main-banner-outer-light: rgba(70, 137, 247, 0.10);
  border-color: var(--site-main-banner-line) !important;
}

:root[data-theme="light"] #inhalt .site-main-banner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 46px var(--site-main-banner-inner-light, rgba(188, 117, 20, 0.09)),
    0 18px 46px rgba(70, 50, 16, 0.14),
    0 0 28px var(--site-main-banner-outer-light, rgba(188, 117, 20, 0.08)) !important;
}

:root[data-theme="light"] #inhalt .site-main-banner-sweep {
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.42) 42%, transparent 58%);
}

@media (max-width: 720px) {
  :root,
  #inhalt {
    --site-main-banner-reference-width: min(1222px, calc(100vw - 36px));
  }

  #inhalt .site-main-banner {
    height: clamp(290px, 82vw, 390px) !important;
    min-height: clamp(290px, 82vw, 390px) !important;
    padding: clamp(22px, 7vw, 30px) !important;
  }

  #inhalt .universe-edge {
    height: 320px !important;
    min-height: 320px !important;
    padding: 214px 14px 24px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-main-banner.site-banner-reveal-ready:not(.site-banner-seen) {
    opacity: 0.24;
    transform: perspective(1150px) translateZ(-140px) scale(0.92);
  }

  .site-main-banner.site-banner-reveal-ready.site-banner-seen {
    opacity: 1;
  }

  .site-main-banner.site-banner-reveal-ready.site-banner-revealed {
    animation: site-main-banner-depth-reveal 1.9s cubic-bezier(0.16, 0.76, 0.18, 1) both;
  }

  @keyframes site-main-banner-depth-reveal {
    from {
      opacity: 0.24;
      transform: perspective(1150px) translateZ(-140px) scale(0.92);
    }

    58% {
      opacity: 1;
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .site-main-banner.site-banner-reveal-ready:not(.site-banner-seen) {
    opacity: 0.28;
    transform: perspective(900px) translateZ(-64px) scale(0.96);
  }

  .site-main-banner.site-banner-reveal-ready.site-banner-revealed {
    animation-name: site-main-banner-depth-reveal-mobile;
  }

  @keyframes site-main-banner-depth-reveal-mobile {
    from {
      opacity: 0.28;
      transform: perspective(900px) translateZ(-64px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-main-banner.site-banner-reveal-ready {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #inhalt .site-main-banner,
  #inhalt .site-main-banner::before,
  #inhalt .site-main-banner::after,
  #inhalt .site-main-banner-sweep {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Gemeinsame Achse fuer Kopf, Unterreiter und Hauptbanner.
 * Der Banner bleibt die Referenz; ueberfluessige aeussere Panelrahmen entfallen.
 */
#magnetare-hub.page-section.active,
#inhalt > .about-page > .about-hub,
#inhalt > .danksagung-page > .thanks-hub,
#inhalt > #skao > .section-head,
#inhalt > #experimente > .experiment-hub,
#inhalt > #kurioses > .curiosity-hub,
#inhalt > #x > .media-hub,
#inhalt > #kurioses > .section-head,
#inhalt > #x > .section-head {
  box-sizing: border-box;
  width: var(--site-main-banner-reference-width) !important;
  max-width: var(--site-main-banner-reference-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#inhalt > .magnetar-subsection > .panel:has(> .site-main-banner),
#inhalt > .about-page > .panel.intro:has(> .site-main-banner),
#inhalt > .danksagung-page > .panel.intro:has(> .site-main-banner),
#inhalt > #skao > .panel.intro,
#inhalt > #experimente > .panel.intro,
#inhalt > #kurioses > .panel.intro:has(.site-main-banner),
#inhalt > #x > .panel.intro:has(.site-main-banner) {
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* content-visibility bleibt erhalten, darf den breiteren Hauptbanner aber nicht beschneiden. */
#inhalt > [data-magnetar-page="magnetar-wissen"].active.sub-active,
#inhalt > [data-magnetar-page="magnetar-katalog"].active.sub-active {
  overflow-clip-margin: 30px;
}

#inhalt > [data-magnetar-page="magnetar-katalog"].active.sub-active > .panel:has(> .site-main-banner) {
  overflow-clip-margin: 30px;
}

/* Der Hauptbanner von „Offene Fragen“ steht frei wie in den übrigen Unterreitern. */
#inhalt > .magnetar-open-questions.active.sub-active {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#magnetare-hub.page-section.active #magnetarTabs,
#inhalt > .about-page > .about-hub #aboutTabs,
#inhalt > .danksagung-page > .thanks-hub .thanks-tabs,
#inhalt > #skao > .panel.intro > #skaoTabs,
#inhalt > #experimente > .experiment-tab-sticky #experimentTabs {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

@media (min-width: 601px) {
  #inhalt > .about-page #aboutTabs.is-subtab-pinned,
  #inhalt > .danksagung-page .thanks-tabs.is-subtab-pinned,
  .experiment-tab-sticky.is-subtab-pinned {
    left: 50%;
    width: var(--site-main-banner-reference-width) !important;
    max-width: var(--site-main-banner-reference-width) !important;
    margin: 0 !important;
    transform: translateX(-50%);
  }
}

@media (max-width: 720px) {
  #magnetare-hub.page-section.active,
  #inhalt > .about-page > .about-hub,
  #inhalt > .danksagung-page > .thanks-hub,
  #inhalt > #skao > .section-head,
  #inhalt > #experimente > .experiment-hub,
  #inhalt > #kurioses > .curiosity-hub,
  #inhalt > #x > .media-hub,
  #inhalt > #kurioses > .section-head,
  #inhalt > #x > .section-head {
    width: var(--site-main-banner-reference-width) !important;
    max-width: var(--site-main-banner-reference-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}