/* MeerHeimatLiebe 2.5.2-r9 */
:root {
  --shore-fixed-height: 82px;
  --shore-content-clearance: 108px;
}

/* Der Strand bleibt fest am unteren Fensterrand; ausschließlich der Seiteninhalt scrollt. */
html, body { min-height: 100%; }
body { padding-bottom: var(--shore-content-clearance) !important; }
.site-main { min-height: calc(100dvh - var(--header-offset, 92px) - var(--shore-fixed-height)); }
.site-footer {
  position: fixed !important;
  z-index: 60 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: var(--shore-fixed-height) !important;
  height: var(--shore-fixed-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  background: transparent !important;
}
.shoreline {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  background: linear-gradient(180deg, #d9bd88 0%, #caa66f 44%, #b98d57 100%) !important;
  border-top: 3px solid rgba(255, 236, 190, .6);
  box-shadow: 0 -8px 28px rgba(20, 12, 5, .22);
}
.shoreline::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    radial-gradient(circle at 7px 9px, rgba(255,245,212,.75) 0 2px, transparent 2.6px) 0 0/34px 28px,
    radial-gradient(circle at 21px 18px, rgba(98,65,30,.25) 0 1.5px, transparent 2px) 0 0/43px 33px;
}
.shoreline-wave, .wave-far, .wave-near, .foam-belt, .wet-sand { display: none !important; }
.dry-sand { position: absolute !important; inset: 0 !important; height: auto !important; background: transparent !important; }
.shore-starfish { left: 8% !important; top: 19px !important; color: #d5755d !important; }
.shore-boat { left: 49% !important; top: 16px !important; color: #70512f !important; }
.shore-anchor { right: 9% !important; top: 18px !important; color: #705c3d !important; }
.shoreline::after {
  content: "◖  ◗   ◔";
  position: absolute;
  left: 28%;
  bottom: 8px;
  color: rgba(104, 76, 43, .52);
  font-size: 1.35rem;
  letter-spacing: 2.2rem;
  transform: rotate(-7deg);
}
.footer-inner {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  bottom: 6px !important;
  transform: translateX(-50%);
  width: min(94vw, 980px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}
.footer-inner .copyright { color: #17384a !important; text-shadow: 0 1px rgba(255,255,255,.45); }
.footer-social { color: #126276 !important; }
.image-credit { display: none; }

/* Vollständige fotografische Hintergründe: feste Ebene, weniger Beschnitt. */
.scene-westerhever {
  --scene-desktop: url('../backgrounds/westerhever-desktop.webp');
  }
.site-backdrop {
  background-size: cover !important;
  background-position: center center !important;
  image-rendering: auto;
}
@media (min-aspect-ratio: 2/1) { .site-backdrop { background-size: 100% auto !important; } }

/* Panels nutzen verfügbare Breite besser. */
.shell, .site-main { width: min(calc(100% - 1.4rem), 1760px) !important; }
.reading-shell { max-width: 1100px; padding: clamp(1.1rem, 2.5vw, 2rem); }
.prose-page h2 { margin-top: 1.4rem; }
.prose-page p { max-width: 85ch; }

/* Servicefenster vollständig sichtbar und intern scrollbar. */
.top-panel.service-panel {
  width: min(720px, calc(100vw - 1.2rem)) !important;
  max-height: min(78dvh, 760px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
}
.service-grid {
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  padding-right: .25rem;
  scrollbar-width: thin;
}
.service-grid a { min-width: 0; overflow-wrap: anywhere; }
.top-panel__head { position: sticky; top: 0; z-index: 2; background: rgba(4, 37, 55, .92); }
.maritime-close {
  position: relative;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  overflow: hidden;
}
.maritime-close .icon { position: absolute; opacity: .32; }
.maritime-close span { position: relative; z-index: 2; line-height: 1; transform: translateY(-1px); }

/* Merkzettel bleibt sichtbar, sein Inhalt scrollt und die Steuerung funktioniert. */
.attractions-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important; }
.trip-plan {
  position: fixed !important;
  z-index: 155 !important;
  right: max(.7rem, env(safe-area-inset-right)) !important;
  top: calc(var(--header-offset, 92px) + .8rem) !important;
  bottom: calc(var(--shore-fixed-height) + .8rem) !important;
  width: min(430px, calc(100vw - 1.4rem)) !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.trip-plan ol {
  min-height: 0;
  overflow-y: auto;
  padding-right: .2rem;
  scrollbar-width: thin;
}
.trip-plan li { align-items: center; }
.trip-item-actions { display: inline-flex !important; grid-auto-flow: column; gap: .2rem; align-items: center; }
.trip-item-actions button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(154,235,244,.2) !important;
  border-radius: 9px;
  color: #ecfbff !important;
  background: rgba(12, 66, 86, .5) !important;
}
.trip-item-actions button:hover { color: #ffd88c !important; border-color: rgba(255,216,140,.5) !important; }
.trip-item-actions button:disabled { opacity: .3; cursor: not-allowed; }
.attractions-results { padding-right: 450px !important; }

/* 365 täglich wechselnde Logbuchgeschichte. */
.daily-logbook-story {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.4rem);
  margin-top: 1rem;
  background: linear-gradient(145deg, rgba(8, 64, 84, .82), rgba(4, 29, 45, .9)) !important;
}
.daily-logbook-story__icon {
  width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: 22px; color: #ffe2a1;
  background: linear-gradient(145deg, rgba(28, 135, 157, .54), rgba(7, 49, 69, .72));
  border: 1px solid rgba(158,237,245,.35);
}
.daily-logbook-story h2 { margin: .2rem 0 .5rem; font-size: clamp(1.3rem, 1.05rem + .8vw, 2rem); }
.daily-logbook-story p { max-width: 86ch; }

/* Zusätzliche maritime Symbole reagieren farbig. */
a:hover .icon, button:hover .icon, .glass-card:hover > .icon {
  color: #ffd071 !important;
  filter: drop-shadow(0 0 8px rgba(255,208,113,.46));
}
.icon-sailor:hover, .icon-seal:hover, .icon-trawler:hover, .icon-fishing-boat:hover, .icon-windmill:hover, .icon-muschel:hover { color: #78e0ea !important; }