/* Nur der helle Headerbereich */
#main {
  position: relative;
  background: linear-gradient(180deg, #0b1020 0%, #111936 55%, #161f45 100%) !important;
  overflow: hidden;
}

/* optional weicher Glow im Header */
#main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(191, 128, 255, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Inhalt über Overlay halten */
#main .container,
#main .row,
#main .text-container,
#main .word-container,
#main .banner-message-info {
  position: relative;
  z-index: 1;
}

/* Texte im Header hell */
#main h1,
#main h2,
#main h6,
#main p,
#main span,
#main .fs-15,
#main .fs-16,
#main .first-text,
#main .cd-words-wrapper b {
  color: #ffffff !important;
}

/* leicht lila Effekt für das wechselnde Wort */
#main .cd-words-wrapper b,
#main .first-text {
  color: #a78bfa !important;
}

/* Hintergrundbild-Layer im Header neutralisieren, falls es das Helle erzeugt */
#main .background-image-container {
  background: transparent !important;
  opacity: 0 !important;
}