/* ═══════════════════════════════════════════════════════════
   Das linke Ufer — Landingpage
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:        #060b11;
  --bg:         #0a1119;
  --bg-2:       #0d1721;
  --surface:    #111d29;
  --surface-2:  #16242f;
  --line:       rgba(255,255,255,.085);
  --line-2:     rgba(255,255,255,.16);
  --text:       #e9eff4;
  --muted:      #8ba0af;
  --muted-2:    #64798a;
  --accent:     #e0a15a;
  --accent-2:   #f0be86;
  --accent-dim: rgba(224,161,90,.13);
  --ok:         #6fc39a;
  --err:        #e88b7d;

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 68rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box }

/* Das hidden-Attribut muss stärker sein als jede display-Regel weiter
   unten — sonst bleiben ausgeblendete Bereiche sichtbar. */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }

a{ color:inherit }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--accent); color:var(--ink);
  padding:.7rem 1.1rem; font-weight:600; border-radius:0 0 8px 0;
}
.skip:focus{ left:0 }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ─── Atmosphäre: Wasser & Korn ──────────────────────────── */

.water{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #16293a 0%, transparent 60%),
    radial-gradient(90% 60% at 12% 8%,  rgba(224,161,90,.10) 0%, transparent 55%),
    radial-gradient(70% 55% at 88% 42%, rgba(58,120,140,.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%, var(--ink) 100%);
}

/* Lichtreflexe auf dem Wasser, unterer Bildrand */
.water::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46vh;
  background:repeating-linear-gradient(
    180deg,
    transparent 0 6px,
    rgba(224,161,90,.045) 6px 7px,
    transparent 7px 15px,
    rgba(120,180,200,.035) 15px 16px,
    transparent 16px 26px
  );
  filter:blur(1.2px);
  mask-image:linear-gradient(180deg, transparent, #000 55%, transparent);
  animation:drift 24s linear infinite;
}
@keyframes drift{
  from{ transform:translateY(0) }
  to  { transform:translateY(-26px) }
}

.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .water::after{ animation:none }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ─── Kopfzeile ──────────────────────────────────────────── */

.site-head{
  max-width:var(--wrap); margin-inline:auto;
  padding:1.6rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.wordmark{
  font-family:var(--serif);
  font-size:1rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

.head-cta{
  font-size:.85rem; font-weight:500; text-decoration:none;
  color:var(--muted); border:1px solid var(--line);
  padding:.5rem .95rem; border-radius:999px;
  transition:color .2s, border-color .2s, background .2s;
  white-space:nowrap;
}
.head-cta:hover{ color:var(--accent-2); border-color:var(--accent); background:var(--accent-dim) }

/* ─── Hero ───────────────────────────────────────────────── */

.hero{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(3rem,10vh,6.5rem) var(--pad) clamp(3.5rem,9vh,5.5rem);
  text-align:center;
}

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.775rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  padding:.42rem 1rem .42rem .8rem;
  margin:0 0 clamp(1.8rem,5vh,2.8rem);
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,161,90,.55);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(224,161,90,.5) }
  70% { box-shadow:0 0 0 9px rgba(224,161,90,0) }
  100%{ box-shadow:0 0 0 0 rgba(224,161,90,0) }
}

.hero h1{
  font-size:clamp(3.4rem, 15vw, 8.5rem);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:.92;
  margin:0 0 clamp(1.5rem,4vh,2.2rem);
  background:linear-gradient(175deg, #ffffff 8%, #cfe0ea 45%, #7f97a8 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lead{
  max-width:34rem; margin:0 auto clamp(2.5rem,6vh,3.5rem);
  font-size:clamp(1.06rem,1rem + .5vw,1.3rem);
  color:var(--muted); line-height:1.6;
}

/* Countdown */
.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.5rem,2vw,1.1rem);
  margin-bottom:.9rem;
}
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:3.4rem }
.cd-num{
  font-family:var(--serif); font-size:clamp(2rem,7vw,3.1rem);
  font-weight:400; line-height:1; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cd-lbl{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin-top:.55rem;
}
.cd-sep{
  font-family:var(--serif); font-size:clamp(1.5rem,5vw,2.4rem);
  color:var(--muted-2); line-height:1.15;
}
.cd-caption{
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin:0;
}

/* Steht kein Launch-Datum fest, tritt dies an die Stelle des Countdowns. */
.hero-note p{
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  color:var(--muted);
  line-height:1.55;
  margin:0 0 clamp(1.6rem,4vh,2.2rem);
}
.btn-hero{
  display:inline-block;
  text-decoration:none;
  padding:1rem 2.1rem;
  font-size:1.02rem;
  box-shadow:0 14px 40px -18px rgba(224,161,90,.85);
}

/* ─── Anmelde-Panel ──────────────────────────────────────── */

.panel{ padding:0 var(--pad) clamp(4rem,10vh,7rem) }

.panel-inner{
  max-width:52rem; margin-inline:auto;
  background:linear-gradient(180deg, rgba(22,36,47,.9), rgba(13,23,33,.9));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.75rem,5vw,3.25rem);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
}

.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 .9rem;
}

.panel-inner h2{
  font-size:clamp(1.65rem,1.2rem + 2.2vw,2.6rem);
  margin-bottom:1.1rem;
}

.panel-lead{
  color:var(--muted); max-width:40rem;
  margin-bottom:clamp(1.8rem,4vh,2.4rem);
}

/* Zähler */
.meter{ margin-bottom:1.6rem }
.meter-head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.5rem 1rem; margin-bottom:.6rem;
}
.meter-count{ font-size:.9rem; color:var(--muted) }
.meter-count strong{
  font-family:var(--serif); font-size:1.35rem; font-weight:500;
  color:var(--text); font-variant-numeric:tabular-nums; margin-right:.15rem;
}
.meter-left{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.meter-track{
  height:5px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.07);
}
.meter-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:999px;
  transition:width 1.1s cubic-bezier(.22,.8,.3,1);
}

.meter-stand{
  font-size:.75rem; color:var(--muted-2); margin:.55rem 0 0;
}

/* Formular */
.field-row{ display:flex; gap:.6rem; flex-wrap:wrap }

.signup input[type=email]{
  flex:1 1 15rem; min-width:0;
  background:rgba(0,0,0,.32);
  border:1px solid var(--line-2);
  border-radius:10px;
  color:var(--text);
  font:inherit;
  padding:.95rem 1.1rem;
  transition:border-color .2s, background .2s;
}
.signup input[type=email]::placeholder{ color:var(--muted-2) }
.signup input[type=email]:focus{
  outline:none; border-color:var(--accent);
  background:rgba(0,0,0,.45);
}
.signup input[type=email][aria-invalid="true"]{ border-color:var(--err) }

.btn-primary{
  position:relative;
  flex:0 0 auto;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#231404;
  border:0; border-radius:10px;
  font:inherit; font-weight:600;
  padding:.95rem 1.6rem;
  cursor:pointer;
  transition:filter .2s, transform .12s;
}
.btn-primary:hover{ filter:brightness(1.08) }
.btn-primary:active{ transform:translateY(1px) }
.btn-primary[disabled]{ cursor:default; filter:saturate(.5) brightness(.85) }

.btn-spinner{
  position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(35,20,4,.3); border-top-color:#231404;
  display:none;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.signup.is-busy .btn-label{ visibility:hidden }
.signup.is-busy .btn-spinner{ display:block }

.hp{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.form-note{
  font-size:.82rem; color:var(--muted-2);
  margin:.85rem 0 0;
}

.form-msg{
  margin:.85rem 0 0; font-size:.92rem; min-height:1.3em;
}
.form-msg.is-ok{ color:var(--ok) }
.form-msg.is-err{ color:var(--err) }

.signup.is-done .field-row,
.signup.is-done .form-note{ display:none }
.signup.is-done .form-msg{ font-size:1.05rem }

/* Vorteile */
.perks{
  list-style:none; margin:clamp(2rem,5vh,2.75rem) 0 0; padding:0;
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(13rem,1fr));
  border-top:1px solid var(--line); padding-top:clamp(1.75rem,4vh,2.25rem);
}
.perk-n{
  display:block;
  font-family:var(--serif); font-size:.8rem; letter-spacing:.1em;
  color:var(--accent); margin-bottom:.55rem;
}
.perks h3{ font-size:1.08rem; margin-bottom:.4rem; letter-spacing:-.005em }
.perks p{ font-size:.9rem; color:var(--muted); line-height:1.55 }

/* ─── Was dich erwartet ──────────────────────────────────── */

.about{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,10vh,7rem);
}
.about-grid{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit, minmax(16rem,1fr));
}
.about-grid h3{ font-size:1.3rem; margin-bottom:.7rem }
.about-grid p{ color:var(--muted); font-size:.96rem }

/* ─── Hosts ──────────────────────────────────────────────── */

.hosts{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,10vh,7rem);
}
.host-grid{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit, minmax(17rem,1fr));
}
.host{
  background:rgba(17,29,41,.55);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);
}
.host-portrait{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--surface-2), var(--bg));
  border:1px solid var(--line-2);
  margin-bottom:1.1rem;
}
.host-portrait span{
  font-family:var(--serif); font-size:1.15rem; color:var(--accent);
  letter-spacing:.04em;
}
.host h3{ font-size:1.25rem; margin-bottom:.2rem }
.host-role{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:.9rem;
}
.host p:last-child{ color:var(--muted); font-size:.93rem }

/* ─── Plattformen ────────────────────────────────────────── */

.platforms{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(4rem,10vh,6rem);
}
.platform-list{
  list-style:none; margin:0 0 1.2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.65rem;
}
.plt{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:999px;
  padding:.55rem 1.05rem;
  font-size:.9rem; color:var(--muted);
}
.plt[data-soon]::after{
  content:"bald";
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim);
  padding:.15rem .45rem; border-radius:4px;
}
.platform-note{ font-size:.88rem; color:var(--muted-2); max-width:38rem }

/* ─── Fusszeile ──────────────────────────────────────────── */

.site-foot{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vh,3.5rem) var(--pad);
}
.foot-inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1rem 2rem;
}
.foot-brand{
  font-family:var(--serif); font-size:1rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.foot-meta{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  font-size:.88rem; color:var(--muted-2); margin:0;
}
.foot-meta a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-2) }
.foot-meta a:hover{ color:var(--accent-2); border-color:var(--accent) }
.foot-fine{ font-size:.8rem; color:var(--muted-2); margin:0; flex-basis:100% }

/* ─── Einblenden beim Scrollen ───────────────────────────── */

.reveal{ opacity:0; transform:translateY(14px) }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none }
}

/* ─── Rechtstexte (Impressum / Datenschutz) ──────────────── */

.legal{
  max-width:46rem; margin-inline:auto;
  padding:clamp(2rem,6vh,4rem) var(--pad) clamp(4rem,10vh,6rem);
}
.legal h1{ font-size:clamp(2rem,1.4rem + 2.5vw,3rem); margin-bottom:1.5rem }
.legal h2{ font-size:1.25rem; margin:2.2rem 0 .7rem }
.legal p, .legal li{ color:var(--muted) }
.legal a{ color:var(--accent-2) }
.legal ul{ padding-left:1.2rem }
.legal li{ margin-bottom:.4rem }
.back-link{
  display:inline-block; margin-bottom:2rem;
  font-size:.88rem; color:var(--muted); text-decoration:none;
}
.back-link:hover{ color:var(--accent-2) }

/* ─── Feinschliff für schmale Bildschirme ────────────────── */

@media (max-width:30rem){
  .kicker{
    font-size:.68rem; letter-spacing:.1em; line-height:1.5;
    padding:.4rem .85rem .4rem .7rem;
  }
  .site-head{ padding-block:1.1rem }
  .head-cta{ font-size:.8rem; padding:.45rem .8rem }
  .cd-unit{ min-width:2.9rem }
  .field-row{ flex-direction:column }
  /* In der Spalte wirkt flex-basis auf die Höhe — darum hier zurücksetzen. */
  .signup input[type=email]{ flex:0 0 auto; width:100% }
  .btn-primary{ width:100% }
  .panel-inner h2 br{ display:none }
  .hero h1 br{ display:none }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:.9rem }
}