/* MeerHeimatLiebe 2.5.2-r26 — Footer wirklich am Dokumentende, transparent; Segelschiff nach oben */
:root {
  --r26-footer-wave-height: 30px;
  --r26-footer-content-height: 46px;
}

html {
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.site-main {
  flex: 1 0 auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: clamp(1.4rem, 3vw, 2.8rem) !important;
}

/* Der Footer ist das letzte Element im normalen Dokumentfluss. */
.site-footer {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: calc(var(--r26-footer-wave-height) + var(--r26-footer-content-height)) !important;
  height: auto !important;
  margin: auto 0 0 !important;
  padding: var(--r26-footer-wave-height) 0 0 !important;
  overflow: visible !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

/* Die gewünschte Sandwelle bleibt dezent, ist aber transparent. */
.site-footer::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--r26-footer-wave-height) !important;
  background: linear-gradient(180deg, rgba(225,194,137,.30), rgba(184,132,76,.22)) !important;
  clip-path: polygon(0 46%,8% 31%,17% 45%,27% 28%,38% 42%,49% 30%,61% 46%,72% 29%,84% 44%,100% 27%,100% 100%,0 100%) !important;
  border: 0 !important;
  box-shadow: none !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(--r26-footer-wave-height) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.shoreline::before,
.shoreline::after {
  content: none !important;
  display: none !important;
}
.foam-belt,
.wet-sand,
.dry-sand,
.shoreline-wave,
.wave-far,
.wave-near,
.shore-boat,
.shore-boat-b {
  display: none !important;
}
.shoreline > span {
  opacity: .22 !important;
  filter: none !important;
}

/* Kein blauer Balken: Text liegt direkt transparent über dem Hintergrund. */
.footer-inner,
.site-footer .footer-inner {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .34rem .78rem !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--r26-footer-content-height) !important;
  margin: 0 !important;
  padding: .58rem .8rem max(.58rem, env(safe-area-inset-bottom)) !important;
  transform: none !important;
  color: #f5fcfd !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
}
.footer-inner .copyright,
.footer-social {
  margin: 0 !important;
  color: #f7fcfd !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.86), 0 0 12px rgba(0,23,38,.58) !important;
}
.footer-inner .copyright span {
  color: rgba(190,239,244,.88) !important;
}
.image-credit { display: none !important; }

/* Hintergrundelemente dürfen die Seite und die Bedienung niemals blockieren. */
.site-backdrop,
.site-vignette,
.maritime-decor {
  pointer-events: none !important;
}

/* Nach-oben-Schaltfläche rechts: Segelschiff statt 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;
  padding: 0 !important;
  border: 1px solid rgba(143,229,239,.55) !important;
  border-radius: 50% !important;
  color: #9ee9f2 !important;
  background: rgba(3,42,61,.72) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 16px rgba(66,207,224,.12) !important;
  transform: translateY(12px) !important;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease !important;
}
.back-to-top.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.back-to-top:not(.visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: #fff !important;
  border-color: rgba(255,255,255,.88) !important;
  background: rgba(5,57,78,.94) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 22px rgba(255,255,255,.14) !important;
}
.back-to-top-sailboat {
  width: 38px;
  height: 38px;
  overflow: visible;
}
.back-to-top-sailboat .sailboat-mast,
.back-to-top-sailboat .sailboat-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.back-to-top-sailboat .sailboat-hull {
  fill: rgba(158,233,242,.18);
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill .2s ease, stroke .2s ease;
}
.back-to-top-sailboat .sailboat-sail {
  fill: rgba(158,233,242,.42);
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill .2s ease, stroke .2s ease;
}
.back-to-top:hover .sailboat-mast,
.back-to-top:focus-visible .sailboat-mast,
.back-to-top:hover .sailboat-wave,
.back-to-top:focus-visible .sailboat-wave,
.back-to-top:hover .sailboat-hull,
.back-to-top:focus-visible .sailboat-hull {
  stroke: #fff !important;
}
.back-to-top:hover .sailboat-hull,
.back-to-top:focus-visible .sailboat-hull {
  fill: rgba(255,255,255,.18) !important;
}
.back-to-top:hover .sailboat-sail,
.back-to-top:focus-visible .sailboat-sail {
  fill: #c94343 !important;
  stroke: #fff !important;
}