/*
 * Das Comic-Heft „Story Buchmafia“: Einstieg, Heft, Seiten, Panels, Leiste.
 *
 * Bewegung springt, sie federt nie (steps() wie in der Arena). Die Ausnahmen
 * stehen in CLAUDE.md, Abschnitt 13: der Blitz, mit dem eine Ansicht in rund
 * zwei Sekunden aufgebaut wird, das Umblättern (700 ms linear) und der
 * Lesebalken. Bei prefers-reduced-motion steht alles still.
 */

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

html { background: var(--st-nacht); color-scheme: dark; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
        var(--st-raster-hell) 0 0 / 7px 7px,
        var(--st-nacht);
    color: var(--st-papier);
    font: 1.0625rem/1.6 var(--st-font-comic);
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

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

/* ================================================================ Einstieg */

/*
 * DAS HEFT LIEGT AUF DER BUEHNE DES HAUSES: dieselbe Breite wie Kopf und Fuss (`--haus-shell`) und dieselbe
 * Seitenluft (`--haus-luft`). Hier stand 75rem, und auf einem Breitbild stand die Landeseite als schmale Saeule
 * unter einer Leiste, die ueber die ganze Seite reicht.
 */
.landung {
    max-width: var(--haus-shell, 1800px);
    margin: 0 auto;
    padding: 0 var(--haus-luft, clamp(1rem, 4vw, 2rem)) 3rem;
}

.auftakt {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem);
}

@media (min-width: 52rem) {
    .auftakt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.auftakt__text h1 {
    margin: 0 0 1rem;
    font: 400 clamp(2.4rem, 6vw, 4.2rem)/1 var(--st-font-plakat);
    color: var(--st-papier);
    text-shadow: 4px 4px 0 var(--st-karmin-tief);
}

.auftakt__text p { margin: 0 0 1rem; max-width: 60ch; }

.auftakt__zeile,
.kapitelkarte__nr,
.kapitelkarte__art {
    font: 600 0.85rem/1.3 var(--st-font-amt) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--st-senf);
}

.auftakt__dauer { color: var(--st-papier-matt); }

.auftakt__spoiler {
    display: inline-block;
    margin-top: 1.25rem !important;
    padding: 0.6rem 0.9rem;
    border: 2px dashed var(--st-karmin-blech);
    color: var(--st-papier);
    font-size: 0.95rem;
}

/* Das geschlossene Heft auf dem Tisch. */
.deckel {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 26rem);
    aspect-ratio: 2 / 3;
    justify-self: center;
    padding: 0;
    border: 3px solid var(--st-tinte);
    background: var(--st-nacht-2) var(--st-raster-hell) 0 0 / 6px 6px;
    box-shadow: 10px 10px 0 var(--st-karmin-tief), 10px 10px 0 3px var(--st-tinte);
    cursor: pointer;
    overflow: hidden;
    transform: rotate(-2deg);
    transition: transform 120ms linear;
}
.deckel:hover { transform: rotate(0deg); }

.deckel__kopf,
.umschlag__kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    padding: 5% 6% 4%;
    background: var(--st-raster-hell) 0 0 / 6px 6px, var(--st-tinte);
    border-bottom: 3px solid var(--st-tinte);
}

.deckel__bild {
    position: relative;
    display: block;
    flex: 1;
}

.deckel__marke {
    display: block;
    font: 400 12cqw/0.95 var(--st-font-plakat);
    text-transform: uppercase;
    color: var(--st-karmin);
    -webkit-text-stroke: 0.06em var(--st-tinte);
    paint-order: stroke fill;
    text-shadow: 0.07em 0.07em 0 var(--st-senf);
    text-align: left;
}

.deckel__titel {
    padding: 0.3em 0.6em;
    background: var(--st-senf);
    color: var(--st-tinte);
    font: 600 1.05rem/1 var(--st-font-amt);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.deckel__stempel {
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 6%;
    padding: 0.35em 0.7em;
    border: 3px solid var(--st-karmin);
    background: var(--st-papier);
    color: var(--st-karmin-tief);
    font: 600 0.9rem/1 var(--st-font-amt);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-7deg);
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: var(--st-griff);
    padding: 0.5rem 1.2rem;
    border: 3px solid var(--st-papier);
    background: transparent;
    color: var(--st-papier);
    font: 600 0.95rem/1.1 var(--st-font-amt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.knopf:hover { background: var(--st-papier); color: var(--st-tinte); }

.knopf--haupt {
    background: var(--st-senf);
    border-color: var(--st-tinte);
    color: var(--st-tinte);
    box-shadow: 5px 5px 0 var(--st-karmin-tief);
    font-size: 1.05rem;
    padding: 0.7rem 1.6rem;
}
.knopf--haupt:hover { background: var(--st-papier); }

.knopf--geist { border-color: var(--st-papier-matt); }

.kapitelwahl h2,
.lese h2 {
    font: 400 clamp(1.6rem, 3.6vw, 2.2rem)/1.1 var(--st-font-plakat);
    margin: 0 0 1.25rem;
}

.kapitelwahl__liste {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .kapitelwahl__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
    .kapitelwahl__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kapitelkarte {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--st-papier-dunkel);
    background: var(--st-nacht-2);
}

.kapitelkarte__bild {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 3px solid var(--st-papier-dunkel);
}

.kapitelkarte__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
}
.kapitelkarte__text h3 {
    margin: 0.2rem 0 0.5rem;
    font: 400 1.35rem/1.1 var(--st-font-plakat);
}
.kapitelkarte__text p { margin: 0 0 0.75rem; }
.kapitelkarte__art { color: var(--st-papier-matt) !important; }

.kapitelkarte__wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
}

.lese { margin-top: 3.5rem; max-width: 46rem; }
.lese > p { color: var(--st-papier-matt); }

.lese__kapitel {
    border-top: 2px solid var(--st-papier-dunkel);
    padding: 0.25rem 0;
}
.lese__kapitel:last-of-type { border-bottom: 2px solid var(--st-papier-dunkel); }

.lese__kapitel summary,
.lese__siegel summary {
    display: flex;
    align-items: center;
    min-height: var(--st-griff);
    cursor: pointer;
    font: 600 1.05rem/1.2 var(--st-font-amt);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lese__kapitel p { margin: 0 0 0.85rem; }
.lese__klein { font: 1rem/1.4 var(--st-font-doc); color: var(--st-papier-matt); }
.lese__gross { font: 400 1.3rem/1.2 var(--st-font-plakat); }

.lese__siegel {
    margin: 0.5rem 0 1rem;
    padding: 0 1rem;
    border: 2px dashed var(--st-karmin-blech);
}
.lese__siegel summary { color: var(--st-karmin-blech); font-size: 0.95rem; }

/* ================================================================ Das Heft */

dialog.heft {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.6) 100%),
        var(--st-raster-hell) 0 0 / 7px 7px,
        var(--st-nacht);
    color: var(--st-papier);
    overflow: hidden;
}
dialog.heft::backdrop { background: var(--st-nacht); }

.heft__buehne {
    position: absolute;
    inset: 0 0 var(--leiste-h) 0;
    display: grid;
    place-items: center;
    perspective: 2600px;
    overflow: hidden;
    touch-action: pan-y;
}

.buch {
    position: relative;
    display: flex;
    width: calc(var(--seite-b, 400px) * 2);
    height: calc(var(--seite-b, 400px) * 1.5);
    transform-style: preserve-3d;
}

.heft[data-modus='doppel'] .buch[data-nur='rechts'] { transform: translateX(-25%); }
.heft[data-modus='doppel'] .buch[data-nur='links'] { transform: translateX(25%); }
.heft[data-modus='doppel'] .buch.buch--schiebt { transition: transform 700ms linear; }

/* Die Seite misst ihre Schrift an der eigenen Breite; der Bezugsrahmen muss dafür eine Ebene darüber liegen. */
.buch__haelfte,
.blatt__seite {
    container-type: inline-size;
}

.buch__haelfte {
    position: relative;
    width: var(--seite-b, 400px);
    height: 100%;
}

.heft[data-modus='einzel'] .buch { width: var(--seite-b, 400px); }

/* Das umblätternde Blatt. */
.blatt {
    position: absolute;
    top: 0;
    width: var(--seite-b, 400px);
    height: 100%;
    transform-style: preserve-3d;
    z-index: 5;
}
.blatt--vor { left: 50%; transform-origin: 0 50%; animation: blatt-vor 700ms linear forwards; }
.blatt--zurueck { left: 0; transform-origin: 100% 50%; animation: blatt-zurueck 700ms linear forwards; }
.blatt__seite {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.blatt__seite--hinten { transform: rotateY(180deg); }

@keyframes blatt-vor { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes blatt-zurueck { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }

/* Einzelseite und Stapel blättern mit einem harten Schnitt. */
.buch--schnitt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--st-papier);
    animation: schnitt 140ms steps(2, jump-none) forwards;
    pointer-events: none;
    z-index: 6;
}
@keyframes schnitt { from { opacity: 1; } to { opacity: 0; } }

/* ================================================================ Eine Seite */

.seite {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.8cqw;
    padding: 4.2cqw 4.2cqw 2.4cqw;
    background: var(--st-korn), var(--st-papier);
    color: var(--st-tinte);
    --text: clamp(11px, 2.75cqw, 20px);
    font-size: var(--text);
    overflow: hidden;
}

/* Die Bundlinie als harte Linie nach innen: Sie darf die Breite nicht ändern, sonst misst eine Seite auf dem Blatt anders als danach im Heft. */
.buch__haelfte--links .seite { box-shadow: inset -3px 0 0 var(--st-papier-dunkel); }
.buch__haelfte--rechts .seite { box-shadow: inset 3px 0 0 var(--st-papier-dunkel); }

.seite__kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2em 0.8em;
    padding: 1.4cqw 2.2cqw;
    background: var(--st-tinte);
    color: var(--st-papier);
}
.seite__kapitel {
    font: 600 0.8em/1 var(--st-font-amt);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--st-senf);
}
.seite__titel {
    font: 400 1.9em/1 var(--st-font-plakat);
    text-transform: uppercase;
}
.seite__zeit {
    margin-left: auto;
    font: 0.95em/1.2 var(--st-font-doc);
    color: var(--st-papier-dunkel);
}

.seite__fuss {
    display: flex;
    justify-content: center;
    font: 600 0.75em/1 var(--st-font-amt);
    letter-spacing: 0.14em;
    color: var(--st-selma-papier);
}

.seite__raster {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 1.8cqw;
}

.raster--splash { grid-template: 'a' minmax(0, 1fr) / 1fr; }
.raster--breit-paar-streifen { grid-template: 'a a' minmax(0, .56fr) 'b c' minmax(0, .5fr) 'd d' minmax(0, .43fr) / 1fr 1fr; }
.raster--paar-breit-streifen { grid-template: 'b c' minmax(0, .5fr) 'a a' minmax(0, .56fr) 'd d' minmax(0, .43fr) / 1fr 1fr; }
.raster--breit-streifen-paar { grid-template: 'a a' minmax(0, .56fr) 'd d' minmax(0, .43fr) 'b c' minmax(0, .5fr) / 1fr 1fr; }
.raster--streifen-breit-paar { grid-template: 'd d' minmax(0, .43fr) 'a a' minmax(0, .56fr) 'b c' minmax(0, .5fr) / 1fr 1fr; }
.raster--saeule { grid-template: 'a b' minmax(0, .5fr) 'a c' minmax(0, .5fr) 'd d' minmax(0, .56fr) / 1fr 1fr; }
.raster--breit-band-breit { grid-template: 'a' minmax(0, .56fr) 'b' minmax(0, .26fr) 'c' minmax(0, .56fr) / 1fr; }
.raster--gross-paar { grid-template: 'a a' minmax(0, .95fr) 'b c' minmax(0, .5fr) / 1fr 1fr; }
.raster--zwischen { grid-template: 'a' minmax(0, .4fr) 'b' minmax(0, .45fr) 'c' minmax(0, .5fr) / 1fr; }

.seite__raster > [data-slot='a'] { grid-area: a; }
.seite__raster > [data-slot='b'] { grid-area: b; }
.seite__raster > [data-slot='c'] { grid-area: c; }
.seite__raster > [data-slot='d'] { grid-area: d; }

/* ================================================================ Panels */

.panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: max(2px, 0.6cqw) solid var(--st-tinte);
    background: var(--st-nacht-2);
}

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

/*
 * Jedes Bild kommt zugeschnitten (dev/optimize.php nach dev/story_beschnitt.php)
 * und legt sich hier nur noch in sein Feld, am Blickpunkt ausgerichtet.
 */
.motiv > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--fokus, 50% 50%);
}

.platzhalter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    padding: 1em;
    background: var(--st-raster-hell) 0 0 / 6px 6px, var(--st-nacht-3);
    color: var(--st-papier-dunkel);
    text-align: center;
    font: 0.85em/1.3 var(--st-font-doc);
}
.platzhalter b {
    font: 600 0.85em/1 var(--st-font-amt);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--st-senf);
}

.panel__hinweis {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em 0.5em;
    background: var(--st-tinte);
    color: var(--st-papier-dunkel);
    font: 600 0.55em/1.2 var(--st-font-amt);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 3;
}

.panel__texte {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.7em;
    pointer-events: none;
    z-index: 2;
}

/* Eine Gruppe ist eine Zeile, die umbricht: zwei kurze Blasen stehen nebeneinander, zwei Kästen untereinander. */
.panel__gruppe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45em 0.6em;
}
.panel__gruppe--unten { align-items: flex-end; margin-top: auto; }
.panel__gruppe > [data-ort$='-rechts'] { margin-left: auto; }
.panel__gruppe > [data-ort$='-mitte'] { margin-inline: auto; }
.panel__gruppe > [data-ort='oben'],
.panel__gruppe > [data-ort='unten'] { flex-basis: 100%; max-width: none; }

/* In breiten Panels decken Kästen und Blasen weniger vom Bild. */
.heft:not([data-modus='stapel']) .panel--bild { container: panel / size; }
@container panel (min-aspect-ratio: 3 / 2) {
    .panel__gruppe > .kasten { max-width: 64%; }
    .panel__gruppe > .blase { max-width: 49%; }
}

/* Der Erzählkasten: die Bildunterschrift des Hauses, auf das Bild gelegt. */
.kasten {
    margin: 0;
    max-width: 80%;
    padding: 0.45em 0.7em;
    background: var(--st-papier);
    border: 2px solid var(--st-tinte);
    border-top: 2px solid var(--st-gold);
    color: var(--st-tinte);
    font: 1em/1.3 var(--st-font-comic);
    box-shadow: 3px 3px 0 var(--st-tinte);
}

.blase {
    position: relative;
    margin: 0 0 0 0.6em;
    max-width: 78%;
    padding: 0.35em 0.8em 0.45em;
    background: var(--st-papier-hell);
    border: 2px solid var(--st-tinte);
    border-left: 0.35em solid var(--blase-farbe, var(--st-tinte));
    border-radius: 1.2em;
    color: var(--st-tinte);
    font: 600 1.32em/1.12 var(--st-font-blase);
    box-shadow: 3px 3px 0 var(--st-tinte);
}
.blase cite {
    display: block;
    font: 600 0.46em/1.3 var(--st-font-amt);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blase-schrift, var(--st-tinte));
}

/* Der Schwanz zeigt zur Figur: unten stehende Blasen nach oben, oben stehende nach unten. */
.blase::after {
    content: '';
    position: absolute;
    left: 1.6em;
    width: 0.8em;
    height: 0.8em;
    background: var(--st-papier-hell);
    border: 2px solid var(--st-tinte);
    transform: rotate(45deg);
}
.panel__gruppe--unten .blase::after { top: -0.47em; border-right: 0; border-bottom: 0; }
.panel__gruppe--oben .blase::after,
.panel--text .blase::after { bottom: -0.47em; border-left: 0; border-top: 0; }
.blase[data-ort$='-rechts']::after { left: auto; right: 1.6em; }

.blase--ruth { --blase-farbe: var(--st-ruth); --blase-schrift: var(--st-ruth-papier); }
.blase--ansgar { --blase-farbe: var(--st-ansgar); --blase-schrift: var(--st-ansgar-papier); }
.blase--selma { --blase-farbe: var(--st-selma); --blase-schrift: var(--st-selma-papier); }
.blase--nuri { --blase-farbe: var(--st-nuri); --blase-schrift: var(--st-nuri-papier); }
.blase--holzschliff { --blase-farbe: var(--st-holzschliff); --blase-schrift: var(--st-holzschliff-papier); }

.stift {
    margin: 0;
    padding: 0.15em 0.6em;
    background: var(--st-papier-hell);
    border: 1px solid var(--st-papier-dunkel);
    color: var(--st-graphit);
    font: 600 1.3em/1.15 var(--st-font-blase);
    transform: rotate(-2deg);
}

/* Geräuschwörter: Karmin mit Tuschekontur auf einem gezackten Stern in Senf. */
.sfx {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0.5em 0.7em;
    font: 400 2.5em/1 var(--st-font-plakat);
    color: var(--st-karmin);
    -webkit-text-stroke: 0.07em var(--st-tinte);
    paint-order: stroke fill;
    text-shadow: 0.06em 0.06em 0 var(--st-tinte);
    letter-spacing: 0.02em;
    white-space: nowrap;
    translate: 0 -50%;
    rotate: -8deg;
    pointer-events: none;
}
.sfx::before {
    content: '';
    position: absolute;
    inset: -0.15em -0.25em;
    z-index: -1;
    background: var(--st-senf);
    clip-path: polygon(50% 0%, 59% 22%, 80% 8%, 72% 32%, 98% 30%, 78% 48%, 100% 64%, 74% 66%, 84% 92%, 60% 76%, 50% 100%, 40% 76%, 16% 92%, 26% 66%, 0% 64%, 22% 48%, 2% 30%, 28% 32%, 20% 8%, 41% 22%);
}
.sfx[data-ort$='links'] { left: 4%; }
.sfx[data-ort$='rechts'] { right: 4%; }
.sfx[data-ort$='mitte'] { left: 50%; translate: -50% -50%; }
.sfx[data-ort^='unten'] { top: auto; bottom: 7%; translate: 0 0; }
.sfx[data-ort='unten-mitte'] { translate: -50% 0; }
.sfx[data-ort^='oben'] { top: 7%; translate: 0 0; }
.sfx[data-ort='oben-mitte'] { translate: -50% 0; }

.stempel {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 3;
    margin: 0;
    padding: 0.25em 0.6em;
    border: 0.12em solid var(--st-karmin);
    background: var(--st-papier);
    color: var(--st-karmin-tief);
    font: 400 2.1em/1.05 var(--st-font-plakat);
    text-transform: uppercase;
    white-space: nowrap;
    translate: -50% -50%;
    rotate: -6deg;
    box-shadow: 4px 4px 0 var(--st-tinte);
}

/* Felder ohne Bild: Erzählfeld, Dokument, Zeitung. */
.panel--text,
.panel--dokument,
.panel--zeitung {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6em;
    padding: 1em 1.1em;
}

.panel--text[data-ton='senf'] { background: var(--st-raster) 0 0 / 6px 6px, var(--st-senf); }
.panel--text[data-ton='papier'] { background: var(--st-raster) 0 0 / 6px 6px, var(--st-papier-alt); }
.panel--text[data-ton='nacht'] { background: var(--st-raster-hell) 0 0 / 6px 6px, var(--st-nacht); color: var(--st-papier); }

.panel--text .kasten {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: inherit;
    font-size: 1.1em;
    line-height: 1.35;
}
.panel--text .blase { align-self: flex-start; }
.panel--text .blase[data-ort$='-rechts'] { align-self: flex-end; }
.panel--text .blase[data-ort='mitte'] { align-self: center; max-width: 92%; }

.feld__titel {
    margin: 0;
    font: 400 2.6em/1 var(--st-font-plakat);
    text-transform: uppercase;
    text-align: center;
    color: var(--st-senf);
    -webkit-text-stroke: 0.04em var(--st-tinte);
    paint-order: stroke fill;
    text-shadow: 0.06em 0.06em 0 var(--st-karmin-tief);
}

.panel--dokument {
    justify-content: center;
    background: var(--st-papier-hell);
    border-left-width: max(2px, 0.6cqw);
    box-shadow: inset 0.35em 0 0 var(--st-karmin);
    padding-left: 1.4em;
}
.dok__kopf {
    margin: 0;
    font: 600 0.72em/1.3 var(--st-font-amt);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--st-karmin-tief);
}
.dok__zitat {
    margin: 0;
    font: 1em/1.4 var(--st-font-doc);
    color: var(--st-tinte);
}
.dok__unterschrift {
    margin: 0;
    align-self: flex-end;
    font: 0.9em/1.2 var(--st-font-doc);
}
.panel--dokument .stift { align-self: flex-end; }

.panel--zeitung {
    justify-content: flex-start;
    background: var(--st-korn), var(--st-papier-alt);
}
.zei__kopf {
    margin: 0;
    padding: 0.25em 0;
    border-top: 3px double var(--st-tinte);
    border-bottom: 3px double var(--st-tinte);
    font: 600 0.72em/1.2 var(--st-font-amt);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}
.zei__schlagzeile {
    margin: 0.1em 0;
    font: 400 2.3em/1 var(--st-font-plakat);
    text-align: center;
    text-transform: uppercase;
}
.zei__meldung {
    margin: 0;
    font: 0.95em/1.35 var(--st-font-comic);
}
.raster--gross-paar [data-slot='a'].panel--zeitung { gap: 0.9em; }
.raster--gross-paar [data-slot='a'].panel--zeitung .zei__schlagzeile { font-size: 3.6em; }
.raster--gross-paar [data-slot='a'].panel--zeitung .zei__meldung { font-size: 1.3em; }
.raster--gross-paar [data-slot='b'].panel--zeitung .zei__schlagzeile,
.raster--gross-paar [data-slot='b'].panel--zeitung .zei__kopf { font-size: 1.5em; }
.raster--gross-paar [data-slot='b'].panel--zeitung .zei__kopf { font-size: 0.62em; }

/* Das Sicherheitsnetz aus heft.js: Passt ein Text nicht, rückt die Schrift in kleinen Stufen enger. */
.panel { font-size: calc(1em * var(--pass, 1)); }

/* ================================================================ Sonderseiten */

.seite--umschlag {
    padding: 0;
    background: var(--st-nacht-2);
}
.seite--umschlag { gap: 0; }
.umschlag__bild {
    position: relative;
    flex: 1;
    min-height: 0;
}
.umschlag__marke {
    font: 400 12cqw/0.9 var(--st-font-plakat);
    text-transform: uppercase;
    color: var(--st-karmin);
    -webkit-text-stroke: 0.05em var(--st-tinte);
    paint-order: stroke fill;
    text-shadow: 0.06em 0.06em 0 var(--st-senf);
}
.umschlag__zeile {
    padding: 0.3em 0.7em;
    background: var(--st-senf);
    color: var(--st-tinte);
    font: 600 1.2em/1 var(--st-font-amt);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.umschlag__heft {
    position: absolute;
    z-index: 1;
    left: 6%;
    bottom: 4%;
    max-width: 60%;
    margin: 0;
    padding: 0.3em 0.6em;
    background: var(--st-papier);
    color: var(--st-tinte);
    font: 600 0.8em/1.3 var(--st-font-amt);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid var(--st-tinte);
}
.umschlag__stempel {
    position: absolute;
    z-index: 1;
    right: 6%;
    bottom: 12%;
    margin: 0;
    padding: 0.3em 0.6em;
    border: 0.15em solid var(--st-karmin);
    background: var(--st-papier);
    color: var(--st-karmin-tief);
    font: 400 1.35em/1 var(--st-font-plakat);
    text-transform: uppercase;
    rotate: -8deg;
}

.besetzung__titel {
    margin: 0;
    font: 400 2.3em/1 var(--st-font-plakat);
    text-transform: uppercase;
}
.besetzung__kasten {
    margin: 0;
    padding: 0.5em 0.7em;
    background: var(--st-senf);
    border: 2px solid var(--st-tinte);
    font: 1em/1.35 var(--st-font-comic);
}
.besetzung__liste {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 1.4cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}
.figur {
    display: grid;
    grid-template-columns: 21cqw minmax(0, 1fr);
    align-items: center;
    gap: 0.9em;
    min-height: 0;
}
.figur--gegner {
    padding-top: 1.2cqw;
    border-top: 3px solid var(--st-tinte);
}
.figur__bild {
    position: relative;
    width: 21cqw;
    height: 21cqw;
    overflow: hidden;
    border: max(2px, 0.6cqw) solid var(--figur-farbe, var(--st-tinte));
    background: var(--st-nacht-3);
}
.figur__name {
    margin: 0;
    font: 400 1.25em/1.05 var(--st-font-plakat);
}
.figur__deck {
    margin: 0 0 0.15em;
    font: 600 0.8em/1.2 var(--st-font-amt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--figur-schrift, var(--st-tinte));
}
.figur__satz { margin: 0; font: 0.95em/1.3 var(--st-font-comic); }
.figur--ruth { --figur-farbe: var(--st-ruth); --figur-schrift: var(--st-ruth-papier); }
.figur--ansgar { --figur-farbe: var(--st-ansgar); --figur-schrift: var(--st-ansgar-papier); }
.figur--selma { --figur-farbe: var(--st-selma); --figur-schrift: var(--st-selma-papier); }
.figur--nuri { --figur-farbe: var(--st-nuri); --figur-schrift: var(--st-nuri-papier); }
.figur--holzschliff { --figur-farbe: var(--st-karmin); --figur-schrift: var(--st-karmin-tief); }

.besetzung__gruppe {
    margin: 0;
    font: 600 0.7em/1 var(--st-font-amt);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--st-karmin-tief);
}

.seite--rueckseite {
    background: var(--st-raster-hell) 0 0 / 6px 6px, var(--st-nacht-2);
    color: var(--st-papier);
}
.rueck__titel {
    margin: 0;
    font: 400 2.4em/1 var(--st-font-plakat);
    text-transform: uppercase;
    color: var(--st-senf);
}
.rueck__satz { margin: 0; font: 1em/1.35 var(--st-font-comic); }
.rueck__tueren {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
    gap: 1.8cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tuer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: max(2px, 0.5cqw) solid var(--st-papier-dunkel);
    background: var(--st-nacht);
}
.tuer__bild { position: relative; flex: 1; min-height: 0; }
.tuer__text { padding: 0.5em 0.6em 0.6em; }
.tuer__nr {
    margin: 0;
    font: 600 0.7em/1.2 var(--st-font-amt);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--st-senf);
}
.tuer__titel { margin: 0 0 0.35em; font: 400 1.05em/1.1 var(--st-font-plakat); }
.tuer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--st-griff);
    padding: 0 0.8em;
    background: var(--st-senf);
    color: var(--st-tinte);
    font: 600 0.75em/1 var(--st-font-amt);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--st-tinte);
}
.rueck__preis {
    align-self: flex-end;
    margin: 0;
    padding: 0.3em 0.6em;
    border: 2px solid var(--st-papier);
    font: 600 0.75em/1.2 var(--st-font-amt);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.seite--rueckseite .seite__fuss { color: var(--st-papier-matt); }

/* Das Siegel über einer Seite, die das Spiel für sich behält. */
.siegel {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    padding: 8cqw;
    background: var(--st-korn), var(--st-raster) 0 0 / 6px 6px, var(--st-papier-alt);
    color: var(--st-tinte);
    text-align: center;
}
.siegel__wachs { width: 42cqw; height: 42cqw; }
.siegel__titel {
    margin: 0;
    font: 400 2.2em/1 var(--st-font-plakat);
    text-transform: uppercase;
    color: var(--st-karmin-tief);
}
.siegel__satz { margin: 0; font: 1.05em/1.4 var(--st-font-comic); max-width: 30em; }
.siegel__hinweis { margin: 0; font: 0.85em/1.4 var(--st-font-doc); color: var(--st-graphit); }
.siegel .knopf {
    border-color: var(--st-tinte);
    background: var(--st-karmin-tief);
    color: var(--st-papier);
    font-size: 0.9em;
}
.siegel .knopf:hover { background: var(--st-tinte); }
.siegel--bricht .siegel__wachs { animation: siegel-bricht 360ms steps(3, jump-end) forwards; }
.siegel--bricht { animation: siegel-weg 420ms steps(2, jump-end) 240ms forwards; }
@keyframes siegel-bricht {
    to { transform: rotate(-14deg) scale(1.15); opacity: 0; }
}
@keyframes siegel-weg { to { opacity: 0; visibility: hidden; } }

/* ================================================================ Aufdecken */

/* Solange eine Seite verdeckt ist, stehen nur leere Rahmen auf dem Papier. */
.verdeckt [data-schritt]:not(.da) { visibility: hidden; }
.verdeckt .panel[data-schritt]:not(.da) {
    visibility: visible;
    background: transparent;
    border-color: var(--st-papier-dunkel);
}
.verdeckt .panel[data-schritt]:not(.da) > * { visibility: hidden; }

.anim-blitz { animation: blitz 160ms steps(2, jump-end); }
.anim-blitz::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--st-papier-hell);
    animation: blitz-licht 160ms steps(2, jump-end) forwards;
    pointer-events: none;
}
.anim-ruck { animation: ruck 100ms steps(2, jump-end); }
.anim-knall { animation: knall 120ms steps(2, jump-end); }
.anim-stempel { animation: stempel 160ms steps(3, jump-end); }
.anim-ruettel { animation: ruettel 180ms steps(4, jump-end); }

@keyframes blitz { from { scale: 1.04; } to { scale: 1; } }
@keyframes blitz-licht { from { opacity: 0.85; } to { opacity: 0; } }
@keyframes ruck { from { transform: translateY(-0.6em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes knall { from { scale: 0.6; } to { scale: 1; } }
@keyframes stempel { from { scale: 2.4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes ruettel {
    0% { translate: 0.8% 0; }
    25% { translate: -0.8% 0.5%; }
    50% { translate: 0.6% -0.5%; }
    75% { translate: -0.4% 0; }
    100% { translate: 0 0; }
}

/* ================================================================ Leiste */

.heft__leiste {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--leiste-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    background: var(--st-nacht);
    border-top: 2px solid var(--st-nacht-3);
}

.heft__uhr {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 3px;
    background: var(--st-senf);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}
.heft__uhr--laeuft { animation: uhr var(--dauer, 10s) steps(40, jump-end) forwards; }
@keyframes uhr { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.griff {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    min-width: var(--st-griff);
    min-height: var(--st-griff);
    padding: 0 0.6rem;
    border: 2px solid var(--st-nacht-3);
    background: var(--st-nacht-2);
    color: var(--st-papier);
    font: 600 0.8rem/1 var(--st-font-amt);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.griff:hover:not(:disabled) { border-color: var(--st-senf); color: var(--st-senf); }
.griff:disabled { opacity: 0.4; cursor: default; }
.griff svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.griff--haupt { background: var(--st-senf); border-color: var(--st-senf); color: var(--st-tinte); }
.griff--haupt:hover:not(:disabled) { background: var(--st-papier); border-color: var(--st-papier); color: var(--st-tinte); }
.griff__wort { white-space: nowrap; }
.griff--ende { margin-left: auto; }
.griff--start { margin-right: auto; }

.heft__zaehler {
    min-width: 4.5em;
    text-align: center;
    font: 600 0.8rem/1 var(--st-font-amt);
    letter-spacing: 0.08em;
    color: var(--st-papier-matt);
}

@media (max-width: 79.99rem) {
    .griff__wort--weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 47.99rem) {
    .heft__leiste { gap: 0.25rem; padding: 0 0.4rem; }
    .griff { padding: 0 0.45rem; }
}
@media (max-width: 26rem) {
    .heft__zaehler { display: none; }
}

.heft__kapitel {
    position: absolute;
    right: 0.75rem;
    bottom: calc(var(--leiste-h) + 0.5rem);
    z-index: 20;
    width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.5rem;
    background: var(--st-nacht-2);
    border: 2px solid var(--st-senf);
    box-shadow: var(--st-schatten);
}
.heft__kapitel button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: var(--st-griff);
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: var(--st-papier);
    text-align: left;
    cursor: pointer;
    font: 1rem/1.25 var(--st-font-comic);
}
.heft__kapitel button:hover { background: var(--st-nacht-3); }
.heft__kapitel-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--st-nacht-3);
}
.heft__kapitel .heft__kapitel-fuss .griff {
    flex-direction: row;
    align-items: center;
    width: auto;
    font: 600 0.8rem/1 var(--st-font-amt);
    border: 2px solid var(--st-nacht-3);
    background: var(--st-nacht);
    padding: 0 0.7rem;
}
.heft__kapitel small {
    font: 600 0.72rem/1.3 var(--st-font-amt);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--st-senf);
}

.heft__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ================================================================ Stapel: das Telefon */

.heft[data-modus='stapel'] .heft__buehne {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: none;
    padding: 0.75rem 0.75rem 2rem;
}
.heft[data-modus='stapel'] .buch { width: 100%; height: auto; display: block; }
.heft[data-modus='stapel'] .buch__haelfte { width: 100%; height: auto; }
.heft[data-modus='stapel'] .seite {
    height: auto;
    min-height: 60dvh;
    padding: 1rem;
    gap: 0.9rem;
    --text: 16px;
    border: 0;
}
.heft[data-modus='stapel'] .seite__raster { display: flex; flex-direction: column; gap: 0.9rem; }
.heft[data-modus='stapel'] .panel { flex: none; border-width: 3px; }
.heft[data-modus='stapel'] .panel--bild { display: flex; flex-direction: column; background: var(--st-papier-alt); }
.heft[data-modus='stapel'] .panel--bild .panel__bild { position: relative; inset: auto; aspect-ratio: var(--seitenverhaeltnis, 16 / 9); }
.heft[data-modus='stapel'] .panel__texte {
    position: static;
    padding: 0.75rem;
    gap: 0.6rem;
    border-top: 3px solid var(--st-tinte);
}
.heft[data-modus='stapel'] .panel__texte:empty { display: none; }
.heft[data-modus='stapel'] .kasten,
.heft[data-modus='stapel'] .blase { max-width: 100%; box-shadow: none; }
.heft[data-modus='stapel'] .sfx { font-size: 2.1em; }
.heft[data-modus='stapel'] .panel--text,
.heft[data-modus='stapel'] .panel--dokument,
.heft[data-modus='stapel'] .panel--zeitung { min-height: 8rem; }
.heft[data-modus='stapel'] .seite--umschlag { aspect-ratio: 2 / 3; min-height: 0; padding: 0; --text: 11px; }
.heft[data-modus='stapel'] .besetzung__liste { grid-template-rows: none; }
.heft[data-modus='stapel'] .figur__bild { width: 6rem; height: 6rem; }
.heft[data-modus='stapel'] .rueck__tueren { grid-template: none; }
.heft[data-modus='stapel'] .tuer__bild { aspect-ratio: 16 / 9; flex: none; }
.heft[data-modus='stapel'] .siegel { position: relative; inset: auto; min-height: 60dvh; padding: 2rem 1rem; }
.heft[data-modus='stapel'] .siegel__wachs { width: 10rem; height: 10rem; }
.heft[data-modus='stapel'] .seite--versiegelt > :not(.siegel) { display: none; }
.heft[data-modus='stapel'] .panel--zeitung .zei__schlagzeile { font-size: 1.9em; }
.heft[data-modus='stapel'] .panel--zeitung .zei__meldung { font-size: 1em; }
.heft[data-modus='stapel'] .feld__titel { font-size: 2em; }

/* ================================================================ Datenschutz */

/* Der Text des Zimmers, offen unter ?recht=datenschutz und ohne Skript lesbar; derselbe Bogen wie in der Luftnummer. */
.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: 1.2rem 1.6rem;
    background: var(--st-papier);
    color: var(--st-tinte);
    border: 3px solid var(--st-tinte);
    border-top: 2px solid var(--st-gold);
}
.rechtsblatt::backdrop { background: rgba(11, 11, 13, 0.72); }
.rechtsblatt__titel {
    margin: 0 0 0.7rem;
    font: 400 1.35rem/1.1 var(--st-font-plakat);
}
.rechtsblatt p { font-size: 0.95rem; }
.rechtsblatt .knopf {
    border-color: var(--st-tinte);
    background: var(--st-tinte);
    color: var(--st-papier);
}

/* ================================================================ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .deckel { transform: none; }
}