/* Ospella — intro.css: der Startfilm (Ansage 08.09.2026).

   Liegt ueber allem. Die z-Reihenfolge des Projekts von unten nach oben:
   grundbild -1, navleiste 10, bestaetigung 30, matchtafel 40 — der Film
   steht auf 50 und damit auch ueber einem Match, falls je eines offen waere. */

.introfilm {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--flaeche-grund);
  display: grid;
  place-items: stretch;
  opacity: 1;
  transition: opacity 380ms ease-out;
}

.introfilm.geht { opacity: 0; pointer-events: none; }

/* Der Film folgt der Spalte der App (base.css: .huelle max-width 430px auf
   Desktop). Ein Video ueber die volle Breite eines 27-Zoll-Schirms neben
   einer 430 px schmalen App waere kein Auftakt, sondern ein Bruch. */
.introbuehne {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  height: 100%;
  overflow: hidden;
  background: var(--flaeche-grund);
}

/* DER ZUSCHNITT — hier steckt die einzige gemessene Zahl dieser Datei.

   Die Datei traegt unten rechts ein eingebranntes Wasserzeichen des
   Video-Dienstes („MINIMAX | MiniMax Design"). Gemessen am Bild, Frame bei
   7,5 s, Originalaufloesung 1440 x 2560:

       x 1054–1416  (73,2 – 98,3 % der Breite)
       y 2499–2528  (97,62 – 98,75 % der Hoehe)

   Die Oberkante liegt also bei 97,62 %; noetig waeren 2,38 %. Abgeschnitten
   werden 3,0 % — der Rest ist Sicherheitsabstand fuer die Kantenglaettung
   beim Skalieren.

   Gerechnet wird ueber die Hoehe des Elements: Soll von ihm 97 % sichtbar
   sein, muss es 100/97 = 103,093 % der Huelle hoch sein. `object-position:
   center top` haelt den Anfang oben fest, damit die 3 % wirklich UNTEN
   verschwinden und nicht je zur Haelfte oben und unten.

   Wer die Datei gegen eine ohne Wasserzeichen tauscht: Diese Regel auf
   `height: 100%` zuruecksetzen, sonst fehlen unten grundlos 3 %. */
/* Die beiden Bedienelemente beziehen sich auf die BUEHNE (die hat
   `position: relative`), nicht auf die Schicht — sonst wandern sie auf einem
   breiten Fenster an dessen Raender, weit neben den Film. */
.introfilm .introvideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 103.093%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Der Weg heraus, von der ersten Sekunde an sichtbar. Er steht auf dem Film
   und braucht deshalb einen eigenen Grund — die Farbe darunter wechselt 24
   Bilder je Sekunde, gegen sie laesst sich kein Kontrast rechnen.
   Dunkler Grund mit heller Schrift ist hier keine Palettenrolle, sondern die
   einzige Paarung, die ueber JEDEM Bild dieses Films haelt. */
.introknopf {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.62);
  color: #FFF;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.introknopf:hover { background: rgba(20, 16, 12, 0.78); }

/* Die KI-Kennzeichnung (AI Act Art. 50 Abs. 4). Gleiche Bauart wie der Knopf,
   damit sie ueber jedem Bild des Films lesbar bleibt — aber ohne Rahmen und
   ohne Hand, weil sie nichts tut. Sie steht dem Ueberspringen-Knopf
   gegenueber, nicht unter ihm: nebeneinander bleiben beide im sicheren
   Bereich, uebereinander schoebe sich eines davon auf die Home-Leiste. */
.introki {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.62);
  color: #FFF;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.introknopf:focus-visible {
  outline: 3px solid #FFF;
  outline-offset: 2px;
}

/* Waehrend der Film laeuft, soll nichts dahinter scrollen — auf iOS zieht
   sonst der Screen unter der Schicht mit. */
body.mit-intro { overflow: hidden; }

/* §6.5: Der Film startet bei reduzierter Bewegung gar nicht erst (intro.js).
   Diese Regel ist der Gurt fuer den Fall, dass die Schicht doch im DOM
   landet — etwa wenn die Einstellung mitten im Film umgestellt wird. */
@media (prefers-reduced-motion: reduce) {
  .introfilm { display: none; }
}