/* Cockpit-Teaser hinter dem QR-Code im CAMPEXPO MAG.
Look von jawigo.de: Farben nur über tokens.css, Schrift Open Sans. Beides liegt als unveränderte
Kopie der Website im Teaser-Ordner, weil der Ordner auch für sich allein ausgeliefert wird.
Keine Systemschrift: Open Sans steht vor dem Stapel aus --font-ui, der auf der Website unter
Windows Segoe UI zeigt.
Hochkant- oder Querfassung entscheidet allein das Fensterformat: (orientation: portrait).
teaser.js fragt dieselbe Bedingung ab und setzt data-layout auf .
Eine Bewegungssprache: Auftritte, Abgänge und Pausen stehen in teaser.js, hier stehen nur die
Ausgangswerte (opacity 0) und die Ausrichtung. Je Fassung eine Ausrichtung — quer mittig,
hochkant linksbündig. Kein Element bringt eine eigene Kurve oder eine eigene Dauer mit. */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("fonts/open-sans-latin.woff2") format("woff2");
}
*, *::before, *::after { box-sizing: border-box; }
/* Die sichtbare Fläche, nicht das Layout-Fenster. Safari am iPhone lässt das Layout-Fenster so hoch,
als wären seine Leisten eingefahren; wer 100 % nimmt, reicht unter die Leiste und verliert unten ein
Stück Bild. 100dvh folgt dem, was wirklich zu sehen ist, und wächst mit, sobald die Leiste
verschwindet. Die Zeile mit % bleibt als Rückfall für Browser ohne dvh stehen — dort ändert sich
nichts, weil es dort auch keine ein- und ausfahrenden Leisten gibt. */
html, body { height: 100%; height: 100dvh; }
body {
margin: 0;
overflow: hidden;
background: var(--brand-black);
color: var(--on-graphite-soft);
font-family: "Open Sans", var(--font-ui);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
/* Bühne mit den Szenen. Welche Szene zu sehen ist und wie weit ein Element aufgetreten ist, setzt
teaser.js nach der Abspielzeit der Musik (data-start, data-end, data-in, data-out).
Im Fenster steht immer nur eines: entweder eine Zeile oder eine Aufnahme, nie beides. Deshalb
bekommt jedes von beiden das ganze Fenster, und die Aufnahme braucht keinen Schleier. */
.stage {
position: fixed;
inset: 0;
height: 100%;
height: 100dvh;
overflow: hidden;
background: var(--brand-black);
}
.scene { position: absolute; inset: 0; }
/* Alle Szenen teilen dieselbe Aufteilung: eine Spalte, quer mittig. Hochkant kippt das weiter
unten auf linksbündig — je Fassung eine Ausrichtung. */
.scene-lines, .frame, .scene-devices {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8vw;
text-align: center;
}
.line {
margin: 0;
position: relative;
font-size: clamp(28px, 6.2vh, 76px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -.015em;
color: var(--ink-on-brand);
opacity: 0;
}
.line + .line { margin-top: .42em; }
.line-muted { color: var(--on-graphite-muted); }
/* Genau ein rotes Element im Bild. Es wandert vom Startknopf über „21:04" und die Staccato-Wörter
durch die Geräte in den Satz; auf der Kamerafahrt trägt die App selbst das Rot, am Schluss das
„c1:" der Wortmarke. Ausgezeichnet ist es in index.html. */
.accent { color: var(--brand-red); }
/* Das rote Wort bleibt beisammen: „An- und Abreisen" ist ein Wort mit Bindestrich-Ellipse. Hochkant
bricht die Zeile davor um, nicht mittendrin — sonst steht am Zeilenende ein einzelnes rotes „An-".
Die übrigen Akzente sind einzelne Wörter, für sie ändert sich nichts. */
.line .accent { white-space: nowrap; }
/* Szene 2: Wort und Bild gehören zusammen, stehen aber nacheinander im Fenster, nie nebeneinander.
Die Aufnahme bekommt darum das ganze Fenster: eingepasst (object-fit: contain), außen herum
Markenschwarz. Je Fassung gibt es einen eigenen Zuschnitt (index.html), der quer breit und
hochkant stehend ist — deshalb bleibt außen herum in beiden Fassungen wenig Schwarz. Über ihr liegt nichts — kein Schleier, keine Abdunklung, keine Weichzeichnung; sie
steht so scharf da, wie die Datei hergibt. Den leichten Zug (Bilder fahren, kein Hub) setzt
teaser.js auf das ![]()
selbst. */
.frame { position: absolute; inset: 0; }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; }
/* wählt nur die Datei aus und soll im Aufbau der Seite nicht mitzählen: display: contents
nimmt seinen Kasten heraus, das ![]()
liegt damit unmittelbar in der Fläche. */
.shot picture { display: contents; }
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Szene 3: Geräte im Strichstil der Website. Die Symbole stehen als Vektorgrafik in index.html
selbst und nicht in einer eigenen Datei, weil Safari fremde Dateien in