html,
body {
  margin: 0;
  padding: 0;

  overflow: hidden;
}

.mainWrapper {
  width: 100%;
  /* War vorher "height: 100vw;" - offensichtlicher Tippfehler (Höhe sollte
     nicht von der Fensterbreite abhängen). Jetzt wird die Höhe einfach dem
     tatsächlichen Inhalt überlassen; scroll.js misst ohnehin die echten
     Section-Positionen (offsetTop/scrollHeight) statt sich auf diesen Wert
     zu verlassen. */
  height: auto;
  position: relative;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.startVidBox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

.fpaVidBox video,
.craftVidBox video,
.storyVidBox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.fpaVidBox,
.craftVidBox,
.storyVidBox,
.startVidBox {
  position: relative;
  top: 0;
  /* "100vh" allein reicht auf iOS-Safari nicht - die Toolbar am unteren
     Rand ist teils durchsichtig/"floating" und nimmt dabei keinen
     eigenen Platz im Viewport weg. Eine Section, die nur bis zur
     sichtbaren (kleinen) Höhe reicht, hört dadurch VOR dem unteren
     Bildschirmrand auf - durch die durchsichtige Toolbar schimmert dann
     schon die nächste Section durch.
     Reihenfolge (jede Zeile überschreibt die davor, falls vom Browser
     unterstützt): erst der von global.js gemessene --vh-Fallback für
     sehr alte Browser, dann 100dvh (aktuelle sichtbare Höhe), zuletzt
     100lvh - die GRÖSSTMÖGLICHE Viewport-Höhe (so, als wäre die Toolbar
     komplett eingeklappt). Das deckt garantiert auch den Bereich hinter
     einer durchsichtigen Toolbar ab, wodurch dort immer nur das eigene,
     richtige Video zu sehen ist statt des nächsten. */
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

/* ---------- headingWithSubtext — an den Stil der übrigen Seiten
   angeglichen: Serif-Überschrift mit weniger Gewicht, dünne goldene
   Trennlinie, gedämpfterer Fließtext ---------- */

.headingWithSubtext {
  text-align: center;
}

.headingWithSubtext h2 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 1.1rem;
}

.headingWithSubtext__rule {
  width: 90px;
  height: 1px;
  background: #e7c250;
  margin: 0 auto 1.1rem;
}

.headingWithSubtext p {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: rgba(242, 237, 225, 0.85);
  max-width: 46ch;
  margin: 0 auto;
}