/* MS-Baustatik 3.6.58: Desktop ohne Spotlight, Mobil schlichtes Navy. */

/* Keine künstliche Aufhellung mehr hinter dem mittleren Glasrahmen. Das
   Desktop-Bild selbst enthält ebenfalls kein zentrales Spotlight mehr. */
.home #main-content.site-main .hero {
  background: #071b26 !important;
}
.home #main-content.site-main .hero::before {
  background: linear-gradient(180deg, rgba(4, 18, 27, .08), rgba(4, 18, 27, .12)) !important;
}
.home #main-content.site-main .hero::after {
  display: none !important;
  content: none !important;
}
body.home #main-content.site-main .hero .hero-copy {
  background: rgba(7, 27, 38, .39) !important;
  box-shadow:
    0 22px 65px rgba(0, 10, 18, .25),
    inset 0 1px 0 rgba(255, 214, 179, .16) !important;
  -webkit-backdrop-filter: blur(2px) saturate(105%) !important;
  backdrop-filter: blur(2px) saturate(105%) !important;
}

@media (max-width: 720px) {
  /* Die Grafik mit Formeln und Figuren ist auf Mobil komplett ausgeblendet.
     Kein Banner, keine Pseudo-Grafiken, keine Spotlights. */
  .home #main-content.site-main .hero {
    display: grid;
    place-items: center;
    margin-top: 0 !important;
    min-height: calc(100svh - 84px);
    padding: 0;
    background: #071b26 !important;
  }
  .home #main-content.site-main .hero .hero-media,
  .home #main-content.site-main .hero .hero-formulas {
    display: none !important;
  }
  .home #main-content.site-main .hero::before,
  .home #main-content.site-main .hero::after {
    display: none !important;
    content: none !important;
  }
  .home #main-content.site-main .hero-content {
    width: min(var(--container), calc(100% - 2 * var(--page-gutter)));
    padding-top: clamp(34px, 8vw, 58px);
    padding-bottom: clamp(42px, 9vw, 66px);
  }
  body.home #main-content.site-main .hero .hero-copy {
    background: rgba(14, 42, 57, .52) !important;
    border-color: rgba(255, 157, 87, .34) !important;
    box-shadow: 0 17px 48px rgba(0, 10, 18, .22), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
  }
}

/* 3.6.60: Originale ruhige Farbstimmung des neuen Startbildes. */
.home #main-content.site-main .hero-media img { filter: none !important; }

/* 3.6.65: Mobile Qualifikationskarten – Beschriftung mittig bei links bleibenden Icons. */
@media (max-width: 720px) {
  .home #main-content.site-main .hero-credentials li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    column-gap: 8px;
    align-items: center;
    width: 100%;
    padding: 12px 13px;
    text-align: center;
  }
  .home #main-content.site-main .hero-credentials .hero-credentials__icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  .home #main-content.site-main .hero-credentials li > span {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
    text-wrap: balance;
  }
}

/* 3.6.67: Metallmotiv hinter dem mobilen Glasrahmen statt Bildstreifen darüber. */
@media (max-width: 720px) {
  .home #main-content.site-main .hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100svh - 84px);
    overflow: hidden;
  }
  .home #main-content.site-main .hero .hero-media {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .home #main-content.site-main .hero .hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: 76% center !important;
    filter: brightness(.76) saturate(1.04) !important;
    transform: none !important;
  }
  .home #main-content.site-main .hero .hero-content {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: clamp(34px, 8vw, 58px);
    padding-bottom: clamp(42px, 9vw, 66px);
  }
  body.home #main-content.site-main .hero .hero-copy {
    background: rgba(7, 27, 38, .68) !important;
    -webkit-backdrop-filter: blur(3px) saturate(106%) !important;
    backdrop-filter: blur(3px) saturate(106%) !important;
  }
}