:root{
  --bg:#050505;
  --panel:rgba(255,255,255,.035);
  --panel-border:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:#b8bac6;
  --accent:#70ebff;
  --accent-2:#9a8cff;
  --shadow:0 10px 40px rgba(0,0,0,.3);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:"Inter",system-ui,sans-serif;
  overflow-x:hidden;
}

.page-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 15% 15%, rgba(112,235,255,.10), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(154,140,255,.10), transparent 26%),
    radial-gradient(circle at 60% 45%, rgba(255,255,255,.03), transparent 35%);
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:56px 24px 72px;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
}

.hero-stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 1px, transparent 1.4px),
    radial-gradient(circle at 31% 69%, rgba(255,255,255,.75) 0 1px, transparent 1.4px),
    radial-gradient(circle at 47% 18%, rgba(255,255,255,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 61% 77%, rgba(255,255,255,.65) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 32%, rgba(255,255,255,.6) 0 1px, transparent 1.4px),
    radial-gradient(circle at 83% 14%, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
    radial-gradient(circle at 91% 55%, rgba(255,255,255,.5) 0 1px, transparent 1.4px);
  opacity:.8;
}

/* Sternschnuppen: länglich, bunt, von der Mitte random zu allen Rändern */
.shooting{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:32px;
  margin-left:-3px;
  margin-top:-16px;
  border-radius:50%;
  transform-origin:center center;
  opacity:0;
}
.shooting-1{
  background:linear-gradient(180deg, transparent 0%, rgba(112,235,255,.4) 25%, rgba(255,255,255,.95) 50%, rgba(154,140,255,.8) 100%);
  box-shadow:0 0 16px rgba(112,235,255,.6), 0 0 32px rgba(154,140,255,.4);
  animation:shootDir1 4.2s ease-out infinite; animation-delay:0s;
}
.shooting-2{
  background:linear-gradient(180deg, transparent 0%, rgba(154,140,255,.5) 25%, rgba(255,255,255,.95) 50%, rgba(255,180,100,.7) 100%);
  box-shadow:0 0 16px rgba(154,140,255,.6), 0 0 28px rgba(255,180,100,.35);
  animation:shootDir2 3.8s ease-out infinite; animation-delay:0.9s;
}
.shooting-3{
  background:linear-gradient(180deg, transparent 0%, rgba(255,140,200,.45) 25%, rgba(255,255,255,.95) 50%, rgba(112,235,255,.75) 100%);
  box-shadow:0 0 16px rgba(255,140,200,.5), 0 0 30px rgba(112,235,255,.4);
  animation:shootDir3 4s ease-out infinite; animation-delay:1.8s;
}
.shooting-4{
  background:linear-gradient(180deg, transparent 0%, rgba(112,235,255,.4) 25%, rgba(255,255,255,.95) 50%, rgba(255,220,100,.75) 100%);
  box-shadow:0 0 16px rgba(112,235,255,.5), 0 0 28px rgba(255,220,100,.4);
  animation:shootDir4 4.4s ease-out infinite; animation-delay:0.5s;
}
.shooting-5{
  background:linear-gradient(180deg, transparent 0%, rgba(255,200,150,.5) 25%, rgba(255,255,255,.95) 50%, rgba(154,140,255,.8) 100%);
  box-shadow:0 0 16px rgba(255,200,150,.5), 0 0 30px rgba(154,140,255,.4);
  animation:shootDir5 3.6s ease-out infinite; animation-delay:2.2s;
}
.shooting-6{
  background:linear-gradient(180deg, transparent 0%, rgba(154,140,255,.45) 25%, rgba(255,255,255,.95) 50%, rgba(112,235,255,.7) 100%);
  box-shadow:0 0 16px rgba(154,140,255,.5), 0 0 32px rgba(112,235,255,.45);
  animation:shootDir6 4.1s ease-out infinite; animation-delay:1.2s;
}

@keyframes shootDir1{
  0%{ transform:translate(0,0) rotate(-55deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(48vw,-42vh) rotate(-55deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(62vw,-58vh) rotate(-55deg) scale(1.4); opacity:0; }
}
@keyframes shootDir2{
  0%{ transform:translate(0,0) rotate(125deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(-45vw,48vh) rotate(125deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(-60vw,62vh) rotate(125deg) scale(1.4); opacity:0; }
}
@keyframes shootDir3{
  0%{ transform:translate(0,0) rotate(200deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(-52vw,-38vh) rotate(200deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(-68vw,-52vh) rotate(200deg) scale(1.4); opacity:0; }
}
@keyframes shootDir4{
  0%{ transform:translate(0,0) rotate(25deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(55vw,28vh) rotate(25deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(72vw,40vh) rotate(25deg) scale(1.4); opacity:0; }
}
@keyframes shootDir5{
  0%{ transform:translate(0,0) rotate(280deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(28vw,52vh) rotate(280deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(38vw,68vh) rotate(280deg) scale(1.4); opacity:0; }
}
@keyframes shootDir6{
  0%{ transform:translate(0,0) rotate(165deg) scale(0.08); opacity:0; }
  10%{ opacity:0.95; }
  50%{ transform:translate(-38vw,-48vh) rotate(165deg) scale(1); opacity:0.9; }
  92%{ opacity:0.2; }
  100%{ transform:translate(-50vw,-65vh) rotate(165deg) scale(1.4); opacity:0; }
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:980px;
  text-align:center;
}
.eyebrow,
.copy-kicker{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.hero h1{
  margin:14px 0 0;
  font-size:clamp(3rem, 8vw, 6rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.hero-copy{
  max-width:760px;
  margin:22px auto 0;
  font-size:clamp(1rem, 2vw, 1.18rem);
  line-height:1.75;
  color:#FFFFFF;
}
.hero-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}
.hero-cta input{
  width:min(420px, 82vw);
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  outline:none;
  backdrop-filter:blur(10px);
}
.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#061018;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 12px 32px rgba(112,235,255,.2);
}

.story-page{
  width:min(1400px, calc(100% - 24px));
  margin:0 auto;
  padding-bottom:120px;
}

.story-stage{
  position:relative;
  width:100%;
  max-width:1360px;
  margin:0 auto;
  aspect-ratio:3000 / 5000;
}

.story-art{
  position:absolute;
  inset:0;
  z-index:1;
}
.story-art svg{
  width:100%;
  height:100%;
  display:block;
  transform:translateX(-18%);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .12s linear;
}
.story-art svg .st0{
  fill:#fff;
}
.story-art svg rect:first-of-type{
  fill:transparent;
}

/* Deutschlandkarte: Pfade zeichnen sich (stroke), kleine = Punkte erscheinen danach (getBBox im Script) */
.story-art svg #_x31_ path.map{
  stroke:#fff;
  stroke-width:2;
  fill:none;
  animation:drawMap 3s ease forwards;
}
.story-art svg #_x31_ path.dot{
  opacity:0;
  transform:scale(0);
  transform-origin:center;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
  animation:dotAppear .6s ease forwards;
}
@keyframes drawMap{
  to{ stroke-dashoffset:0; }
}
@keyframes dotAppear{
  to{ opacity:1; transform:scale(1); }
}

/* Szene 4: Seil (im SVG) – Klasse szene4-seil an dein Seil-Path hängen, dann zeichnet es sich bei Sicht */
.story-stage.scene-4-active #_x34_ .szene4-seil{
  animation:szene4SeilDraw 1s ease-out forwards;
}
@keyframes szene4SeilDraw{
  to{ stroke-dashoffset:0; }
}

.story-copy{
  position:absolute;
  z-index:3;
  width:min(520px, 42vw);
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  transform:translateY(-50%) translateY(24px);
  text-align:left;
  opacity:0;
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.story-copy.is-visible{
  opacity:1;
  transform:translateY(-50%) translateY(0);
}
.story-copy p{
  margin:0;
  color:#FFFFFF;
  line-height:1.75;
  font-size:.98rem;
}

/* rechts neben die Deutschlandkarte */
.scene-1{ left:64%; top:5.8%; }
.scene-2{ left:64%; top:21%; }
.scene-3{ left:64%; top:33.7%; }
.scene-4{ left:64%; top:52.2%; }
.scene-5{ left:64%; top:63.8%; }
.scene-6{ left:64%; top:81.3%; }

.final-cta{
  position:absolute;
  left:64%;
  top:96%;
  transform:translateY(-50%) translateY(24px);
  z-index:3;
  width:min(520px, 42vw);
  max-width:none;
  margin:0;
  text-align:left;
  padding:0;
  opacity:0;
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.final-cta.is-visible{
  opacity:1;
  transform:translateY(-50%) translateY(0);
}
.final-cta p{
  max-width:none;
  margin:0 0 20px;
  color:#FFFFFF;
  line-height:1.8;
  font-size:1.03rem;
}

/* Mobil: gleiche Anordnung wie PC, Stage wird skaliert – kein Überlagern, kein Scroll */
.story-stage-wrapper{
  width:100%;
}

@media (max-width: 1100px){
  .story-page{
    width:100%;
    overflow-x:hidden;
    padding-left:0;
    padding-right:0;
  }
  .story-stage-wrapper{
    --stage-scale: 0.92;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 166.67%;
    overflow: hidden;
  }
  .story-stage{
    position: absolute;
    left: 50%;
    top: 0;
    width: 1200px;
    height: 2000px;
    margin-left: -600px;
    transform: scale(var(--stage-scale));
    transform-origin: top center;
  }
  .story-art svg{
    transform: translateX(-18%);
  }
}
@media (max-width: 900px){
  .story-stage-wrapper{ --stage-scale: 0.75; }
}
@media (max-width: 768px){
  .story-stage-wrapper{ --stage-scale: 0.64; }
}
@media (max-width: 600px){
  .story-stage-wrapper{ --stage-scale: 0.5; }
}
@media (max-width: 480px){
  .story-stage-wrapper{ --stage-scale: 0.4; }
}
@media (max-width: 390px){
  .story-stage-wrapper{ --stage-scale: 0.325; }
}
@media (max-width: 360px){
  .story-stage-wrapper{ --stage-scale: 0.3; }
}

@media (max-width: 640px){
  .hero{
    padding-inline:16px;
  }
  .hero-cta{
    flex-direction:column;
  }
  .button-primary{
    width:min(420px, 82vw);
  }
}

.site-footer{
  padding:32px 24px 40px;
  text-align:center;
  border-top:1px solid var(--panel-border);
}
.footer-nav{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.footer-nav a{
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none;
}
.footer-nav a:hover{
  color:var(--accent);
}