/* Cima Elements – Scroll-Sequenz Bauablauf
   Gehoert zu scroll-sequence.js. Keine position:sticky hier -
   das Pinnen macht ausschliesslich GSAP ScrollTrigger.

   Grundaufbau: .cima-seq (Scrollstrecke) > .cima-seq__stage (wird gepinnt,
   fuellt den Bildschirm) > .cima-seq__frame (der sichtbare Rahmen) > Canvas.
   Ohne Layoutklasse fuellt der Rahmen die ganze Buehne, wie bisher.
   Die drei Layoutklassen weiter unten machen ihn kleiner. */

.cima-seq {
  position: relative;
  width: 100%;
  /* Hoehe der Sektion = Scrollstrecke. dvh, nicht vh:
     die iOS-Adressleiste aendert vh und laesst gepinnte Sektionen springen. */
  height: 100dvh;

  --cima-creme: #F7F3EC;
  --cima-tinte: #241F1B;
  --cima-sandstein: #C6B18A;
}

.cima-seq__stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--cima-creme);
}

.cima-seq__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cima-seq__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cima-seq__skip {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  font: inherit;
  font-size: 0.9rem;
  color: #1c1c1c;
  cursor: pointer;
}

.cima-seq__skip:focus-visible {
  outline: 2px solid #1c1c1c;
  outline-offset: 3px;
}

/* Ladefortschritt, dezent. Verschwindet, sobald der Startvorrat da ist. */
.cima-seq__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: rgba(0, 0, 0, 0.35);
  transition: width 0.2s linear, opacity 0.3s;
  z-index: 3;
}

/* Text neben oder ueber der Sequenz. Ohne Layoutklasse unsichtbar,
   damit das alte Markup unveraendert weiterlaeuft. */
.cima-seq__text {
  display: none;
}

.cima-seq__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cima-sandstein);
}

.cima-seq__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cima-tinte);
}

.cima-seq__lead {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
  color: rgba(36, 31, 27, 0.78);
}

/* ---------------------------------------------------------------------------
   Layout A – Buehne mittig
   Der Rahmen steht als 16:9-Karte in der Mitte, Text darueber, Creme ringsum.
   --------------------------------------------------------------------------- */

.cima-seq--stage .cima-seq__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 4vh 1.5rem;
}

.cima-seq--stage .cima-seq__text {
  display: block;
  width: min(62rem, 100%);
  text-align: center;
}

.cima-seq--stage .cima-seq__lead {
  margin: 0 auto;
  max-width: 46ch;
}

.cima-seq--stage .cima-seq__frame {
  width: min(62rem, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  border-radius: 6px;
  box-shadow: 0 18px 50px -28px rgba(36, 31, 27, 0.55);
}

/* ---------------------------------------------------------------------------
   Layout B – Band
   Breites, flaches Fenster. Der Beschnitt nimmt den Rasen raus, und der ist
   die unruhigste Flaeche im Bild. Braucht data-focus="0.35" am Abschnitt.
   --------------------------------------------------------------------------- */

.cima-seq--band .cima-seq__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 4vh 1.5rem;
}

.cima-seq--band .cima-seq__frame {
  width: min(70rem, 100%);
  height: auto;
  aspect-ratio: 21 / 9;
  max-height: 56vh;
  border-radius: 4px;
  box-shadow: 0 18px 50px -30px rgba(36, 31, 27, 0.5);
}

.cima-seq--band .cima-seq__text {
  display: block;
  width: min(70rem, 100%);
  text-align: center;
}

.cima-seq--band .cima-seq__lead {
  margin: 0 auto;
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   Layout C – Zweispalter
   Text links, Sequenz rechts. Der Blick hat etwas zu lesen, waehrend das Haus
   waechst, und das Bild belegt nur noch gut die halbe Breite.
   --------------------------------------------------------------------------- */

.cima-seq--split .cima-seq__stage {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 46rem);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 6vh clamp(1.5rem, 4vw, 4rem);
}

.cima-seq--split .cima-seq__text {
  display: block;
}

.cima-seq--split .cima-seq__frame {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  box-shadow: 0 18px 50px -28px rgba(36, 31, 27, 0.55);
}

@media (max-width: 900px) {
  .cima-seq--split .cima-seq__stage {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.5rem;
  }
  .cima-seq--split .cima-seq__frame {
    aspect-ratio: 16 / 9;
    max-height: 46vh;
  }
}

/* Auf dem Telefon laufen alle drei Layouts gleich: ein Fenster, volle Breite,
   Text darueber. Fuer die schmale Spalte ist kein Platz. */
@media (max-width: 700px) {
  .cima-seq--stage .cima-seq__stage,
  .cima-seq--band .cima-seq__stage,
  .cima-seq--split .cima-seq__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 4vh 1.25rem;
  }
  .cima-seq--stage .cima-seq__frame,
  .cima-seq--band .cima-seq__frame,
  .cima-seq--split .cima-seq__frame {
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 52vh;
  }
  .cima-seq--split .cima-seq__text {
    text-align: center;
  }
  .cima-seq--split .cima-seq__lead {
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cima-seq {
    height: 100dvh;
  }
  .cima-seq__skip {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Overlay mit den Bauschritten
   Der Behaelter ist im Markup leer, die Liste baut scroll-sequence.js aus
   window.CIMA_SEQ_STEPS. Alle Schritte bleiben im Dokument, sichtbar ist
   immer nur der aktive - so liest ein Screenreader die Liste vollstaendig.
   --------------------------------------------------------------------------- */

.cima-seq__steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 6rem clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vh, 3rem);
  color: #fff;
  pointer-events: none;
  /* Verlauf statt Flaeche: unten dunkel genug fuer Text, oben unsichtbar.
     Nur da, wo wirklich ein Schritt steht. */
  background: linear-gradient(to top,
    rgba(20, 17, 15, 0.82) 0%,
    rgba(20, 17, 15, 0.62) 30%,
    rgba(20, 17, 15, 0.28) 62%,
    rgba(20, 17, 15, 0) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.cima-seq.has-step .cima-seq__steps {
  opacity: 1;
}

.cima-seq__steplist {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Alle Schritte liegen uebereinander. Die Hoehe kommt vom laengsten,
     damit beim Wechsel nichts springt. */
  display: grid;
}

.cima-seq__step {
  grid-area: 1 / 1;
  max-width: 32rem;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cima-seq__step.is-active {
  opacity: 1;
  transform: none;
}

.cima-seq__step-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.cima-seq__step-text {
  margin: 0;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.cima-seq__dots {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.cima-seq__dot {
  width: 1.5rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.4s ease;
}

.cima-seq__dot.is-active {
  background: rgba(255, 255, 255, 0.9);
}

/* Der Weiter-Button rueckt nach rechts, sonst steht er im Schritttext. */
.cima-seq__skip {
  left: auto;
  right: clamp(1.5rem, 5vw, 4rem);
  transform: none;
}

/* Auf dem Telefon steht das 16:9-Bild als Streifen in der Mitte, darunter ist
   Creme frei. Da gehoert der Text hin: dunkel auf hell, ohne Verlauf ueber dem
   Bild. Weiss auf Creme waere unlesbar, und ein Scrim ueber dem Creme-Rand
   sieht aus wie ein Fehler. */
@media (max-width: 700px) {
  .cima-seq__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    padding-bottom: 4.5rem;
  }

  .cima-seq__frame {
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .cima-seq__steps {
    position: static;
    padding: 0 1.25rem;
    background: none;
    color: var(--cima-tinte);
  }

  .cima-seq__step {
    max-width: none;
  }

  .cima-seq__step-title,
  .cima-seq__step-text {
    text-shadow: none;
  }

  .cima-seq__step-text {
    color: rgba(36, 31, 27, 0.78);
  }

  .cima-seq__dot {
    background: rgba(36, 31, 27, 0.22);
  }

  .cima-seq__dot.is-active {
    background: rgba(36, 31, 27, 0.75);
  }

  .cima-seq__skip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cima-seq__steps,
  .cima-seq__step {
    transition: none;
  }
}