/* MeerHeimatLiebe 2.5.2-r10 */
:root {
  --shore-fixed-height: 0px;
  --shore-content-clearance: 0px;
  --shore-visual-height: clamp(96px, 10vw, 124px);
}

html, body {
  min-height: 100%;
  overflow-x: hidden;
}
body {
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
}

/* Glasrahmen beginnt direkt am oberen Rand; Abstand unter dem Header bleibt kompakt. */
.site-header {
  top: 0;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(2, 25, 41, .96), rgba(2, 25, 41, .78) 72%, transparent 100%) !important;
}
.header-inner {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 0 !important;
  min-height: 76px !important;
  padding: .58rem clamp(.72rem, 1vw, 1rem) .55rem !important;
  gap: clamp(.45rem, .9vw, .95rem) !important;
}
.site-main {
  flex: 1 0 auto;
  min-height: 0 !important;
  width: min(calc(100% - 1rem), 1720px) !important;
  padding-top: .28rem !important;
  padding-bottom: 2.65rem !important;
}
.page-header, .page-hero, .hero {
  margin-top: 0 !important;
  padding-top: clamp(1rem, 2vw, 1.7rem) !important;
}
.page-header {
  min-height: clamp(240px, 35vh, 400px) !important;
}
.hero { min-height: clamp(400px, 66vh, 760px) !important; }

/* Keine hässliche Kante rechts, Bildfläche füllt den Viewport sauber aus. */
.site-backdrop {
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  overflow: hidden;
}

/* Strand erscheint erst unten im Dokument. */
.site-footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  min-height: calc(var(--shore-visual-height) + 3.7rem) !important;
  height: auto !important;
  margin-top: auto !important;
  padding: 2.95rem 0 .75rem !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, transparent 0%, rgba(200, 172, 122, .12) 35%, rgba(195, 162, 108, .36) 60%, rgba(183, 145, 92, .78) 100%) !important;
}
.shoreline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  inset: auto 0 0 0 !important;
  height: var(--shore-visual-height) !important;
  background: linear-gradient(180deg, #e7c998 0%, #d3ae74 48%, #bc8c54 100%) !important;
  border-top: 2px solid rgba(255, 244, 217, .72);
  box-shadow: 0 -8px 24px rgba(41, 22, 4, .18);
}
.shoreline::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .42;
  background:
    radial-gradient(circle at 10px 10px, rgba(255,245,213,.76) 0 2px, transparent 2.4px) 0 0/42px 34px,
    radial-gradient(circle at 24px 19px, rgba(107,77,43,.22) 0 1.7px, transparent 2px) 0 0/48px 38px,
    radial-gradient(circle at 33px 8px, rgba(255,234,191,.58) 0 1.6px, transparent 2px) 0 0/56px 40px;
}
.shoreline::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 22%;
  bottom: 14px;
  height: 18px;
  background:
    radial-gradient(circle at 4% 60%, rgba(255,245,225,.68) 0 10px, transparent 11px),
    radial-gradient(circle at 23% 58%, rgba(255,238,210,.62) 0 8px, transparent 9px),
    radial-gradient(circle at 54% 55%, rgba(240,224,197,.52) 0 9px, transparent 10px),
    radial-gradient(circle at 73% 52%, rgba(255,242,218,.48) 0 7px, transparent 8px),
    radial-gradient(circle at 96% 58%, rgba(240,220,189,.52) 0 9px, transparent 10px);
  opacity: .5;
}
.foam-belt, .wet-sand, .shoreline-wave, .wave-far, .wave-near { display: none !important; }
.dry-sand {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  background: transparent !important;
}
.shore-starfish { left: 8.2% !important; top: 18px !important; color: #d67d62 !important; }
.shore-boat { left: 49% !important; top: 15px !important; color: #735131 !important; }
.shore-anchor { right: 8.5% !important; top: 16px !important; color: #765d3d !important; }
.shore-shell {
  position: absolute;
  color: rgba(247, 238, 216, .88);
  filter: drop-shadow(0 1px 0 rgba(104, 80, 51, .35));
}
.shore-shell-a { left: 28%; top: 60px; transform: rotate(-15deg); }
.shore-shell-b { right: 22%; top: 66px; transform: rotate(15deg); }
.footer-inner {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(96vw, 1120px) !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: .5rem .95rem !important;
  margin: 0 auto !important;
  padding: 0 .4rem .15rem !important;
  pointer-events: auto !important;
}
.footer-inner .copyright {
  color: #123247 !important;
  font-weight: 750;
  text-shadow: 0 1px 0 rgba(255,255,255,.36);
}
.footer-inner .copyright span { color: rgba(18, 50, 71, .55) !important; }
.footer-social {
  color: #0f6f83 !important;
  gap: .55rem;
}
.image-credit { color: rgba(16, 56, 72, .72) !important; }

/* Tablet- und Smartphone-Navigation klar bedienbar, ohne Überlappungen. */
.header-tools { min-width: 0; gap: .45rem; }
.header-tool {
  min-height: 42px !important;
  min-width: 42px !important;
  padding-inline: .8rem !important;
}
.nav-dropdown__menu a { white-space: normal !important; }

.hero h1, .page-header h1, .page-hero h1, .article h1, .goodbye-card h1 {
  font-size: clamp(2rem, 2.3vw + 1.2rem, 4.6rem) !important;
  line-height: 1.03 !important;
}
.hero p, .page-header p, .page-hero p, .goodbye-card p, .article p {
  font-size: clamp(.98rem, .5vw + .88rem, 1.15rem) !important;
}