.energy-story{position:relative;isolation:isolate;overflow:hidden;color:#fff9fc;background:linear-gradient(180deg,#02040b 0%,#050815 48%,#03050d 100%);padding:clamp(90px,11vw,150px) 24px clamp(90px,10vw,140px)}
.energy-story::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 13%,rgba(134,159,205,.18),transparent 34%),radial-gradient(circle at 50% 68%,rgba(172,119,151,.1),transparent 34%)}
.energy-story::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(circle at 15% 18%,rgba(255,255,255,.75) 0 1px,transparent 1.5px),radial-gradient(circle at 82% 31%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),radial-gradient(circle at 28% 71%,rgba(220,205,230,.5) 0 1px,transparent 1.5px);background-size:310px 330px,420px 390px,370px 440px;mask-image:linear-gradient(transparent,#000 10%,#000 88%,transparent)}
.story-intro{max-width:760px;margin:0 auto clamp(58px,8vw,92px);text-align:center}.story-intro .eyebrow{color:rgba(230,210,224,.72);font-size:10px;letter-spacing:.27em}.story-intro h2{max-width:680px;margin:20px auto 0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5.8vw,72px);font-weight:400;line-height:.96;letter-spacing:-.055em}
.story-journey{position:relative;max-width:1060px;margin:auto}.story-path{position:absolute;top:18px;bottom:18px;left:50%;width:1px;background:linear-gradient(transparent,rgba(230,201,220,.68) 10%,rgba(205,225,249,.42) 90%,transparent);box-shadow:0 0 24px rgba(217,185,211,.26);transform:translateX(-50%)}.story-path::after{content:"";position:absolute;top:calc(2% + var(--journey-progress,0) * 92%);left:50%;width:7px;height:7px;border-radius:50%;background:#f4e6ef;box-shadow:0 0 20px 7px rgba(229,197,220,.3);transform:translateX(-50%);transition:top .08s linear}
.story-step{position:relative;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;min-height:190px;opacity:.28;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}.story-step.is-visible{opacity:1;transform:none}.story-step:nth-child(even) .story-content{grid-column:3;text-align:left}.story-step:nth-child(odd) .story-content{grid-column:1;text-align:right}.story-step:nth-child(odd) .story-content p{margin-left:auto}
.story-node{grid-column:2;grid-row:1;display:grid;place-items:center;width:48px;height:48px;justify-self:center;border:1px solid rgba(239,220,233,.42);border-radius:50%;color:#f3e3ed;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.22),rgba(120,90,115,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 28px rgba(215,174,206,.17);backdrop-filter:blur(10px)}.story-node svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.story-content{padding:20px clamp(14px,3vw,40px)}.story-number{display:block;color:rgba(226,201,217,.55);font-size:9px;font-weight:650;letter-spacing:.2em}.story-content h3{margin:9px 0 8px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3.1vw,42px);font-weight:400;line-height:1;letter-spacing:-.045em}.story-content p{max-width:330px;margin:0;color:rgba(222,213,221,.67);font-size:13px;line-height:1.58}
.story-cta{position:relative;isolation:isolate;min-height:680px;margin:0 -24px -140px;padding-top:455px;overflow:hidden;text-align:center;background:transparent}.story-cta::before{content:"";position:absolute;z-index:0;inset:0;background:url('/astro/sun-cta-overlay.png') center bottom / cover no-repeat;filter:brightness(.8) saturate(.92);opacity:.82;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 20%,#000 42%,#000 100%)}.story-cta::after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse at 50% 59%,rgba(226,53,22,.14),transparent 54%),radial-gradient(ellipse at 50% 70%,rgba(255,145,37,.16),transparent 42%);pointer-events:none}.story-cta .button{position:relative;z-index:1;border:1px solid rgba(255,245,231,.72);background:rgba(246,213,183,.94);box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 38px rgba(255,128,42,.2)}.story-cta .hero-note{position:relative;z-index:1;display:block;width:max-content;margin:13px auto 0;color:#fff5eb;text-shadow:0 2px 12px #000}
@media(max-width:760px){.energy-story{padding:84px 20px 90px}.story-intro{margin-bottom:52px}.story-intro h2{font-size:clamp(36px,11vw,50px)}.story-path{left:24px}.story-step{grid-template-columns:48px 1fr;min-height:154px;align-items:start}.story-node{grid-column:1;grid-row:1;width:42px;height:42px;margin-top:18px}.story-step:nth-child(n) .story-content{grid-column:2;grid-row:1;padding:18px 0 18px 18px;text-align:left}.story-step:nth-child(n) .story-content p{margin-left:0}.story-content h3{font-size:clamp(25px,7vw,34px)}.story-cta{min-height:590px;margin-inline:-20px;margin-bottom:-90px;padding-top:390px}.story-cta::before{background-size:auto 100%;background-position:center bottom}}
@media(prefers-reduced-motion:reduce){.story-step{opacity:1;transform:none;transition:none}.story-path::after{transition:none}}


/* Mobil-Feinschliff 16.09.2026: Der Sonnenabschnitt unter dem siebten Bereich
   war auf dem Handy zu hoch und schob den Aufruf weit nach unten. */
@media (max-width: 760px) {
  .energy-story {
    padding-bottom: 70px;
  }

  .story-intro {
    margin-bottom: 44px;
  }

  .story-cta {
    min-height: 430px;
    padding-top: 250px;
    margin-bottom: -70px;
  }
}


/* Nachtrag 16.09.2026: Der dunkle Streifen zwischen dem siebten Bereich und der
   Sonne war weiterhin zu hoch. Die Sonne blendet jetzt frueher ein. */
@media (max-width: 760px) {
  .story-cta {
    min-height: 372px;
    padding-top: 196px;
  }

  .story-cta::before {
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 12%, #000 30%, #000 100%);
  }
}


/* Nachtrag 2 vom 16.09.2026: Sonne frueher sichtbar, Aufruf kleiner und tiefer,
   damit die Sonne hinter ihm zur Geltung kommt. */
@media (max-width: 760px) {
  .story-cta {
    min-height: 400px;
    padding-top: 258px;
  }

  .story-cta::before {
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 6%, #000 19%, #000 100%);
  }

  .story-cta .button {
    min-height: 44px;
    gap: 16px;
    padding: 13px 21px;
    font-size: 11.5px;
  }

  .story-cta .hero-note {
    margin-top: 9px;
  }
}


/* Nachtrag 3 vom 16.09.2026: letzter dunkler Rest zwischen dem siebten Bereich
   und dem Sonnenaufgang. */
@media (max-width: 760px) {
  .energy-story {
    padding-bottom: 24px;
  }

  .story-journey .story-step:last-child {
    min-height: 0;
    padding-bottom: 0;
  }

  .story-cta::before {
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .34) 4%, #000 14%, #000 100%);
  }
}


/* 16.09.2026: Der Abschnittskopf heisst jetzt "Was dein Energiekoerper sichtbar
   macht." und soll auf dem Handy in genau zwei Zeilen stehen. Dafuer muss die
   erste Zeile in eine Zeile passen. */
@media (max-width: 760px) {
  .story-intro h2 {
    font-size: clamp(25px, 7.6vw, 33px);
  }
}


/* 16.09.2026: Die sichtbare Kante zwischen Hero und zweiter Sektion kam nicht
   von den Hintergrundfarben, die sind identisch, sondern vom blaeulichen Schein
   im Kopf der Sektion. Er setzte hart an. Jetzt blendet er von oben ein. */
.energy-story::before {
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 9%, #000 20%, #000 100%);
}

.energy-story {
  background:
    linear-gradient(180deg, #02040b 0%, rgba(2, 4, 11, .92) 4%, rgba(2, 4, 11, 0) 15%),
    linear-gradient(180deg, #02040b 0%, #050815 48%, #03050d 100%);
}


/* Passend dazu: die Einblendung im Kopf der zweiten Sektion knapper. */
.energy-story::before {
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 4%, #000 10%, #000 100%);
}

.energy-story {
  background:
    linear-gradient(180deg, #02040b 0%, rgba(2, 4, 11, .9) 2%, rgba(2, 4, 11, 0) 8%),
    linear-gradient(180deg, #02040b 0%, #050815 48%, #03050d 100%);
}


/* 16.09.2026, Wunsch Oliver: Die sieben Bereiche insgesamt 20 Prozent kleiner.
   Schrift, Knotenpunkte und Abstaende gleichermassen. Der Beschreibungstext
   bleibt bei 11 px stehen, darunter wird er auf dem Handy schwer lesbar. */
.story-step {
  min-height: 152px;
}

.story-content {
  padding: 16px clamp(11px, 2.4vw, 32px);
}

.story-number {
  font-size: 8px;
  letter-spacing: .18em;
}

.story-content h3 {
  margin: 7px 0 6px;
  font-size: clamp(21px, 2.5vw, 34px);
}

.story-content p {
  max-width: 264px;
  font-size: 11px;
  line-height: 1.55;
}

.story-node {
  width: 38px;
  height: 38px;
}

.story-node svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 760px) {
  .story-step {
    grid-template-columns: 38px 1fr;
    min-height: 123px;
  }

  .story-node {
    width: 34px;
    height: 34px;
    margin-top: 14px;
  }

  .story-node svg {
    width: 15px;
    height: 15px;
  }

  .story-path {
    left: 19px;
  }

  .story-step:nth-child(n) .story-content {
    padding: 14px 0 14px 14px;
  }

  .story-content h3 {
    font-size: clamp(20px, 5.6vw, 27px);
  }
}


/* 16.09.2026: Der zusaetzliche Aufruf oben in der zweiten Sektion wurde auf
   Wunsch wieder entfernt. Das knappere Kopfpolster bleibt. */
@media (max-width: 760px) {
  .energy-story {
    padding-top: 54px;
  }
}