/* Ospella 2.0 — intro.css: der Startfilm.
 *
 * Portiert am 09.09.2026 aus Ospella 1 (styles/intro.css, Ansage 08.09.2026).
 * Die Filmdatei ist byte-identisch (SHA-256 1ed5a291…), deshalb gelten alle
 * dort gemessenen Zahlen unveraendert weiter.
 *
 * Unterschied zu Ospella 1: Dort lag der Film als Schicht UEBER einem bereits
 * gezeichneten Screen einer Einzelseiten-App. Ospella 2.0 besteht aus
 * einzelnen HTML-Seiten — hier IST index.html der Film, und danach wird zu
 * willkommen.html weitergereicht (Splash entfernt 10.09.2026). Die Schicht braucht deshalb keinen z-index
 * gegen andere Bauteile mehr, aber die Buehne behaelt ihre Aufgabe.
 */

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

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

/* Die Buehne traegt `position: relative` und ist damit der Bezug fuer Knopf
 * und Kennzeichnung. Das ist keine Kosmetik:
 *
 * Absolut gesetzte Bedienelemente suchen sich den naechsten positionierten
 * Vorfahren. Lagen sie in Ospella 1 direkt in der Schicht (die ueber das
 * ganze Fenster geht), klebten sie an DEREN Raendern — gemessen bei 1920 px
 * Fensterbreite lag der Film bei 745–1175 px und der Knopf bei 1770 px, mehr
 * als einen halben Bildschirm daneben. Auf dem Telefon faellt das nie auf,
 * weil dort beides gleich breit ist.
 *
 * Ospella 2.0 setzt der App keine Hoechstbreite (.telefon in basis.css ist
 * 100 %), der Film folgt dem und bleibt damit auch dann richtig, wenn die
 * App spaeter eine bekommt. */
.introbuehne {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--creme);
}

/* DER ZUSCHNITT — 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 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: Sollen 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 %.
 *
 * OFFEN, und es steht auch in NICHT-VEROEFFENTLICHEN.txt Punkt 4: Ob der
 * genutzte MiniMax-Tarif das Verdecken erlaubt, ist NICHT geprueft. Das
 * Wasserzeichen war nie die KI-Kennzeichnung — die steht als Pille daneben
 * und bleibt vom Zuschnitt unberuehrt. */
.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 (WCAG 2.2.2: acht
 * Sekunden automatische Bewegung sind mehr als die erlaubten fuenf).
 *
 * 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 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-family: var(--schrift-text);
  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); }

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

/* Die KI-Kennzeichnung (AI Act Art. 50 Abs. 4). Gleiche Bauart wie der Knopf,
 * damit sie ueber jedem Bild 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 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-family: var(--schrift-text);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

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

/* 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; }
}