@font-face {
    font-family: 'Opel Next';
    src: url('../fonts/OpelNext-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Opel Next';
    src: url('../fonts/OpelNext-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Opel Next';
    src: url('../fonts/OpelNext-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

:root {
    --ink: #000000;
    --paper: #f3f3f3;
    --rule: #969696;
    --rule-width: 0.1rem;

    /* Hintergrund-Puls: Farbe, und wie weit er hochlaeuft.
     * 1 = ganz durch bis reines Gelb, 0.5 = nur halb so kraeftig. */
    --pulse-color: #f7ff14;
    --pulse-max: 0.5;
}

* {
    box-sizing: border-box;
}

html {
    font-size: min(0.5vw, 0.8888889vh);
}

::selection {
    background-color: #f7ff14;
    color: #000;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Opel Next', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Bühne --------------------------------------------------------------- */

.screen {
    position: relative;
    width: 200rem;
    height: 112.5rem;
    overflow: hidden;
    /* Kein eigener Hintergrund – der Puls liegt darunter und soll auch
     * innerhalb der Buehne sichtbar sein. */
}

/* --- Hintergrund: langsames Pulsieren -------------------------------------
 * Der Hintergrund wandert weich von Grau nach Opel-Gelb und zurueck. Das
 * zeigt auf einen Blick, dass der Screen lebt und nicht eingefroren ist.
 *
 * Technisch liegt eine gelbe Flaeche fix ueber dem gesamten Fenster, hinter
 * allen Inhalten, und nur ihre Deckkraft wird animiert. Deckkraft laeuft auf
 * der Grafikkarte – anders als eine Animation von background-color, die den
 * Browser bei jedem Bild neu zeichnen liesse. Wichtig, weil der Screen
 * stundenlang durchlaeuft.
 *
 * Staerke und Tempo haengen an genau zwei Werten: der Deckkraft bei 50 %
 * und der Laufzeit. Beides unten in einem Block.
 * ------------------------------------------------------------------------- */

.pulse {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--pulse-color);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    animation: pulse 18s ease-in-out infinite;
}

@keyframes pulse {
    0%   { opacity: 0; }                    /* reines Grau  #f3f3f3 */
    50%  { opacity: var(--pulse-max); }     /* volles Gelb  #f7ff14 */
    100% { opacity: 0; }
}


/* --- Kopf ---------------------------------------------------------------- */

.screen__title {
    position: absolute;
    z-index: 1;
    left: 26.1rem;
    top: 8.43rem;
    margin: 0;
    font-size: 13.65rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.screen__logo {
    position: absolute;
    z-index: 1;
    left: 148.7rem;
    top: 1.75rem;
    width: 46.35rem;
    height: auto;
}

/* --- Tabelle ------------------------------------------------------------- */

.board {
    position: absolute;
    z-index: 1;
    left: 26.1rem;
    top: 0;
    width: 150rem;
}

.board__head,
.board__row {
    display: grid;
    grid-template-columns: 31.9rem 91.82rem 1fr;
    padding-left: 7.08rem;
}

.board__head {
    position: absolute;
    top: 31.63rem;
    left: 0;
    width: 100%;
    font-size: 3.32rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.board__list {
    position: absolute;
    top: 39.2rem;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: var(--rule-width) solid var(--rule);
}

.board__row {
    height: 14.6rem;
    align-items: center;
    border-top: var(--rule-width) solid var(--rule);
    font-size: 4.35rem;
    font-weight: 400;
    line-height: 1;
}

.cell {
    display: block;
    min-width: 0;
    white-space: nowrap;
}

.cell--name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Wechsel-Animation --------------------------------------------------- */

.board__row .cell--name,
.board__row .cell--score {
    transition: opacity 260ms ease, transform 260ms ease;
}

.board__row.is-leaving .cell--name,
.board__row.is-leaving .cell--score {
    opacity: 0;
    transform: translateY(-0.35em);
}

.board__row.is-entering .cell--name,
.board__row.is-entering .cell--score {
    opacity: 0;
    transform: translateY(0.35em);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .board__row .cell--name,
    .board__row .cell--score {
        transition-duration: 1ms;
    }

    /* Kein Pulsieren, Hintergrund bleibt ruhig grau. */
    .pulse {
        animation: none;
        opacity: 0;
    }
}

/* --- Fuß ----------------------------------------------------------------- */

.claim {
    position: absolute;
    z-index: 1;
    right: 24.1rem;
    top: 92.32rem;
    margin: 0;
    font-size: 9.76rem;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.claim__light {
    font-weight: 300;
}

.claim__bold {
    font-weight: 700;
}

/* Der Opel-Schrägstrich als Parallelogramm. */
.claim__slash {
    display: inline-block;
    width: 2.6rem;
    height: 5.88rem;
    margin-left: 3.54rem;
    vertical-align: baseline;
    background: var(--ink);
    transform: skewX(-21.3deg);
}

.note {
    position: absolute;
    z-index: 1;
    right: 23.34rem;
    top: 102.44rem;
    margin: 0;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.note strong {
    font-weight: 700;
}


/* --- Hochformat und schmale Fenster ---------------------------------------
 * Alles oberhalb gilt weiter fuer 16:9 und jedes andere Querformat – dort
 * ist die Anordnung unveraendert aus der Vorlage gerechnet.
 *
 * Ist das Fenster hoeher als breit (Handy im Hochformat, Tablet, schmales
 * Browserfenster), traegt die absolute Anordnung nicht mehr: der Screen
 * wuerde zu einem winzigen Streifen in der Bildmitte. Deshalb wechselt das
 * Layout hier in den normalen Fluss und stapelt die Bloecke untereinander.
 * Schriftgroessen haengen an der Fensterbreite, mit clamp() nach unten und
 * oben begrenzt, damit es weder zu klein noch zu gross wird.
 * ------------------------------------------------------------------------- */

@media (max-aspect-ratio: 1/1) {

    :root {
        /* 0.1rem waere hier weniger als ein Bildpunkt und verschwaende. */
        --rule-width: 1px;
    }

    body {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100svh;
    }

    .screen {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 100svh;
        overflow: visible;
        padding: 6vw 5vw calc(6vw + env(safe-area-inset-bottom, 0px));
    }

    /* Aus der absoluten Anordnung zurueck in den normalen Fluss. */
    .screen__title,
    .screen__logo,
    .board,
    .board__head,
    .board__list,
    .claim,
    .note {
        position: relative;
        z-index: 1;
        left: auto;
        right: auto;
        top: auto;
        width: auto;
    }

    /* Die beiden auto-Abstaende teilen den freien Platz gleichmaessig auf
     * Ober- und Unterkante auf. Dadurch steht der Block mittig, ohne Loch
     * zwischen Tabelle und Claim. Reicht der Platz nicht, werden die
     * auto-Werte zu 0 und die Seite scrollt einfach – nichts wird
     * abgeschnitten. */
    .screen__logo {
        order: 1;
        align-self: center;
        width: min(56vw, 320px);
        margin-top: auto;
        margin-bottom: 7vw;
    }

    .screen__title {
        order: 2;
        text-align: center;
        font-size: clamp(30px, 12vw, 76px);
        margin-bottom: 6vw;
    }

    .board {
        order: 3;
    }

    /* Rang schmal, Name nimmt den Rest, Punkte rechtsbuendig – auf schmalen
     * Bildschirmen ist das die einzige Aufteilung, bei der lange Namen und
     * die Punktzahl nicht kollidieren. */
    .board__head,
    .board__row {
        grid-template-columns: 2.6em minmax(0, 1fr) auto;
        gap: 0 3vw;
        padding-left: 0;
    }

    .board__head {
        font-size: clamp(9px, 3.1vw, 15px);
        margin-bottom: 2.5vw;
    }

    .board__row {
        height: auto;
        padding-top: 3.6vw;
        padding-bottom: 3.6vw;
        font-size: clamp(15px, 5.4vw, 34px);
    }

    .cell--score {
        text-align: right;
    }

    .claim {
        order: 4;
        padding-top: 10vw;
        text-align: center;
        font-size: clamp(19px, 7.4vw, 48px);
    }

    /* In em statt rem, damit der Schraegstrich zur Claim-Groesse passt.
     * Die Werte sind die gemessenen Verhaeltnisse aus der Vorlage. */
    .claim__slash {
        width: 0.266em;
        height: 0.602em;
        margin-left: 0.363em;
    }

    .note {
        order: 5;
        margin-top: 3vw;
        margin-bottom: auto;
        text-align: center;
        white-space: normal;   /* darf hier umbrechen */
        font-size: clamp(8px, 2.7vw, 15px);
        line-height: 1.35;
    }
}