/* MeerHeimatLiebe 2.5.2-r79
   - professioneller Preloader mit Krabbenhintergrund, Wasserzeichen, Kompasssymbol und Header-Schafen */

.mhl-preloader__glass {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 23, 36, 0.30), rgba(3, 23, 36, 0.62)),
    linear-gradient(90deg, rgba(2, 18, 30, 0.10), rgba(2, 18, 30, 0.28) 46%, rgba(2, 18, 30, 0.52)),
    url('../backgrounds/preloader-krabbe-sand-r79.webp') 18% 80% / cover no-repeat !important;
}

.mhl-preloader__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 78%, rgba(255, 234, 205, 0.08), transparent 22%),
    radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.04), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0) 24%);
  pointer-events: none;
}

/* Preloader-Titel in der gleichen Handschrift wie im Header. */
.mhl-preloader h1,
.mhl-preloader .mhl-preloader__title,
.mhl-preloader [data-preloader-title],
.mhl-preloader .preloader-title {
  font-family: var(--mhl-title-handwriting, "Segoe Print", "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", "Lucida Handwriting", cursive) !important;
  font-weight: 600 !important;
  letter-spacing: .012em !important;
  text-rendering: optimizeLegibility;
}

/* Ruhige, professionelle Symbolrotation. */
.preloader-tone-compass-r79 { color: #d6f6ff !important; }
.preloader-tone-helm-r79 { color: #f0d79b !important; }
.preloader-tone-anchor-r79 { color: #9fe3ed !important; }
.preloader-tone-seagull-r79 { color: #eefcff !important; }
.preloader-tone-starfish-r79 { color: #f7c89a !important; }
.preloader-tone-fish-r79 { color: #8eddea !important; }

.preloader-symbol-stage > span {
  animation-name: mhl-preloader-symbol-r79 !important;
  animation-duration: 13.5s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: opacity, transform, filter;
}
.preloader-symbol-stage > span:nth-child(1) { animation-delay: 0s !important; }
.preloader-symbol-stage > span:nth-child(2) { animation-delay: 1.5s !important; }
.preloader-symbol-stage > span:nth-child(3) { animation-delay: 3s !important; }
.preloader-symbol-stage > span:nth-child(4) { animation-delay: 4.5s !important; }
.preloader-symbol-stage > span:nth-child(5) { animation-delay: 6s !important; }
.preloader-symbol-stage > span:nth-child(6) { animation-delay: 7.5s !important; }
.preloader-symbol-stage > span:nth-child(7) { animation-delay: 9s !important; }
.preloader-symbol-stage > span:nth-child(8) { animation-delay: 10.5s !important; }
.preloader-symbol-stage > span:nth-child(9) { animation-delay: 12s !important; }

@keyframes mhl-preloader-symbol-r79 {
  0% { opacity: 0; transform: translateY(6px) scale(.95); filter: drop-shadow(0 0 0 rgba(165, 235, 244, 0)); }
  4%, 10% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 14px rgba(165, 235, 244, .28)); }
  13%, 100% { opacity: 0; transform: translateY(-4px) scale(.98); filter: drop-shadow(0 0 0 rgba(165, 235, 244, 0)); }
}

.mhl-preloader [data-preloader-message] {
  min-height: 1.5em;
  transition: opacity .26s ease, transform .26s ease;
}

/* Kleine professionelle Schafszene neben der Flagge. */
.site-header .brand-copy > .mhl-brand-sheep-pasture-r79 {
  display: inline-flex;
  align-items: flex-end;
  gap: .38rem;
  position: relative;
  height: 1rem;
  margin-left: .7rem;
  padding-left: .18rem;
  flex: 0 0 auto;
  vertical-align: middle;
}

.site-header .brand-copy > .mhl-brand-sheep-pasture-r79::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.02rem;
  height: .16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(111, 177, 151, .0), rgba(111, 177, 151, .88) 20%, rgba(155, 212, 167, .96) 52%, rgba(111, 177, 151, .0));
  box-shadow: 0 0 6px rgba(140, 205, 176, .18);
}

.mhl-brand-sheep-r79 {
  position: relative;
  display: inline-block;
  width: .95rem;
  height: .64rem;
  transform-origin: center bottom;
  animation: mhl-sheep-graze-r79 4.8s ease-in-out infinite;
}

.mhl-brand-sheep-r79::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .12rem;
  width: .58rem;
  height: .38rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(237,246,249,.92) 62%, rgba(201,221,230,.86));
  box-shadow: 0 0 0 1px rgba(181, 216, 230, .14), 0 .02rem .06rem rgba(0,0,0,.2);
}

.mhl-brand-sheep-r79::after {
  content: "";
  position: absolute;
  right: .08rem;
  top: .16rem;
  width: .22rem;
  height: .2rem;
  border-radius: 50% 48% 42% 54%;
  background: linear-gradient(180deg, rgba(65, 87, 96, .98), rgba(43, 61, 70, .98));
  box-shadow: -.03rem .01rem 0 .01rem rgba(0,0,0,.16);
}

.mhl-brand-sheep-r79 > i,
.mhl-brand-sheep-r79 > b {
  position: absolute;
  display: block;
  background: rgba(46, 61, 70, .92);
  border-radius: 999px;
}

.mhl-brand-sheep-r79 > i {
  left: .28rem;
  bottom: -.01rem;
  width: .05rem;
  height: .19rem;
  box-shadow: .18rem 0 0 rgba(46, 61, 70, .92), .33rem 0 0 rgba(46, 61, 70, .92), .48rem 0 0 rgba(46, 61, 70, .92);
}

.mhl-brand-sheep-r79 > b {
  right: .14rem;
  top: .09rem;
  width: .11rem;
  height: .04rem;
  transform: rotate(-18deg);
  transform-origin: left center;
  background: rgba(215, 236, 242, .96);
  box-shadow: 0 0 .04rem rgba(255,255,255,.22);
}

.mhl-brand-sheep-r79--2 {
  transform: scale(.94);
  animation-delay: -1.4s;
}

.mhl-brand-sheep-r79--3 {
  transform: scale(.88);
  animation-delay: -2.3s;
}

@keyframes mhl-sheep-graze-r79 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  18% { transform: translateY(.01rem) rotate(-1deg); }
  36% { transform: translateY(.03rem) rotate(1deg); }
  52% { transform: translateY(.01rem) rotate(-2deg); }
  68% { transform: translateY(0) rotate(0deg); }
}



@media (prefers-reduced-motion: reduce) {
  .preloader-symbol-stage > span,
  .mhl-brand-sheep-r79 {
    animation: none !important;
  }

  .preloader-symbol-stage > span {
    opacity: 0 !important;
  }

  .preloader-symbol-stage > span:first-child {
    opacity: 1 !important;
  }

  .mhl-preloader [data-preloader-message] {
    transition: none !important;
  }
}