/* ═══════════════════════════════════════════════════════════════════════
   They Are Someone — Landing Page
   Monochrom. Keine externen Requests. Kein Build-Schritt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Schrift ─────────────────────────────
   Selbst gehostet, kein Google-Fonts-CDN (DSGVO). Drei unicode-range-
   Schnitte: englische Besucher laden nur `latin` (~67 KB). */

@font-face {
    font-family: 'Inter';
    src: url('assets/inter-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/inter-latin-ext.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/inter-intl.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-03FF, U+0400-045F, U+0460-052F, U+0490-0491,
        U+04B0-04B1, U+2116, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* ───────────────────────────── Tokens ───────────────────────────── */

:root {
    --bg: #000000;
    --ink: #f5f5f5;
    /* Wortmarke                */
    --ink-body: #b4b4b4;
    /* Fließtext, Tagline       */
    --ink-mute: #6e6e6e;
    /* Linie, Nebentext         */

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial,
        sans-serif;

    --measure: 34rem;
    /* Lesebreite Werteerklärung */
    --gutter: clamp(1.5rem, 6vw, 3rem);


    /* Der Takt, auf dem die ganze Seite liegt: 130 Schläge pro Minute.
     Jede Verzögerung, jede Dauer und jeder Umlauf rechnet sich hieraus.
     Ändern heißt: nur hier ändern. */
    --beat: 0.462s;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────── Basis ───────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-body);
    font-family: var(--font);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--ink);
    color: var(--bg);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ─────────────────────────────── Hero ───────────────────────────── */

.hero {
    position: relative;
    min-height: 100svh;
    /* stabil gegen ein-/ausfahrende iOS-Leiste */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Der untere Abstand muss den absolut gesetzten Scroll-Hinweis freihalten:
     1.75rem Abstand von unten + 74px Höhe ≈ 102px. 8rem lässt Luft. */
    padding: calc(var(--gutter) + env(safe-area-inset-top)) var(--gutter) calc(8rem + env(safe-area-inset-bottom));
    overflow: hidden;
}

.hero__inner {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Referenzrahmen für die Wortmarke (siehe --wordmark). */
    container-type: inline-size;

    /* Größe der Wortmarke — der Wert, an dem der ganze Hero hängt.
     · 20.4cqw  füllt die Spalte exakt aus: „SOMEONE" ist bei diesem
                Schnitt und Tracking rund 4.86× so breit wie hoch, also
                fluchten Wortmarke, Trennlinie und Tagline auf jeder
                Breite miteinander.
     · 12dvh    lässt sie auf flachen Fenstern (1366×768) mitschrumpfen,
                damit nicht die Tiergrafik die ganze Stauchung trägt.
     · 6.05rem  Deckel, damit sie auf großen Schirmen nicht ausufert. */
    --wordmark: clamp(2.2rem, min(20.4cqw, 12dvh), 6.05rem);
}

/* ── Tiergrafik ──
   Zwei verschachtelte Ebenen, damit sich Parallax (außen, translate) und
   Atmen (innen, scale) nicht um dieselbe transform-Property streiten. */

/* Die Grafik ist quadratisch — ihre Breite ist also auch ihre Höhe. Sie muss
   deshalb gegen die Viewport-HÖHE begrenzt werden, sonst schiebt sie Tagline
   und Scroll-Hinweis aus dem Bild.

   Die Rechnung: verfügbare Höhe minus Wortmarke (zwei Zeilen à 0.88 = 1.76×
   Schriftgrad) minus der feste Rest — Linie, Tagline und Standfirst (~7.9rem)
   plus die Innenabstände des Heros oben und unten (~11rem). Das `max()`
   verhindert, dass die Grafik auf extrem flachen Fenstern rechnerisch
   verschwindet; dort scrollt die Seite dann lieber ein Stück. */

.artwork {
    --reserved: calc((var(--wordmark) * 1.76) + 19rem);
    width: max(9rem, min(78vw, calc(100dvh - var(--reserved))));
    max-width: 100%;
    will-change: transform;
}

@media (min-width: 641px) {
    .artwork {
        width: max(9rem, min(56vw, 30rem, calc(100dvh - var(--reserved))));
    }
}

.artwork img {
    display: block;
    width: 100%;
    height: auto;
    /* Unterkante ins Schwarz auflösen, wie im Entwurf. Der Verlauf setzt
     erst bei 78 % ein — darüber liegen Schweinerüssel und Hühnerkopf. */
    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%, #000 78%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%, #000 78%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
}

/* ── Wortmarke ── */

.wordmark {
    margin: clamp(-1.5rem, -3vw, -0.75rem) 0 0;
    /* rückt an die Grafik heran */
    font-size: var(--wordmark);
    font-weight: 900;
    font-variation-settings: 'opsz'32;
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--ink);
}

.wordmark__line {
    display: block;
}

/* „THEY" und „ARE" schlagen einzeln ein und brauchen dafür jeweils eine
   eigene Box — inline ließe sich nicht skalieren. */
.word {
    display: inline-block;
}

/* ── Trennlinie ── */

.rule {
    position: relative;
    /* trägt den Taktgeber, siehe ::after */
    overflow: hidden;
    width: 100%;
    height: 2px;
    margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(0.9rem, 2.5vw, 1.35rem);
    border: 0;
    background: var(--ink-mute);
    transform-origin: center;
}

/* Der Lichtpunkt, der die Zeit hält. Er steht still außerhalb der Linie,
   solange ihn niemand in Bewegung setzt — ohne JS bleibt er unsichtbar. */
.rule::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--ink), transparent);
    background-repeat: no-repeat;
    background-size: 26% 100%;
    background-position: -30% 0;
}

/* ── Tagline & Standfirst ── */

.tagline,
.standfirst {
    margin: 0;
    text-transform: uppercase;
    line-height: 1.5;
}

.tagline {
    font-size: clamp(1.06rem, 2.55vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 0.185em;
    text-indent: 0.185em;
    /* gleicht das Tracking der letzten Letter aus */
    color: var(--ink-body);
}

.standfirst {
    margin-top: clamp(1.4rem, 4vw, 2.1rem);
    font-size: clamp(0.62rem, 1.9vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    color: var(--ink-mute);
}

/* ── Scroll-Hinweis ── */

.scroll-hint {
    position: absolute;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 50%;
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--ink-mute);
    transition: color 0.4s ease;
}

.scroll-hint:hover,
.scroll-hint:focus-visible {
    color: var(--ink);
}

.scroll-hint__label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
}

.scroll-hint__arrow {
    width: 1px;
    height: 2.25rem;
    background: currentColor;
    transform-origin: top;
    animation: drop 2.8s var(--ease-out) infinite;
}

@keyframes drop {

    0%,
    100% {
        transform: scaleY(0.45);
        opacity: 0.35;
    }

    45% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* ───────────────────────── Werteerklärung ───────────────────────── */

.values {
    padding: clamp(6rem, 18vh, 11rem) var(--gutter) clamp(4rem, 12vh, 7rem);
    display: flex;
    justify-content: center;
}

.values__inner {
    width: 100%;
    max-width: var(--measure);
}

/* Nur direkte Kinder: der Kernsatz steckt in einem <blockquote> und wird
   von dieser Grundregel bewusst nicht erfasst. Sonst überschriebe sie
   dessen font-weight — `.values p` wiegt spezifischer als `.creed__shout`.
   Dadurch kommt der ganze Abschnitt ohne ein einziges !important aus. */

.values__inner>p {
    margin: 0 0 1.85em;
    font-size: clamp(1rem, 2.6vw, 1.1rem);
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.002em;
    text-wrap: pretty;
}

.values__inner>p:last-child {
    margin-bottom: 0;
}

.values__inner>.lead-in {
    margin-bottom: 1.1em;
    color: var(--ink-mute);
}

/* ── Der Kernsatz ── */

.creed {
    margin: 0 0 2.6em;
    padding: 0;
    border: 0;
}

.creed__shout {
    margin: 0 0 0.12em;
    text-wrap: balance;
    font-size: clamp(2.1rem, 8.5vw, 3.35rem);
    font-weight: 900;
    font-variation-settings: 'opsz'32;
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--ink);
}

.creed__quiet {
    margin: 0;
    text-wrap: balance;
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-body);
}

/* ────────────────────────────── Fuß ─────────────────────────────── */

.footer {
    padding: 0 var(--gutter) calc(clamp(3rem, 9vh, 5rem) + env(safe-area-inset-bottom));
    text-align: center;
}

.footer__mark {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: #3a3a3a;
}

/* ═══════════════════════ Bewegung ═══════════════════════════════════
   Der Sprechchor.

   „They are someone" ist kein Satz zum Lesen, es ist ein Satz zum Rufen.
   Auf der Straße wird er skandiert — drei Schläge, drei Wörter, und jeder
   Schlag trifft. Also liegt die ganze Seite auf einem Takt:

     Schlag 0  THEY
     Schlag 1  ARE
     Schlag 2  SOMEONE · der Hintergrund leuchtet auf
     Schlag 3  Trennlinie
     Schlag 4  Tagline
     Schlag 5  Starting Soon
     Schlag 7  Scroll-Hinweis
     Schlag 8  der Taktgeber übernimmt

   Danach hört der Puls nicht auf: Ein Lichtpunkt läuft über die
   Trennlinie, ein zweiter über „STARTING SOON" (um einen halben Umlauf
   versetzt, damit die Zeilen einander antworten statt sich zu
   verdoppeln), alle 24 Schläge geht ein schwacher Stoß über die Tiere,
   und die Absätze der Werteerklärung schnappen im selben Tempo herein.

   Alles Folgende greift nur, wenn JS läuft (.js) UND der Ruf freigegeben
   wurde (.is-chanting, gesetzt sobald die Schrift geladen ist). Ohne JS
   ist die Seite sofort vollständig sichtbar.

   Zur Helligkeit: drei Stöße im Aufbau, danach alle 24 Schläge einer.
   Bei rund zwei Schlägen pro Sekunde bleibt das unterhalb dessen, was
   als Flackern zum Problem wird, und das Aufleuchten des Hintergrunds
   fällt mit dem dritten Stoß zusammen — ein Ereignis, nicht zwei. */

.js .word,
.js .wordmark__line--two,
.js .artwork,
.js .rule,
.js .tagline,
.js .standfirst,
.js .scroll-hint,
.js .reveal {
    opacity: 0;
}

/* ── Der Einschlag ──
   Jedes Wort kommt aus der Unschärfe und minimal zu groß herein, wie
   eines, das mit Wucht an seinen Platz gedrückt wird. */

.js.is-chanting .word--they {
    animation: slam calc(var(--beat) * 0.62) cubic-bezier(0.2, 0.9, 0.1, 1) 0s both;
}

.js.is-chanting .word--are {
    animation: slam calc(var(--beat) * 0.62) cubic-bezier(0.2, 0.9, 0.1, 1) var(--beat) both;
}

.js.is-chanting .wordmark__line--two {
    animation: lock calc(var(--beat) * 0.78) cubic-bezier(0.16, 1, 0.25, 1) calc(var(--beat) * 2) both;
}

@keyframes slam {
    0% {
        opacity: 0;
        transform: scale(1.26);
        filter: blur(9px);
    }

    48% {
        opacity: 1;
    }

    74% {
        transform: scale(0.982);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Der dritte Schlag ist der, um den es geht: Das Wort wird aus weiter
   Sperrung zusammengezogen, statt nur einzublenden. Es landet nicht,
   es rastet ein. */
@keyframes lock {
    0% {
        opacity: 0;
        letter-spacing: 0.42em;
        filter: blur(11px);
        transform: scale(1.06);
    }

    40% {
        opacity: 1;
    }

    80% {
        letter-spacing: -0.052em;
        filter: blur(0);
        transform: scale(0.994);
    }

    100% {
        opacity: 1;
        letter-spacing: -0.035em;
        transform: scale(1);
    }
}

/* ── Das Bild auf dem Schlag ──
   Die Tiere sind von Anfang an da, aber im Halbdunkel. Jeder Ruf wirft
   Licht auf sie; beim dritten bleiben sie hell.

   Die Stöße sind bewusst asymmetrisch gebaut: Der Anstieg dauert rund
   30 ms, das Abklingen zehnmal so lange. Ein gleichmäßiges Auf und Ab
   wäre ein Pulsieren — erst das harte Einsetzen macht daraus einen
   Schlag. Die Prozentwerte sitzen deshalb genau auf den Schlägen:
   3,2 Schläge Gesamtdauer, also liegen Schlag 2 und 3 bei 31,25 % und
   62,5 %. */

.js.is-chanting .artwork {
    animation: struck calc(var(--beat) * 3.2) linear 0s both;
}

@keyframes struck {
    0% {
        opacity: 0;
        transform: scale(1.055);
        filter: brightness(0.22) contrast(1);
    }

    1.4% {
        opacity: 1;
        transform: scale(1.042);
        filter: brightness(1.95) contrast(1.24);
    }

    13% {
        filter: brightness(0.40) contrast(1.02);
    }

    29.6% {
        transform: scale(1.03);
        filter: brightness(0.30) contrast(1);
    }

    31.25% {
        filter: brightness(2.15) contrast(1.3);
    }

    43% {
        transform: scale(1.02);
        filter: brightness(0.42) contrast(1.02);
    }

    60.8% {
        filter: brightness(0.32) contrast(1);
    }

    62.5% {
        transform: scale(1);
        filter: brightness(2.7) contrast(1.42);
    }

    72% {
        filter: brightness(0.86) contrast(1.06);
    }

    84% {
        filter: brightness(1.1) contrast(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) contrast(1);
    }
}

/* ── Der Schlag aus der Ferne ──
   Alle 24 Schläge — gut elf Sekunden — geht derselbe Stoß noch einmal
   über die Tiere, nur ein Achtel so stark. Er sitzt in der Mitte des
   Umlaufs, damit er nicht unmittelbar auf den Aufbau folgt.

   Der Anfangswert entspricht exakt dem Endwert von `struck`, deshalb
   gibt es beim Übergeben keinen Sprung. */

.js.is-chanted .artwork {
    /* Übernimmt den Endzustand von `struck`, dessen Nachwirkung mit dem
     Wechsel der Animation verfällt. */
    opacity: 1;
    animation: embers calc(var(--beat) * 24) linear infinite;
}

@keyframes embers {

    0%,
    47.4% {
        filter: brightness(1) contrast(1);
    }

    48% {
        filter: brightness(1.32) contrast(1.08);
    }

    52% {
        filter: brightness(1.06) contrast(1.01);
    }

    58%,
    100% {
        filter: brightness(1) contrast(1);
    }
}

/* ── Das Aufleuchten ──
   Auf dem dritten Schlag wird der Raum hell. Ein einziger Anstieg über
   rund 14 ms, dann ein Schlag Abklingen — keine Wiederholung, kein
   zweiter Blitz. Der Höhepunkt liegt exakt auf dem dritten Stoß der
   Grafik; für das Auge ist das ein Ereignis, nicht zwei. */

.bloom {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 40%,
            rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 40%, transparent 74%);
}

.js.is-chanting .bloom {
    animation: bloom var(--beat) linear calc(var(--beat) * 2) both;
}

@keyframes bloom {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    22% {
        opacity: 0.44;
    }

    100% {
        opacity: 0;
    }
}

/* ── Nach dem Ruf ──
   Das Leise kommt nach. Immer auf dem Schlag. */

.js.is-chanting .rule {
    animation: strike-out calc(var(--beat) * 0.5) cubic-bezier(0.2, 0.9, 0.1, 1) calc(var(--beat) * 3) both;
}

.js.is-chanting .tagline {
    animation: step calc(var(--beat) * 0.6) cubic-bezier(0.2, 0.9, 0.1, 1) calc(var(--beat) * 4) both;
}

.js.is-chanting .standfirst {
    animation: step calc(var(--beat) * 0.6) cubic-bezier(0.2, 0.9, 0.1, 1) calc(var(--beat) * 5) both;
}

.js.is-chanting .scroll-hint {
    animation: step calc(var(--beat) * 0.9) ease-out calc(var(--beat) * 7) both;
}

@keyframes strike-out {
    0% {
        opacity: 0;
        transform: scaleX(0.06);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes step {
    0% {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* ── Der Taktgeber ──
   Ein Lichtpunkt wandert über die Trennlinie, acht Schläge je Lauf.
   Die Linie selbst ist oben gesetzt (.rule::after); hier wird sie nur
   in Bewegung gebracht. */

.js.is-chanted .rule::after {
    animation: meter calc(var(--beat) * 8) linear infinite;
}

@keyframes meter {
    0% {
        background-position: -30% 0;
    }

    100% {
        background-position: 130% 0;
    }
}

/* ── Derselbe Punkt über „STARTING SOON" ──
   Zwei Farbebenen übereinander: unten die ruhende Zeile, darüber ein
   schmales Licht, das durchwandert. Beides wird auf die Buchstaben
   beschnitten, damit nicht der Kasten leuchtet, sondern die Schrift.

   Der halbe Umlauf Versatz (negative Verzögerung) sorgt dafür, dass
   Linie und Zeile nie gleichzeitig hell sind — sie wechseln sich ab.

   Der Umlauf ist derselbe wie bei der Linie, die Strecke ist kürzer.
   Gemeinsam ist beiden das Tempo, nicht die Geschwindigkeit. */

.js.is-chanted .standfirst {
    /* Der Aufbau der Zeile liegt Schläge zurück; sein Nachwirken verfällt,
     sobald diese Animation übernimmt. */
    opacity: 1;
    transform: none;

    background-image:
        linear-gradient(90deg, transparent, var(--ink), transparent),
        linear-gradient(var(--ink-mute), var(--ink-mute));
    background-repeat: no-repeat, no-repeat;
    background-size: 26% 100%, 100% 100%;
    background-position: -30% 0, 0 0;

    animation: meter-text calc(var(--beat) * 8) linear calc(var(--beat) * -4) infinite;
}

/* Kann der Browser den Verlauf nicht auf die Buchstaben beschneiden,
   bleibt die Zeile schlicht in ihrer Farbe stehen — sichtbar ist sie
   dann immer noch. `color: transparent` darf nur fallen, wenn das
   Beschneiden auch wirklich greift. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .js.is-chanted .standfirst {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

@keyframes meter-text {
    0% {
        background-position: -30% 0, 0 0;
    }

    100% {
        background-position: 130% 0, 0 0;
    }
}

/* ── Werteerklärung im selben Tempo ──
   Kein Weichzeichner, kein langes Aufsteigen: die Absätze setzen ein. */

.js .reveal {
    transform: translateX(-0.6rem);
    transition: opacity calc(var(--beat) * 0.3) linear,
        transform calc(var(--beat) * 0.38) cubic-bezier(0.2, 0.9, 0.1, 1);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ───────────────────── Reduzierte Bewegung ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .word,
    .js .wordmark__line--two,
    .js .artwork,
    .js .rule,
    .js .tagline,
    .js .standfirst,
    .js .scroll-hint,
    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        letter-spacing: inherit;
    }

    .rule::after {
        animation: none !important;
        display: none;
    }

    .scroll-hint__arrow {
        animation: none !important;
    }

    .bloom {
        display: none;
    }

    /* Ohne den wandernden Verlauf bekommt die Zeile ihre Farbe zurück —
     sonst bliebe sie durchsichtig stehen. */
    .js .standfirst {
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        color: var(--ink-mute) !important;
    }
}

/* ──────────────────────────── Ausdruck ──────────────────────────── */

@media print {

    html,
    body {
        background: #fff;
        color: #000;
    }

    .wordmark,
    .creed__shout {
        color: #000;
    }

    .scroll-hint,
    .bloom,
    .rule::after {
        display: none;
    }

    .artwork img {
        -webkit-mask-image: none;
        mask-image: none;
        filter: invert(1);
    }

    /* Auf dem Papier gibt es kein wanderndes Licht. Ohne diese Zeilen
     bliebe „Starting Soon" durchsichtig und damit unsichtbar. Das
     `!important` ist nötig: Die Regel im @supports-Block oben wiegt
     spezifischer, und @media hebt daran nichts. */
    .standfirst {
        background-image: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        color: #000 !important;
    }

    * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}