/* ========================================================================== 
   SKYTIME – FLUGGESCHICHTE / FEINTUNING
   Einheitlicher vertikaler Rhythmus bei bewusst asymmetrischer Bildgestaltung.
   ========================================================================== */

.flight-story-section {
  --flight-story-gap: clamp(76px, 6vw, 96px);
  padding-bottom: var(--flight-story-gap);
}

/* Der Intro-Block bekommt oberhalb und unterhalb der Trennlinie denselben
   vertikalen Rhythmus wie die nachfolgenden Story-Momente. */
.flight-story-opening {
  padding-bottom: var(--flight-story-gap);
}

/* Vom Intro bis zum letzten Story-Moment folgt alles derselben Grundtaktung. */
.flight-story-stage {
  gap: var(--flight-story-gap);
  margin-top: var(--flight-story-gap);
}

/* Frühere Kompensation zurücksetzen: der letzte Story-Moment bleibt im Raster. */
.flight-story-moment--lasting {
  margin-top: 0;
}

/* Die versetzten Bilder bleiben spielerisch, ihre optische Tiefe wird aber
   im folgenden Abstand ausgeglichen. */
.flight-story-moment--airborne {
  margin-bottom: 50px;
}

.flight-story-finale {
  margin-top: calc(var(--flight-story-gap) + 56px);
}

.flight-story-cta--final {
  margin-top: var(--flight-story-gap);
}

/* Das Logo im Story-Intro entspricht dem Navigationslogo: Originalfarben,
   identische Größe und identische responsive Abstufung. Die vorhandene
   leichte Bewegung bleibt vollständig erhalten. */
.flight-story-signature a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.flight-story-signature img {
  width: 166px;
  filter: drop-shadow(0 3px 10px rgb(0 0 0 / 35%));
}

.flight-story-signature a:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 8px;
}

.flight-story-signature a:focus-visible img {
  transform: rotate(2deg) scale(1.025);
}

@media (max-width: 1000px) {
  .flight-story-section {
    --flight-story-gap: 72px;
  }

  .flight-story-signature img {
    width: 150px;
  }

  /* Ab 1000 px fällt die 56-px-Verschiebung des letzten Bildes weg. */
  .flight-story-finale {
    margin-top: var(--flight-story-gap);
  }
}

@media (max-width: 720px) {
  .flight-story-section {
    --flight-story-gap: 52px;
  }

  .flight-story-stage {
    gap: var(--flight-story-gap);
    margin-top: var(--flight-story-gap);
  }

  /* Mobil ist auch das kleine Airborne-Bild nicht mehr nach unten versetzt. */
  .flight-story-moment--airborne {
    margin-bottom: 0;
  }

  .flight-story-finale,
  .flight-story-cta--final {
    margin-top: var(--flight-story-gap);
  }
}

@media (max-width: 620px) {
  .flight-story-signature img {
    width: 128px;
  }
}