:root {
  --navy: #071521;
  --cream: #f7f2e9;
  --gold: #dfba79;
  --gold-light: #f3d6a1;
  --line: rgba(231, 212, 177, .19);
  --scene-width: max(104vw, 184.79065vh);
  --scene-height: max(104vh, 58.5311vw);
  --scene-alignment: .065;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  background: var(--navy);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; }
body { margin: 0; min-height: 100svh; isolation: isolate; }
::selection { color: var(--navy); background: var(--gold-light); }

/* Both frames use the photo's exact aspect ratio. The lamp stays attached to
   its source coordinates, even when the image is cropped on a small screen. */
.seascape { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: var(--navy); }
.scene-frame { position: absolute; width: var(--scene-width); height: var(--scene-height); left: calc((100vw - var(--scene-width)) * var(--scene-alignment)); top: calc((100vh - var(--scene-height)) * .5); }
.seascape__image, .water { position: absolute; inset: 0; background: url("nordsee.webp") center / 100% 100% no-repeat; }
.water { opacity: .8; -webkit-mask-image: linear-gradient(transparent 69%, #000 75%); mask-image: linear-gradient(transparent 69%, #000 75%); transform-origin: 50% 74%; animation: water-swell 7s ease-in-out infinite alternate; }
.water-light { position: absolute; inset: 71% -5% -5%; background: repeating-linear-gradient(176deg, transparent 0 19px, rgba(231, 219, 185, .15) 20px, transparent 22px 40px); -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 64%); mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 64%); mix-blend-mode: screen; animation: water-shimmer 9s ease-in-out infinite alternate; }

/* Clearly visible banks with luminous edges and darker bodies, moving at
   different speeds. Shorter cycles make their movement visible immediately. */
.clouds { position: absolute; inset: -14% -28% 27%; filter: blur(12px); }
.clouds--distant {
  opacity: .88;
  background:
    radial-gradient(ellipse at 12% 42%, rgba(147, 173, 193, .74) 0%, rgba(100, 127, 154, .5) 13%, transparent 32%),
    radial-gradient(ellipse at 37% 23%, rgba(128, 157, 183, .72) 0%, rgba(66, 98, 128, .54) 13%, transparent 30%),
    radial-gradient(ellipse at 67% 42%, rgba(158, 182, 203, .71) 0%, rgba(84, 116, 145, .52) 15%, transparent 32%),
    radial-gradient(ellipse at 94% 20%, rgba(137, 162, 184, .78) 0%, rgba(66, 95, 125, .57) 14%, transparent 30%);
  animation: clouds-drift 42s -12s ease-in-out infinite alternate;
}
.clouds--near {
  inset: -4% -32% 31%;
  opacity: .84;
  background:
    radial-gradient(ellipse at 17% 60%, rgba(11, 27, 45, .94) 0%, rgba(32, 58, 82, .79) 14%, transparent 31%),
    radial-gradient(ellipse at 32% 38%, rgba(127, 153, 176, .7) 0%, rgba(61, 88, 116, .64) 10%, transparent 23%),
    radial-gradient(ellipse at 57% 59%, rgba(7, 20, 36, .91) 0%, rgba(38, 64, 91, .74) 16%, transparent 33%),
    radial-gradient(ellipse at 79% 40%, rgba(155, 175, 194, .75) 0%, rgba(80, 106, 133, .58) 12%, transparent 28%),
    radial-gradient(ellipse at 99% 65%, rgba(13, 30, 49, .9) 0%, rgba(31, 56, 81, .77) 14%, transparent 31%);
  animation: clouds-drift 31s -8s ease-in-out infinite alternate-reverse;
}

/* Beacon at pixel (128, 522) of the 1672 x 941 source image. The beam rotates
   around the tower's vertical axis, rather than swinging like a clock hand. */
.lighthouse-light {
  --beam-length: clamp(640px, 82vw, 1350px);
  --beam-height: clamp(150px, 19vw, 300px);
  position: absolute; left: 7.6555%; top: 55.4729%; width: 0; height: 0;
  perspective: 1900px; perspective-origin: 0 0;
}
.lighthouse-light__sweep {
  position: absolute; left: 0; top: calc(var(--beam-height) * -.5);
  width: var(--beam-length); height: var(--beam-height);
  transform-origin: 0 50%; transform-style: preserve-3d;
  animation: lighthouse-turn 14s -1.8s linear infinite;
}
.lighthouse-light__beam {
  position: absolute; inset: 0;
  clip-path: polygon(0 49.5%, 100% 0, 100% 100%, 0 50.5%);
  background: linear-gradient(90deg, rgba(255, 242, 195, .96) 0%, rgba(255, 231, 165, .58) 13%, rgba(246, 219, 153, .32) 39%, rgba(233, 212, 163, .13) 72%, transparent 100%);
  filter: blur(2px); mix-blend-mode: screen;
  animation: lighthouse-beam-strength 14s -1.8s linear infinite;
}
.lighthouse-light__beam::after {
  content: ""; position: absolute; inset: 15% 0;
  background: linear-gradient(90deg, rgba(255, 247, 215, .5), rgba(255, 235, 185, .2) 30%, transparent 85%);
  clip-path: polygon(0 50%, 100% 8%, 100% 92%);
}
.lighthouse-light__lamp {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff5ce;
  box-shadow: 0 0 9px 3px #ffe4a2, 0 0 24px 9px rgba(255, 212, 125, .8), 0 0 65px 24px rgba(255, 204, 107, .24);
  animation: lighthouse-lamp 14s -1.8s linear infinite;
}
.lighthouse-light__halo {
  position: absolute; left: -90px; top: -90px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 201, .7), rgba(251, 213, 136, .27) 17%, rgba(252, 208, 114, .1) 37%, transparent 70%);
  opacity: .3; animation: lighthouse-front-glow 14s -1.8s linear infinite;
}
.lighthouse-light__flare {
  position: absolute; left: -110px; top: -1px; width: 220px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 229, 164, .2) 20%, #fff4c7 50%, rgba(255, 229, 164, .2) 80%, transparent);
  box-shadow: 0 0 8px rgba(255, 226, 158, .28); opacity: 0;
  animation: lighthouse-front-flare 14s -1.8s linear infinite;
}

/* Distant bolts separated in time, with only a faint glow across the sky. */
.lightning { position: absolute; width: 64px; height: clamp(120px, 22vh, 230px); opacity: 0; background: #dce9f4; filter: drop-shadow(0 0 5px rgba(194, 218, 242, .75)); clip-path: polygon(65% 0, 38% 29%, 51% 32%, 20% 64%, 35% 64%, 8% 100%, 44% 61%, 29% 60%, 62% 30%, 47% 27%); }
.lightning--one { left: 67%; top: 9%; animation: lightning-one 23s -1s linear infinite; }
.lightning--two { left: 28%; top: 4%; width: 43px; height: 16vh; transform: scaleX(-1) rotate(-8deg); animation: lightning-two 37s -7s linear infinite; }
.sky-flash { position: absolute; inset: 0 0 28%; opacity: 0; background: radial-gradient(ellipse at 68% 15%, rgba(191, 213, 232, .8), transparent 54%); animation: sky-flash 23s -1s linear infinite; }

.seascape__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 13, 22, .58), rgba(3, 13, 22, .3) 42%, rgba(3, 13, 22, .05) 72%), linear-gradient(180deg, rgba(3, 13, 22, .1), transparent 45%, rgba(3, 13, 22, .1) 73%, rgba(3, 13, 22, .7)); }
.seascape__mist { position: absolute; inset: 48% -30% -24%; opacity: .38; background: radial-gradient(ellipse at 30% 40%, rgba(121, 164, 180, .15), transparent 48%), radial-gradient(ellipse at 80% 52%, rgba(180, 197, 207, .14), transparent 45%); filter: blur(28px); animation: mist-drift 29s ease-in-out infinite alternate; }
.seascape__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 82% 85%, rgba(223, 186, 121, .09), transparent 38%); animation: tide-glow 9s ease-in-out infinite alternate; }

/* Sparse, staggered CSS rain particles. */
.rain { position: absolute; inset: 0; overflow: hidden; opacity: .3; }
.rain i { position: absolute; top: -40px; left: var(--x); height: var(--length); width: 1px; background: linear-gradient(transparent, rgba(192, 213, 230, .78)); animation: rain-fall var(--speed) var(--delay) linear infinite; }
.rain i:nth-child(3n) { opacity: .45; }
.rain i:nth-child(4n) { width: 1.4px; }

.site-shell { width: min(100% - 112px, 1504px); margin-inline: auto; min-height: 100svh; display: flex; flex-direction: column; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .09em; font-size: 1.35rem; font-weight: 760; white-space: nowrap; }
.brand__icon { width: 38px; height: 38px; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brand__light { font-weight: 350; }
.brand__dot { color: var(--gold); }
.header-note { font-size: .75rem; letter-spacing: .16em; color: #c0c8ce; }

.main-content { display: flex; flex: 1; align-items: center; padding: clamp(64px, 10vh, 130px) 0 clamp(100px, 18vh, 220px); }
.welcome { width: min(100%, 720px); }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 27px; font-size: .75rem; letter-spacing: .21em; font-weight: 500; color: var(--gold-light); animation: rise-in 1.1s both; }
.eyebrow > span { display: block; flex: 0 0 30px; height: 1px; background: var(--gold); }
h1 { margin: 0; font: normal clamp(3.3rem, 5.7vw, 5.7rem)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.052em; text-wrap: balance; animation: rise-in 1.2s .12s both; }
h1 em { display: inline-block; padding: .02em .06em .12em 0; font-weight: normal; letter-spacing: -.053em; color: var(--gold-light); background: linear-gradient(115deg, #e2bd7e 10%, #f8e5bf 42%, #d6ad6b 60%, #f0d09a 85%); background-size: 230% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gold-drift 18s ease-in-out infinite alternate; }
.intro { margin: 24px 0 0; max-width: 470px; font-size: 1.08rem; line-height: 1.75; font-weight: 350; color: #c7ced3; animation: rise-in 1.3s .25s both; }

.site-footer { min-height: 88px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 24px; border-top: 1px solid var(--line); padding: 25px 0; }
.site-footer p { margin: 0; }
.footer-origin { display: flex; gap: 11px; align-items: center; color: #bcc5cb; font-size: .75rem; letter-spacing: .12em; line-height: 1.7; }
.footer-line { height: 1px; width: 20px; background: var(--gold); flex: 0 0 auto; }
.footer-motto { font: italic 1rem/1.5 Georgia, "Times New Roman", serif; color: var(--gold-light); }
.footer-motto span { color: #bdc3c6; }
.footer-domain { color: #b9c1c7; font-size: .8125rem; }

@keyframes water-swell {
  0% { transform: translate3d(-2px, 1px, 0) scale(1.006, 1.015); }
  50% { transform: translate3d(2px, -2px, 0) scale(1.012, 1.025); }
  100% { transform: translate3d(-1px, 3px, 0) scale(1.006, 1.01); }
}
@keyframes water-shimmer { from { transform: translate3d(-1%, 0, 0) scaleX(1.04); opacity: .1; } to { transform: translate3d(1%, 9px, 0) scaleX(.99); opacity: .34; } }
@keyframes clouds-drift { from { transform: translate3d(-13%, 2%, 0) scale(1.04); } to { transform: translate3d(13%, -3%, 0) scale(1.08); } }
@keyframes lighthouse-turn { from { transform: rotate(-7deg) rotateY(0deg); } to { transform: rotate(-7deg) rotateY(360deg); } }
@keyframes lighthouse-beam-strength { 0%, 100% { opacity: .9; } 25% { opacity: .2; } 50% { opacity: .66; } 75% { opacity: 1; } }
@keyframes lighthouse-lamp { 0%, 62%, 88%, 100% { opacity: .75; transform: scale(1); } 75% { opacity: 1; transform: scale(1.5); } }
@keyframes lighthouse-front-glow { 0%, 60%, 90%, 100% { opacity: .3; transform: scale(.85); } 75% { opacity: .88; transform: scale(1.35); } }
@keyframes lighthouse-front-flare { 0%, 65%, 86%, 100% { opacity: 0; transform: scaleX(.6); } 75% { opacity: .9; transform: scaleX(1.2); } }
@keyframes lightning-one { 0%, 20%, 22%, 100% { opacity: 0; } 20.6% { opacity: .55; } 21.1% { opacity: .16; } }
@keyframes lightning-two { 0%, 60%, 61.5%, 100% { opacity: 0; } 60.4% { opacity: .42; } 60.9% { opacity: .1; } }
@keyframes sky-flash { 0%, 20%, 22%, 100% { opacity: 0; } 20.6% { opacity: .095; } 21.1% { opacity: .02; } }
@keyframes rain-fall { from { transform: translate3d(45px, -30px, 0) rotate(12deg); } to { transform: translate3d(-110px, calc(100vh + 90px), 0) rotate(12deg); } }
@keyframes mist-drift { from { transform: translate3d(-3%, 1%, 0); opacity: .25; } to { transform: translate3d(5%, -2%, 0); opacity: .55; } }
@keyframes tide-glow { from { opacity: .25; } to { opacity: .9; } }
@keyframes gold-drift { from { background-position: 0% center; } to { background-position: 100% center; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 15px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@media (min-width: 1700px) { .welcome { margin-left: 1%; } }
@media (max-width: 1100px) {
  .site-shell { width: calc(100% - 72px); }
  .seascape__shade { background: linear-gradient(90deg, rgba(3, 13, 22, .68) 5%, rgba(3, 13, 22, .35) 52%, rgba(3, 13, 22, .1)), linear-gradient(0deg, rgba(3, 13, 22, .8), transparent 30%); }
  h1 { font-size: clamp(3.3rem, 6.4vw, 5rem); }
  .header-note { letter-spacing: .1em; }
  .footer-origin { letter-spacing: .07em; }
}
@media (max-width: 760px) {
  .site-shell { width: calc(100% - 40px); }
  .site-header { min-height: 88px; }
  .brand { font-size: 1.13rem; gap: 9px; }
  .brand__icon { width: 33px; height: 33px; }
  .header-note { display: none; }
  .main-content { align-items: flex-start; padding: 100px 0 150px; }
  .welcome { width: 100%; }
  .eyebrow { letter-spacing: .12em; gap: 10px; margin-bottom: 23px; }
  .eyebrow > span { flex-basis: 22px; }
  h1 { font-size: clamp(2.75rem, 7.6vw, 4.7rem); letter-spacing: -.055em; }
  .intro { margin-top: 22px; max-width: 380px; font-size: 1rem; }
  .seascape__shade { background: linear-gradient(180deg, rgba(3, 13, 22, .4), rgba(3, 13, 22, .52) 40%, rgba(3, 13, 22, .15) 75%, rgba(3, 13, 22, .7)), linear-gradient(90deg, rgba(3, 13, 22, .26), transparent); }
  .site-footer { padding: 22px 0; min-height: 110px; gap: 14px; }
  .footer-origin { flex-basis: 100%; }
  .footer-motto { font-size: .95rem; }
  .lightning--one { left: 79%; }
  .lightning--two { left: 54%; }
  .rain { opacity: .2; }
  .rain i:nth-child(2n) { display: none; }
  .clouds { filter: blur(8px); }
  .clouds--distant { opacity: .8; }
  .clouds--near { opacity: .76; }
  .lighthouse-light { --beam-length: 740px; --beam-height: 190px; }
  .lighthouse-light__halo { left: -70px; top: -70px; width: 140px; height: 140px; }
}
@media (max-width: 480px) {
  .main-content { padding-top: clamp(70px, 13vh, 120px); }
  h1 { font-size: clamp(2.4rem, 9.6vw, 3.5rem); }
  .eyebrow { letter-spacing: .07em; }
  .desktop-break { display: none; }
  .footer-origin { letter-spacing: .04em; }
  .footer-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .rain, .lightning, .sky-flash { display: none; }
  .water, .water-light { display: none; }
  .lighthouse-light__sweep { transform: rotate(-7deg); }
  .lighthouse-light__beam { opacity: .55; }
  .lighthouse-light__flare { display: none; }
}