/* MeerHeimatLiebe 2.5.2-r38 — statische Fünf-Wege-Startseite,
   ein einzelnes Symbol je Reiter, kein Überlappen mit dem Header,
   neue Galerie- und Community-Hintergründe. */

:root {
  --r38-header-height: 104px;
}

/* Hintergrund beginnt wieder sauber unter dem Header.
   Die Füll-Ebene bleibt cover, das Motiv darüber vollständig sichtbar. */
.site-backdrop,
.site-vignette {
  top: var(--r38-header-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(100dvh - var(--r38-header-height)) !important;
}

.site-backdrop {
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.site-backdrop--a {
  background-size: 100% 100%, cover !important;
}
.site-backdrop--b {
  background-size: 100% 100%, contain !important;
  background-position: center center, center top !important;
}

/* Neue Szenenbilder nur für die jeweiligen Kategorieseiten. */
.scene-gallery {
  --scene-desktop: url('../backgrounds/gallery-desktop.webp') !important;

}
.scene-forum {
  --scene-desktop: url('../backgrounds/forum-desktop.webp') !important;

}

/* Der Fünf-Wege-Bereich bleibt auf dem unveränderten Startseitenmotiv. */
.scene-home .site-main {
  padding-top: clamp(.8rem, 1.8vw, 1.4rem) !important;
}
.scene-home .home-hub {
  margin-top: .15rem;
}

.home-module,
.home-hub [id] {
  scroll-margin-top: calc(var(--r38-header-height) + 1.25rem) !important;
}

.home-jump-tabs {
  align-items: stretch;
  gap: .72rem;
}

.home-jump-tabs a {
  min-width: min(100%, 12.2rem);
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .78rem .88rem .72rem !important;
}

.home-jump-tabs__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  text-align: center;
}

/* Nur ein einzelnes Seestern-/Maritimsymbol je Karte statt animierter Dreierreihe. */
.home-jump-tabs__hint {
  min-height: auto !important;
  display: inline-grid !important;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #ffd98a;
  background: rgba(8, 38, 56, .42);
  border: 1px solid rgba(255, 217, 138, .34);
  box-shadow: inset 0 0 14px rgba(255, 217, 138, .08), 0 8px 18px rgba(0,0,0,.18);
  opacity: .94;
  transform: none !important;
  filter: none !important;
  pointer-events: none;
}
.home-jump-tabs__hint .icon {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.home-jump-tabs a:hover,
.home-jump-tabs a:focus-visible,
.home-jump-tabs a.is-active {
  transform: translateY(-2px) !important;
}

.home-jump-tabs a.is-active .home-jump-tabs__hint,
.home-jump-tabs a:hover .home-jump-tabs__hint,
.home-jump-tabs a:focus-visible .home-jump-tabs__hint {
  color: #fff0bf;
  border-color: rgba(255, 232, 166, .58);
  background: rgba(17, 82, 108, .54);
}

/* Eine aktive Karte öffnet sich; alle anderen bleiben geschlossen. */
.home-module-grid.has-expanded .home-module {
  opacity: .7;
  filter: saturate(.76);
  transform: scale(.985);
}
.home-module-grid.has-expanded .home-module.is-expanded {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(-10px) scale(1.035);
}
.home-module[data-home-module-card] {
  cursor: pointer;
}
.home-module.is-expanded {
  border-color: rgba(157, 236, 244, .92) !important;
  background: linear-gradient(155deg, rgba(11, 42, 58, .94), rgba(6, 24, 37, .96)) !important;
  box-shadow: 0 0 0 3px rgba(112, 228, 244, .18), 0 30px 58px rgba(0, 0, 0, .34) !important;
  z-index: 2;
}
.home-module.is-expanded .home-module__head .icon {
  color: #ffd98a;
}

/* Bildausschnitte in den Startkarten bleiben immer vollständig sichtbar. */
.home-module--image {
  overflow: hidden !important;
}
.home-module--image > img {
  width: 100% !important;
  height: clamp(170px, 14vw, 245px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: linear-gradient(145deg, rgba(9, 45, 62, .94), rgba(3, 26, 41, .96)) !important;
  padding: .35rem !important;
}

@media (min-width: 1200px) {
  .home-module.is-expanded {
    grid-column: span 2;
    min-height: 300px;
  }
  .home-module--image.is-expanded > img {
    height: clamp(220px, 18vw, 310px) !important;
  }
}





@media (prefers-reduced-motion: reduce) {
  .site-backdrop,
  .home-jump-tabs a,
  .home-jump-tabs__hint,
  .home-module {
    transition: none !important;
  }
}