/* MS-Baustatik 3.6.56 — Startbild: Tragwerksgrafik, dezentes Spotlight, klares Navy-Glas.
   Absichtlich zuletzt geladen, damit das bestehende Layout unangetastet bleibt. */

/* Die Kopfzeile bleibt lesbar, aber das Motiv kann darunter durchscheinen. */
.site-header {
  background: linear-gradient(110deg, rgba(5, 24, 35, .66), rgba(8, 30, 43, .55)) !important;
  border-bottom-color: rgba(228, 158, 105, .23) !important;
  box-shadow: 0 5px 28px rgba(1, 11, 18, .17) !important;
  -webkit-backdrop-filter: blur(4px) saturate(107%) !important;
  backdrop-filter: blur(4px) saturate(107%) !important;
}
.site-header.is-scrolled {
  background: linear-gradient(110deg, rgba(5, 24, 35, .90), rgba(8, 30, 43, .87)) !important;
  -webkit-backdrop-filter: blur(5px) saturate(107%) !important;
  backdrop-filter: blur(5px) saturate(107%) !important;
}
.home .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(4, 17, 27, .43), rgba(6, 23, 34, .23)) !important;
  -webkit-backdrop-filter: blur(3px) saturate(105%) !important;
  backdrop-filter: blur(3px) saturate(105%) !important;
}

/* Das Hero-Bild liegt auf der Startseite auch unter der transparenten Kopfzeile. */
.home #main-content.site-main .hero {
  margin-top: -92px;
  min-height: min(920px, 100svh);
  background: #071b26;
}
.home #main-content.site-main .hero-media img {
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.03) brightness(.96) !important;
  transform: scale(1.015) translate3d(var(--motion-x), var(--motion-y), 0) !important;
}
/* Spotlicht über dem zentralen Schriftfeld; seitliche Berechnungen bleiben sichtbar. */
.home #main-content.site-main .hero::before {
  background:
    radial-gradient(ellipse 54% 48% at 50% 48%, rgba(255, 164, 96, .10), rgba(69, 134, 165, .075) 49%, transparent 82%),
    linear-gradient(90deg, rgba(2, 13, 23, .20), transparent 23%, transparent 76%, rgba(2, 13, 23, .15)),
    linear-gradient(180deg, rgba(4, 19, 29, .12), transparent 26%, rgba(4, 18, 27, .29) 100%) !important;
}
.home #main-content.site-main .hero::after {
  background: radial-gradient(ellipse at 50% 48%, transparent 29%, rgba(2, 12, 20, .10) 73%, rgba(2, 12, 20, .31) 100%) !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.home #main-content.site-main .hero-content {
  padding-top: clamp(172px, 13vw, 200px);
  padding-bottom: clamp(80px, 8vw, 115px);
}

/* Ruhige, weitgehend durchsichtige Glasscheibe mit warmem Kantenglanz. */
body.home #main-content.site-main .hero .hero-copy {
  width: min(1060px, 100%);
  padding: clamp(35px, 4.6vw, 61px) clamp(24px, 5.8vw, 75px);
  border: 1px solid rgba(255, 157, 87, .42) !important;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 51% 0%, rgba(255, 151, 79, .080), transparent 61%),
    linear-gradient(126deg, rgba(5, 21, 31, .51), rgba(7, 29, 42, .38) 55%, rgba(5, 22, 33, .47)) !important;
  box-shadow:
    0 27px 80px rgba(0, 10, 18, .31),
    0 0 34px rgba(255, 112, 35, .075),
    inset 0 1px 0 rgba(255, 214, 179, .20),
    inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
  backdrop-filter: blur(3px) saturate(108%) !important;
}
.home #main-content.site-main .hero-copy .lead {
  color: #f5f8fa !important;
  text-shadow: 0 2px 15px rgba(0, 11, 19, .75);
}
.home #main-content.site-main .hero-copy h1 {
  text-shadow: 0 2px 23px rgba(0, 9, 17, .65);
}
.home #main-content.site-main .hero-credentials li {
  background: rgba(5, 22, 33, .38) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

@media (max-width: 1180px) {
  .home #main-content.site-main .hero { margin-top: -84px; }
}
@media (max-width: 720px) {
  .home #main-content.site-main .hero {
    margin-top: -84px;
    min-height: 100svh;
  }
  .home #main-content.site-main .hero-media img {
    object-position: 70% center !important;
    filter: saturate(1.08) contrast(1.03) brightness(.84) !important;
  }
  .home #main-content.site-main .hero-content {
    padding-top: 126px;
    padding-bottom: 56px;
  }
  body.home #main-content.site-main .hero .hero-copy {
    padding: 29px 20px 32px;
    border-radius: 20px;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255, 142, 63, .075), transparent 58%),
      linear-gradient(135deg, rgba(5, 22, 32, .67), rgba(6, 27, 39, .56)) !important;
    -webkit-backdrop-filter: blur(3px) saturate(106%) !important;
    backdrop-filter: blur(3px) saturate(106%) !important;
  }
  .home #main-content.site-main .hero::before {
    background: linear-gradient(180deg, rgba(3, 15, 24, .16), transparent 29%, rgba(3, 16, 24, .36)) !important;
  }
  .home #main-content.site-main .hero-credentials li {
    background: rgba(4, 22, 33, .57) !important;
  }
}

/* Solides Fallback, falls ein Browser die Unschärfe nicht unterstützt. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.home #main-content.site-main .hero .hero-copy {
    background: rgba(6, 25, 37, .79) !important;
  }
  .site-header { background: rgba(6, 25, 37, .84) !important; }
}