:root{
  --ground:#06181f;      
  --shadow:#0d2a33;      
  --petrol:#12454f;      
  --bone:#e9e3d5;        
  --bone-dim:#aab8bb;    
  --gold:#c99a3f;        
  --gold-glow:#eccd82;   
  --surf:#6fa8ab;        
  --haze:#9dbfc6;        

  
  --ground-rgb:6 24 31;
  --surf-rgb:111 168 171;
  --gold-rgb:201 154 63;
  --haze-rgb:157 191 198;

  --serif:"EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --display:"Fraunces", "Hoefler Text", Georgia, serif;

  --measure:34rem;       
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);
  color:var(--bone);
  font-family:var(--serif);
  font-size:clamp(1.05rem,0.6rem + 0.9vw,1.3rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

#gischt{position:fixed;inset:0;z-index:4;pointer-events:none}

.course{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(58vw,780px);height:100%;
  z-index:1;pointer-events:none;overflow:visible;
}
.course path{fill:none;stroke-linecap:round}
.course .planned{
  stroke:var(--haze);stroke-width:1.6;
  stroke-dasharray:2 15;opacity:.14;
}
.course .sailed{
  stroke:var(--surf);stroke-width:2.4;opacity:.55;
  filter:drop-shadow(0 0 6px rgb(var(--surf-rgb)/.35));
}

.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8vh 6vw;z-index:3;
  background:
    
    linear-gradient(rgb(var(--ground-rgb)/0) 80%, var(--ground) 100%),
    radial-gradient(120% 90% at 50% 8%, rgb(var(--gold-rgb)/.10), rgb(var(--gold-rgb)/0) 60%),
    radial-gradient(110% 70% at 50% 82%, rgb(var(--surf-rgb)/.09), rgb(var(--surf-rgb)/0) 62%),
    radial-gradient(140% 100% at 50% 120%, #04121a, rgb(var(--ground-rgb)/0) 55%),
    var(--ground);
}
.eyebrow{
  font-family:var(--serif);font-style:italic;
  color:var(--haze);letter-spacing:.06em;
  font-size:clamp(.95rem,.8rem + .3vw,1.15rem);
  opacity:0;transform:translateY(14px);
  animation:rise 1.4s .3s ease both;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;font-optical-sizing:auto;
  font-size:clamp(3.4rem,2rem + 8vw,9rem);
  line-height:.95;letter-spacing:-.01em;
  margin:.22em 0 .1em;
  color:var(--bone);
  text-shadow:0 0 40px rgba(0,0,0,.6);
  opacity:0;transform:translateY(26px);
  animation:rise 1.6s .55s cubic-bezier(.2,.7,.2,1) both;
}
.hero .epithet{
  display:block;font-size:.34em;font-style:italic;
  color:var(--gold);letter-spacing:.02em;margin-top:.5em;
  opacity:0;transform:translateY(20px);
  animation:rise 1.6s .8s ease both;
}
.hero .tagline{
  max-width:31rem;color:var(--bone-dim);
  font-size:clamp(1.05rem,.9rem + .4vw,1.35rem);
  margin-top:2.2rem;
  opacity:0;transform:translateY(20px);
  animation:rise 1.6s 1.05s ease both;
}
.scrollhint{
  position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--haze);font-style:italic;font-size:.9rem;letter-spacing:.05em;
  opacity:0;animation:rise 1.6s 1.5s ease both;
}
.scrollhint .stem{
  width:1px;height:46px;
  background:linear-gradient(var(--haze), rgb(var(--haze-rgb)/0));
  animation:breathe 2.6s ease-in-out infinite;
}

.scene{
  position:relative;height:100svh;min-height:440px;
  z-index:3;overflow:hidden;
  display:flex;align-items:flex-end;
}
.scene-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.12);opacity:0;
  transition:transform 2.6s ease, opacity 1.4s ease;
}
.scene.in .scene-img{transform:scale(1);opacity:1}

.scene.armed .scene-img{will-change:transform,opacity}

.scene::before,.scene::after{content:"";position:absolute;z-index:2;pointer-events:none}
.scene::before{
  inset:0;
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/1)     0%,
      rgb(var(--ground-rgb)/.96)  12%,
      rgb(var(--ground-rgb)/.84)  24%,
      rgb(var(--ground-rgb)/.68)  38%,
      rgb(var(--ground-rgb)/.5)   50%,
      rgb(var(--ground-rgb)/.32)  62%,
      rgb(var(--ground-rgb)/.16)  76%,
      rgb(var(--ground-rgb)/.04)  89%,
      rgb(var(--ground-rgb)/0)   100%),
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/.30)   0%,
      rgb(var(--ground-rgb)/.22)  35%,
      rgb(var(--ground-rgb)/.10)  65%,
      rgb(var(--ground-rgb)/.03)  85%,
      rgb(var(--ground-rgb)/0)   100%),
    radial-gradient(130% 100% at 50% 42%,
      rgb(var(--ground-rgb)/0)   52%,
      rgb(var(--ground-rgb)/.42) 100%);
  background-size:
    100% clamp(120px,42svh,400px),
    100% clamp(240px,72svh,720px),
    100% 100%;
  background-position:top, top, center;
  background-repeat:no-repeat;
}
.scene::after{
  left:0;right:0;bottom:0;height:clamp(150px,50svh,480px);
  background:linear-gradient(to top,
    rgb(var(--ground-rgb)/1)     0%,
    rgb(var(--ground-rgb)/1)     8%,
    rgb(var(--ground-rgb)/.96)  18%,
    rgb(var(--ground-rgb)/.84)  30%,
    rgb(var(--ground-rgb)/.66)  43%,
    rgb(var(--ground-rgb)/.48)  55%,
    rgb(var(--ground-rgb)/.3)   68%,
    rgb(var(--ground-rgb)/.14)  80%,
    rgb(var(--ground-rgb)/.04)  91%,
    rgb(var(--ground-rgb)/0)   100%);
}

.haze{
  position:absolute;inset:-15% -25%;z-index:2;pointer-events:none;
  opacity:var(--fog,.4);
  
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%, transparent 14%, rgba(0,0,0,.45) 22%, #000 30%,
    #000 70%, rgba(0,0,0,.45) 78%, transparent 86%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%, transparent 14%, rgba(0,0,0,.45) 22%, #000 30%,
    #000 70%, rgba(0,0,0,.45) 78%, transparent 86%, transparent 100%);
}
.haze::before,.haze::after{
  content:"";position:absolute;inset:0;
  background-repeat:no-repeat;background-size:100% 100%;
  animation:hazedrift 44s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.haze::before{
  background-image:
    radial-gradient(55% 40% at 18% 28%, rgb(var(--haze-rgb)/.17), rgb(var(--haze-rgb)/0) 70%),
    radial-gradient(65% 45% at 78% 60%, rgb(var(--haze-rgb)/.12), rgb(var(--haze-rgb)/0) 70%),
    radial-gradient(80% 60% at 45% 85%, rgb(var(--ground-rgb)/.55), rgb(var(--ground-rgb)/0) 72%),
    radial-gradient(70% 55% at 60% 10%, rgb(var(--ground-rgb)/.48), rgb(var(--ground-rgb)/0) 70%);
}
.haze::after{
  background-image:
    radial-gradient(60% 45% at 70% 25%, rgb(var(--haze-rgb)/.11), rgb(var(--haze-rgb)/0) 68%),
    radial-gradient(75% 55% at 25% 70%, rgb(var(--ground-rgb)/.6), rgb(var(--ground-rgb)/0) 74%),
    radial-gradient(50% 40% at 88% 80%, rgb(var(--haze-rgb)/.1), rgb(var(--haze-rgb)/0) 70%);
  animation-duration:67s;
  animation-direction:alternate-reverse;
}
.scene.near .haze::before,
.scene.near .haze::after{animation-play-state:running}

.scene.band{
  height:68svh;min-height:400px;
  max-width:min(1300px,92vw);margin-inline:auto;
}
.scene.band::before{
  background-size:
    100% clamp(90px,29svh,260px),
    100% clamp(170px,49svh,450px),
    100% 100%;
}
.scene.band::after{height:clamp(110px,34svh,300px)}

.scene.band::before{
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/1)     0%,
      rgb(var(--ground-rgb)/.96)  12%,
      rgb(var(--ground-rgb)/.84)  24%,
      rgb(var(--ground-rgb)/.68)  38%,
      rgb(var(--ground-rgb)/.5)   50%,
      rgb(var(--ground-rgb)/.32)  62%,
      rgb(var(--ground-rgb)/.16)  76%,
      rgb(var(--ground-rgb)/.04)  89%,
      rgb(var(--ground-rgb)/0)   100%),
    linear-gradient(to bottom,
      rgb(var(--ground-rgb)/.30)   0%,
      rgb(var(--ground-rgb)/.22)  35%,
      rgb(var(--ground-rgb)/.10)  65%,
      rgb(var(--ground-rgb)/.03)  85%,
      rgb(var(--ground-rgb)/0)   100%),
    radial-gradient(115% 100% at 50% 45%,
      rgb(var(--ground-rgb)/0)   38%,
      rgb(var(--ground-rgb)/.62) 100%);
}

.scene.band .haze{opacity:calc(var(--fog,.4) * .8 + .12)}

.ph1{background-image:
  radial-gradient(80% 55% at 28% 40%, #7a5a2a, transparent 60%),
  radial-gradient(85% 60% at 72% 18%, #235360, transparent 62%),
  linear-gradient(165deg,#123642,#050f14)}
.ph2{background-image:
  radial-gradient(70% 50% at 62% 24%, #2d5f6b, transparent 62%),
  radial-gradient(55% 45% at 24% 46%, #6a4f26, transparent 60%),
  linear-gradient(200deg,#0e2a38,#04101a)}
.ph3{background-image:
  radial-gradient(95% 60% at 50% 26%, #2f7681, transparent 62%),
  radial-gradient(70% 55% at 14% 48%, #17505c, transparent 60%),
  linear-gradient(150deg,#154853,#061319)}
.ph4{background-image:
  radial-gradient(85% 60% at 32% 22%, #43565e, transparent 60%),
  radial-gradient(75% 55% at 78% 46%, #1b3b45, transparent 60%),
  linear-gradient(215deg,#22383f,#060d11)}
.ph5{background-image:
  radial-gradient(80% 55% at 60% 42%, #8a6a30, transparent 60%),
  radial-gradient(85% 60% at 28% 20%, #2a6572, transparent 62%),
  linear-gradient(175deg,#154350,#06151b)}

.scene .plate{
  position:relative;z-index:3;width:100%;
  padding:0 6vw clamp(3rem,12vh,9rem);color:var(--bone);
  text-align:center;
}
.scene .plate .no{
  font-family:var(--display);font-style:italic;
  color:var(--gold);font-size:1.1rem;letter-spacing:.08em;
  opacity:.9;
}
.scene .plate .cap{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,1rem + 3vw,3.4rem);line-height:1.05;
  
  max-width:20ch;margin:.2em auto 0;
  text-shadow:0 2px 30px rgba(0,0,0,.7);
}

.driftmarks{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.driftmark{
  position:absolute;
  width:var(--w);height:auto;   
  color:var(--haze);
  opacity:0;
  
  filter:drop-shadow(0 0 9px rgb(var(--ground-rgb)/.85));
  animation:drift var(--dur,16s) cubic-bezier(.33,0,.5,1) both;
}

.driftmark.note-viertel     {--w:clamp(17px,1.7vw,26px); color:var(--gold-glow)}
.driftmark.note-achtel      {--w:clamp(20px,2.1vw,32px); color:var(--gold-glow)}
.driftmark.note-zwei        {--w:clamp(28px,2.9vw,44px); color:var(--gold-glow)}
.driftmark.note-sechzehntel {--w:clamp(28px,2.9vw,44px); color:var(--gold-glow)}
.driftmark.note-drei        {--w:clamp(38px,3.9vw,58px); color:var(--gold-glow)}
.driftmark.schluessel       {--w:clamp(24px,2.5vw,38px); color:var(--gold-glow)}
.driftmark.kompass          {--w:clamp(38px,4.4vw,66px); color:var(--gold)}

.seamarks{
  position:fixed;z-index:50;
  right:clamp(.6rem,1.6vw,1.9rem);
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.4vh,1rem);
  padding:.9rem .3rem;
  
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.2s ease, visibility 1.2s;
}

.seamarks.awake{opacity:1;visibility:visible;pointer-events:auto}

.seamarks::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    rgb(var(--haze-rgb)/0),
    rgb(var(--haze-rgb)/.35) 18%,
    rgb(var(--haze-rgb)/.35) 82%,
    rgb(var(--haze-rgb)/0));
}
.buoy{
  position:relative;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}

.buoy::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgb(var(--haze-rgb)/.55);
  box-shadow:0 0 6px rgb(var(--haze-rgb)/.3);
  transition:width .5s ease,height .5s ease,background .5s ease,box-shadow .5s ease;
}
.buoy:hover::after,.buoy:focus-visible::after{background:var(--haze)}
.buoy[aria-current]::after{
  width:8px;height:8px;
  background:var(--gold-glow);
  box-shadow:0 0 12px rgb(var(--gold-rgb)/.6);
}
.buoy:focus-visible{outline:1px solid rgb(var(--gold-rgb)/.6);outline-offset:3px}

.buoy .label{
  position:absolute;right:calc(100% + .5rem);top:50%;
  transform:translateY(-50%) translateX(5px);
  white-space:nowrap;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.84rem;line-height:1;letter-spacing:.02em;
  color:var(--haze);
  text-shadow:0 0 10px var(--ground),0 0 22px var(--ground);
  opacity:0;pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.buoy:hover .label,.buoy:focus-visible .label{opacity:.95;transform:translateY(-50%)}
.buoy[aria-current] .label{color:var(--gold-glow)}

.chapter{
  position:relative;z-index:3;
  padding:clamp(4.5rem,16vh,12rem) 6vw;
  
  background:
    linear-gradient(var(--ground), rgb(var(--ground-rgb)/0) 16%),
    radial-gradient(120% 60% at 50% 0%, var(--shadow), var(--ground) 70%);
}
.chapter .inner{max-width:var(--measure);margin:0 auto}
.chapter .ch-eyebrow{
  font-family:var(--display);font-style:italic;color:var(--haze);
  letter-spacing:.05em;font-size:1.05rem;margin-bottom:.6rem;
  display:flex;align-items:center;gap:.9rem;
}
.chapter .ch-eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--surf);opacity:.7}
.chapter h2{
  font-family:var(--display);font-weight:300;font-optical-sizing:auto;
  font-size:clamp(2.1rem,1.4rem + 3.5vw,4rem);line-height:1.02;
  letter-spacing:-.01em;color:var(--bone);margin-bottom:1.4rem;
}
.chapter h2 em{font-style:italic;color:var(--gold-glow)}
.chapter p{margin-bottom:1.2rem;color:#dcd7c8}
.chapter p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:4.2rem;line-height:.8;
  padding:.05em .12em 0 0;color:var(--gold);font-weight:400;
}

.chapter p.traum{font-style:italic;color:var(--bone-dim)}

.chapter.weiter p:first-of-type::first-letter{
  font-family:inherit;float:none;font-size:inherit;line-height:inherit;
  padding:0;color:inherit;font-weight:inherit;
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

.lied{
  position:relative;z-index:3;text-align:center;
  padding:clamp(1rem,4vh,3rem) 6vw clamp(4rem,14vh,9rem);
  background:var(--ground);
}
.lied .inner{max-width:31rem;margin:0 auto}
.lied .liedmark{
  display:block;width:clamp(26px,2.6vw,38px);height:auto;
  margin:0 auto clamp(1.6rem,4vh,2.6rem);
  color:var(--gold);opacity:.75;
}
.lied p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(.98rem,.86rem + .28vw,1.14rem);
  line-height:1.85;
  color:var(--bone-dim);
  margin-bottom:clamp(1.2rem,3vh,1.9rem);
  text-wrap:balance;

  
  --glanz:1;
  opacity:calc(.55 + var(--glanz) * .45);
  text-shadow:0 0 calc(var(--glanz) * 14px) rgb(var(--gold-rgb) / calc(var(--glanz) * .28));
}
.lied p:last-child{margin-bottom:0}
.lied p.kehrreim{color:rgba(170,184,187,.6)}

.transition{position:relative;z-index:3;height:clamp(140px,32vh,300px)}

.epilogue{position:relative;z-index:3;text-align:center;
  padding:clamp(6rem,22vh,16rem) 6vw 6vh;
  
  background:
    linear-gradient(var(--ground), rgb(var(--ground-rgb)/0) 20%),
    radial-gradient(100% 80% at 50% 40%, #05141b, var(--ground))}

.epilogue-portrait{
  width:clamp(160px,20vw,230px);height:clamp(160px,20vw,230px);
  border-radius:50%;object-fit:cover;object-position:50% 20%;
  border:1px solid rgb(var(--gold-rgb)/.4);
  box-shadow:0 0 0 6px rgb(var(--ground-rgb)/.6), 0 8px 30px rgb(var(--ground-rgb)/.7);
  margin:0 auto 1.4rem;
}
.epilogue .mark{font-family:var(--display);color:var(--gold);font-size:2rem;font-style:italic;opacity:.85}
.epilogue .seal{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.6rem,1rem + 3vw,3rem);color:var(--bone);
  margin:1.2rem 0 .4rem;
}
.epilogue .whisper{color:var(--bone-dim);font-style:italic;max-width:26rem;margin:0 auto}
footer{position:relative;z-index:3;text-align:center;padding:4vh 6vw 8vh;
  color:rgba(170,184,187,.5);font-size:.9rem;font-style:italic;letter-spacing:.03em}

.playlist-btn{
  position:fixed;left:clamp(1.2rem,3vw,2rem);
  bottom:calc(clamp(1.2rem,3vw,2rem) + env(safe-area-inset-bottom) + 3rem);
  z-index:50;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--petrol);
  box-shadow:0 0 0 1px rgb(var(--gold-rgb)/.25), 0 4px 14px rgb(var(--ground-rgb)/.55);
  transition:box-shadow .3s ease, transform .3s ease;
}
.playlist-btn:hover,.playlist-btn:focus-visible{
  box-shadow:0 0 0 1px rgb(var(--gold-rgb)/.55), 0 0 18px rgb(var(--gold-rgb)/.35), 0 4px 14px rgb(var(--ground-rgb)/.55);
  transform:scale(1.06);
}
.playlist-btn svg{display:block;width:18px;height:18px}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.35;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1)}}
@keyframes hazedrift{
  from{transform:translate3d(-3.5%,-1.5%,0)}
  to{transform:translate3d(3.5%,1.5%,0)}
}

@keyframes drift{
  0%  {opacity:0;
       transform:translate3d(0,0,0) rotate(var(--rot0,0deg)) scale(.94)}
  22% {opacity:var(--peak,.16)}
  74% {opacity:var(--peak,.16)}
  100%{opacity:0;
       transform:translate3d(var(--dx,70px),var(--dy,-90px),0) rotate(var(--rot1,0deg)) scale(1.06)}
}

@media(max-width:640px){
  .course{width:84vw}
  .scene .plate{padding-bottom:clamp(4rem,16vh,10rem)}
  .chapter{padding:clamp(3.5rem,12vh,8rem) 7vw}
  
  .buoy .label{display:none}
  .seamarks{gap:.55rem;padding:.7rem .2rem}
  .buoy{width:18px;height:18px}
}

@media(max-height:520px){
  .seamarks{gap:.4rem}
  .buoy{width:16px;height:16px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .hero .eyebrow,.hero h1,.hero .epithet,.hero .tagline,.scrollhint{opacity:1;transform:none}
  .scene-img{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  
  .haze{opacity:.3}
  
  .lied p{--glanz:1;text-shadow:none}
  
}