/*
 * Version 1.0.11: Kleiner Sticky Header ohne Springen
 *
 * Der Header bleibt als Platzhalter in seiner ursprünglichen Höhe im Dokument.
 * Beim Scrollen werden nur die sichtbare Hintergrundfläche, das Logo und die
 * innere Headerhöhe verkleinert. So bleibt der gewünschte Schrumpf-Effekt
 * erhalten, ohne dass die Seite beim Umschalten nach oben oder unten springt.
 */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  height: var(--mc4-header-height, 130px) !important;
  min-height: var(--mc4-header-height, 130px) !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 100%;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(12, 35, 76, .08);
  transition: height .22s ease, background .22s ease, box-shadow .22s ease;
}

.site-header .header-inner,
.site-header .custom-logo,
.site-header .custom-logo-link {
  transition: min-height .22s ease, max-height .22s ease, height .22s ease, width .22s ease;
}

.site-header.is-sticky {
  box-shadow: none !important;
}

.site-header.is-sticky::before {
  height: var(--mc4-sticky-header-height, 98px);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 28px rgba(12, 35, 76, .09);
}

/* Desktop: Der Header selbst behält seinen Platz, sichtbar wird er kleiner. */
.site-header.is-sticky .header-inner {
  min-height: var(--mc4-sticky-header-height, 98px) !important;
}

.site-header.is-sticky .site-branding .custom-logo {
  max-height: var(--mc4-logo-sticky-height, 72px) !important;
}

/* Tablet gross */
@media (max-width: 1199px) {
  .site-header {
    height: 116px !important;
    min-height: 116px !important;
  }
  .site-header.is-sticky::before {
    height: 92px;
  }
  .site-header.is-sticky .header-inner {
    min-height: 92px !important;
  }
  .site-header.is-sticky .site-branding .custom-logo {
    max-height: 70px !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .site-header {
    height: 102px !important;
    min-height: 102px !important;
  }
  .site-header.is-sticky::before {
    height: 82px;
  }
  .site-header.is-sticky .header-inner {
    min-height: 82px !important;
  }
  .site-header.is-sticky .site-branding .custom-logo {
    max-height: 64px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .site-header {
    height: 80px !important;
    min-height: 80px !important;
  }
  .site-header.is-sticky::before {
    height: 74px;
  }
  .site-header.is-sticky .header-inner {
    min-height: 74px !important;
  }
  .site-header.is-sticky .site-branding .custom-logo {
    max-height: 54px !important;
  }
  .site-header.is-sticky .main-navigation {
    top: 74px !important;
  }
}

@media (max-width: 440px) {
  .site-header {
    height: 70px !important;
    min-height: 70px !important;
  }
  .site-header.is-sticky::before {
    height: 66px;
  }
  .site-header.is-sticky .header-inner {
    min-height: 66px !important;
  }
  .site-header.is-sticky .site-branding .custom-logo {
    max-height: 50px !important;
  }
  .site-header.is-sticky .main-navigation {
    top: 66px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header .header-inner,
  .site-header .custom-logo,
  .site-header .custom-logo-link {
    transition: none !important;
  }
}