/* MeerHeimatLiebe 2.5.2-r9 - fixed shore, guides, ranks and SH planner */
:root {
  --shore-fixed-height: 116px;
  --shore-content-clearance: 152px;
  --r8-gold: #f1c36e;
  --r8-coral: #ef8d78;
  --r8-mint: #68dbc4;
  --r8-sky: #8fe8f3;
}

/* The viewport scrolls normally. Header and background stay fixed; content never runs underneath them. */
html, body { min-height: 100%; }
body { overflow-x: hidden; overflow-y: auto; }
.site-header { position: fixed !important; inset: 0 0 auto !important; z-index: 180 !important; }
.site-main {
  position: relative;
  z-index: 4;
  padding-top: calc(var(--header-offset, 92px) + clamp(1rem, 2vw, 2rem)) !important;
  padding-bottom: var(--shore-content-clearance) !important;
  min-height: 100dvh;
}
.site-main > [id], .site-main section[id], .site-main article[id] {
  scroll-margin-top: calc(var(--header-offset, 92px) + 1.1rem) !important;
}
.site-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  transform: none !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: scroll !important;
}
.site-tide-overlay { display: none !important; }

/* Sea removed. Only a quiet, fixed sand bank remains at the bottom. */
.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 70 !important;
  width: 100% !important;
  height: var(--shore-fixed-height) !important;
  min-height: var(--shore-fixed-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: none;
}
.shoreline {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.shoreline-wave, .wave-far, .wave-near, .foam-belt, .foam-line { display: none !important; }
.wet-sand {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 23px !important;
  clip-path: polygon(0 46%, 8% 32%, 18% 47%, 29% 29%, 40% 44%, 52% 27%, 64% 45%, 75% 30%, 86% 43%, 100% 28%, 100% 100%, 0 100%) !important;
  background: linear-gradient(180deg, rgba(124, 101, 66, .92), rgba(174, 141, 91, .98)) !important;
}
.dry-sand {
  position: absolute !important;
  inset: 18px 0 0 !important;
  height: auto !important;
  background:
    radial-gradient(circle at 9% 36%, rgba(255, 239, 198, .5) 0 2px, transparent 2.8px),
    radial-gradient(circle at 27% 72%, rgba(113, 77, 42, .26) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 64% 40%, rgba(255, 239, 198, .36) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 84% 70%, rgba(99, 66, 36, .24) 0 1.6px, transparent 2.4px),
    linear-gradient(180deg, #d7b77d, #c39c64 72%, #aa8150) !important;
  background-size: 82px 52px, 71px 47px, 91px 55px, 69px 49px, auto !important;
  clip-path: none !important;
}
.shore-starfish { left: 8% !important; top: 31px !important; color: rgba(207, 103, 79, .86) !important; }
.shore-boat { left: 48% !important; top: 26px !important; color: rgba(88, 61, 34, .82) !important; }
.shore-anchor { right: 9% !important; top: 28px !important; color: rgba(85, 72, 47, .82) !important; }
.footer-inner {
  position: absolute !important;
  inset: auto 0 7px !important;
  z-index: 4 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem !important;
}
.footer-inner .copyright {
  color: #17323d !important;
  font-size: clamp(.64rem, .58rem + .15vw, .78rem) !important;
  font-weight: 750;
  text-shadow: 0 1px rgba(255,255,255,.35);
}
.footer-inner .copyright span { color: #346e7c !important; }
.footer-social { color: #285d68 !important; }
.back-to-top { bottom: calc(var(--shore-fixed-height) + 1rem) !important; }
.maritime-decor { bottom: calc(var(--shore-fixed-height) + 1.4rem) !important; }

/* CAPTCHA question mark always follows the arithmetic challenge on the same line. */
.captcha-box strong,
.captcha-box .captcha-question,
[data-captcha-question],
.captcha-challenge {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .35em !important;
  white-space: nowrap !important;
}
.captcha-box .captcha-orphan-question,
[data-captcha-orphan] { display: none !important; }

/* Every lighthouse icon emits a restrained rotating beacon. */
.icon-lighthouse {
  color: #dffbff;
  filter: drop-shadow(0 0 4px rgba(116, 232, 244, .72));
  transform-origin: 50% 30%;
  animation: lighthouseBeacon 2.35s ease-in-out infinite;
}
@keyframes lighthouseBeacon {
  0%, 100% { color: #dffbff; filter: drop-shadow(0 0 3px rgba(116,232,244,.62)); }
  40% { color: #fff0a8; filter: drop-shadow(0 0 8px rgba(255,218,112,.95)) drop-shadow(0 0 17px rgba(255,193,64,.58)); }
  55% { transform: rotate(1.8deg) scale(1.04); }
}

/* All interactive icons respond with maritime color instead of only becoming heavier. */
a .icon, button .icon, summary .icon, .home-module .icon, .forum-category .icon, .attraction-card__icon {
  transition: color .18s ease, transform .18s ease, filter .18s ease;
}
a:hover .icon, a:focus-visible .icon,
button:hover .icon, button:focus-visible .icon,
summary:hover .icon, .home-module:hover .icon,
.forum-category:hover .icon {
  color: var(--r8-gold) !important;
  transform: translateY(-2px) rotate(-4deg);
  filter: drop-shadow(0 0 7px rgba(241,195,110,.48));
}
a:nth-of-type(3n+2):hover .icon, button:nth-of-type(3n+2):hover .icon { color: var(--r8-mint) !important; }
a:nth-of-type(3n):hover .icon, button:nth-of-type(3n):hover .icon { color: var(--r8-coral) !important; }

/* Animated preloader voyage with a travelling ship and real percentage. */
.preloader-voyage {
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .75rem;
  margin: 1.05rem auto 0;
}
.preloader-track {
  --preloader-progress: 0;
  position: relative;
  height: 20px;
  border: 1px solid rgba(143, 235, 245, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 12, 22, .66), rgba(7, 48, 66, .68));
  box-shadow: inset 0 0 12px rgba(0,0,0,.34), 0 0 15px rgba(76,210,228,.13);
}
.preloader-track > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2bbbd3, #80e7ef 58%, #f3ca72);
  box-shadow: 0 0 13px rgba(94,222,234,.45);
  transition: width .16s linear;
}
.preloader-ship {
  position: absolute;
  z-index: 3;
  left: clamp(0px, var(--preloader-progress), calc(100% - 28px));
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #fff3bd;
  transform: translate(-3px, -54%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.52)) drop-shadow(0 0 6px rgba(255,218,112,.42));
  transition: left .16s linear;
  animation: preloaderShipBob .9s ease-in-out infinite;
}
.preloader-percent {
  color: #fff4ce !important;
  font: 850 .82rem/1 var(--mono, monospace) !important;
  text-align: right;
}
@keyframes preloaderShipBob { 50% { transform: translate(-3px, -67%) rotate(-3deg); } }

/* Download guides */
.official-downloads {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
.official-downloads__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.official-downloads__head h2 { margin: .2rem 0 .35rem; font-size: clamp(1.45rem, 1.15rem + .9vw, 2.2rem); }
.official-downloads__head p { max-width: 68ch; margin: 0; }
.official-downloads__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.guide-download { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; padding: 1.15rem; }
.guide-download__icon {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  color: #fff0b3; background: linear-gradient(145deg, rgba(27,136,157,.72), rgba(6,45,65,.85));
  border: 1px solid rgba(143,235,245,.42);
}
.guide-download h3 { margin: .45rem 0 .4rem; }
.guide-download p { color: var(--mist); }
.official-downloads__notice { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 0; color: var(--muted); font-size: .78rem; }

/* Forum ranks */
.forum-rank { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .38rem; padding: .4rem .6rem; border: 1px solid rgba(135,228,239,.32); border-radius: 999px; color: #eefcff; background: rgba(7,56,76,.7); }
.forum-rank strong { color: #a8eef5; }
.forum-rank small { color: var(--muted); }
.forum-rank--compact { padding: .18rem .35rem; font-size: .68rem; }
.forum-rank--captain { border-color: rgba(241,195,110,.62); background: rgba(101,71,31,.34); }
.forum-rank--captain strong { color: #ffe2a0; }
.rank-progress { height: 9px; overflow: hidden; border: 1px solid rgba(130,225,237,.3); border-radius: 99px; background: rgba(0,12,22,.55); }
.rank-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #32bdd2, #7be5eb, #f2c36f); }
.forum-rank-card { display: grid; gap: .7rem; }
.rank-page { padding: clamp(1rem,2vw,1.5rem); }
.rank-current { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; align-items: center; padding: 1.2rem; margin-bottom: 1rem; }
.rank-current h2 { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.rank-current__progress { display: grid; gap: .45rem; padding: 1rem; border-radius: 18px; background: rgba(4,38,55,.58); }
.rank-current__progress > strong { font-size: 2rem; color: #fff2b5; }
.rank-ladder { display: grid; gap: .75rem; }
.rank-step { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1rem; }
.rank-step__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #9becf4; background: rgba(16,109,132,.35); }
.rank-step h2 { margin: 0; font-size: 1.1rem; }
.rank-step p { margin: .2rem 0 0; color: var(--muted); }
.rank-step > strong { color: #ffdda0; }
.rank-step--captain { border-color: rgba(241,195,110,.5) !important; }
.online-crew > span { flex-wrap: wrap; }

/* Schleswig-Holstein attractions and lighthouse planner */
.attractions-shell { display: grid; gap: 1rem; }
.attractions-toolbar { padding: clamp(1rem,2vw,1.35rem); }
.attractions-toolbar__intro h2 { margin: .2rem 0 .4rem; font-size: clamp(1.45rem,1.12rem + 1vw,2.25rem); }
.attractions-toolbar__intro p { max-width: 76ch; }
.attractions-filters {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(150px, .8fr)) auto;
  gap: .75rem;
  align-items: end;
  margin-top: 1rem;
}
.attractions-filters label { display: grid; gap: .35rem; color: #dcecf0; font-size: .78rem; font-weight: 700; }
.attractions-filters input, .attractions-filters select { min-width: 0; width: 100%; }
.attraction-location { white-space: nowrap; }
.planner-note { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; }
.attractions-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,330px); gap: 1rem; align-items: start; }
.attractions-results { padding: 1rem; min-width: 0; }
.attraction-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.attraction-card { display: flex; flex-direction: column; min-width: 0; padding: 1rem; border-radius: 18px; }
.attraction-card.featured { border-color: rgba(241,195,110,.48) !important; box-shadow: 0 15px 40px rgba(0,0,0,.24), inset 0 0 0 1px rgba(241,195,110,.09); }
.attraction-card__top { display: flex; align-items: center; gap: .55rem; }
.attraction-card__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #8ee7f1; background: rgba(20,120,143,.3); font-size: 1.15rem; }
.attraction-card__type { color: #9fe9f2; font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.attraction-card h3 { margin: .72rem 0 .42rem; font-size: 1.03rem; overflow-wrap: anywhere; }
.attraction-card > p { color: #d8e7eb; font-size: .84rem; }
.attraction-card__meta { display: grid; gap: .18rem; margin-top: auto; padding-top: .75rem; color: var(--muted); font-size: .72rem; }
.attraction-rating { display: flex; align-items: center; gap: .45rem; margin: .6rem 0; color: #f4c975; letter-spacing: .03em; }
.attraction-rating small { color: var(--muted); letter-spacing: 0; }
.attraction-card details { margin-top: .25rem; color: #dcecf0; font-size: .76rem; }
.attraction-card summary { cursor: pointer; color: #9be9f2; }
.attraction-card details p { margin: .45rem 0; color: var(--muted); }
.attraction-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.attraction-more-wrap { display: flex; justify-content: center; margin-top: 1rem; }
.trip-plan { position: sticky; top: calc(var(--header-offset,92px) + 1rem); padding: 1rem; max-height: calc(100dvh - var(--header-offset,92px) - var(--shore-fixed-height) - 2rem); overflow: auto; }
.trip-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.trip-plan__head h2 { margin: .2rem 0; }
.trip-plan__clear { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(137,226,238,.35); border-radius: 50%; color: #fff; background: rgba(255,255,255,.05); font-size: 1.25rem; }
.trip-plan ol { display: grid; gap: .55rem; padding: 0; margin: 1rem 0; list-style: none; }
.trip-plan li { display: flex; justify-content: space-between; gap: .5rem; padding: .65rem; border: 1px solid rgba(132,222,237,.18); border-radius: 12px; background: rgba(1,20,32,.38); }
.trip-plan li span { display: grid; gap: .2rem; }
.trip-plan li small { color: var(--muted); }
.trip-plan li button { border: 0; color: #ffd1ca; background: transparent; }
.trip-plan__summary { display: grid; gap: .2rem; padding: .75rem; border-radius: 13px; color: #fff; background: rgba(19,112,135,.28); }
.trip-plan__summary span, .trip-plan__notice { color: var(--muted); font-size: .74rem; }
.empty-state { grid-column: 1 / -1; padding: 2rem; text-align: center; }




@media (prefers-reduced-motion: reduce) {
  .icon-lighthouse, .preloader-ship { animation: none !important; }
  .icon-lighthouse { color: #fff0a8; filter: drop-shadow(0 0 8px rgba(255,218,112,.75)); }
}