/* ===============================================================
   pause.css · DIE PAUSE-SEITE (Neufassung 14.11.2026)

   Wort des Nutzers: »Die Pause Seite muss einen völlig anderen Stil
   erhalten. Wir bauen wie im Footer das Logo Video ein, elegant, edel.
   Verwende dasselbe Video der Startseite. Alles muss so blitzen und
   spiegeln, wie der ganze Rest unserer Seite. Weltklasse, High-End,
   cineastisch.«

   AUFBAU    (seit 14.11.2026 abends, Wort des Nutzers: »Mache das
             Video bildschirmfüllend. Formatiere diesen Text schwebend
             über das Video ohne Hintergrund oder Kachel. Passe die
             Position des Logo-Videos darunter an.«) Der Film der
             Startseite füllt den Schirm. Darüber, auf einer Achse in
             der Mitte: Haarlinie, Botschaft, Eintrag, darunter das
             Zeichen. Oben Version und Zugang. Ein Aufbau für jedes
             Format, die Luft hängt an der Höhe des Schirms.
   FILM      ein- und ausgeblendet wie auf der Startseite (Wort des
             Nutzers: »exakt so«), siehe DER FILM.
   ZEICHEN   das Logo der Fusszeile läuft freigestellt über dem Film
             (siehe DAS ZEICHEN).
   LICHT     Lichtfall an der Haarlinie, Schärfe (die Zeilen ziehen
             aus der Unschärfe), der Sendeknopf leuchtet auf, sobald
             die Adresse gültig ist.
   BEWEGUNG  nur transform, scale, opacity und filter auf Schrift. Der
             Auftritt läuft ohne Skript (animation … backwards): fällt
             das Skript aus, steht alles. Weniger Bewegung: kein
             Auftritt, kein Film, kein Licht.
   MASSE     φ-Reihe (0.236 · 0.382 · 0.618 · 1 · 1.618 · 2.618 · 4.236).

   Ein Stil für die ganze Seite samt Tor (davor style.css mit 180 KB,
   59-pause.css und 60-gate.css). Skript: js/pause.js, js/ophyr-gate.js.
   =============================================================== */

/* ---------------------------------------------------------------
   SCHRIFT (selbst gehostet, wie in src/stil/01-globals.css)
   --------------------------------------------------------------- */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ersatzschriften mit Metrik: bis die Webschrift da ist, rückt nichts */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');
    size-adjust: 111.62%;
    ascent-override: 86.72%;
    descent-override: 22.49%;
    line-gap-override: 0%;
}

/* ---------------------------------------------------------------
   GRUND
   --------------------------------------------------------------- */

:root {
    color-scheme: dark;

    --obsidian: #0d0d0d;
    --obsidian-rgb: 13, 13, 13;
    --tinte: #f6f2ea;
    --tinte-rgb: 246, 242, 234;
    --gold: #c4a169;
    --gold-rgb: 196, 161, 105;
    --gold-hell: #d4bc91;
    --gold-hell-rgb: 212, 188, 145;
    --gold-tief: #a6854e;
    --glanz-rgb: 251, 247, 235;
    /* Warnton: auf Obsidian 7.4:1 (das frühere #b04c4c mass 3.4:1) */
    --warnung: #e2978a;

    --schrift: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --kurve: cubic-bezier(0.16, 1, 0.3, 1);
    --kurve-schaerfe: cubic-bezier(0.33, 0, 0.15, 1);
    --kurve-ruhe: cubic-bezier(0.382, 0, 0.618, 1);
    --linie: max(1px, 0.0618rem);

    /* Sperrungen (em), die das Tor mitbenutzt */
    --ls-2: 0.382em;
    --ls-3: 0.236em;
    --ls-4: 0.146em;
}

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

html {
    background: var(--obsidian);
    /* Grosse Schirme: alle Masse (rem) wachsen mit, bis zum Anderthalbfachen.
       Telefon, Tablet und Laptop bleiben bei der Grundgrösse (1440 × 900
       rechnet 15.1px, es gilt die Untergrenze). 1920 × 1080: 20.2px. */
    font-size: clamp(100%, min(1.05vw, 1.9vh), 150%);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100svh;
    overflow-x: clip;
    background: var(--obsidian);
    color: var(--tinte);
    font-family: var(--schrift);
    font-weight: 300;
    line-height: 1.618;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.pause-sprung {
    position: absolute;
    top: 0.618rem;
    left: 0.618rem;
    z-index: 2000;
    padding: 0.618rem 1rem;
    background: var(--obsidian);
    border: var(--linie) solid var(--gold);
    color: var(--tinte);
    font-size: 0.887rem;
    text-decoration: none;
    transform: translateY(-300%);
}

.pause-sprung:focus {
    transform: none;
}

/* ---------------------------------------------------------------
   DER FILM: bildschirmfüllend hinter allem, wie die Bühne der
   Startseite (src/stil/60-prozess-stage.css, 03-hero.css).

   BLENDE    dieselbe wie dort: opacity in φ² s (2.618 s) mit der Kurve
             cubic-bezier(0.33, 0, 0.15, 1). Der Film hebt sich aus dem
             Schwarz, geht 2.7 s vor seinem Ende ins Schwarz zurück,
             ruht 0.4 s und beginnt von vorn. Die Zustände setzt
             pause.js (film-an), die Blende rechnet die Grafikkarte.
   SCHLEIER  derselbe wie dort: eine Verdichtung hinter dem Text
             (Ellipse, Deckung φ⁻²) über der Abdunklung zum Rand. Dazu
             ein kurzer Schatten oben für Version und Zugang.
   ERSATZ    ohne Skript, bei weniger Bewegung, Datensparen oder
             gesperrtem Abspielen steht das erste Bild des Films
             (pause-film--film setzt pause.js, solange der Film läuft).
   --------------------------------------------------------------- */

.pause-film {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    /* lvh: die Bühne pumpt nicht mit der Adressleiste des Telefons */
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    background: #000;
}

.pause-film__bild,
.pause-film__lauf {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Das Standbild weicht dem Film ohne Blende (die Bühne ist dann noch
   schwarz); kehrt es als Ersatz zurück, blendet es ein */
.pause-film__bild {
    transition: opacity 0.618s var(--kurve-ruhe);
}

.pause-film--film .pause-film__bild {
    opacity: 0;
    transition: none;
}

.pause-film__lauf {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.618s cubic-bezier(0.33, 0, 0.15, 1);
}

.pause-film__lauf.film-an {
    opacity: 1;
}

/* Schleier des Auftritts für das Standbild (ohne Skript): es hebt sich
   aus dem Schwarz. Läuft der Film, blendet er selbst ein. */
.pause-film::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.pause-film.pause-film--film::before {
    animation: none;
}

.pause-film::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(var(--obsidian-rgb), 0.5) 0%, rgba(var(--obsidian-rgb), 0) 6.854rem),
        radial-gradient(ellipse 61.8% 38.2% at center, rgba(var(--obsidian-rgb), 0.382), transparent 100%),
        radial-gradient(circle at center, rgba(var(--obsidian-rgb), 0.1) 0%, rgba(var(--obsidian-rgb), 0.65) 100%);
}

/* ---------------------------------------------------------------
   DIE BÜHNE: eine Achse in der Mitte des Schirms. Botschaft und
   Eintrag, darunter das Zeichen, alles schwebt über dem Film. Am
   Telefon steht alles im ersten Bild: die Luft hängt an der Höhe des
   Schirms (--k), gerechnet für die sichtbare Fläche echter Geräte
   (360 × 648, 393 × 659).
   --------------------------------------------------------------- */

.pause-buehne {
    --rand: clamp(1.618rem, 6.18vw, 2.618rem);
    /* Einheit der Luft: 1rem auf hohen Schirmen, auf flachen weniger
       (648px hoch: 0.67rem). Alle Abstände sind k · φⁿ. */
    --k: clamp(0.618rem, 2.4svh - 0.3rem, 1rem);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    /* Die Zeile oben bleibt frei, damit nichts rückt (Version und
       Zugang stehen seit dem 14.11.2026 links unten) */
    padding:
        calc(max(0.382rem, env(safe-area-inset-top)) + 2.618rem)
        max(var(--rand), env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(var(--rand), env(safe-area-inset-left));
}

/* Botschaft und Eintrag: kein Grund, keine Kachel. Ein weicher Hof um
   die Schrift hält sie auf hellen Filmbildern lesbar. */
.pause-saal {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 34rem;
    text-align: center;
}

/* ---------------------------------------------------------------
   DAS ZEICHEN (Wort des Nutzers 14.11.2026: »das transparente
   Logo-Video direkt über dem anderen Video laufen lassen«, nach der
   Probe: »Das ist perfekt geworden«). Das Logo der Fusszeile läuft
   freigestellt über dem Film, unter der Botschaft.

   WIE       zwei Wege, je nach Maschine (tools/zeichen-film.py rechnet
             beide Filme):
             DIREKT  Chrome, Edge, Firefox und Android spielen
                     videos/zeichen_frei_1152.webm selbst ab, einen Film
                     mit echter Durchsicht (pause-zeichen--direkt). Das
                     läuft auch, wenn die Seite als Datei geöffnet ist.
             FLÄCHE  Safari kennt kein WebM mit Durchsicht. Dort trägt
                     videos/zeichen_frei_1152.mp4 oben die Farbe und
                     darunter die Deckung, pause.js setzt beides in
                     jedem Bild auf der Zeichenfläche zusammen (WebGL).
   SCHATTEN  ein enger Saum und ein weiter Hof liegen im Film selbst
             unter dem Logo: sie lösen das Gold vom hellen Film und
             kommen und gehen mit ihm. Im Browser rechnet dafür nichts.
   RAHMEN    um das Logo steht Luft (96 von 1472 Pixeln je Seite),
             darin laufen Lichtschein und Schatten aus. Das Logo selbst
             misst 83.22 % der Breite des Rahmens (--tinte-b).
   ERSATZ    ohne Skript, ohne WebGL, bei weniger Bewegung, Datensparen
             oder gesperrtem Abspielen steht das Logo an genau der
             Stelle des fertigen Logos im Film.
   --------------------------------------------------------------- */

.pause-zeichen {
    flex: none;
    pointer-events: none;
}

/* Der Rahmen trägt oben 15 % und unten 13 % Luft um die Tinte: oben
   dient sie als Abstand zum Knopf, unten wird sie aufgehoben, damit
   die Achse in der Mitte des Schirms ruht */
.pause-zeichen__rahmen {
    --tinte-b: min(62vw, 18rem);
    position: relative;
    width: calc(var(--tinte-b) / 0.8322);
    aspect-ratio: 1152 / 632;
    margin-bottom: calc(var(--tinte-b) * -0.0618);
}

/* Lage des fertigen Logos im Rahmen (aus dem Film gerechnet). Ein
   weicher Schatten löst das stehende Logo vom Film wie der Saum im Film. */
.pause-zeichen__logo {
    position: absolute;
    left: 9.304%;
    top: 14.96%;
    width: 83.22%;
    height: auto;
    filter: drop-shadow(0 0 0.618rem rgba(0, 0, 0, 0.5));
    transition: opacity 0.854s var(--kurve);
}

.pause-zeichen__bild {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.854s var(--kurve);
}

/* Der Film selbst bleibt unsichtbar, er speist nur die Zeichenfläche.
   Er behält die Fläche des Rahmens: manche Maschinen rechnen einen Film
   nur so gross, wie sein Element misst (gemessen in WebKit unter
   Windows: ein Element von 2 Pixeln lieferte Bilder von 2 Pixeln). */
.pause-zeichen__film {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.854s var(--kurve);
}

/* pause-zeichen--wartet und pause-zeichen--an setzt nur pause.js */
.pause-zeichen--wartet .pause-zeichen__logo {
    opacity: 0;
    animation: none;
}

.pause-zeichen--an .pause-zeichen__bild {
    opacity: 1;
}

/* DIREKT: der Film mit echter Durchsicht zeigt sich selbst, die
   Zeichenfläche bleibt leer */
.pause-zeichen--direkt .pause-zeichen__bild {
    display: none;
}

.pause-zeichen--direkt.pause-zeichen--an .pause-zeichen__film {
    opacity: 1;
}

/* ---------------------------------------------------------------
   DIE BOTSCHAFT (Feinschliff 14.11.2026 abends, Wort des Nutzers:
   »Diese Texte und Bereich müssen auf der Pauseseite absolut edel,
   cineastisch, high-end, ästhetisch erscheinen«). Gesetzt in der
   Handschrift der Startseite, dort gemessen (#home-hero-stage):

     VORSPANN   »Ophyr ist«: Versalien in Gold, Sperrung φ⁻¹ em, Zeile 1
                (wie .prozess-stage-overtitle).
     TITEL      »bald« / »verfügbar.«: zwei grosse Worte untereinander,
                Schnitt 300, Sperrung 0.236em, Zeile √φ, reines Weiss
                (wie .prozess-stage-title, »Belebung« über »Gold«).
     HAARLINIE  trennt Aussage und Einladung, glüht mit dem Auftritt auf.
     FRAGE      die Stimme: Montserrat 300 in Elfenbein, ruhig gesetzt.
     ANWEISUNG  das Etikett des Feldes: kleine Versalien in Gold,
                gesperrt, wie die Bezeichnungen im Datenblatt des Store.
     FELD       keine Fläche, nur eine goldene Haarlinie: die Adresse
                steht frei über dem Film. Mit dem Fokus zieht ein Licht
                aus der Mitte über die Linie.

   Hof um jede Schrift wie auf der Startseite (0 1px 9.888px, Schwarz
   zu 55 %): er trägt sie auf hellen Filmbildern. Fünf Grade, ein
   Schnitt (300), Gold nur an Vorspann, Etikett und Linien.
   --------------------------------------------------------------- */

.pause-saal {
    text-shadow: 0 1px 0.618rem rgba(0, 0, 0, 0.55);
}

.pause-titel {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--schrift);
    font-weight: 300;
    text-transform: uppercase;
}

/* DIE TEXTE GEHEN UND KOMMEN MIT DEM FILM (Wort des Nutzers 14.11.2026
   nachts: »Die gesamten Textobjekte sollen jeweils auch mit dem Video
   ausblenden und dann mit dem nächsten Video wieder sich so einblenden
   wie beim Aufruf der Seite«, »Es dürfen keine Linien übrig bleiben«,
   »Auch das Ausblenden muss absolut cineastisch aussehen«).

   ABGANG   beginnt der Film ins Schwarz zu blenden, geht alles, was
            über ihm schwebt, in umgekehrter Folge des Auftritts: erst
            der Sendeknopf, dann Feld, Etikett, Frage, die Haarlinie
            (sie zieht sich zur Mitte zurück), die beiden grossen Worte,
            der Vorspann, zuletzt Version und Zugang. Jedes Objekt löst
            sich in die Unschärfe, wie es beim Auftritt aus ihr kam
            (pause-buehne--geht, setzt pause.js). Die Staffel endet mit
            dem Film im Schwarz: dort steht nur das Zeichen.
   SPRACHE  im Schwarz wechseln alle Texte die Sprache: Deutsch,
            Französisch, Italienisch, Englisch, dann wieder Deutsch.
   AUFTRITT fällt die Klasse mit dem neuen Durchlauf, beginnt der
            Auftritt der Seite von vorn (siehe DER AUFTRITT): dieselben
            Animationen, dieselbe Staffel wie beim Aufruf.
   RUHE     steht der Besucher im Feld, hat er schon geschrieben, ist
            der Dank erschienen oder das Tor offen, bleibt alles stehen
            und die Sprache, wie sie ist. Tritt er ins Feld, während
            die Texte gehen, stehen sie sofort wieder
            (pause-buehne--steht). */
.pause-buehne--steht .pause-titel__vor,
.pause-buehne--steht .pause-titel__wort,
.pause-buehne--steht .pause-linie,
.pause-buehne--steht .pause-linie::after,
.pause-buehne--steht .pause-frage,
.pause-buehne--steht .pause-form__wort,
.pause-buehne--steht .pause-feld,
.pause-buehne--steht .pause-siegel,
.pause-buehne--steht .pause-fuss {
    animation: none;
}

.pause-buehne--geht .pause-titel__vor,
.pause-buehne--geht .pause-titel__wort,
.pause-buehne--geht .pause-frage,
.pause-buehne--geht .pause-form__wort,
.pause-buehne--geht .pause-feld,
.pause-buehne--geht .pause-siegel,
.pause-buehne--geht .pause-fuss {
    animation: pause-abgang 1.236s cubic-bezier(0.382, 0, 0.854, 0.618) calc(var(--j, 0) * 0.146s) forwards;
}

.pause-buehne--geht .pause-linie {
    animation: pause-linie-ab 1.236s cubic-bezier(0.382, 0, 0.854, 0.618) calc(var(--j, 0) * 0.146s) forwards;
}

.pause-buehne--geht .pause-linie::after {
    animation: none;
}

/* Folge des Abgangs, von unten nach oben */
.pause-siegel { --j: 0; }
.pause-feld { --j: 1; }
.pause-form__wort { --j: 2; }
.pause-frage { --j: 3; }
.pause-linie { --j: 4; }
.pause-titel__wort + .pause-titel__wort { --j: 5; }
.pause-titel__vor + .pause-titel__wort { --j: 6; }
.pause-titel__vor { --j: 7; }
.pause-fuss { --j: 8; }

@keyframes pause-abgang {
    to {
        opacity: 0;
        filter: blur(0.382rem);
        scale: 1.0382;
    }
}

@keyframes pause-linie-ab {
    to {
        opacity: 0;
        scale: 0 1;
    }
}

/* Der Nachlauf der Sperrung wird aufgehoben, jede Zeile steht mittig */
.pause-titel__vor {
    display: block;
    margin-right: -0.618em;
    font-size: clamp(0.887rem, 4.4cqi, 1rem);
    line-height: 1;
    letter-spacing: 0.618em;
    white-space: nowrap;
    color: var(--gold);
}

/* Das längste Wort (»disponibile.«) misst mit Sperrung 9.4em: auf dem
   schmalsten Telefon (308px Achse) bleibt es bei 9.6cqi in einer Zeile */
.pause-titel__wort {
    display: block;
    margin-right: -0.236em;
    font-size: clamp(1.618rem, 9.6cqi, 3.330rem);
    line-height: 1.272;
    letter-spacing: 0.236em;
    white-space: nowrap;
    color: #fff;
}

.pause-titel__vor + .pause-titel__wort {
    margin-top: calc(var(--k) * 1.618);
}

/* Die Haarlinie zwischen Aussage und Einladung */
.pause-linie {
    position: relative;
    display: block;
    width: 38.2%;
    height: var(--linie);
    margin-top: calc(var(--k) * 1.618);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-hell-rgb), 0.618) 50%, rgba(var(--gold-rgb), 0));
}

/* Lichtfall: ein heller Kern, der mit dem Auftritt aufglüht und verglimmt */
.pause-linie::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-hell-rgb), 0.618) 38.2%, rgb(var(--glanz-rgb)) 50%, rgba(var(--gold-hell-rgb), 0.618) 61.8%, rgba(var(--gold-rgb), 0) 100%);
    opacity: 0;
}

/* Frage, Etikett und Feld bleiben schmal (φ⁷), der Titel darf breiter laufen */
.pause-wechsel {
    display: grid;
    width: 100%;
    max-width: 25.888rem;
}

.pause-wechsel > * {
    grid-area: 1 / 1;
    min-width: 0;
}

/* Die Frage: Montserrat (Wort des Nutzers 14.11.2026) */
.pause-frage {
    margin: calc(var(--k) * 1.618) 0 0;
    font-family: var(--schrift);
    font-size: clamp(0.95rem, 4.5cqi, 1.146rem);
    font-weight: 300;
    line-height: 1.382;
    letter-spacing: 0.0382em;
    text-wrap: balance;
    color: rgba(253, 252, 248, 0.92);
}

/* Schmale Telefone (Achse unter 21rem): die deutsche Frage braucht zwei
   Zeilen, die anderen Sprachen eine. Zwei Zeilen bleiben frei, damit
   beim Wechsel der Sprache nichts ruckt. */
@container (max-width: 21rem) {
    .pause-frage {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.764em;
    }
}

/* ---------------------------------------------------------------
   DER EINTRAG
   --------------------------------------------------------------- */

.pause-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: calc(var(--k) * 2.618) 0 0;
}

/* Etikett und Meldung in derselben Zelle: meldet das Feld einen Fehler
   (pause-form--falsch, setzt pause.js), tritt die Meldung an die Stelle
   des Etiketts, nichts rückt */
.pause-form__kopf {
    display: grid;
    align-items: end;
    /* Zwei Zeilen des Etiketts bleiben frei, auch wenn eine Sprache nur
       eine braucht: beim Wechsel der Sprache rückt nichts */
    min-height: 2.544rem;
}

.pause-form__kopf > * {
    grid-area: 1 / 1;
    margin: 0;
    transition: opacity 0.382s var(--kurve);
}

.pause-form--falsch .pause-form__wort {
    opacity: 0;
}

/* Das Etikett: kleine Versalien in Gold, gesperrt. Es bricht
   ausgewogen auf zwei Zeilen (als Block: in einem Flex-Kasten bräche
   es gierig, »E-« stünde allein am Zeilenende). */
.pause-form__wort {
    display: block;
    margin-right: -0.236em;
    font-size: 0.786rem;
    font-weight: 400;
    line-height: 1.618;
    letter-spacing: 0.236em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--gold-hell);
}

.pause-form__fehler {
    font-size: 0.887rem;
    font-weight: 400;
    line-height: 1.382;
    letter-spacing: 0.0236em;
    color: var(--warnung);
    opacity: 0;
}

.pause-form--falsch .pause-form__fehler {
    opacity: 1;
}

.pause-feld {
    position: relative;
    margin-top: calc(var(--k) * 0.618);
}

/* Das Feld: keine Fläche, nur die Haarlinie darunter. Die Adresse steht
   in derselben Schrift wie die Frage frei über dem Film. */
.pause-feld__eingabe {
    display: block;
    width: 100%;
    height: 3.236rem;
    margin: 0;
    padding: 0 0.618rem;
    border: 0;
    border-bottom: var(--linie) solid rgba(var(--gold-hell-rgb), 0.618);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #fff;
    caret-color: var(--gold-hell);
    font-family: var(--schrift);
    font-size: 1.146rem;      /* über 16px: iOS zoomt nicht ins Feld */
    font-weight: 300;
    letter-spacing: 0.0618em;
    text-align: center;
    text-shadow: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.382s var(--kurve);
}

.pause-feld__eingabe::placeholder {
    color: rgba(253, 252, 248, 0.5);
    font-weight: 300;
    opacity: 1;
    transition: opacity 0.382s var(--kurve);
}

.pause-feld__eingabe:focus {
    border-bottom-color: rgba(var(--gold-hell-rgb), 0.382);
}

.pause-feld__eingabe:focus::placeholder {
    opacity: 0.382;
}

/* Autofill: die Maschine legte sonst eine eigene Fläche ins Feld. Die
   lange Übergangszeit hält ihre Farbe fern, das Feld bleibt frei. */
.pause-feld__eingabe:-webkit-autofill,
.pause-feld__eingabe:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: var(--gold-hell);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Lichtfang: mit dem Fokus zieht eine helle Haarlinie aus der Mitte
   über die Linie des Feldes */
.pause-feld__linie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(1px, 0.09rem);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-hell-rgb), 0.854) 30%, rgb(var(--glanz-rgb)) 50%, rgba(var(--gold-hell-rgb), 0.854) 70%, rgba(var(--gold-rgb), 0) 100%);
    opacity: 0;
    scale: 0.146 1;
    pointer-events: none;
    transition:
        scale 0.854s var(--kurve),
        opacity 0.382s var(--kurve);
}

.pause-feld__eingabe:focus + .pause-feld__linie {
    opacity: 1;
    scale: 1 1;
}

.pause-feld__eingabe.ist-falsch {
    border-bottom-color: var(--warnung);
}

/* DER SENDEKNOPF (Wort des Nutzers 14.11.2026: »Lösche den Button.
   Erzeuge statt dem Button eine Kopie unseres runden Chevrons der
   Seite«). Eine Kopie des Goldsiegels der Startseite (.gold-siegel in
   src/stil/60-prozess-stage.css): runder Knopf im Mass des Menüknopfs
   (2 · φ rem), Obsidian mit Licht von oben, goldene Haarlinie als
   Fassung, darin Kreis und Punkt.
   ZUSTAND  Ist die Adresse gültig (pause-form--bereit, setzt pause.js),
            leuchtet die Fassung auf, der Punkt wächst, eine Welle löst
            sich vom Knopf: dann sendet er. Davor ruht er. */
.pause-siegel {
    --siegel-d: 3.236rem;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--siegel-d);
    height: var(--siegel-d);
    margin: calc(var(--k) * 1.618) auto 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.0382), rgba(255, 255, 255, 0) 50%),
        rgba(var(--obsidian-rgb), 0.5);
    box-shadow:
        0 0.618rem 1.618rem rgba(0, 0, 0, 0.382),
        inset 0 1px 0 rgba(255, 255, 255, 0.0618);
    color: var(--gold-hell);
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    transition: opacity 0.382s var(--kurve);
}

/* Trefferfläche: eine unsichtbare Scheibe um den Knopf */
.pause-siegel::before {
    content: '';
    position: absolute;
    inset: -0.618rem;
    z-index: -1;
    border-radius: 50%;
}

.pause-siegel:focus-visible {
    outline: 0.118rem solid #fff;
    outline-offset: 0.236rem;
}

/* Die Fassung: ein Ring von einem Pixel, oben im Licht, an den Flanken
   im Schatten, unten mit Widerschein */
.pause-siegel__kante {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(to bottom,
        rgba(var(--gold-hell-rgb), 0.854) 0%,
        rgba(var(--gold-rgb), 0.382) 38.2%,
        rgba(var(--gold-rgb), 0.236) 61.8%,
        rgba(var(--gold-hell-rgb), 0.5) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.618;
    pointer-events: none;
    transition: opacity 0.382s var(--kurve);
}

/* Die Welle: ein goldener Kreis löst sich leise vom Knopf */
.pause-siegel__welle {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid rgba(var(--gold-hell-rgb), 0.618);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

/* Das Zeichen: Kreis mit Punkt, Haarlinie in Gold */
.pause-siegel__zeichen {
    position: relative;
    z-index: 2;
    display: block;
    width: 1.618rem;
    height: 1.618rem;
    overflow: visible;
    opacity: 0.618;
    transition:
        transform 0.618s var(--kurve),
        opacity 0.382s var(--kurve);
}

.pause-siegel__kreis {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
}

.pause-siegel__punkt {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.618s var(--kurve);
}

/* Bereit: die Adresse ist gültig */
.pause-form--bereit .pause-siegel {
    cursor: pointer;
}

.pause-form--bereit .pause-siegel__kante,
.pause-form--bereit .pause-siegel__zeichen {
    opacity: 1;
}

.pause-form--bereit .pause-siegel__punkt {
    transform: scale(1.382);
}

@media (hover: hover) {
    .pause-form--bereit .pause-siegel:hover .pause-siegel__zeichen {
        transform: scale(1.118);
    }

    .pause-form--bereit .pause-siegel:hover .pause-siegel__punkt {
        transform: scale(1.618);
    }
}

.pause-form--bereit .pause-siegel:active .pause-siegel__zeichen {
    transform: scale(0.92);
    transition-duration: 0.118s;
}

/* Die Adresse ist unterwegs */
.pause-form--sendet .pause-siegel {
    opacity: 0.618;
    cursor: progress;
}

.pause-gate-trigger:focus-visible,
.pause-gate-close:focus-visible,
.pause-gate-submit:focus-visible {
    outline: 1px solid var(--gold-hell);
    outline-offset: 0.236rem;
}

/* ---------------------------------------------------------------
   DER DANK (pause.js setzt pause-wechsel--dank)
   --------------------------------------------------------------- */

.pause-eintrag {
    transition:
        opacity 0.382s var(--kurve-ruhe),
        visibility 0s linear 0.382s;
}

.pause-dank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--k) * 1.618);
    opacity: 0;
    visibility: hidden;
}

.pause-wechsel--dank .pause-eintrag {
    opacity: 0;
    visibility: hidden;
}

.pause-wechsel--dank .pause-dank {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.854s var(--kurve) 0.382s;
}

.pause-dank__zeichen {
    width: 2.618rem;
    height: 2.618rem;
    stroke: var(--gold-hell);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pause-dank__kreis {
    stroke-dasharray: 142;
    stroke-dashoffset: 142;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.pause-dank__haken {
    stroke-dasharray: 27;
    stroke-dashoffset: 27;
}

.pause-wechsel--dank .pause-dank__kreis {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.236s var(--kurve) 0.382s;
}

.pause-wechsel--dank .pause-dank__haken {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.618s var(--kurve) 1s;
}

.pause-dank__titel {
    margin: var(--k) -0.236em 0 0;
    outline: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.382;
    letter-spacing: 0.236em;
    text-transform: uppercase;
    color: var(--gold-hell);
}

.pause-dank__text {
    max-width: 21rem;
    margin: calc(var(--k) * 0.618) 0 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.618;
    letter-spacing: 0.0146em;
    text-wrap: pretty;
    color: rgba(var(--tinte-rgb), 0.854);
}

/* ---------------------------------------------------------------
   ZUGANG UND VERSION: in der linken unteren Ecke des Schirms, der
   Punkt oben, die Versionsnummer darunter (Wort des Nutzers
   14.11.2026). Zuvor standen beide oben auf dem Film.
   --------------------------------------------------------------- */

.pause-fuss {
    /* Auf dem Film: helle Tinte mit Hof (auf hellem Filmbild 5:1) */
    --fuss-tinte: rgba(var(--tinte-rgb), 0.786);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding:
        0
        0
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    text-shadow: 0 0 0.382em rgba(0, 0, 0, 0.618);
}

/* Gestempelt von tools/build-upload.ps1 bei jedem Upload */
.ophyr-version {
    margin: 0;
    /* Erst 60 % kleiner als 0.618rem, dann wieder 50 % grösser (Worte
       des Nutzers 14.11.2026) */
    font-size: calc(0.618rem * 0.4 * 1.5);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.146em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Weiss mit 50 % Deckkraft (Wort des Nutzers 14.11.2026) */
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.ophyr-version:empty {
    display: none;
}

.pause-gate-trigger {
    position: relative;
    /* Kein Wort mehr, nur ein stiller Punkt (Wort des Nutzers
       14.11.2026). Der Name »Zugang« steht als aria-label am Knopf. */
    /* Der Punkt steht bündig über der Versionsnummer */
    margin: 0 0 -0.382rem -0.618rem;
    padding: 0;
    width: 1.618rem;
    height: 1.618rem;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Tippfläche unsichtbar auf 44px gepolstert */
.pause-gate-trigger::before {
    content: '';
    position: absolute;
    inset: -0.618rem;
}

/* Der Punkt: Weiss mit 50 % Deckkraft (Wort des Nutzers 14.11.2026,
   zuvor Schwarz mit 80 %) */
.pause-gate-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.382rem;
    height: 0.382rem;
    margin: -0.191rem 0 0 -0.191rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------
   NACH DER HÖHE DES SCHIRMS
   --------------------------------------------------------------- */

/* Grosse Schirme: das Zeichen wächst mit */
@media (min-width: 64rem) and (min-height: 50rem) {
    .pause-zeichen__rahmen {
        --tinte-b: 21rem;
    }
}

/* Flache Schirme (Telefon quer): Zeichen und Schrift werden kleiner,
   die Luft rückt zusammen */
@media (max-height: 34rem) {
    .pause-zeichen__rahmen {
        --tinte-b: min(40vw, 12rem);
    }

    /* Die beiden grossen Worte stehen nebeneinander */
    .pause-titel {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 0.618rem;
    }

    .pause-titel__vor {
        flex-basis: 100%;
        font-size: 0.786rem;
        text-align: center;
    }

    .pause-titel__wort {
        font-size: 1.382rem;
    }

    .pause-titel__vor + .pause-titel__wort,
    .pause-titel__wort {
        margin-top: var(--k);
    }

    .pause-linie,
    .pause-frage {
        margin-top: var(--k);
    }

    .pause-frage {
        font-size: 0.887rem;
    }

    .pause-zeichen__rahmen {
        --tinte-b: min(34vw, 10rem);
    }

    .pause-form {
        margin-top: var(--k);
    }

    /* Die Achse ist hier breit, jedes Etikett steht in einer Zeile */
    .pause-form__kopf {
        min-height: 0;
    }

    .pause-siegel {
        margin-top: var(--k);
    }

    .pause-form__fehler {
        font-size: 0.786rem;
    }
}

/* ---------------------------------------------------------------
   DER AUFTRITT (ohne Skript, nur bei voller Bewegung). Der Film hebt
   sich aus dem Schwarz, die Haarlinie glüht auf, die Zeilen ziehen
   gestaffelt aus der Unschärfe, das Zeichen tritt auf.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .pause-film::before {
        animation: pause-schleier 2.618s var(--kurve-ruhe) backwards;
    }

    /* Ohne Film (kein Skript, Ersatz) blendet das stehende Logo ein */
    .pause-zeichen__logo {
        animation: pause-ein 1.618s var(--kurve) 1s backwards;
    }

    .pause-linie {
        animation: pause-linie 1.236s var(--kurve) 1.618s backwards;
    }

    .pause-linie::after {
        animation: pause-glut 2.618s var(--kurve-ruhe) 1.618s backwards;
    }

    .pause-titel__vor,
    .pause-titel__wort,
    .pause-frage,
    .pause-form__wort,
    .pause-feld,
    .pause-siegel,
    .pause-fuss {
        animation: pause-schaerfe 1.236s var(--kurve-schaerfe) calc(1s + var(--i, 0) * 0.146s) backwards;
    }

    .pause-titel__wort { --i: 1; }
    .pause-titel__wort + .pause-titel__wort { --i: 2; }
    .pause-frage { --i: 5; }
    .pause-form__wort { --i: 6; }
    .pause-feld { --i: 7; }
    .pause-siegel { --i: 8; }
    .pause-fuss { --i: 10; }

    .pause-form--bereit .pause-siegel__welle {
        animation: pause-siegel-welle 4.236s var(--kurve) 0.382s infinite;
    }
}

@keyframes pause-schleier {
    from { opacity: 1; }
}

@keyframes pause-ein {
    from { opacity: 0; }
}

@keyframes pause-linie {
    from {
        opacity: 0;
        scale: 0 1;
    }
}

@keyframes pause-glut {
    0% { opacity: 0; }
    23.6% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes pause-schaerfe {
    from {
        opacity: 0;
        filter: blur(0.382rem);
        scale: 1.0382;
    }
}

@keyframes pause-siegel-welle {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    6% {
        opacity: 0.618;
    }
    38.2%, 100% {
        opacity: 0;
        transform: scale(1.618);
    }
}

@keyframes pause-ruetteln {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-0.382rem); }
    40%, 80% { transform: translateX(0.382rem); }
}

@media (prefers-reduced-motion: reduce) {
    .pause-titel,
    .pause-frage,
    .pause-form__kopf > .pause-form__wort {
        transition: none;
    }

    .pause-eintrag,
    .pause-wechsel--dank .pause-dank,
    .pause-wechsel--dank .pause-dank__kreis,
    .pause-wechsel--dank .pause-dank__haken {
        transition: none;
    }
}

/* ===============================================================
   DAS TOR (Zugangscode, 6-stellig). Logik in js/ophyr-gate.js, sie
   setzt is-active, is-filled, is-error, is-shake, is-visible und
   is-success. Kleid: Obsidian, Haarlinie in Gold, Goldknopf.
   =============================================================== */

.pause-gate-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.pause-gate-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.pause-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.pause-gate-container {
    position: relative;
    width: min(92vw, 25.888rem);
    padding: clamp(1.618rem, 4.854vw, 2.618rem) clamp(1rem, 3.236vw, 1.618rem);
    border: var(--linie) solid rgba(var(--gold-rgb), 0.236);
    background: linear-gradient(160deg, #1e1c19 0%, var(--obsidian) 61.8%);
    box-shadow: 0 1.618rem 4.236rem rgba(0, 0, 0, 0.618);
    text-align: center;
    transform: translateY(0.75rem);
    transition: transform 0.4s var(--kurve);
}

.pause-gate-modal.is-active .pause-gate-container {
    transform: translateY(0);
}

.pause-gate-close {
    position: absolute;
    top: 0.618rem;
    right: 0.618rem;
    width: 2.618rem;
    height: 2.618rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pause-gate-close::before,
.pause-gate-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1px;
    background: rgba(var(--tinte-rgb), 0.618);
    transition: background 0.3s ease;
}

.pause-gate-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pause-gate-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.pause-gate-close:hover::before,
.pause-gate-close:hover::after {
    background: var(--gold);
}

.pause-gate-title {
    margin: 0 calc(-1 * var(--ls-2)) 1rem 0;
    font-size: clamp(1rem, 2.618vw, 1.272rem);
    font-weight: 300;
    letter-spacing: var(--ls-2);
    color: var(--gold-hell);
}

.pause-gate-text {
    margin: 0 0 1.618rem;
    font-size: 0.887rem;
    font-weight: 300;
    line-height: 1.618;
    color: rgba(var(--tinte-rgb), 0.854);
}

.pause-gate-input-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.382rem;
    margin-bottom: 1rem;
    padding: 0.618rem 0;
}

.pause-gate-digit-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.236rem;
}

.pause-gate-digit {
    width: 2rem;
    height: 2.618rem;
    padding: 0;
    border: var(--linie) solid rgba(var(--gold-rgb), 0.382);
    border-radius: 0;
    background: rgba(var(--tinte-rgb), 0.045);
    color: var(--tinte);
    caret-color: var(--gold-hell);
    font-family: var(--schrift);
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.pause-gate-digit:focus {
    outline: none;
    border-color: var(--gold-hell);
    box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.146);
    transform: translateY(-1px);
}

.pause-gate-digit.is-filled {
    border-color: rgba(var(--gold-rgb), 0.618);
}

.pause-gate-digit.is-error {
    border-color: var(--warnung);
}

.pause-gate-separator {
    flex-shrink: 0;
    font-size: 0.786rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(var(--gold-rgb), 0.5);
    -webkit-user-select: none;
    user-select: none;
}

.pause-gate-input-wrapper.is-shake {
    animation: pause-ruetteln 0.4s ease;
}

.pause-gate-error {
    min-height: 1rem;
    margin-bottom: 1rem;
    font-size: 0.786rem;
    font-weight: 400;
    color: var(--warnung);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pause-gate-error.is-visible {
    opacity: 1;
}

.pause-gate-submit {
    width: 100%;
    height: 2.618rem;
    padding: 0 1rem;
    border: 1px solid rgba(116, 87, 41, 0.2);
    border-top-color: rgba(255, 255, 255, 0.45);
    border-radius: 0;
    background: linear-gradient(135deg, var(--gold-hell) 0%, var(--gold) 50%, var(--gold-tief) 100%);
    color: #1a1610;
    font-family: var(--schrift);
    font-size: 0.786rem;
    font-weight: 400;
    letter-spacing: var(--ls-3);
    text-indent: var(--ls-3);
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
}

.pause-gate-submit:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(var(--gold-rgb), 0.236);
}

.pause-gate-content.is-success .pause-gate-success-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.618rem;
    height: 2.618rem;
    margin: 0 auto 1rem;
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    border-radius: 50%;
}

.pause-gate-success-check svg {
    width: 1.618rem;
    height: 1.618rem;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .pause-gate-modal,
    .pause-gate-container,
    .pause-gate-digit {
        transition: none;
    }

    .pause-gate-input-wrapper.is-shake {
        animation: none;
    }
}