/* MeerHeimatLiebe 2.5.2-r28 — feste Kategorienbilder, voller Bildausschnitt, transparenter Footer, Segelschiff in Preloader */
:root {
  --r27-header-height: 76px;
  --r27-footer-wave-height: 34px;
  --r27-footer-content-height: 54px;
}

html,
body {
  min-height: 100% !important;
}

body {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: var(--r27-header-height) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

/* Header wieder bündig an den Seitenanfang. */
.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1100 !important;
  pointer-events: auto !important;
}

.header-inner {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--r27-header-height) !important;
  border-radius: 0 0 18px 18px !important;
}

.site-main {
  flex: 1 0 auto !important;
  width: 100% !important;
  min-height: calc(100dvh - var(--r27-header-height) - var(--r27-footer-wave-height) - var(--r27-footer-content-height)) !important;
  margin: 0 !important;
  padding-bottom: 1.25rem !important;
}

/* Kein Rollieren mehr: nur ein statisches Bild je Szene/Kategorie. */
.site-backdrop {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-attachment: scroll !important;
  opacity: 1 !important;
  transition: none !important;
}
.site-backdrop--a {
  opacity: 1 !important;
  visibility: visible !important;
}
.site-backdrop--b {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.site-vignette,
.maritime-decor {
  pointer-events: none !important;
}

/* Footer bleibt ganz unten und transparent; Sandwelle liegt über dem Footer. */
.site-footer {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
  min-height: calc(var(--r27-footer-wave-height) + var(--r27-footer-content-height)) !important;
  padding: var(--r27-footer-wave-height) 0 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 40 !important;
  overflow: visible !important;
}
.site-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--r27-footer-wave-height) !important;
  background: linear-gradient(180deg, rgba(218,176,112,.88), rgba(190,145,84,.82)) !important;
  clip-path: polygon(0 48%,8% 32%,17% 46%,28% 28%,39% 43%,50% 31%,61% 46%,72% 30%,83% 43%,92% 29%,100% 37%,100% 100%,0 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.site-footer::after {
  content: none !important;
  display: none !important;
}

.shoreline,
.shoreline::before,
.shoreline::after {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--r27-footer-wave-height) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.shoreline::before,
.shoreline::after,
.foam-belt,
.wet-sand,
.dry-sand,
.shoreline-wave,
.wave-far,
.wave-near,
.shore-boat,
.shore-boat-b {
  display: none !important;
  content: none !important;
}
.shoreline > span {
  position: absolute !important;
  top: 5px !important;
  opacity: .46 !important;
}
.shore-starfish { left: 9% !important; color: rgba(220,149,129,.92) !important; transform: rotate(-10deg); }
.shore-shell-a { left: 23% !important; color: rgba(242,232,211,.95) !important; }
.shore-seagull { left: 36% !important; color: rgba(181,234,240,.9) !important; }
.shore-anchor-left { left: 64% !important; color: rgba(134,219,229,.9) !important; }
.shore-shell-b { right: 21% !important; color: rgba(242,232,211,.95) !important; }
.shore-anchor { right: 9% !important; color: rgba(173,149,114,.92) !important; }

.footer-inner,
.site-footer .footer-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: .35rem .8rem !important;
  width: 100% !important;
  min-height: var(--r27-footer-content-height) !important;
  margin: 0 !important;
  padding: .62rem .85rem calc(.62rem + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 2 !important;
}
.footer-inner .copyright,
.footer-social {
  margin: 0 !important;
  color: #f6fbfd !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.78), 0 0 10px rgba(0,26,40,.42) !important;
}
.footer-inner .copyright span {
  color: rgba(176,235,241,.92) !important;
}
.image-credit { display: none !important; }

/* Nach-oben-Schalter rechts, wieder als klarer Pfeil. */
.back-to-top {
  position: fixed !important;
  left: auto !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  z-index: 6200 !important;
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(143,229,239,.55) !important;
  border-radius: 50% !important;
  color: #9ee9f2 !important;
  background: rgba(3,42,61,.74) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 16px rgba(66,207,224,.12) !important;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease !important;
}
.back-to-top .icon {
  width: 24px !important;
  height: 24px !important;
}
.back-to-top.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.back-to-top:not(.visible) {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.9) !important;
  background: rgba(5,57,78,.94) !important;
}

/* Segelschiff aus dem Pfeilbereich jetzt im Preloader. */
.preloader-ship {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9ee9f2 !important;
  filter: drop-shadow(0 0 10px rgba(112,228,244,.28));
}
.preloader-ship .mhl-sailboat {
  width: 42px !important;
  height: 42px !important;
  overflow: visible;
}
.preloader-ship .mhl-sailboat .sailboat-mast,
.preloader-ship .mhl-sailboat .sailboat-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preloader-ship .mhl-sailboat .sailboat-hull {
  fill: rgba(158,233,242,.18);
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.preloader-ship .mhl-sailboat .sailboat-sail {
  fill: rgba(158,233,242,.42);
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
}