/*
 * Die Luftnummer – das Stilblatt.
 *
 * Nacht wie in jedem Zimmer dieses Hauses: Druckerschwärze und vergilbtes Papier, drei Signalfarben, vier
 * Rollenfarben. border-radius 0, kein Weichzeichner, kein Schein, keine weichen Schatten, keine Verläufe als
 * Fläche. Übergänge der Oberfläche laufen linear und höchstens 120 ms.
 *
 * DIE AUSNAHMEN SIND BEWEGUNG, UND SIE STEHEN HIER BEIEINANDER: das Laufen der Figuren (Daumenkino in vier
 * Bildern, `steps()`), die Kamera, die der Figur linear folgt, und das ruhige Einblenden des Heureka-Kastens.
 * Alle drei schaltet `prefers-reduced-motion` ab; dann springen Figuren, Kamera und Kasten.
 *
 * 375 px zuerst: Jede Tippfläche misst mindestens 44 × 44 px, und die Seite verschiebt sich nie seitlich.
 */

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

html {
    -webkit-text-size-adjust: 100%;
}

/*
 * Ab 46rem klebt der Kopf des Hauses über der Seite. Ohne das Polster läge ein Knopf, zu dem der Browser beim
 * Rückwärtstabben scrollt, unter der Leiste; 7.5rem decken auch ihre zweizeilige Fassung, wie in den anderen Zimmern.
 */
@media (min-width: 46rem) {
    html {
        scroll-padding-top: 7.5rem;
    }
}

.ln {
    margin: 0;
    min-height: 100vh;
    background-color: var(--ln-ink);
    background-image: var(--ln-korn);
    color: var(--ln-papier);
    font-family: var(--ln-font-doc);
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
}

.ln [hidden] {
    display: none !important;
}

/*
 * DIE SEITENLUFT IST DIE DES KOPFES (`--haus-luft`): So steht die Kante des Zimmers unter der Marke und seine rechte
 * Kante unter dem letzten Handgriff der Leiste, auf jeder Breite.
 */
.ln-app {
    max-width: var(--ln-breite);
    margin: 0 auto;
    padding: var(--ln-gap-2) var(--haus-luft, 16px) var(--ln-gap-5);
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--ln-senf);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ Knöpfe */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ln-gap-1);
    min-height: var(--ln-griff);
    min-width: var(--ln-griff);
    padding: 0.4rem 1rem;
    border: var(--ln-rand) solid var(--ln-papier);
    border-radius: 0;
    background: var(--ln-ink-2);
    color: var(--ln-papier);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ln-schnell), color var(--ln-schnell);
}

.knopf:hover {
    background: var(--ln-ink-3);
}

.knopf:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.knopf--haupt {
    background: var(--ln-senf);
    border-color: var(--ln-senf);
    color: var(--ln-signal-senf);
    box-shadow: var(--ln-schatten);
}

.knopf--haupt:hover {
    background: var(--ln-papier);
    border-color: var(--ln-papier);
}

.knopf--leise {
    border-color: var(--ln-graphit-kante);
    background: transparent;
}

.knopf--klein {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
}

.meldung {
    margin: var(--ln-gap-2) 0 0;
    padding: var(--ln-gap-2);
    background: var(--ln-senf);
    color: var(--ln-signal-senf);
    font-family: var(--ln-font-amt);
    font-weight: 600;
}

/* ------------------------------------------------------------ Start */

.start__kopf {
    padding: var(--ln-gap-4) 0 var(--ln-gap-3);
    border-bottom: var(--ln-rand) solid var(--ln-ink-3);
}

.start__dach {
    margin: 0;
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
    font-size: 0.85rem;
}

.start__titel {
    margin: var(--ln-gap-1) 0 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 11vw, 5.5rem);
    line-height: 0.95;
    color: var(--ln-papier);
    text-shadow: 3px 3px 0 var(--ln-signal-tief);
}

.start__unterzeile {
    margin: var(--ln-gap-2) 0 0;
    font-family: var(--ln-font-letter);
    font-size: clamp(1.5rem, 5vw, 2.1rem);
    color: var(--ln-senf);
}

.start__rumpf {
    display: grid;
    gap: var(--ln-gap-4);
    padding-top: var(--ln-gap-3);
}

.start__text p {
    margin: 0 0 var(--ln-gap-2);
}

.start__klein {
    color: var(--ln-papier-dim);
    font-size: 0.9rem;
}

/* Die ehrliche Dauer, und dass ein Abend nicht reichen muss: Hier stand „rund eine Stunde". */
.start__dauer {
    font-size: 0.9rem;
    color: var(--ln-senf);
}

.start__geraet {
    padding-left: var(--ln-gap-2);
    border-left: var(--ln-rand) solid var(--ln-senf);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    font-size: 0.9rem;
}

/* Das Titelbild mit Bildunterschrift: Papier, Goldkante von zwei Pixeln, Serife — derselbe Kasten wie unter jedem Panel. */
/* Es fuellt seine Spalte: Ein Deckel von 44rem liess neben ihm auf dem Breitbild ein Band leeres Papier stehen. */
.start__bild {
    margin: var(--ln-gap-3) 0 0;
    border: var(--ln-rand) solid var(--ln-ink-3);
}

.start__bild img {
    display: block;
    width: 100%;
    height: auto;
}

.start__bild figcaption {
    padding: var(--ln-gap-1) var(--ln-gap-2);
    background: var(--ln-comic-papier);
    color: var(--ln-ink);
    border-top: 2px solid var(--ln-gold);
    font-family: var(--ln-font-comic);
    font-size: 0.95rem;
}

/* Die Crew auf der Startseite: vier Karten, jede mit dem Rand ihrer Rollenfarbe. Zwei Spalten auf dem Telefon, vier ab 48rem. */
.crew {
    margin-top: var(--ln-gap-4);
    padding-top: var(--ln-gap-3);
    border-top: var(--ln-rand) solid var(--ln-ink-3);
}

.crew__titel {
    margin: 0 0 var(--ln-gap-2);
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.6rem;
}

.crew__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ln-gap-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .crew__liste {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--ln-gap-3);
    }
}

.crew__karte {
    background: var(--ln-ink-2);
    border: var(--ln-rand) solid var(--fig);
}

.crew__bild {
    display: block;
    width: 100%;
    height: auto;
}

.crew__text {
    padding: var(--ln-gap-2);
}

.crew__text p {
    margin: 0;
}

.crew__text p + p {
    margin-top: var(--ln-gap-1);
}

.crew__name {
    font-family: var(--ln-font-display);
    font-size: 1.1rem;
    line-height: 1.2;
}

.crew__ruf {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--fig-schrift);
}

.crew__blick {
    font-size: 0.9rem;
    color: var(--ln-papier-alt);
}

.start__formulare {
    display: grid;
    gap: var(--ln-gap-3);
}

.vordruck {
    padding: var(--ln-gap-3);
    background: var(--ln-papier);
    background-image: var(--ln-halbton);
    background-size: var(--ln-halbton-groesse);
    color: var(--ln-ink);
    border-left: var(--ln-rand-fett) solid var(--ln-signal);
    display: grid;
    gap: var(--ln-gap-2);
}

.vordruck__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.4rem;
}

.vordruck__klein {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ln-tinte-notiz);
}

.vordruck .knopf {
    border-color: var(--ln-ink);
    justify-self: start;
}

.feld {
    display: grid;
    gap: 0.2rem;
}

.feld__name {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.feld__eingabe {
    min-height: var(--ln-griff);
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--ln-ink);
    border-radius: 0;
    background: #fbf6e8;
    color: var(--ln-ink);
    font-family: var(--ln-font-doc);
    font-size: 1.1rem;
}

.feld__eingabe--code {
    font-family: var(--ln-font-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

@media (min-width: 62rem) {
    .start__rumpf {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* ------------------------------------------------------------ Lobby */

/*
 * DIE LOBBY NIMMT DIE BUEHNE, UND AUF DEM SCHREIBTISCH IN ZWEI SPALTEN: links Titel, Raumcode, der Satz ueber die
 * Plaetze und wer am Tisch sitzt, rechts die Plaetze selbst und der Anpfiff. Sie stand als Spalte von 58rem am linken
 * Rand einer Buehne von 1800 Pixeln. `dense` fuellt die rechte Spalte von oben, obwohl sie im Markup nach der linken
 * kommt; die Lesereihenfolge fuer einen Schirmleser bleibt die des Markups.
 */
@media (min-width: 62rem) {
    .lobby {
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        column-gap: var(--ln-gap-5);
        align-items: start;
    }

    .lobby > .lobby__titel,
    .lobby > .lobby__code,
    .lobby > .lobby__hinweis,
    .lobby > .lobby__personen {
        grid-column: 1;
    }

    .lobby > :not(.lobby__titel, .lobby__code, .lobby__hinweis, .lobby__personen) {
        grid-column: 2;
    }

    /* Die Zeile gehoert dem grossen Titel links; „Plaetze" steht an ihrer Unterkante und damit ueber den Sitzen. */
    .lobby > .lobby__zwischen {
        align-self: end;
    }
}

.lobby__titel {
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 7vw, 3rem);
    margin: var(--ln-gap-3) 0 var(--ln-gap-2);
}

.lobby__code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ln-gap-2);
    padding: var(--ln-gap-2) var(--ln-gap-3);
    background: var(--ln-ink-2);
    border: var(--ln-rand) solid var(--ln-ink-3);
}

.lobby__code-wort {
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
}

.lobby__code-wert {
    font-family: var(--ln-font-mono);
    font-size: 2rem;
    letter-spacing: 0.25em;
    color: var(--ln-senf);
}

.lobby__quittung {
    font-size: 0.9rem;
    color: var(--ln-papier-dim);
}

.lobby__hinweis {
    color: var(--ln-papier-dim);
}

.lobby__personen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ln-gap-1);
}

.lobby__personen li {
    padding: var(--ln-gap-1) var(--ln-gap-2);
    border-left: var(--ln-rand) solid var(--ln-graphit-kante);
    background: var(--ln-ink-2);
}

.lobby__zwischen {
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 1rem;
    margin: var(--ln-gap-3) 0 var(--ln-gap-2);
}

.lobby__sitze {
    display: grid;
    gap: var(--ln-gap-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.sitz {
    display: grid;
    gap: var(--ln-gap-1);
    align-content: start;
    min-height: var(--ln-griff);
    padding: var(--ln-gap-2);
    border: var(--ln-rand) solid var(--ln-graphit-kante);
    background: var(--ln-ink-2);
    color: var(--ln-papier);
    text-align: left;
    cursor: pointer;
}

.sitz[aria-pressed='true'] {
    border-color: var(--ln-senf);
    background: var(--ln-ink-3);
}

.sitz:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sitz__figuren {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
}

.sitz__figur {
    padding: 0 0.4rem;
    border-left: var(--ln-rand-fett) solid var(--fig, var(--ln-papier));
    font-family: var(--ln-font-amt);
    font-weight: 600;
}

.sitz__wer {
    font-size: 0.85rem;
    color: var(--ln-papier-dim);
}

.lobby__fuss {
    margin-top: var(--ln-gap-4);
    display: grid;
    gap: var(--ln-gap-2);
    justify-items: start;
}

.lobby__warten {
    margin: 0;
    color: var(--ln-papier-dim);
}

/* ------------------------------------------------------------ Kopf im Spiel */

.kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ln-gap-1) var(--ln-gap-3);
    padding: var(--ln-gap-1) 0 var(--ln-gap-2);
}

.kopf__titel {
    display: grid;
    line-height: 1.1;
    flex: 1 1 10rem;
    min-width: 0;
}

.kopf__spiel {
    font-family: var(--ln-font-display);
    font-size: 1.15rem;
}

.kopf__kapitel {
    font-family: var(--ln-font-amt);
    font-size: 0.85rem;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
}

.kopf__uhr {
    display: flex;
    align-items: center;
    gap: var(--ln-gap-1);
}

.uhr {
    width: 40px;
    height: 40px;
}

.uhr__blatt {
    fill: var(--ln-papier);
    stroke: var(--ln-ink-3);
    stroke-width: 2;
}

.uhr__striche path {
    stroke: var(--ln-ink);
    stroke-width: 2;
}

.uhr__stunde {
    stroke: var(--ln-ink);
    stroke-width: 3;
    stroke-linecap: square;
}

.uhr__minute {
    stroke: var(--ln-signal-tief);
    stroke-width: 2;
    stroke-linecap: square;
}

.uhr__achse {
    fill: var(--ln-ink);
}

.kopf__uhrwort {
    font-family: var(--ln-font-amt);
    font-size: 0.85rem;
    color: var(--ln-papier-dim);
}

.kopf__zaehler {
    font-family: var(--ln-font-amt);
    font-size: 0.85rem;
    color: var(--ln-papier-dim);
}

.kopf__knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ln-gap-1);
}

.kopf__code {
    font-family: var(--ln-font-mono);
    letter-spacing: 0.2em;
    color: var(--ln-senf);
    padding-right: var(--ln-gap-1);
}

/* ------------------------------------------------------------ Reiter */

.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
    margin-bottom: var(--ln-gap-1);
}

.reiter__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--ln-gap-1);
    min-height: var(--ln-griff);
    padding: 0 var(--ln-gap-2);
    border: var(--ln-rand) solid var(--ln-ink-3);
    border-bottom: var(--ln-rand-fett) solid var(--fig);
    background: var(--ln-ink-2);
    color: var(--ln-papier);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    cursor: pointer;
}

.reiter__knopf[aria-pressed='true'] {
    background: var(--fig);
    color: var(--ln-ink);
    border-color: var(--fig);
}

.reiter__taste {
    font-family: var(--ln-font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.8;
}

.reiter__wo {
    font-weight: 400;
    font-size: 0.8rem;
    opacity: 0.85;
}

[data-fig='ruth'] { --fig: var(--ln-ruth); --fig-schrift: var(--ln-ruth-blech); }
[data-fig='ansgar'] { --fig: var(--ln-ansgar); --fig-schrift: var(--ln-ansgar-blech); }
[data-fig='selma'] { --fig: var(--ln-selma); --fig-schrift: var(--ln-selma-blech); }
[data-fig='nuri'] { --fig: var(--ln-nuri); --fig-schrift: var(--ln-nuri-blech); }

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

.buehne {
    position: relative;
    height: var(--ln-buehne-h);
    background: var(--ln-ink);
    border: var(--ln-rand) solid var(--ln-ink-3);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.buehne__fenster {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.buehne__welt {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
}

.buehne__kulisse {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.buehne__figuren {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.buehne__flaechen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.flaeche {
    fill: rgba(0, 0, 0, 0);
    stroke: transparent;
    stroke-width: 0.25;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

@media (hover: hover) {
    .flaeche:hover {
        stroke: var(--ln-senf);
        stroke-width: 2;
        stroke-dasharray: 6 4;
    }
}

.flaeche--boden {
    fill: rgba(0, 0, 0, 0);
    cursor: crosshair;
}

.buehne__name {
    position: absolute;
    left: var(--ln-gap-2);
    top: var(--ln-gap-1);
    margin: 0;
    padding: 0 0.4rem;
    background: var(--ln-ink);
    color: var(--ln-senf);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 0.85rem;
    pointer-events: none;
}

.buehne__name:empty {
    display: none;
}

.figur {
    position: absolute;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: 400% 100%;
    background-position: 0% 0%;
    image-rendering: auto;
}

.figur--links {
    transform: translateX(-50%) scaleX(-1);
}

.figur--geht {
    animation: ln-gehen 0.56s steps(4, jump-none) infinite;
}

.figur--aktiv::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -6px;
    height: 4px;
    background: var(--fig);
}

@keyframes ln-gehen {
    from { background-position: 0% 0%; }
    to { background-position: 100% 0%; }
}

.npc,
.beiwerk {
    position: absolute;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Das Beiwerk liegt vor den Nebenfiguren (der Postkorb auf dem Tresen, vor Frau Fräse) und hinter der Crew. */
.beiwerk {
    z-index: 1;
}

.npc--spiegel {
    transform: translateX(-50%) scaleX(-1);
}

.buehne__unterwegs,
.buehne__pause {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--ln-gap-2);
    padding: var(--ln-gap-3);
    background: var(--ln-schleier);
    text-align: center;
}

.buehne__unterwegs-text {
    margin: 0;
    font-family: var(--ln-font-letter);
    font-size: 1.6rem;
    color: var(--ln-papier);
}

.balken {
    height: 8px;
    width: min(20rem, 70vw);
    background: var(--ln-ink-3);
    justify-self: center;
}

.balken__fuell {
    display: block;
    height: 100%;
    background: var(--ln-senf);
    width: 0%;
}

/* ------------------------------------------------------------ Satzzeile und Ergebnis */

.satz {
    margin: var(--ln-gap-1) 0 0;
    min-height: 1.5em;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ln-senf);
}

.ergebnis {
    margin: var(--ln-gap-1) 0 var(--ln-gap-2);
    min-height: 3em;
    padding: var(--ln-gap-2);
    background: var(--ln-ink-2);
    border-left: var(--ln-rand-fett) solid var(--fig, var(--ln-papier-dim));
    max-width: 100%;
}

.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ergebnis__wer {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-senf);
    margin-right: 0.4em;
}

.ergebnis--heureka {
    border-left-color: var(--ln-gold);
}

/* ------------------------------------------------------------ Pult: Gespräch, Frage, Posten */

.pult {
    margin: 0 0 var(--ln-gap-2);
    padding: var(--ln-gap-2);
    background: var(--ln-papier);
    color: var(--ln-ink);
    border-left: var(--ln-rand-fett) solid var(--ln-signal);
}

.pult__kopf {
    display: flex;
    align-items: center;
    gap: var(--ln-gap-2);
    margin-bottom: var(--ln-gap-2);
}

.pult__bild {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid var(--ln-ink);
    background: var(--ln-papier-alt);
}

.pult__titel {
    margin: 0;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
}

.pult__zeilen {
    margin: 0 0 var(--ln-gap-2);
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
}

.pult__zeilen li {
    padding-left: var(--ln-gap-2);
    border-left: 2px solid var(--ln-tinte-notiz);
}

.pult__wahl {
    display: grid;
    gap: var(--ln-gap-1);
}

.pult__option {
    min-height: var(--ln-griff);
    padding: 0.4rem var(--ln-gap-2);
    border: 2px solid var(--ln-ink);
    border-radius: 0;
    background: #fbf6e8;
    color: var(--ln-ink);
    font-family: var(--ln-font-doc);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ln-schnell);
}

.pult__option:hover {
    background: var(--ln-senf);
}

/* Die eingestellte Möglichkeit: dicker Rand und ein Zeiger davor, nicht nur eine Farbe. */
.pult__option[aria-pressed='true'] {
    border-width: 4px;
    font-weight: 700;
}

.pult__option[aria-pressed='true']::before {
    content: '▸ ';
}

.pult__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
    margin-top: var(--ln-gap-2);
}

.pult .knopf {
    border-color: var(--ln-ink);
    background: var(--ln-ink);
    color: var(--ln-papier);
}

.pult .knopf--haupt {
    background: var(--ln-signal-tief);
    border-color: var(--ln-signal-tief);
    color: var(--ln-papier);
}

.pult .feld__eingabe {
    max-width: 18rem;
}

/* ------------------------------------------------------------ Steuerung: Verben und Tasche */

.steuer {
    display: grid;
    gap: var(--ln-gap-2);
}

.verben {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ln-gap-1);
}

.verb {
    min-height: var(--ln-griff);
    padding: 0.2rem;
    border: 2px solid var(--ln-graphit-kante);
    border-radius: 0;
    background: var(--ln-ink-2);
    color: var(--ln-papier);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--ln-schnell), color var(--ln-schnell);
}

.verb u {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.verb[aria-pressed='true'] {
    background: var(--ln-senf);
    border-color: var(--ln-senf);
    color: var(--ln-signal-senf);
}

.verb--eigen {
    border-color: var(--fig);
}

.verb--eigen[aria-pressed='true'] {
    background: var(--fig);
    border-color: var(--fig);
    color: var(--ln-ink);
}

.tasche {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
    align-items: stretch;
}

.ding {
    min-height: var(--ln-griff);
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--ln-papier-dim);
    border-radius: 0;
    background: var(--ln-papier);
    color: var(--ln-ink);
    font-family: var(--ln-font-doc);
    cursor: pointer;
    transition: background-color var(--ln-schnell);
}

.ding[aria-pressed='true'] {
    background: var(--ln-senf);
    border-color: var(--ln-ink);
}

.ding--geld {
    background: var(--ln-ink-2);
    color: var(--ln-senf);
    border-color: var(--ln-senf);
    font-family: var(--ln-font-mono);
}

.tasche__leer {
    margin: 0;
    color: var(--ln-papier-dim);
    align-self: center;
}

@media (min-width: 40rem) {
    .verben {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .steuer {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* ------------------------------------------------------------ Hier ist */

.hier {
    margin-top: var(--ln-gap-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
    align-items: center;
}

.hier__wort {
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
    margin-right: var(--ln-gap-1);
}

.hier__knopf {
    min-height: var(--ln-griff);
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--ln-ink-3);
    border-radius: 0;
    background: var(--ln-ink-2);
    color: var(--ln-papier);
    font-family: var(--ln-font-doc);
    cursor: pointer;
    transition: background-color var(--ln-schnell);
}

.hier__knopf:hover {
    background: var(--ln-ink-3);
}

.hier__knopf--npc {
    border-color: var(--ln-papier-dim);
}

.hier__knopf--ausgang,
.hier__knopf--plan {
    border-style: dashed;
    border-color: var(--ln-senf);
}

.hier__knopf--crew {
    border-color: var(--fig);
}

/* ------------------------------------------------------------ Protokoll und Notizbuch */

.blaetter {
    margin-top: var(--ln-gap-3);
    display: grid;
    gap: var(--ln-gap-2);
}

.blatt {
    border: 2px solid var(--ln-ink-3);
    background: var(--ln-ink-2);
}

.blatt__griff {
    min-height: var(--ln-griff);
    display: flex;
    align-items: center;
    padding: 0 var(--ln-gap-2);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    cursor: pointer;
}

.protokoll {
    list-style: none;
    margin: 0;
    padding: 0 var(--ln-gap-2) var(--ln-gap-2);
    display: grid;
    gap: var(--ln-gap-1);
    max-height: 22rem;
    overflow-y: auto;
}

.protokoll li {
    padding: 0.2rem 0 0.2rem var(--ln-gap-2);
    border-left: 2px solid var(--ln-ink-3);
}

.protokoll__uhr {
    font-family: var(--ln-font-mono);
    font-size: 0.75rem;
    color: var(--ln-russ);
    margin-right: 0.4em;
}

.protokoll__notiz {
    border-left-color: var(--ln-senf) !important;
}

.notizbuch {
    padding: 0 var(--ln-gap-2) var(--ln-gap-2);
    font-family: var(--ln-font-letter);
    font-size: 1.25rem;
    line-height: 1.35;
}

.notizbuch h3 {
    margin: var(--ln-gap-2) 0 var(--ln-gap-1);
    font-family: var(--ln-font-amt);
    font-size: 0.9rem;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
}

.notizbuch ul {
    margin: 0;
    padding-left: 1.2rem;
}

@media (min-width: 62rem) {
    .blaetter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* ------------------------------------------------------------ Abrechnung */

.ende {
    max-width: 52rem;
    padding-top: var(--ln-gap-4);
}

.ende__dach {
    margin: 0;
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
}

.ende__rang {
    margin: var(--ln-gap-1) 0 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 9vw, 4.5rem);
    color: var(--ln-senf);
}

.ende__unterzeile {
    margin: 0 0 var(--ln-gap-3);
    font-family: var(--ln-font-letter);
    font-size: 1.5rem;
}

.ende__zahlen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ln-gap-1) var(--ln-gap-3);
    padding: var(--ln-gap-3);
    background: var(--ln-papier);
    color: var(--ln-ink);
}

.ende__zahlen dt {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ln-sperrung);
}

.ende__zahlen dd {
    margin: 0;
    font-family: var(--ln-font-mono);
}

.ende__zwischen {
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 1rem;
    margin-top: var(--ln-gap-4);
}

.ende__vorhaben {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--ln-gap-1);
}

.ende__vorhaben li {
    padding: var(--ln-gap-1) var(--ln-gap-2);
    background: var(--ln-ink-2);
    border-left: var(--ln-rand-fett) solid var(--ln-graphit-kante);
}

.ende__vorhaben li.ist-erledigt {
    border-left-color: var(--ln-senf);
}

.ende__tuer {
    margin-top: var(--ln-gap-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-2);
    align-items: center;
}

.ende__tuer p {
    flex: 1 1 100%;
    margin: 0;
    font-family: var(--ln-font-letter);
    font-size: 1.5rem;
}

/* ------------------------------------------------------------ Überlagerungen */

/* Die Überlagerungen liegen über der Leiste des Hauses (Ebene 900), sonst verschwände die Oberkante eines Panels darunter. */
.lage {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 12px;
    background: var(--ln-schleier);
    overflow-y: auto;
}

.panel,
.heureka {
    width: min(100%, 72rem);
    display: grid;
    background: var(--ln-ink);
    border: var(--ln-rand) solid var(--ln-ink-3);
}

.panel__bild img,
.heureka__bild img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--ln-ink-2);
}

.panel__text {
    padding: var(--ln-gap-2) var(--ln-gap-3) var(--ln-gap-3);
    display: grid;
    gap: var(--ln-gap-2);
    align-content: start;
}

.panel__ort {
    margin: 0;
    font-family: var(--ln-font-amt);
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-papier-dim);
    font-size: 0.8rem;
}

.panel__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.35rem;
}

.panel__erzaehler {
    margin: 0;
    padding: var(--ln-gap-2) var(--ln-gap-3);
    background: var(--ln-comic-papier);
    color: var(--ln-ink);
    border-top: 2px solid var(--ln-gold);
    font-family: var(--ln-font-comic);
    font-size: 1.05rem;
    line-height: 1.5;
}

.panel__erzaehler:empty {
    display: none;
}

.blase {
    position: relative;
    padding: var(--ln-gap-2) var(--ln-gap-3);
    background: #fbf6e8;
    color: var(--ln-ink);
    border: 3px solid var(--ln-ink);
    border-radius: 22px;
}

.blase__wer {
    margin: 0;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--ln-signal-tief);
}

.blase__text {
    margin: 0.2rem 0 0;
    font-family: var(--ln-font-letter);
    font-size: 1.55rem;
    line-height: 1.25;
}

.blase--stumm .blase__text {
    font-family: var(--ln-font-doc);
    font-size: 1rem;
    color: var(--ln-tinte-notiz);
}

.panel__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ln-gap-2);
}

.panel__zaehler {
    font-family: var(--ln-font-mono);
    color: var(--ln-papier-dim);
}

@media (min-width: 62rem) {
    .panel {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .panel__bild img {
        height: 100%;
        aspect-ratio: auto;
        min-height: 26rem;
    }
}

.heureka__kasten {
    padding: var(--ln-gap-3);
    display: grid;
    gap: var(--ln-gap-2);
    justify-items: start;
    background: var(--ln-comic-papier);
    color: var(--ln-ink);
    border-top: 2px solid var(--ln-gold);
}

.heureka__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.6rem;
}

.heureka__text {
    margin: 0;
    font-family: var(--ln-font-comic);
    font-size: 1.1rem;
}

.heureka__kasten .knopf {
    border-color: var(--ln-ink);
    background: var(--ln-ink);
    color: var(--ln-papier);
}

/* Das Einblenden des Heureka-Kastens: die dritte Bewegung über 120 ms, siehe Kopf dieser Datei. */
.heureka__kasten--ein {
    animation: ln-einblenden 0.45s linear both;
}

@keyframes ln-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}

.plan {
    width: min(100%, 48rem);
    padding: var(--ln-gap-3);
    background: var(--ln-ink-2);
    border: var(--ln-rand) solid var(--ln-ink-3);
    display: grid;
    gap: var(--ln-gap-2);
}

.plan__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.4rem;
}

/* Auf dem Telefon ist die Karte quadratisch: Bei 16:10 lagen die Ortsknöpfe (44 px hoch) übereinander. */
.plan__karte {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ln-papier);
    background-image: var(--ln-halbton);
    background-size: var(--ln-halbton-groesse);
    border: var(--ln-rand) solid var(--ln-ink);
    overflow: hidden;
}

@media (min-width: 40rem) {
    .plan__karte {
        aspect-ratio: 16 / 10;
    }
}

.plan__karte svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.plan__ort {
    position: absolute;
    transform: translate(-50%, -50%);
    min-height: var(--ln-griff);
    min-width: var(--ln-griff);
    padding: 0.2rem 0.5rem;
    border: 2px solid var(--ln-ink);
    border-radius: 0;
    background: var(--ln-ink);
    color: var(--ln-papier);
    font-family: var(--ln-font-amt);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: pointer;
    max-width: 9rem;
}

.plan__ort[aria-pressed='true'] {
    background: var(--ln-senf);
    color: var(--ln-signal-senf);
}

.plan__ort--hier {
    background: var(--ln-signal-tief);
    cursor: default;
}

.plan__wahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
    align-items: center;
    min-height: var(--ln-griff);
}

.plan__wahl p {
    margin: 0;
    flex: 1 1 100%;
}

.tasten {
    width: min(100%, 36rem);
    padding: var(--ln-gap-3);
    background: var(--ln-papier);
    color: var(--ln-ink);
}

.tasten h2 {
    margin: 0 0 var(--ln-gap-2);
    font-family: var(--ln-font-display);
    font-weight: 400;
}

.tasten__liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem var(--ln-gap-2);
}

.tasten__liste dt {
    font-family: var(--ln-font-mono);
    font-weight: 500;
}

.tasten__liste dd {
    margin: 0;
}

.tasten .knopf {
    border-color: var(--ln-ink);
    background: var(--ln-ink);
    color: var(--ln-papier);
}

/* ------------------------------------------------------------ Werkbank */

.werkbank {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 40;
    width: min(26rem, calc(100vw - 16px));
    max-height: 60vh;
    overflow: auto;
    padding: var(--ln-gap-2);
    background: var(--ln-papier);
    color: var(--ln-ink);
    border: var(--ln-rand) solid var(--ln-signal);
    font-family: var(--ln-font-mono);
    font-size: 0.8rem;
}

.werkbank textarea {
    width: 100%;
    min-height: 8rem;
    font-family: var(--ln-font-mono);
    font-size: 0.75rem;
}

.werkbank .knopf {
    border-color: var(--ln-ink);
    background: var(--ln-ink);
    color: var(--ln-papier);
}

.werkbank-an .flaeche {
    stroke: var(--ln-signal);
    stroke-width: 2;
    fill: rgba(214, 36, 28, 0.12);
}

.werkbank-an .flaeche--boden {
    stroke: var(--ln-gruen);
    fill: rgba(47, 163, 126, 0.08);
}

.werkbank-punkt {
    fill: var(--ln-senf);
    stroke: var(--ln-ink);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    cursor: move;
}

.werkbank-stand {
    stroke: var(--ln-gruen);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------ Laufende Fälle und Fall-Code */

/*
 * DER LAUFENDE FALL STEHT OBEN, VOR DEM TEXT. Wer nach einer Woche wiederkommt, will weiterspielen und nicht lesen,
 * worum es geht; die Karte steht auf demselben Papier wie die Vordrucke, mit der Kante des Signals.
 */
.fortsetzen {
    margin: var(--ln-gap-3) 0 0;
    padding: var(--ln-gap-3);
    background: var(--ln-papier);
    background-image: var(--ln-halbton);
    background-size: var(--ln-halbton-groesse);
    color: var(--ln-ink);
    border-left: var(--ln-rand-fett) solid var(--ln-senf);
}

.fortsetzen__titel {
    margin: 0 0 var(--ln-gap-2);
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.4rem;
}

.fortsetzen__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ln-gap-2);
}

.fortsetzen__fall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ln-gap-1) var(--ln-gap-2);
}

.fortsetzen__tisch {
    flex: 1 1 14rem;
    font-family: var(--ln-font-amt);
    font-weight: 600;
}

.fortsetzen__name {
    flex: 1 1 100%;
    order: 1;
    font-size: 0.85rem;
    color: var(--ln-tinte-notiz);
}

.fortsetzen .knopf {
    border-color: var(--ln-ink);
}

.fortsetzen .knopf--leise {
    color: var(--ln-ink);
}

/* ------------------------------------------------------------ Lobby: die gemeinsame Rolle */

.lobby__gemeinsam {
    display: grid;
    gap: var(--ln-gap-1);
    margin: var(--ln-gap-3) 0 0;
}

.lobby__schalter {
    justify-self: start;
}

.lobby__schalter[aria-pressed='true'],
.plan__schalter[aria-pressed='true'] {
    background: var(--ln-senf);
    border-color: var(--ln-senf);
    color: var(--ln-signal-senf);
}

.lobby__gemeinsam-satz {
    margin: 0;
    color: var(--ln-papier-dim);
}

/* ------------------------------------------------------------ Kopf: Zeichen am Knopf */

.knopf__zeichen {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: miter;
}

/* ------------------------------------------------------------ Missions-Dossier */

/*
 * EIN KLAPPFACH UNTER DEM KOPF: Papier auf der Nacht, mit der Kante des Senfs links. Die Haken sind Kästen aus
 * Linien und keine Zeichen im Text; erledigt heißt: gefüllt, mit Haken und mit dem Wort für den Schirmleser — nie
 * nur eine Farbe.
 */
.dossier {
    margin: 0 0 var(--ln-gap-2);
    padding: var(--ln-gap-2) var(--ln-gap-3) var(--ln-gap-3);
    background: var(--ln-papier);
    color: var(--ln-ink);
    border-left: var(--ln-rand-fett) solid var(--ln-senf);
    display: grid;
    gap: var(--ln-gap-1);
}

.dossier__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.25rem;
}

.dossier__marke {
    margin: var(--ln-gap-1) 0 0;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    color: var(--ln-signal-tief);
}

/*
 * ZWEI TEILE: links der Tag (Nordstern, Dauer), rechts das Kapitel (Ziel, Punkte). Ab 62rem stehen sie nebeneinander,
 * darunter untereinander, und der Text nimmt die volle Breite seiner Spalte: Der Kasten ist das Maß. Hier stand ein
 * zweiter Deckel von 68 Zeichen, und im breiten Kasten blieb rechts die halbe Fläche leer.
 */
.dossier__spalten {
    display: grid;
    gap: var(--ln-gap-2) var(--ln-gap-4);
}

@media (min-width: 62rem) {
    .dossier__spalten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dossier__teil {
    display: grid;
    align-content: start;
    gap: var(--ln-gap-1);
}

.dossier__nordstern,
.dossier__ziel {
    margin: 0;
}

.dossier__dauer {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ln-signal-tief);
}

.dossier__punkte {
    list-style: none;
    margin: var(--ln-gap-1) 0 0;
    padding: 0;
    display: grid;
    gap: var(--ln-gap-1);
}

.dossier__punkt {
    display: flex;
    align-items: baseline;
    gap: var(--ln-gap-2);
}

.dossier__haken {
    position: relative;
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid var(--ln-ink);
    transform: translateY(0.15em);
}

.dossier__punkt.ist-erledigt .dossier__haken {
    background: var(--ln-senf);
}

.dossier__punkt.ist-erledigt .dossier__haken::after {
    content: '';
    position: absolute;
    left: 0.28em;
    top: 0.05em;
    width: 0.3em;
    height: 0.6em;
    border-right: 3px solid var(--ln-ink);
    border-bottom: 3px solid var(--ln-ink);
    transform: rotate(45deg);
}

.dossier__punkt.ist-erledigt {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------ Crew: fremde Figuren und das Zusehen */

.reiter__knopf--fremd {
    border-style: dashed;
    border-bottom-style: solid;
    background: transparent;
}

.reiter__auge {
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.reiter__zusehen {
    font-family: var(--ln-font-amt);
    font-size: 0.75rem;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    opacity: 0.85;
}

/* Das Band über der Bühne, solange man zusieht: deckend, damit es über jeder Kulisse lesbar bleibt. */
.zusehen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ln-gap-1) var(--ln-gap-2);
    padding: var(--ln-gap-1) var(--ln-gap-2);
    background: var(--ln-ink);
    border-bottom: var(--ln-rand) solid var(--ln-senf);
}

.zusehen__text {
    margin: 0;
    flex: 1 1 14rem;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    color: var(--ln-papier);
}

.buehne__flaechen--zusehen {
    pointer-events: none;
}

.gehoert {
    list-style: none;
    margin: var(--ln-gap-2) 0 0;
    padding: var(--ln-gap-2);
    display: grid;
    gap: var(--ln-gap-1);
    border: 2px solid var(--ln-ink-3);
    background: var(--ln-ink-2);
}

.gehoert__leer {
    color: var(--ln-papier-dim);
}

/* ------------------------------------------------------------ Taschen der Crew */

.taschen {
    list-style: none;
    margin: 0;
    padding: 0 var(--ln-gap-2) var(--ln-gap-2);
    display: grid;
    gap: var(--ln-gap-1);
}

.taschen__figur {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--ln-gap-2);
    padding-left: var(--ln-gap-1);
    border-left: var(--ln-rand-fett) solid var(--fig);
}

.taschen__name {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    color: var(--fig-schrift);
}

.taschen__inhalt {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Stadtplan: alle versammeln */

.plan__versammeln {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ln-gap-1) var(--ln-gap-2);
}

.plan__versammeln p {
    margin: 0;
    flex: 1 1 14rem;
    font-size: 0.85rem;
    color: var(--ln-papier-dim);
}

/* ------------------------------------------------------------ Fall-Akte */

.akte {
    width: min(100%, 36rem);
    padding: var(--ln-gap-3);
    background: var(--ln-papier);
    color: var(--ln-ink);
    border-left: var(--ln-rand-fett) solid var(--ln-signal);
    display: grid;
    gap: var(--ln-gap-2);
}

.akte__titel {
    margin: 0;
    font-family: var(--ln-font-display);
    font-weight: 400;
}

.akte__daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem var(--ln-gap-2);
    margin: 0;
}

.akte__daten dt {
    font-family: var(--ln-font-amt);
    font-weight: 600;
    letter-spacing: var(--ln-sperrung);
    text-transform: uppercase;
    font-size: 0.8rem;
    align-self: center;
}

.akte__daten dd {
    margin: 0;
    font-family: var(--ln-font-mono);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
}

.akte__satz {
    margin: 0;
}

.akte__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ln-gap-1);
}

.akte .knopf {
    border-color: var(--ln-ink);
}

.akte .knopf--leise {
    justify-self: start;
    color: var(--ln-ink);
}

.akte__quittung {
    margin: 0;
    min-height: 1.5em;
    font-family: var(--ln-font-amt);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Datenschutz */

/*
 * ER STEHT MITTIG IM FENSTER, AUCH OHNE showModal(). Ein <dialog open> aus dem Markup ist nicht modal und stünde
 * sonst an seiner Stelle im Fluss, unter dem Fuß des Hauses; aufgerufen wird er über eine Adresse, und wer die aufruft,
 * will das Blatt sehen.
 */
.rechtsblatt {
    position: fixed;
    inset: 0;
    z-index: 1010;
    max-width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    margin: auto;
    padding: var(--ln-gap-3) var(--ln-gap-4);
    background: var(--ln-comic-papier);
    color: var(--ln-ink);
    border: var(--ln-rand) solid var(--ln-ink);
    border-top: 2px solid var(--ln-gold);
}

.rechtsblatt::backdrop {
    background: var(--ln-schleier);
}

.rechtsblatt__titel {
    margin: 0 0 var(--ln-gap-2);
    font-family: var(--ln-font-display);
    font-weight: 400;
    font-size: 1.35rem;
}

.rechtsblatt p {
    font-size: 0.95rem;
}

.rechtsblatt .knopf {
    border-color: var(--ln-ink);
    background: var(--ln-ink);
    color: var(--ln-papier);
}

/* ------------------------------------------------------------ Bewegung nur, wer sie will */

@media (prefers-reduced-motion: reduce) {
    .figur--geht,
    .heureka__kasten--ein {
        animation: none;
    }
    .knopf,
    .verb,
    .ding,
    .hier__knopf,
    .pult__option {
        transition: none;
    }
}