/* ==========================================================================
   section-01-stage — Hero: Stage-Modul (Cloud-Hintergrund + Vogelschwarm)
   + secondary-nav (Mailto + Sound-Toggle)
   Referenziert nur Werte aus tokens.css, siehe ARCHITECTURE.md.
   ========================================================================== */

#section-01-stage {
  display: flex;
  width: 100%;
  padding: 12px 12px 100px 12px;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

#section-01-stage .stage {
  align-self: stretch;
  height: 90vh;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* Hintergrund-Ebene: Wolken. Größer als der Rahmen (Overhang), damit beim
   langsameren Parallax-Versatz keine Lücke am Rand sichtbar wird.
   Nebenwirkung: Bild ist dadurch etwas stärker gezoomt/beschnitten als der
   ursprüngliche 1:1-Crop aus Figma — bei Bedarf über top/height feintunen. */
#section-01-stage .stage-bg {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* Vordergrund-Ebene: Vogelschwarm-Animation (birds-stage.html), transparenter
   Hintergrund, reagiert selbst auf Mauszeiger (pointermove/pointerdown) —
   daher KEIN pointer-events:none, sonst kommen die Events nicht an.
   Nur in der HÖHE größer als der Rahmen (Breite bleibt 100%): die Vögel-Datei
   berechnet ihren eigenen Zoom über max(Breite/Quellbreite, Höhe/Quellhöhe) —
   bei breiten Viewports ist die Breite der bestimmende Faktor, daher ändert
   ein reiner Höhen-Überhang den Zoom/das Visual nicht. Der Puffer verhindert
   nur, dass der leichte Parallax-Versatz beim initialen Laden (rect.top != 0)
   am unteren Rand die weiße Seite durchscheinen lässt. */
#section-01-stage .stage-birds {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  border: none;
  will-change: transform;
}

#section-01-stage .secondary-nav {
  display: flex;
  padding: 0 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

/* Hover bewusst wie der Mailto-Link daneben (siehe globale Link-Convention
   in styles.css: Opacity + Blur statt des generischen Button-Opacity-Hovers),
   damit beide Elemente in der secondary-nav gleich reagieren. Padding +
   negatives Margin ist der gleiche Safari-Fix wie bei <a> (sonst schneidet
   Safari die Blur-Fläche hart ab). */
#section-01-stage .sound-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-block;
  padding: 10px 6px;
  margin: -10px -6px;
  will-change: filter;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
#section-01-stage .sound-toggle:hover {
  opacity: 0.6;
  filter: blur(4px);
}

/* Default: Sound aus -> Label durchgestrichen.
   Aktiv: Sound an -> Label nicht durchgestrichen. */
#section-01-stage .sound-toggle[data-state="off"] {
  text-decoration: line-through;
}
#section-01-stage .sound-toggle[data-state="on"] {
  text-decoration: none;
}

/* ---- Mobile (siehe tokens-notes.md: 768px ist der verbindliche,
   fest verdrahtete Breakpoint für alle Sektionen) ----
   Stage skaliert bereits fluid mit (85vh + volle Breite) und braucht daher
   keine eigene Höhen-Anpassung. Der große Bottom-Padding-Wert war für den
   Desktop-Abstand zur nächsten Sektion gedacht und ist auf Mobile unnötig
   groß. */
@media (max-width: 768px) {
  #section-01-stage {
    padding: 12px 12px 48px 12px;
  }
}