/* Section-Rahmen */


.index-box {
  width: 100%;
  padding: clamp(4rem, 8vh, 8rem) 0;
  background: rgba(0, 0, 0, 0.7); /* ruhig, neutral */
  display: flex;
  border: 1px solid rgba(224, 32, 38, 0.6); 
  justify-content: center;
  margin-top: 80px;
}

/* Die eigentliche Box */
.index-box__media {
  width: min(90vw, 1350px); /* FAST Viewport, aber bewusst begrenzt */
  aspect-ratio: 16 / 9;
  background-image: url("../bilder/1.png"); /* hier Bild tauschen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Haltung */
  overflow: hidden;

  /* subtile Tiefe */
  transform: scale(1.01);
}

.index-box__media {
  animation: box-breath 20s ease-out forwards;
}

@keyframes box-breath {
  from { transform: scale(1.03); }
  to   { transform: scale(1.00); }
}


.index-box__overlay {
  position: absolute;
  inset: 0;
  background-image: url("../bilder/2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  pointer-events: none;
  z-index: 2;

  /* Überblendung NACH Ankunft des Autos */
  animation: reveal 2.2s ease-in-out forwards;
  animation-delay: 7.4s;
}


@keyframes reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.index-box__overlay {
  z-index: 2;
}

.index-box__car {
  z-index: 3;
}




.index-box__car {
  position: absolute;
  right: -50%;
  bottom: -15%;
  width: min(50vw, 600px);
  aspect-ratio: 2 / 1;


  pointer-events: none;
  z-index: 3;

  animation: drive-curve 7s ease-out forwards;
  animation-delay: 1.5s;
}


.index-box__car {
  animation: drive-curve 5.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 1.8s;
}

.index-box__car-inner {
  width: 100%;
  height: 100%;

  background-image: url("../bilder/auto.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transform: rotate(+2deg); /* HIER siehst du es garantiert */
}

.index-box__car {
  animation-duration: 4.0s;
}

.index-box__overlay {
  animation-delay: 5.9s;
}

@keyframes drive-curve {
  0% {
    transform: translate(0, 0) scale(0.82);
    opacity: 0.95;
  }

  /* Ankunft */
  55% {
    transform: translate(-78%, -22%) scale(1);
    opacity: 1;
  }

  /* steht */
  80% {
    transform: translate(-78%, -22%) scale(1);
    opacity: 1;
  }

  /* fährt weg */
  100% {
    transform: translate(-125%, -42%) scale(0.72);
    opacity: 0;
  }
}


.index-box__car {
  animation: drive-curve 4s linear forwards;
  animation-delay: 1.2s;
}

.index-box__overlay {
  animation: reveal 1.8s ease-in-out forwards;
  animation-delay: 3.21s;
}


/* -------------------------------- */ 

.index-box__headline {
  position: absolute;
  left: 0;
  overflow: visible;
  width: 100%;
  height: 30%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: Helvetica, Arial, sans-serif;
  font-weight: 900;                 /* MAXIMAL fett */
  font-size: clamp(4.5rem, 12vw, 12rem); /* DAS ist der Gamechanger */
  letter-spacing: -0.08em;          /* zusammengedrückt */
  line-height: 0.9;                 /* brutal kompakt */

  color: #ffffff;
  text-align: center;

  pointer-events: none;
  z-index: 4;

  transform: translateY(100%);
  opacity: 0;
  text-transform: uppercase;

  animation: headline-rise 1.4s ease-out forwards;
  animation-delay: 6.2s;
}


@keyframes headline-rise {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.index-box__headline {
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}


.index-box__media {
  overflow: visible;
}


.index-box__headline {
  max-width: 100%;
  font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 900;
}

html, body {
  overflow-x: hidden;
}





@media (min-width: 1200px) {
  .index-box__car {
    bottom: -12%;
  }
}
.index-box__car {
  clip-path: inset(0 0 0 0);
}
.index-box__media {
  contain: paint;
}


@media (min-width: 1200px) {
  .index-box__car {
    right: -44%;
  }
}

@media (min-width: 1300px) {
  .index-box__car {
    animation-duration: 5.4s;
  }
}

@media (min-width: 1300px) {
  @keyframes drive-curve {
    0% {
      transform: translate(0, 0) scale(0.82);
      opacity: 0.95;
    }

    35% {
      transform: translate(-78%, -22%) scale(1);
      opacity: 1;
    }

    80% {
      transform: translate(-78%, -22%) scale(1);
      opacity: 1;
    }

    100% {
      transform: translate(-155%, -55%) scale(0.6);
      opacity: 0;
    }
  }
}

.index-box {
  position: relative;
}

.index-box__headline {
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 10;
  pointer-events: none;
  top: 45%;
}

.index-box__headline.headline-rise {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


@media (max-width: 611px) {
.index-box__headline {
    font-size: 4rem;
  line-height: 1.05;
  top: 40%;
}
}

@media (max-width: 505px) {
.index-box__headline {
    font-size: 3.5rem;
  line-height: 1.05;
  top: 40%;
}
}

@media (max-width: 442px) {
.index-box__headline {
  font-size: 3.0rem;
  top: 40%;
}
}

@media (max-width: 379px) {
.index-box__headline {
  font-size: 2.5rem;
  top: 40%;
}
}

@media (max-width: 316px) {
.index-box__headline {
  font-size: 2.2rem;
  top: 40%;
}
}

/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------ HERO SECTION FERTIG !!!!!! --------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 
/* ------------------------------------------- */ 


/* =========================================================
   SCROLL-STORY
   DIE BESTEHENDE HERO-SECTION WIRD NICHT VERÄNDERT
========================================================= */



html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

.story-section {
  position: relative;
  width: 100%;
}

.story-inner {
  width: min(100%, 1600px);
  min-height: 100%;
  margin: 0 auto;
  padding-inline: var(--story-side);
}

.story-eyebrow {
  margin: 0 0 clamp(24px, 4vw, 60px);
  font-size: clamp(13px, 1.2vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  color:white;

  text-shadow:
    0 2px 8px rgba(0,0,0,.2),
    0 12px 40px rgba(0,0,0,.2),
    0 30px 70px rgba(0,0,0,.08);

  text-transform: uppercase;
}

.story-title {
  margin: 0;
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  text-wrap: balance;
}

.story-title--huge {
  font-size: clamp(64px, 8vw, 220px);
}

.story-title--large {
  font-size: clamp(56px, 9vw, 160px);
}

.story-copy {
  width: min(90%, 720px);
  margin: clamp(35px, 6vw, 90px) 0 0;
  font-size: clamp(18px, 1.65vw, 29px);
  line-height: 1.55;
  color: rgba(224, 32, 38, 0.9)
}


#main > section.story-details.story-section > div.story-details__content > div > span:nth-child(3) {
  color: rgba(224, 32, 38, 0.9);
}

/* =========================================================
   REVEAL-ANIMATIONEN
========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(70px);
  transition:
    opacity 900ms cubic-bezier(.2, .7, .2, 1),
    transform 1100ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.story-word.reveal,
.story-process__item.reveal,
.story-details__list .reveal {
  transform: translateX(-80px);
}

.story-word.reveal.is-visible,
.story-process__item.reveal.is-visible,
.story-details__list .reveal.is-visible {
  transform: translateX(0);
}


/* =========================================================
   KAPITEL 1
========================================================= */

.story-intro {
  min-height: 125vh;
  display: flex;
  align-items: center;
  background: var(--philo-paper-deep);
  color: var(--story-text);
}

.story-intro .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(120px, 16vh, 220px);
}


/* =========================================================
   KAPITEL 2 – DUNKLER STICKY-BEREICH
========================================================= */

.story-dark {
  height: 360vh;
  background: var(--story-dark);
  color: var(--story-white);
}

.story-dark__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: clamp(50px, 8vw, 160px);
  padding: clamp(100px, 12vh, 160px) var(--story-side);
  overflow: hidden;
}

.story-dark__headline {
  position: relative;
  z-index: 2;
}

.story-dark__headline .story-title {
  color: var(--story-white);
}

.story-dark__headline .story-eyebrow {
  color: rgba(244, 243, 239, 0.18);
}

#main > section.story-dark.story-section > div > div.story-dark__words > span:nth-child(4) {
  color: rgba(224, 32, 38, 0.6);
}

.story-process__item:nth-child(1) {
    color: #0f0f0f;
}

.story-process__item:nth-child(2) {
    color: #3a3a3a;
}

.story-process__item:nth-child(3) {
    color: #6a6a6a;
}

.story-process__item:nth-child(4) {
    color: #9a9a9a;
}

.story-process__item:nth-child(5) {
    color: #b8b8b8;
}

.story-process__item:nth-child(6) {
    color: #d6d6d6;
}

.story-dark__words {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 42px);
}

.story-word {
  display: block;
  font-size: clamp(32px, 4.5vw, 80px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: rgba(244, 243, 239, 0.18);
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(.2, .7, .2, 1),
    color 700ms ease;
}

.story-word.is-visible {
  color: var(--story-white);
}


/* =========================================================
   VOLLBILD-FOTO-KAPITEL
========================================================= */

.story-image {
  position: relative;
  min-height: 100vh; 
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #161616;
  color: white;
}

.story-image > img {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  object-fit: contain;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.05);
  will-change: transform;
}

.story-image__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 20%,
      rgba(0, 0, 0, 0.78) 100%
    );
}

.story-image__content {
  position: relative;
  z-index: 2;
  width: min(100%, 1600px);
  margin: 0 auto;
  padding:
    clamp(120px, 18vh, 230px)
    var(--story-side);
}

.story-image .story-copy {
  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   ARBEITSSCHRITTE
========================================================= */

.story-process {
  min-height: 220vh;
  display: grid;
  grid-template-columns: 48% 52%;
  background: #ece3d2;
  color: var(--story-text);
}

.story-process__media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.story-process__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.story-process__content {
  min-height: 220vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14vh var(--story-side);
}

.story-process__content .story-eyebrow {
  color: rgba(224, 32, 38, 0.6);
}

.story-process__list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3vh, 38px);
}

.story-process__item {
  display: block;
  font-size: clamp(50px, 6vw, 135px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.065em;
}


/* =========================================================
   GROSSES STATEMENT
========================================================= */

.story-statement {
  min-height: 150vh;
  display: flex;
  align-items: center;
  background: var(--story-green);
  color: white;
}

.story-statement .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(140px, 18vh, 240px);
}

.story-statement .story-eyebrow {
  color: var(--story-gold);
}

.story-statement .story-copy {
  color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   2017
========================================================= */

.story-years {
  height: 220vh;
  background: var(--story-white);
  color: var(--story-text);
}

.story-years__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  /* gap: clamp(50px, 9vw, 170px); */
  padding: 12vh var(--story-side);
  overflow: hidden;
}

.story-years__number {
  font-size: clamp(130px, 26vw, 500px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.1em;
  color: var(--story-green);
  transform-origin: left center;
}

.story-years__text .story-eyebrow {
  color: var(--story-gold);
}

.story-years__text .story-copy {
  max-width: 600px;
}


/* =========================================================
   WETTER-KAPITEL
========================================================= */

.story-future {
  min-height: 175vh;
  display: flex;
  align-items: center;
  background: var(--story-dark);
  color: white;
  overflow: hidden;
}

.story-future::before {
  content: "";
  position: absolute;
  width: min(70vw, 1100px);
  aspect-ratio: 1;
  right: -25vw;
  top: 50%;
  border: 1px solid rgba(224, 32, 38, 0.6);
  border-radius: 50%;
  transform: translateY(-50%);
}

.story-future .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(140px, 20vh, 260px);
}

.story-future .story-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.story-future .story-copy {
  color: rgba(244, 243, 239, 0.5);
}


/* =========================================================
   DETAILS
========================================================= */

.story-details {
  min-height: 200vh;
  display: grid;
  grid-template-columns: 55% 45%;
  background: var(--story-white);
  color: var(--story-text);
}

.story-details__image {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.story-details__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-details__content {
  min-height: 200vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14vh var(--story-side);
}

.story-details__content .story-eyebrow {
  color: var(--story-green);
}

.story-details__list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 34px);
}

.story-details__list span {
  display: block;
  font-size: clamp(42px, 6vw, 110px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
}


/* =========================================================
   REFERENZEN
========================================================= */

.story-reference-link {
  min-height: 150vh;
  display: flex;
  align-items: center;
  background: var(--story-gold);
  color: rgba(255, 255, 255, 0.74);
}

.story-reference-link .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(140px, 19vh, 250px);
}

.story-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(60px, 9vw, 130px);
  padding-bottom: 12px;
  border-bottom: 3px solid currentColor;
  color: rgba(224, 32, 38, 0.6);
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 800;
  text-decoration: none;
}

.story-link span {
  transition: transform 250ms ease;
}

.story-link:hover span {
  transform: translate(7px, -7px);
}


/* =========================================================
   SCHLUSS-STATEMENT
========================================================= */

.story-final {
  min-height: 150vh;
  display: flex;
  align-items: center;
  background: var(--story-white);
  color: var(--story-text);
}

.story-final .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(140px, 19vh, 250px);
}

.story-final .story-eyebrow {
  color: rgba(224, 32, 38, 0.9);
}


/* =========================================================
   KONTAKT
========================================================= */

.story-contact {
  min-height: 120vh;
  display: flex;
  align-items: center;
  background: var(--story-green);
  color: white;
}

.story-contact .story-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(130px, 18vh, 230px);
}

.story-contact .story-eyebrow {
    color: var(--pow-rot);
}

.story-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  margin-top: clamp(65px, 9vw, 125px);
}

.story-contact__phone {
  color: white;
  font-size: clamp(25px, 3vw, 52px);
  font-weight: 800;
  text-decoration: none;
}

.story-contact__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  min-width: min(100%, 330px);
  padding: 22px 26px;
  background: rgba(224, 32, 38, 0.2);
  color: rgba(224, 32, 38, 0.8);
  border: 1px solid rgba(224, 32, 38, 0.9);
  border-radius: 38px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 220ms ease,
    background-color 220ms ease;
}

.story-contact__button:hover {
  transform: translateY(-5px);
  background: white;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .story-dark {
    height: auto;
  }

  .story-dark__sticky {
    position: relative;
    min-height: 130vh;
    grid-template-columns: 1fr;
    align-content: center;
  }

  .story-process,
  .story-details {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .story-process__media,
  .story-details__image {
    position: relative;
    height: 75vh;
  }

  .story-process__content,
  .story-details__content {
    min-height: 140vh;
  }

  .story-years {
    height: auto;
  }

  .story-years__sticky {
    position: relative;
    min-height: 130vh;
    grid-template-columns: 1fr;
    align-content: center;
  }

  .story-years__number {
    font-size: clamp(125px, 35vw, 320px);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  :root {
    --story-side: 20px;
  }

  .story-title {
    letter-spacing: -0.055em;
  }

  .story-title--huge {
    font-size: clamp(56px, 17vw, 105px);
  }

  .story-title--large {
    font-size: clamp(50px, 17vw, 95px);
  }

  .story-copy {
    font-size: 18px;
    line-height: 1.5;
  }

  .story-intro {
    min-height: 115vh;
  }

  .story-dark__sticky {
    min-height: 145vh;
    padding-block: 110px;
  }

  .story-dark__words {
    margin-top: 65px;
  }

  .story-word {
    font-size: clamp(34px, 11vw, 58px);
  }

  .story-image {
    min-height: 115vh;
  }

  .story-image__content {
    padding-bottom: 80px;
  }

  .story-process__media,
  .story-details__image {
    height: 62vh;
  }

  .story-process__content,
  .story-details__content {
    min-height: 120vh;
    padding-block: 100px;
  }

  .story-process__item,
  .story-details__list span {
    font-size: clamp(45px, 14vw, 76px);
  }

  .story-statement,
  .story-future,
  .story-reference-link,
  .story-final {
    min-height: 125vh;
  }

  .story-years__sticky {
    min-height: 125vh;
  }

  .story-years__number {
    font-size: clamp(110px, 39vw, 230px);
  }

  .story-contact {
    min-height: 110vh;
  }

  .story-contact__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .story-contact__button {
  min-width: 30px;
  }
}


/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-image > img {
    transform: scale(1.05);
  }
}

/* =========================================================
   WECHSELNDE TEXTAUSRICHTUNGEN
========================================================= */

/* MITTIG */

.story-align-center .story-inner {
  align-items: center;
  text-align: center;
}

.story-align-center .story-copy {
  margin-inline: auto;
}

.story-align-center .story-eyebrow {
  text-align: center;
}


/* RECHTS */

.story-align-right .story-inner {
  align-items: flex-end;
  text-align: right;
}

.story-align-right .story-copy {
  margin-left: auto;
}

.story-align-right .story-eyebrow {
  text-align: right;
}


/* =========================================================
   BILDSEKTION: TEXT RECHTS
========================================================= */

.story-image--right .story-image__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.story-image--right .story-copy {
  margin-left: auto;
}


/* =========================================================
   BILDSEKTION: TEXT MITTIG
========================================================= */

.story-image--center {
  align-items: center;
}

.story-image--center .story-image__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-image--center .story-copy {
  margin-inline: auto;
}


/* =========================================================
   STATEMENT RECHTS MIT VERSATZ
========================================================= */

.story-statement.story-align-right .story-inner {
  padding-left: clamp(22px, 18vw, 350px);
}

.story-statement.story-align-right .story-title {
  max-width: 1150px;
}


/* =========================================================
   REFERENZEN RECHTS
========================================================= */

.story-reference-link.story-align-right .story-link {
  margin-left: auto;
}


/* =========================================================
   SCHLUSSKAPITEL MITTIG
========================================================= */

.story-final.story-align-center .story-title {
  max-width: 1200px;
}


/* =========================================================
   MOBILE WIEDER ETWAS RUHIGER
========================================================= */

@media (max-width: 650px) {

  .story-statement.story-align-right .story-inner {
    padding-left: var(--story-side);
  }

  .story-align-right .story-inner,
  .story-image--right .story-image__content {
    align-items: flex-start;
    text-align: left;
  }

  .story-align-right .story-copy,
  .story-image--right .story-copy {
    margin-left: 0;
  }

  .story-reference-link.story-align-right .story-link {
    margin-left: 0;
  }
}


/* =========================================================
   FUNKTIONIERENDE WETTER-STORY
========================================================= */

#weatherStory {
  --rain: 0;
  --snow: 0;
  --heat: 0;
  --storm: 0;

  --text-x: 0vw;
  --text-y: 0px;
  --text-rotate: 0deg;
  --text-opacity: 1;
  --text-blur: 0px;

  position: relative;
  display: block;
  height: 500vh;
  min-height: 0;
  overflow: visible;

  background: #151515;
}

.weather-stage {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  background:
    rgb(
      calc(21 + 175 * var(--heat)),
      calc(21 + 43 * var(--heat)),
      calc(21 - 8 * var(--heat))
    );

  transition: background 80ms linear;
}


/* Text */

.weather-story-text {
  position: absolute;
  z-index: 20;

  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: min(100%, 1600px);
  margin: auto;
  padding: 120px var(--story-side);

  color: white;

  transform:
    translate3d(
      var(--text-x),
      var(--text-y),
      0
    )
    rotate(var(--text-rotate));

  opacity: var(--text-opacity);
  filter: blur(var(--text-blur));

  transform-origin: center;
  will-change: transform, opacity, filter;
}

.weather-story-text .story-eyebrow {
  color: var(--story-red, #c5161d);
}

.weather-story-text .story-copy {
  color: rgba(255, 255, 255, 0.82);
}


/* Alle Wetterebenen */

.weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* =========================================================
   REGEN
========================================================= */

.weather-rain {
  z-index: 8;
  inset: -20%;

  opacity: var(--rain);

  transform: rotate(10deg) scale(1.2);
  will-change: opacity;
}

.weather-drop {
  position: absolute;

  top: -35vh;
  left: var(--left);

  width: var(--width);
  height: var(--height);

  opacity: var(--opacity);

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.95)
  );

  animation:
    rainFall
    var(--duration)
    linear
    var(--delay)
    infinite;
}

@keyframes rainFall {
  from {
    transform: translateY(-20vh);
  }

  to {
    transform: translateY(175vh);
  }
}


/* =========================================================
   SCHNEE
========================================================= */

.weather-snow {
  z-index: 9;
    opacity:calc(var(--snow) * 1.35);
  will-change: opacity;
}

.weather-flake {
  position: absolute;

  top: -10vh;
  left: var(--left);

  width: var(--size);
  height: var(--size);

  border-radius: 50%;
  background: white;

  opacity: var(--opacity);
  filter: blur(var(--blur));

  animation:
    snowFall
    var(--duration)
    linear
    var(--delay)
    infinite;
}

@keyframes snowFall {
  0% {
    transform: translate3d(0, -15vh, 0);
  }

  25% {
    transform: translate3d(45px, 25vh, 0);
  }

  50% {
    transform: translate3d(-35px, 55vh, 0);
  }

  75% {
    transform: translate3d(55px, 85vh, 0);
  }

  100% {
    transform: translate3d(-25px, 120vh, 0);
  }
}


/* =========================================================
   HITZE
========================================================= */

.weather-heat {
  z-index: 10;

  inset: -10%;
  opacity: var(--heat);

  background:
    radial-gradient(
      circle at 78% 35%,
      rgba(255, 210, 90, 0.65),
      transparent 34%
    ),
    radial-gradient(
      circle at 45% 65%,
      rgba(255, 45, 0, 0.35),
      transparent 48%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 35px,
      rgba(255, 255, 255, 0.09) 42px,
      transparent 50px
    );

  filter: blur(8px);

  animation: heatWave 1.8s ease-in-out infinite alternate;
}

@keyframes heatWave {
  from {
    transform: translate3d(-12px, 8px, 0) scale(1.08);
  }

  to {
    transform: translate3d(14px, -10px, 0) scale(1.15);
  }
}


/* =========================================================
   STURM
========================================================= */

.weather-storm {
  z-index: 15;
  opacity: var(--storm);
  overflow: hidden;
}

.weather-storm i {
  position: absolute;

  left: -90vw;

  width: 90vw;
  height: 3px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 1),
    transparent
  );

  animation: stormWind 0.65s linear infinite;
}

.weather-storm i:nth-child(1) {
  top: 8%;
  animation-delay: -0.1s;
}

.weather-storm i:nth-child(2) {
  top: 20%;
  animation-delay: -0.5s;
}

.weather-storm i:nth-child(3) {
  top: 33%;
  animation-delay: -0.25s;
}

.weather-storm i:nth-child(4) {
  top: 45%;
  animation-delay: -0.6s;
}

.weather-storm i:nth-child(5) {
  top: 58%;
  animation-delay: -0.35s;
}

.weather-storm i:nth-child(6) {
  top: 71%;
  animation-delay: -0.7s;
}

.weather-storm i:nth-child(7) {
  top: 83%;
  animation-delay: -0.42s;
}

.weather-storm i:nth-child(8) {
  top: 94%;
  animation-delay: -0.8s;
}

@keyframes stormWind {
  from {
    transform: translate3d(0, 0, 0) skewX(-30deg);
  }

  to {
    transform: translate3d(250vw, -30px, 0) skewX(-30deg);
  }
}


/* leichte Abdunklung für Lesbarkeit */

.weather-stage::after {
  content: "";
  position: absolute;
  z-index: 16;
  inset: 0;

  background: radial-gradient(
    circle at 40% 50%,
    transparent 15%,
    rgba(0, 0, 0, 0.25) 100%
  );

  pointer-events: none;
}


@media (max-width: 650px) {
  #weatherStory {
    height: 400vh;
  }

  .weather-story-text {
    padding-inline: 20px;
  }
}

#weatherStory .weather-rain,
#weatherStory .weather-snow,
#weatherStory .weather-heat,
#weatherStory .weather-storm {
  display: block !important;
  visibility: visible !important;
}

#weatherStory .weather-rain {
  z-index: 8;
}

#weatherStory .weather-snow {
  z-index: 9;
}

#weatherStory .weather-heat {
  z-index: 10;
}

#weatherStory .weather-storm {
  z-index: 15;
}

#weatherStory.weather-story {
  position: relative !important;
  display: block !important;
  height: 700vh !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: #111;
}

#weatherStory .weather-stage {
  position: sticky !important;
  top: 0 !important;
  width: 100%;
  height: 100vh !important;
  overflow: hidden;
  isolation: isolate;
  background: #151515;
}

/* WETTER-STRECKE */

html,
body,
#main {
  overflow-x: clip;
}

#main {
  overflow-y: visible !important;
}

#weatherStory {
  position: relative !important;
  display: block !important;
  width: 100% !important;

  /* 1 Bildschirm Panel + 4 Wetterphasen */
  height: 700vh !important;
  min-height: 700vh !important;

  overflow: visible !important;
  background: #151515;
}

#weatherStory .weather-stage {
  position: sticky !important;
  position: -webkit-sticky !important;

  top: 0 !important;
  left: 0;

  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;

  overflow: hidden !important;
  isolation: isolate;
  background: #151515;
}

#weatherStory .weather-layer {
  position: absolute;
  inset: 0;
  display: block;
  visibility: visible;
  pointer-events: none;
}

#weatherStory .weather-rain {
  z-index: 5;
}

#weatherStory .weather-snow {
  z-index: 6;
}

#weatherStory .weather-heat {
  z-index: 7;
}

#weatherStory .weather-storm {
  z-index: 9;
}

#weatherStory .weather-story-text {
  z-index: 8;
}


/* =========================================================
   ERWEITERTE WETTEREFFEKTE
========================================================= */

#weatherStory {
  --storm-force: 0;
  --lens-opacity: 0;
}

#weatherStory .weather-filter-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

#weatherStory .weather-scene {
  position: absolute;
  inset: -4%;
  z-index: 2;

  width: 108%;
  height: 108%;

  overflow: hidden;

  filter: url("#heatHazeFilter");

  transform:
    translate3d(
      calc(var(--storm-force) * -5vw),
      calc(var(--storm-force) * -1.5vh),
      0
    )
    scale(calc(1 + var(--storm-force) * 0.05));

  transition: transform 80ms linear;
  will-change: transform, filter;
}


/* Wetterebenen bewegen sich im Sturm unterschiedlich */

#weatherStory .weather-rain {
  transform:
    translate3d(
      calc(var(--storm-force) * -8vw),
      0,
      0
    )
    rotate(10deg)
    scale(1.2);
}

#weatherStory .weather-snow {
  transform:
    translate3d(
      calc(var(--storm-force) * -14vw),
      calc(var(--storm-force) * -2vh),
      0
    );
}

#weatherStory .weather-heat {
  transform:
    translate3d(
      calc(var(--storm-force) * -5vw),
      0,
      0
    );
}

#weatherStory .weather-storm {
  transform:
    translate3d(
      calc(var(--storm-force) * -2vw),
      0,
      0
    );
}



/* =========================================================
   HITZEFLIMMERN
========================================================= */

#weatherStory .weather-heat {
  background:
    radial-gradient(
      circle at 75% 32%,
      rgba(255, 225, 120, 0.72),
      transparent 30%
    ),
    radial-gradient(
      circle at 40% 67%,
      rgba(255, 45, 0, 0.45),
      transparent 48%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(255, 235, 190, 0.12) 28px,
      transparent 37px
    );

  filter: blur(5px) saturate(1.35);

  animation: strongerHeatWave 1.15s ease-in-out infinite alternate;
}

@keyframes strongerHeatWave {
  from {
    transform:
      translate3d(
        calc(var(--storm-force) * -5vw - 16px),
        11px,
        0
      )
      scale(1.08)
      skewX(-1.4deg);
  }

  to {
    transform:
      translate3d(
        calc(var(--storm-force) * -5vw + 18px),
        -14px,
        0
      )
      scale(1.16)
      skewX(1.8deg);
  }
}


/* =========================================================
   BLITZ
========================================================= */

#weatherStory .weather-lightning {
  position: absolute;
  inset: 0;
  z-index: 40;

  opacity: 0;

  background:
    radial-gradient(
      circle at 72% 15%,
      rgba(255, 255, 255, 1),
      rgba(220, 235, 255, 0.88) 18%,
      rgba(255, 255, 255, 0.35) 43%,
      transparent 72%
    );

  mix-blend-mode: screen;
  pointer-events: none;
}

#weatherStory .weather-lightning.is-flashing {
  animation: lightningFlash 420ms steps(1, end);
}

@keyframes lightningFlash {
  0%   { opacity: 0; }
  8%   { opacity: 0.92; }
  18%  { opacity: 0.12; }
  28%  { opacity: 0.7; }
  40%  { opacity: 0; }
  58%  { opacity: 0.36; }
  68%  { opacity: 0; }
  100% { opacity: 0; }
}


/* =========================================================
   STURM-SHAKE
========================================================= */

#weatherStory .weather-stage.is-lightning-shake .weather-scene {
  animation: lightningCameraShake 360ms linear;
}

#weatherStory .weather-stage.is-lightning-shake .weather-story-text {
  animation: lightningTextShake 360ms linear;
}

@keyframes lightningCameraShake {
  0%   { translate: 0 0; }
  15%  { translate: -5px 2px; }
  30%  { translate: 7px -3px; }
  45%  { translate: -4px 4px; }
  60%  { translate: 5px -2px; }
  75%  { translate: -2px 1px; }
  100% { translate: 0 0; }
}

@keyframes lightningTextShake {
  0%   { margin-left: 0; }
  20%  { margin-left: -5px; }
  40%  { margin-left: 6px; }
  60%  { margin-left: -3px; }
  80%  { margin-left: 2px; }
  100% { margin-left: 0; }
}


/* Text bleibt über den Regentropfen */

#weatherStory .weather-story-text {
  z-index: 30;
}


/* Blitz liegt über allem */

#weatherStory .weather-lightning {
  z-index: 40;
}

#weatherStory .weather-stage{
    position: relative;}


.weather-word{
    color: rgba(255,255,255,.25);
    transition:
        color .12s ease,
        text-shadow .12s ease,
        transform .12s ease;
}

.weather-word.active{
    color:#fff;
    text-shadow:
        0 0 18px rgba(255,255,255,.4),
        0 0 45px rgba(255,255,255,.25);

}

.weather-word {
  display: inline-block;
}



.weather-word.active {
  transform: scale(1.04);
}


/* ----------------------*/ 
.site-footer{
    position:relative;
}

.footer-logo--index{

    position:absolute;

    left:50vw;
    bottom:100%;

    transform:translateX(-50%)  
    translatey(15px);

    width:min(620px,80vw);

    z-index:100;

}

.footer-logo--index img{
    display:block;
    width:100%;
}

body:not(.index-page) .site-footer{
  margin-top:120px;
}

.site-footer--index{
    margin-top:0 !important;
}







.ending-stage{
    position:relative;
    height:300vh;
}

.story-contact{
    position:absolute;
    top:0;
    left:0;
    width:100%;


    display:flex;
    align-items:center;

    background:var(--story-green);
    z-index:1;
}

.story-contact.is-fixed{
    position:fixed;
    left:0;
    width:100%;
}

.story-contact.is-bottom{
    position:absolute;
    top:auto;
    bottom:100vh;
    left:0;
}

.site-footer--index{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    z-index:20;
    margin:0;
}
.footer-logo--index::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);

    width:700px;
    height:450px;

    background:
        radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.10) 0%, transparent 35%),
        radial-gradient(ellipse at 30% 80%, rgba(255,255,255,.10) 0%, transparent 35%),
        radial-gradient(ellipse at 60% 80%, rgba(255,255,255,.10) 0%, transparent 35%),
        radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 50%);

    opacity:1;
    pointer-events:none;
    z-index:-1;
}

.logo-backdrop{
    position:absolute;

    left:50%;
    bottom:100%;

    transform:translate(-50%,1px);

    width:100%;
    height:30vh;

    background:transparent; /* oder jede andere Farbe */

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

-webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.2) 10%,
    rgba(0,0,0,.6) 20%,
    black 35%,
    black 100%
);

    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 25%,
        black 100%
    );

    z-index:90;
    pointer-events:none;
}

@media (max-width: 1000px) {
  .story-dark__words .story-word.reveal.is-visible {
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  .story-process__item:last-child {
    overflow-wrap: anywhere;
  }
}

.index-scroll-hint {
  display: none;
}

@media (max-width: 650px) {
  .index-scroll-hint {
    display: flex !important;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    text-decoration: none;
    opacity: 1;
    animation: hintBounce 2s ease-in-out infinite;
  }

  @keyframes hintBounce {
    0%, 100% { transform: translate(-50%, -5px); }
    50% { transform: translate(-50%, 5px); }
  }
}