/* =========================================================================
   Der Kopfflug – Arbeitsweise in fünf Stationen
   Die scrollcraft-Maschine bleibt unangetastet; hier steht nur, wie sie in
   dieser Seite aussieht. Themenwerte, Textebene, Wegleiste.
   ========================================================================= */

:root {
  --sc-canvas:     #14262b;
  --sc-surface:    #264249;
  --sc-ink:        #f2efe8;
  --sc-ink-soft:   #afc0c1;
  --sc-accent:     #52c0bb;
  --sc-accent-ink: #14262b;
  --sc-font-display: "Bodoni Moda", Didot, Georgia, serif;
  --sc-font-text:    "Archivo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Der Flug liegt hinter allem, was danach kommt. Die Bühne ist für die
   Lebensdauer der Seite fixiert – der übrige Inhalt deckt sie ab. */
.flug { position: relative; }
.nach-dem-flug {
  position: relative; z-index: 30;
  background: var(--petrol);
}

/* Ist der Flug vorbei, wird die Bühne geparkt. Ohne das bleiben fünf Videos
   über die volle Seitenlänge fixiert hinter dem Inhalt liegen und komponieren
   bei jedem Bild mit – das ist das Ruckeln beim Scrollen. Die Textebene spannt
   dazu eine viewportgroße Fläche mit overflow:visible über die ganze Seite,
   was auf iOS seitwärts scrollen lässt.
   opacity statt visibility: die Maschine setzt visibility auf den einzelnen
   Segmenten selbst, und ein sichtbares Kind überstimmt einen versteckten
   Elternteil. content-visibility spart zusätzlich das Zeichnen, wo der Browser
   es kann. */
.flug--geparkt .sc-world,
.flug--geparkt .sc-world__copy {
  opacity: 0;
  pointer-events: none;
  content-visibility: hidden;
}

/* --- Schleier: nur dort, wo Text steht ---------------------------------- */
.flug__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(15,30,34,0.94) 0%, rgba(15,30,34,0.88) 26%,
      rgba(15,30,34,0.55) 62%, rgba(15,30,34,0.20) 100%),
    linear-gradient(to bottom, rgba(15,30,34,0.50) 0%, rgba(15,30,34,0.14) 30%, rgba(15,30,34,0.40) 62%, rgba(15,30,34,0.74) 100%);
}

/* --- Textblöcke --------------------------------------------------------- */
.flug__text {
  position: absolute; inset: auto auto 0 0; width: 100%;
  padding: 0 0 clamp(5rem, 11vh, 9rem);
}
.flug__text .wrap { max-width: var(--wrap); }
/* Ab der Breite, in der die Wegleiste ihre Wörter zeigt, rückt der Text so
   weit ein, dass er ihr nicht in die Zeile läuft. */
@media (min-width: 62em) {
  .flug__text .wrap { padding-left: calc(var(--gutter) + 8.5rem); }
}
.flug__satz {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem);
  line-height: 1.16; letter-spacing: -0.024em;
  max-width: 19ch; margin: 0; color: var(--ivory);
  text-wrap: pretty;
}
.flug__satz em { font-style: italic; color: var(--teal); }

/* Der Höhepunkt bekommt mehr Gewicht als alle anderen */
.flug__text--gipfel .flug__satz {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem);
  max-width: 15ch;
}

/* Erstes Fenster trägt Überschrift, Vorspann und die Aktion */
.flug__auftakt h1 { margin: 0; max-width: 15ch; text-wrap: pretty; }
.flug__auftakt h1 em { display: block; font-style: italic; color: var(--teal); }
.flug__auftakt .lead { margin-top: 1.5rem; max-width: 34rem; color: var(--ivory); opacity: 0.88; }
.flug__auftakt .cta-row { margin-top: 2.25rem; pointer-events: auto; }

/* --- Wegleiste: die Arbeitsweise als anklickbare Route ------------------ */
.route {
  position: fixed; z-index: 60;
  left: clamp(1.25rem, 3vw, 2.75rem); top: 50%; transform: translateY(-50%);
  display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease), visibility 420ms;
}
.route[data-an="true"] { opacity: 1; visibility: visible; }
.route button {
  display: flex; align-items: center; gap: 0.85rem;
  background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
  color: var(--dim); text-align: left;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 260ms var(--ease);
}
/* Der Strich wächst über scaleX, nicht über width: sonst rechnet der Browser
   pro Bild das Layout neu. */
.route button::before {
  content: ""; width: 3rem; height: 1px; flex: none;
  background: currentColor;
  transform: scaleX(0.5); transform-origin: left center;
  transition: transform 320ms var(--ease-out), background 260ms var(--ease);
}
.route button:hover { color: var(--muted); }
.route button:active { color: var(--teal); transition-duration: 90ms; }
.route li[aria-current="true"] button { color: var(--teal); }
.route li[aria-current="true"] button::before { transform: scaleX(1); background: var(--teal); }
.route__wort { white-space: nowrap; }
@media (max-width: 62em) {
  .route__wort {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .route button { min-height: 2.75rem; }
}
@media (max-width: 30em) { .route { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .route button::before { transition: none; }
}

/* --- Mauszeiger während des Kopfflugs ----------------------------------- */
/* Der Flug wird vom Scrollen bewegt. Das ist nicht selbsterklärend, deshalb
   zeigt der Zeiger hier nach unten statt den üblichen Pfeil zu tragen.
   Reines Weiß ohne Saum: der Flug liegt durchgehend auf dunklem Grund.
   Zwei Auflösungen für Retina-Schirme. Auf Touchgeräten gibt es keinen
   Zeiger, dort greift die Regel schlicht nicht.
   Der Bildpunkt 16 16 setzt die Spitze in die Mitte des Bildes. */
.flug {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAdklEQVR4nO2W2wrAIAxD2/z/Pzs2fJK5NdXhhJznmhzwgmZCiN0plex6zNWRAA9sMZCAaQsWg20ECvncRufBhEVDmXlEAt3d2/C38nbdkEBUgi0/oQ7hk0Sm/JplBHrlPcnPrqF3StjytMBdWaZ8CiPfMSF+wQE35kAQtIXbQwAAAABJRU5ErkJggg==") 16 16, default;
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAdklEQVR4nO2W2wrAIAxD2/z/Pzs2fJK5NdXhhJznmhzwgmZCiN0plex6zNWRAA9sMZCAaQsWg20ECvncRufBhEVDmXlEAt3d2/C38nbdkEBUgi0/oQ7hk0Sm/JplBHrlPcnPrqF3StjytMBdWaZ8CiPfMSF+wQE35kAQtIXbQwAAAABJRU5ErkJggg==") 1x,
                            url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA3UlEQVR4nO3asRaDMAxD0Rf9/z+nO6c9bcF2BumODCTWwIAMERERERER4WedOnjvva/P1lrj9xHmhDlhTpgT5oQ5YU6YE+aEOWFOmBPmhDlhTpgT5oQ5YU6YU/ePzg6V56j6Ut0hVJ+jipdcL9MVQsc5osC7//nVIXT1CKJIZwidJYoo1BFCd4MkilWGMFGfiQYVIUx1h6LJkxAmi1PR6E4I063xYsCTD2F3ZS4G3B1iYl9ADPl3mKllCTHo16EmN0XEsG/DTa/JiAM+DWm1I7Quw54YPiIiIiIisPUCgl9oU6pp5pYAAAAASUVORK5CYII=") 2x) 16 16, default;
  cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAdklEQVR4nO2W2wrAIAxD2/z/Pzs2fJK5NdXhhJznmhzwgmZCiN0plex6zNWRAA9sMZCAaQsWg20ECvncRufBhEVDmXlEAt3d2/C38nbdkEBUgi0/oQ7hk0Sm/JplBHrlPcnPrqF3StjytMBdWaZ8CiPfMSF+wQE35kAQtIXbQwAAAABJRU5ErkJggg==") 1x,
                    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA3UlEQVR4nO3asRaDMAxD0Rf9/z+nO6c9bcF2BumODCTWwIAMERERERER4WedOnjvva/P1lrj9xHmhDlhTpgT5oQ5YU6YE+aEOWFOmBPmhDlhTpgT5oQ5YU6YU/ePzg6V56j6Ut0hVJ+jipdcL9MVQsc5osC7//nVIXT1CKJIZwidJYoo1BFCd4MkilWGMFGfiQYVIUx1h6LJkxAmi1PR6E4I063xYsCTD2F3ZS4G3B1iYl9ADPl3mKllCTHo16EmN0XEsG/DTa/JiAM+DWm1I7Quw54YPiIiIiIisPUCgl9oU6pp5pYAAAAASUVORK5CYII=") 2x) 16 16, default;
}
/* Auf allem, was man anklicken kann, bleibt der gewohnte Zeiger. */
.flug a, .flug button, .flug [role="button"] { cursor: pointer; }