/* ==========================================================================
   Gelände als Drohnenflug: Video bleibt stehen, beim Scrollen wechseln
   Ausschnitt und Text. Wird nur auf der Startseite geladen.
   ========================================================================== */

.flight {
  position: relative;
  background: var(--torf);
  color: var(--nebel);
  scroll-margin-top: -5rem; /* hebt scroll-padding-top auf: Sprung zu #gelaende zeigt das ganze Video */
  /* Höhe, die die ausgeklappte Browserleiste auf dem Handy verdeckt (am Desktop 0) */
  --flight-cut: calc(100lvh - 100svh);
}

/* Bühne: klebt am oberen Rand, solange die Schritte darunter durchscrollen.
   So hoch wie das Fenster mit eingeklappter Browserleiste (lvh): Mit svh blieb auf dem iPhone
   beim Scrollen unten ein brauner Streifen frei. Text und Knöpfe stehen um --flight-cut höher,
   damit sie auch bei ausgeklappter Leiste sichtbar sind. */
.flight__stage {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}

.flight__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.flight__clip.is-active { opacity: 1; }

/* Abdunklung nur dort, wo Text steht */
.flight__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(24 28 24 / 0.82) var(--flight-cut), rgb(24 28 24 / 0.4) calc(var(--flight-cut) + 38%), rgb(24 28 24 / 0) calc(var(--flight-cut) + 62%)),
    linear-gradient(to right, rgb(24 28 24 / 0.35) 0%, rgb(24 28 24 / 0) 55%);
}

.flight__copy {
  position: absolute;
  inset: auto 0 var(--flight-cut) 0;
  padding-bottom: clamp(2.5rem, 9vh, 6rem);
}
.flight__texts {
  display: grid;
  max-width: 38rem;
}
/* Alle Texte liegen übereinander; sichtbar ist nur der aktive */
.flight__text {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.flight__text.is-active { opacity: 1; transform: none; }
.flight__text h2,
.flight__text h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
  color: #fff;
  font-size: var(--fs-xxl);
  line-height: 1.02;
  margin-bottom: var(--space-4);
}
.flight__text h3 { font-size: var(--fs-xl); }
.flight__text p {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: #eef2ee;
  margin: 0;
}

/* Fortschritt: fünf kurze senkrechte Striche am rechten Rand, der aktive ist hell.
   Senkrecht, damit niemand seitlich wischt: weiter geht es nach unten. */
.flight__progress {
  position: absolute;
  top: 50svh;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-50%);
}
.flight__progress span {
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: rgb(255 253 248 / 0.35);
  transition: background-color 400ms var(--ease), height 400ms var(--ease);
}
.flight__progress span.is-active { height: 34px; background: var(--nebel); }

/* Hinweis „Scrollen“ im ersten Kapitel, verschwindet nach dem ersten Weiterscrollen.
   Desktop: unten mittig (Bezug ist .flight__copy, das unten am Bild steht). */
.flight__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.25rem);
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  color: var(--nebel);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgb(24 28 24 / 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
  pointer-events: none;
}
.flight.is-hint .flight__hint { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease) 600ms; }
.flight__hint svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 6px rgb(24 28 24 / 0.5)); }
@media (prefers-reduced-motion: no-preference) {
  .flight.is-hint .flight__hint svg { animation: flight-nudge 1.8s ease-in-out infinite; }
}
@keyframes flight-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.flight__actions {
  position: absolute;
  right: var(--gutter);
  bottom: calc(clamp(2.5rem, 9vh, 6rem) + var(--flight-cut));
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.flight__actions .flight__toggle { position: static; }
.btn--light {
  background: var(--nebel);
  border-color: var(--nebel);
  color: var(--wiese);
}
.btn--light:hover { background: #fff; border-color: #fff; color: var(--wiese-tief); }

/* Unsichtbare Schritte, die das Scrollen steuern. Kurze Wege (halbe Bildschirmhöhe je Kapitel),
   damit niemand denkt, es hängt (Rückmeldung von Testnutzern, 06.10.2026). Das erste Kapitel
   bleibt länger für die Überschrift, das letzte, damit „Ganzen Rundflug ansehen“ in Ruhe sichtbar ist. */
.flight__steps {
  position: relative;
  margin-top: -100lvh;
  pointer-events: none;
}
.flight__step { height: 50svh; }
.flight__step:first-child { height: 100svh; }
.flight__step:last-child { height: 80svh; }

/* Schmaler als Text + Knöpfe nebeneinander (Tablet hochkant, Handy): Knöpfe unter den Text */
@media (max-width: 960px), (orientation: landscape) and (max-height: 500px) {
  .flight__copy { padding-bottom: 7.5rem; }
  /* Unten sind die Knöpfe, rechts reicht der Text bis an den Rand:
     Striche kürzer oben rechts unter dem Menü, „Scrollen“ mittig über der Überschrift */
  .flight__progress { top: calc(4.5rem + var(--space-4)); gap: 5px; transform: none; }
  .flight__progress span { height: 14px; }
  .flight__progress span.is-active { height: 22px; }
  .flight__hint { position: static; margin: 0 auto var(--space-4); transform: none; width: fit-content; }
  .flight__actions {
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--space-5) + var(--flight-cut));
    justify-content: space-between;
  }
}
@media (max-width: 700px) {
  .flight__text h2 { font-size: var(--fs-xl); }
  .flight__text h3 { font-size: var(--fs-lg); }
}
/* Handy quer: wenig Höhe, deshalb kleinere Schrift */
@media (orientation: landscape) and (max-height: 500px) {
  .flight__copy { padding-bottom: 5rem; }
  .flight__actions { bottom: calc(var(--space-4) + var(--flight-cut)); }
  .flight__text h2 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
  .flight__text h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
  .flight__text p { font-size: 1rem; }
  .flight__hint { margin-bottom: var(--space-2); }
}

/* Voller Rundflug im Dialog */
.flight-dialog {
  width: min(92vw, 70rem);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--torf);
  color: var(--nebel);
  overflow: hidden;
}
.flight-dialog::backdrop { background: rgb(24 28 24 / 0.85); }
.flight-dialog__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
}
.flight-dialog__bar h2 { margin: 0; font-size: var(--fs-md); color: #fff; }
.flight-dialog__close {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid rgb(255 253 248 / 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--nebel);
  font: 600 var(--fs-sm)/1 var(--font-text);
  cursor: pointer;
}
.flight-dialog__close:hover { background: rgb(255 253 248 / 0.12); }
.flight-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }