/* MeerHeimatLiebe 2.5.2-r103
   Verleiht dem Header einen dezenteren, professionellen Glas-Look,
   ohne die bestehende Struktur oder die vorhandenen Animationen zu verändern. */

:root {
  --mhl-r103-header-glass-top: rgba(255, 255, 255, .12);
  --mhl-r103-header-glass-mid: rgba(110, 204, 255, .065);
  --mhl-r103-header-glass-bottom: rgba(3, 24, 44, .74);
  --mhl-r103-header-border: rgba(152, 224, 255, .24);
  --mhl-r103-header-border-soft: rgba(255, 255, 255, .11);
  --mhl-r103-header-shadow: rgba(0, 10, 24, .28);
}

.site-header {
  background:
    linear-gradient(180deg,
      rgba(3, 28, 49, .94) 0%,
      rgba(2, 23, 42, .90) 48%,
      rgba(1, 18, 34, .88) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 .55rem 1.45rem rgba(0, 9, 22, .18) !important;
}

.site-header .header-inner.mhl-r100-header-inner,
.site-header [data-header-inner].mhl-r100-header-inner {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      var(--mhl-r103-header-glass-top) 0%,
      var(--mhl-r103-header-glass-mid) 22%,
      rgba(255, 255, 255, .035) 48%,
      rgba(255, 255, 255, .015) 100%),
    linear-gradient(135deg,
      rgba(10, 57, 87, .36) 0%,
      rgba(3, 29, 51, .24) 35%,
      rgba(5, 27, 46, .18) 65%,
      var(--mhl-r103-header-glass-bottom) 100%) !important;
  border-top: 1px solid var(--mhl-r103-header-border-soft);
  border-bottom: 1px solid rgba(132, 212, 248, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -.5px 0 rgba(255, 255, 255, .04),
    0 .7rem 1.65rem var(--mhl-r103-header-shadow) !important;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.site-header .header-inner.mhl-r100-header-inner::before,
.site-header [data-header-inner].mhl-r100-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .20) 0%,
      rgba(255, 255, 255, .08) 14%,
      rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 14% 8%,
      rgba(153, 233, 255, .16) 0%,
      rgba(153, 233, 255, 0) 28%),
    radial-gradient(circle at 84% 0%,
      rgba(255, 184, 213, .08) 0%,
      rgba(255, 184, 213, 0) 22%);
  opacity: .92;
  z-index: -1;
}

.site-header .header-inner.mhl-r100-header-inner::after,
.site-header [data-header-inner].mhl-r100-header-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(95, 209, 255, 0) 0%,
    rgba(95, 209, 255, .34) 18%,
    rgba(255, 255, 255, .18) 50%,
    rgba(95, 209, 255, .34) 82%,
    rgba(95, 209, 255, 0) 100%);
  opacity: .7;
  z-index: -1;
}

.site-header .header-inner.mhl-r100-header-inner > *,
.site-header [data-header-inner].mhl-r100-header-inner > * {
  position: relative;
  z-index: 1;
}

.site-header .brand.mhl-brand-r100 .brand-mark,
.site-header .brand.mhl-brand-r100 .anchor-badge,
.site-header .brand.mhl-brand-r100 .brand-icon {
  border: 1px solid var(--mhl-r103-header-border) !important;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .12) 0%,
      rgba(255, 255, 255, .05) 55%,
      rgba(255, 255, 255, .03) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 .28rem .9rem rgba(0, 11, 28, .22) !important;
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.site-header .brand.mhl-brand-r100 .brand-copy.mhl-brand-copy-r100 {
  text-shadow: 0 .06rem .18rem rgba(0, 0, 0, .16);
}

.site-header .mhl-brand-title-r100 {
  filter: drop-shadow(0 .08rem .11rem rgba(0, 0, 0, .28));
}

.site-header .mhl-brand-tagline-r100 {
  text-shadow: 0 .03rem .15rem rgba(0, 11, 28, .26);
}

.site-header .mhl-r100-header-inner :is(.btn, .button, button) {
  border-color: rgba(129, 214, 249, .26) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .14) 0%,
      rgba(255, 255, 255, .07) 42%,
      rgba(255, 255, 255, .03) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 .22rem .7rem rgba(0, 10, 24, .16) !important;
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.site-header .mhl-r100-header-inner :is(nav a, .site-nav a, [data-nav] a) {
  text-shadow: 0 .03rem .14rem rgba(0, 10, 24, .20);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-header .header-inner.mhl-r100-header-inner,
  .site-header [data-header-inner].mhl-r100-header-inner {
    background:
      linear-gradient(180deg,
        rgba(20, 58, 86, .54) 0%,
        rgba(6, 29, 49, .86) 100%) !important;
  }

  .site-header .brand.mhl-brand-r100 .brand-mark,
  .site-header .brand.mhl-brand-r100 .anchor-badge,
  .site-header .brand.mhl-brand-r100 .brand-icon,
  .site-header .mhl-r100-header-inner :is(.btn, .button, button) {
    background: rgba(11, 45, 70, .72) !important;
  }
}