/* ═══════════════════════════════════════════════════════════════
   PREMA v3 · GRUNDLAGEN
   Farbwelt und Schrift bleiben die der App. Alles andere ist neu.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --cream:      #EDE8DC;
  --cream-2:    #E6E0D4;
  --paper:      #F5F1EA;
  --deep:       #14251D;   /* tiefer als in der App: der Raum braucht Schwärze */
  --forest:     #223C30;
  --green:      #2C4A3A;
  --green-mid:  #4E7A68;
  --green-lite: #7AA898;
  --pale:       #C0D8D0;
  --accent:     #E2EDEA;

  --ink:        #1C1E19;
  --ink-2:      #6B7060;
  --on:         #E2EDEA;
  --on-2:       rgba(226,237,234,.62);
  --on-3:       rgba(226,237,234,.34);

  --tan:  #C8B48E;  --gold: #B8A870;  --peach: #C8A880;
  --rose: #C8A098;  --sage: #A8B890;  --star:  #B8882E;

  --line:      rgba(226,237,234,.16);
  --line-lite: #DDD8CE;

  --serif: 'Fraunces','Iowan Old Style',Georgia,serif;
  --sans:  'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gut: clamp(18px,4vw,60px);
  --r:   16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --pull: 0;   /* Scrollrichtung, von flight.js gesetzt */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100%; background:var(--deep) }

body{
  font-family:var(--sans);
  color:var(--on);
  background:var(--deep);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Der Dunst liegt ganz hinten und bewegt sich nie mit */
.atmos{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; display:block;
}
/* Eine zweite, ruhige Abdunklung an den Rändern — sie hält den Blick
   in der Mitte, wo die Fahrt stattfindet. */
.vig{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 46%, transparent 46%, rgba(6,14,10,.42) 100%),
    linear-gradient(to bottom, rgba(6,14,10,.34) 0%, transparent 18%, transparent 80%, rgba(6,14,10,.44) 100%);
}

/* ── Schrift ────────────────────────────────────────────────── */
.giant{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem,7.4vw,7rem);
  line-height:.92; letter-spacing:-.04em;
}
.giant--mid{ font-size:clamp(2.2rem,5.8vw,5.4rem) }
.giant--end{ font-size:clamp(2.2rem,6vw,5.6rem) }
.giant .ln{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.16em }
.giant b{ display:inline-block; font-weight:600; will-change:transform }
.it{ font-style:italic; font-weight:500; color:var(--pale) }

.big{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem,4.2vw,3.6rem);
  line-height:1.02; letter-spacing:-.03em;
}
.big b{ font-weight:500 }

.kick{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pale);
}
.kick i{
  width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;
  animation:blip 2.6s ease-in-out infinite;
}
.kick--sm{ font-size:.64rem }
@keyframes blip{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(2); opacity:.3 } }

.sub{
  font-size:clamp(.95rem,1.25vw,1.14rem);
  line-height:1.6; font-weight:300; color:var(--on-2);
  max-width:52ch;
}

/* ── Knopf ──────────────────────────────────────────────────── */
.cta{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.92em 1.7em;
  font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:-.01em;
  color:var(--deep); background:var(--pale);
  border:0; border-radius:var(--r-pill); cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .3s ease, box-shadow .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.cta span{ position:relative; z-index:2 }
/* Die Füllung kommt als Kreis aus der Zeigerposition */
.cta::after{
  content:''; position:absolute; z-index:1;
  left:var(--cx,50%); top:var(--cy,50%);
  width:240%; aspect-ratio:1; border-radius:50%;
  background:var(--on);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.cta:hover::after{ transform:translate(-50%,-50%) scale(1) }
.cta:hover{ box-shadow:0 14px 34px -14px rgba(0,0,0,.7) }
.cta:active{ transform:scale(.98) }
.cta--go{ padding:1.05em 2em; font-size:.96rem }

.linky{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:.85rem; color:var(--pale); position:relative;
}
.linky::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.linky:hover::after{ transform:scaleX(0) }

/* ── Kopfzeile ──────────────────────────────────────────────── */
.top{
  position:fixed; z-index:60; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2vw,24px) var(--gut);
  color:var(--on);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.top--gone{ opacity:0; transform:translateY(-120%); pointer-events:none }
.top__brand{ display:inline-flex; align-items:center; gap:9px; color:inherit; text-decoration:none }
.top__mark{ width:24px; height:24px; transition:transform .9s cubic-bezier(.16,1,.3,1) }
.top__brand:hover .top__mark{ transform:rotate(120deg) }
.top__brand span{ font-family:var(--serif); font-weight:600; font-size:1.24rem; letter-spacing:-.5px }
.top__right{ display:flex; align-items:center; gap:clamp(12px,2vw,24px) }
.top__where{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-3);
  transition:opacity .3s;
}

/* ── Tiefenanzeige ──────────────────────────────────────────── */
.depth{
  position:fixed; z-index:60; right:calc(var(--gut) * .5); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none;
}
.depth__line{ position:relative; width:1px; height:26vh; background:var(--line) }
.depth__line i{
  position:absolute; top:0; left:-1px; width:3px; border-radius:2px;
  height:var(--p,0%); background:var(--pale);
}
.depth__num{
  font-size:.6rem; letter-spacing:.14em; color:var(--on-3);
  font-variant-numeric:tabular-nums;
}

/* ── Türöffnung ─────────────────────────────────────────────── */
.gate{
  position:fixed; inset:0; z-index:200;
  background:var(--deep);
  display:grid; place-items:center;
  transition:opacity .9s ease, visibility .9s;
}
.gate--open{ opacity:0; visibility:hidden }
.gate__mid{ width:min(300px,72vw); text-align:center; color:var(--pale) }
.gate__mark{ width:56px; height:56px; margin:0 auto 26px; display:block; fill:none; stroke:currentColor; stroke-width:1.4 }
.gp{ stroke-dasharray:96; stroke-dashoffset:96; animation:trace 1.2s cubic-bezier(.65,0,.35,1) forwards }
.gp:nth-child(2){ animation-delay:.12s }
.gp:nth-child(3){ animation-delay:.24s }
@keyframes trace{ to{ stroke-dashoffset:0 } }
.gate__bar{ height:1px; background:rgba(192,216,208,.2); overflow:hidden }
.gate__bar i{ display:block; height:100%; width:0%; background:var(--pale) }
.gate__txt{
  margin-top:12px; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-3); font-variant-numeric:tabular-nums;
}

/* ── Fuß ────────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:40;
  background:#0D1A14; color:var(--on-2);
  padding:clamp(40px,6vw,80px) var(--gut) clamp(22px,3vw,34px);
}
.foot__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.foot__mark{ width:40px; height:40px; color:var(--green-mid) }
.foot__nav{ display:flex; gap:20px; flex-wrap:wrap; font-size:.8rem }
.foot__nav a{ color:inherit; text-decoration:none; transition:color .3s }
.foot__nav a:hover{ color:var(--on) }
.foot__disc{ font-size:.7rem; line-height:1.6; color:rgba(226,237,234,.34); max-width:78ch; padding-top:16px }

@media (max-width: 620px){
  .depth{ display:none }
  .top__where{ display:none }
}

/* ═══════════════════════════════════════════════════════════════
   DER SOG
   Ein Lichtpunkt wird nach unten in die Tiefe gezogen, drei Ringe
   laufen ihm nach und verlaufen sich. Es ist dieselbe Bewegung,
   die gleich mit der ganzen Seite passiert — deshalb erklärt der
   Hinweis nicht nur, dass man scrollen soll, sondern schon, was
   dann geschieht.
   ═══════════════════════════════════════════════════════════════ */
.cue{
  position:fixed; z-index:55;
  left:50%; bottom:clamp(20px,4vh,44px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:0; padding:8px 18px; cursor:pointer;
  color:var(--pale);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.cue--gone{ opacity:0; transform:translateX(-50%) translateY(18px); pointer-events:none }

.cue__word{
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--on-3);
  transition:color .4s ease;
  padding-left:.34em;   /* die Sperrung schiebt optisch nach links */
}
.cue:hover .cue__word{ color:var(--pale) }

/* Die Bühne für Punkt und Ringe */
.cue__stage{
  position:relative; display:block;
  width:44px; height:44px;
}
.cue__ring{
  position:absolute; inset:0; margin:auto;
  width:12px; height:12px; border-radius:50%;
  border:1px solid currentColor;
  opacity:0;
  animation:cueRing 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.cue__ring:nth-child(2){ animation-delay:.55s }
.cue__ring:nth-child(3){ animation-delay:1.1s }
/* Ringe wachsen nach außen und verlaufen — wie etwas, das auf einen
   zukommt und einen streift. */
@keyframes cueRing{
  0%   { transform:scale(.4);  opacity:0 }
  22%  { opacity:.55 }
  100% { transform:scale(3.4); opacity:0 }
}

.cue__spark{
  position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:var(--pale);
  box-shadow:0 0 12px 2px rgba(192,216,208,.7);
  animation:cueSpark 2.6s cubic-bezier(.5,0,.6,1) infinite;
}
/* Der Punkt wird angesaugt: erst zögert er, dann fällt er weg und
   wird dabei zu einem Strich in die Länge gezogen. */
@keyframes cueSpark{
  0%   { transform:translateY(-11px) scaleY(1);   opacity:0 }
  18%  { transform:translateY(-6px)  scaleY(1);   opacity:1 }
  62%  { transform:translateY(9px)   scaleY(2.6); opacity:1 }
  100% { transform:translateY(19px)  scaleY(4.6); opacity:0 }
}

.cue__v{
  width:15px; height:20px; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.cue__v path{ opacity:0; animation:cueV 2.6s ease-in-out infinite }
.cue__v path:nth-child(2){ animation-delay:.2s }
@keyframes cueV{
  0%,58%  { opacity:0; transform:translateY(-3px) }
  74%     { opacity:.75; transform:none }
  100%    { opacity:0; transform:translateY(4px) }
}

.cue:hover .cue__ring{ animation-duration:1.5s }
.cue:hover .cue__spark{ animation-duration:1.5s }
.cue:hover .cue__v path{ animation-duration:1.5s }

@media (prefers-reduced-motion: reduce){
  .cue__ring, .cue__spark, .cue__v path{ animation:none; opacity:.6 }
  .cue__spark{ transform:none }
}
@media (max-width: 620px){
  .cue{ bottom:14px }
}