/* NARRENBIBEL · FOOLSBIBLE — v1.0 */

/* DER DREHWINKEL ALS EIGENE EIGENSCHAFT (v0.38) */
@property --nr {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}
/* DER ÜBERGANG MUSS DORT STEHEN, WO SICH DIE ZAHL ÄNDERT – und das war */
.phase__tri svg,
.apart__marks svg:nth-child(2),
.sigil svg,
.modal__tri svg,
.hero__hint svg {
    transition: --nr 1.3s cubic-bezier(.5, 0, .2, 1);
}

:root {
    --night:      #0b0a09;               /* warmes, tiefes Schwarz     */
    --night-glow: #171412;               /* kaum wahrnehmbare Wärme    */
    --paper:      #ffffff;
    --ink:        #101010;
    --ink-soft:   #4a4644;
    --white-soft: rgba(255, 255, 255, .72);
    --blood:      #7a0c0c;
    /* Bis v0.27 standen hier --garden und --garden-mid: zwei Pergamenttöne */
    --blood-soft: rgba(122, 12, 12, .34);
    --hairline:   1px solid var(--blood);
    --col:        40rem;

    /* DAS ROT AUF SCHWARZ, jetzt seitenweit (v0.40). Es stand bisher */
    --lit:        #a31313;

    /* DER ATEM (v0.37) */
    --atem: 7.6s;

    /* DER FUSS DES IMPRESSUMS (v1.10) — DIE EINE ZAHL */
    /* Sie bestimmt, wie weit das Siebeneck unter dem roten Dreieck liegt.
       Bis v1.09 stand sie an VIER Stellen (28vh, 22vh und zweimal
       dasselbe noch einmal in @supports env(safe-area-inset-bottom)), und
       wer eine änderte, hatte drei übersehen — auf dem Telefon blieb
       alles, wie es war. Jetzt steht sie hier, und die vier Stellen lesen
       sie. */
    --impressum-fuss: 11vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Overscroll: oben Nacht, unten Weiss — der Bogen bleibt geschlossen */
    background: linear-gradient(to bottom,
        var(--night) 0%, var(--night) 40%, var(--paper) 60%, var(--paper) 100%);
}

/* DIE ZOOMSPERRE · TEIL 2 VON 3 (v0.79) */
/* DER TAKT AUCH IM STYLESHEET (v0.85) */
:root { --nb-takt: 1; }

html, body {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* DIE KETTE REISST NICHT WEITER (v0.79) */
html { overscroll-behavior-y: contain; }

/* Optional: eigene, selbst gehostete Schrift statt Google Fonts. */

body {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    font-weight: 300;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

::selection { background: var(--blood); color: #fff; }

/* Scrollbalken — schmal, blutrot, wie der Faden selbst */
html { scrollbar-width: thin; scrollbar-color: var(--blood) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--blood); }

/* ── Filmkorn — feines Rauschen wie altes Druckpapier ─────────────── */
body::after {
    content: "";
    position: fixed;
    /* EINE BILDFLÄCHE, NICHT VIER (v0.74) */
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
    opacity: .045;
    pointer-events: none;
    z-index: 90;
}

/* v0.74 · DIE ANGEMELDETEN EIGENSCHAFTEN */

/* Der Scroll-Fortschritt. Er steht am Faden und wird von seinen zwei */
@property --scroll {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
/* --faden-h wird ABSICHTLICH NICHT ANGEMELDET, und das ist keine */

/* DIE VIER ZAHLEN DES RAUSCHES (v0.77) */

/* Die Nähe eines Dreiecks zum Zeichen ganz unten (v0.72). Sie steht am */
@property --naehe {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
/* Die Wucht eines Einschlags. Sie wird von den Kindern des Blitzes */
@property --kraft {
    syntax: "<number>";
    inherits: true;
    initial-value: .5;
}
/* --gx und --gy (der Ort des Griffs, v0.73) stehen hier NICHT: sie ändern */

/* DER ROTE FADEN */
.thread {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--blood-soft) 10%,
        var(--blood-soft) 90%,
        transparent 100%);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    transition: opacity .25s linear;
}

.thread__fill {
    position: absolute;
    top: 0; left: 0;
    width: 1px;
    height: 100%;
    background: #a31313;
    box-shadow: 0 0 9px rgba(163, 19, 19, .6);
    transform: scaleY(var(--scroll, 0));
    transform-origin: top;
}

/* Der Kopf sitzt auf der Spitze der Füllung. Sein Verlauf ist nach */
.thread__head {
    position: absolute;
    left: 50%;
    /* DER KOPF FÄHRT, ER WIRD NICHT UMGELEGT (v0.74) */
    top: 0;
    width: 3px;
    height: 150px;
    margin-left: -1.5px;
    transform: translateY(calc(var(--scroll, 0) * var(--faden-h, 100vh) - 117px));
    background:
        radial-gradient(closest-side at 50% 78%,
            rgba(255, 214, 214, .95) 0%,
            rgba(214, 42, 42, .55) 38%,
            rgba(163, 19, 19, 0) 100%),
        linear-gradient(to bottom,
            rgba(163, 19, 19, 0) 0%,
            rgba(163, 19, 19, .42) 62%,
            rgba(214, 42, 42, .8) 78%,
            rgba(163, 19, 19, 0) 92%);
    opacity: .5;
    transition: opacity .35s ease;
}

/* Nach oben: derselbe Kopf, gespiegelt – der Schweif zeigt dorthin, */
/* ACHTUNG, EINE FALLE (v0.74): diese Regel ERSETZT die ganze */
.thread.is-up .thread__head {
    transform: translateY(calc(var(--scroll, 0) * var(--faden-h, 100vh) - 33px)) scaleY(-1);
}

/* Solange sich etwas bewegt, brennt der Kopf heller. Steht die Seite */
.thread.is-moving .thread__head { opacity: 1; }

/* Über dem Wald trägt der Faden die helle Lesart. #7a0c0c auf Schwarz */
.thread--lit {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(163, 19, 19, .55) 10%,
        rgba(163, 19, 19, .55) 90%,
        transparent 100%);
}

main, header, footer, .passage { position: relative; z-index: 1; }

/* ═══ I · DIE NACHT — Titel in tiefstem Schwarz ═══════════════════── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background:
        radial-gradient(ellipse 120% 75% at 50% 44%,
            var(--night-glow) 0%, var(--night) 62%, #060505 100%);
    color: #fff;
    overflow: hidden;
}

/* DER VORHANG (v0.36) */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    pointer-events: none;
    animation: heroVeil 2s cubic-bezier(.4, 0, .3, 1) forwards .3s;
}
@keyframes heroVeil { to { opacity: 0; } }

/* HIER STAND DIE GEOMETRIE DES TITELS (bis v0.77) */

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__inner::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 130%;
    height: 160%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse closest-side, rgba(255, 252, 248, .05), transparent 70%);
    /* ZWEI ANIMATIONEN NACHEINANDER (v0.36). Zuerst steigt der Schimmer */
    opacity: 0;
    animation:
        glowIn 3.2s ease forwards .6s,
        glowBreathe 9s ease-in-out infinite alternate 3.8s;
    pointer-events: none;
}
@keyframes glowIn      { to { opacity: 1; } }
@keyframes glowBreathe { from { opacity: .4; } to { opacity: 1; } }

.hero__title {
    font-weight: 900;
    font-size: clamp(2.4rem, 9.5vw, 7.5rem);
    letter-spacing: .05em;
    line-height: 1.05;
    text-transform: uppercase;
    max-width: 100%;
    color: #fff;
    text-shadow: 0 0 60px rgba(255, 255, 255, .07);
}
/* KEIN AUFBLITZEN MEHR (v0.33) */
html.nb-js .hero__title {
    opacity: 0;
    /* Vier Sekunden warten, dann in anderthalb Sekunden AUFBLENDEN – */
    animation: heroSafe 1.5s ease 4s forwards;
}
html.nb-js .hero__title.is-split { opacity: 1; animation: none; }
@keyframes heroSafe { from { opacity: 0; } to { opacity: 1; } }

/* DER ABDRUCK (v0.40) — wie der Titel erscheint */
.hero__ch {
    display: inline-block;
    position: relative;
    opacity: 0;
    animation: chDruck 1.05s cubic-bezier(.16, .9, .3, 1) both;
    animation-delay: calc(var(--d, 0s) + .58s);
}
/* DIE FORM. Derselbe Buchstabe, nur als Linie, genau darüber. Er wird */
.hero__ch::before {
    content: attr(data-ch);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    /* EINZELN UND NICHT ALS KURZFORM. Die Kurzform */
    -webkit-text-stroke-width: .016em;
    -webkit-text-stroke-color: var(--lit);
    opacity: 0;
    transform-origin: 50% 60%;
    animation: chForm 1.75s cubic-bezier(.3, .1, .25, 1) both;
    animation-delay: var(--d, 0s);
    pointer-events: none;
}

@keyframes chForm {
    0%   { opacity: 0;   transform: scale(1.16); }
    26%  { opacity: 1;   transform: scale(1.045); }
    52%  { opacity: .85; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1); }
}
@keyframes chDruck {
    0%   { opacity: 0; transform: scale(1.035) translateY(-.012em); }
    62%  { opacity: 1; transform: scale(.994)  translateY(.008em); }
    100% { opacity: 1; transform: none; }
}

/* UND WIE ER WIEDER VERGEHT */
@keyframes chDruckWeg {
    0%   { opacity: 1; transform: none; }
    38%  { opacity: 1; transform: scale(.994) translateY(.008em); }
    100% { opacity: 0; transform: scale(1.035) translateY(-.012em); }
}
@keyframes chFormWeg {
    0%   { opacity: 0;   transform: scale(1); }
    48%  { opacity: .85; transform: scale(1); }
    74%  { opacity: 1;   transform: scale(1.045); }
    100% { opacity: 0;   transform: scale(1.16); }
}

.hero__sub {
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 3.4vw, 1.9rem);
    letter-spacing: .38em;
    text-transform: lowercase;
    color: var(--white-soft);
    margin-top: 1.1rem;
    padding-left: .38em;
    opacity: 0;
    /* Erst wenn der Titel vollständig dasteht (v0.36). */
    animation: fadeUp 2s ease forwards;
    animation-delay: 4.9s;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Linien zeichnen sich selbst */
.rule--draw {
    transform: scaleX(0);
    animation: ruleDraw 2.4s cubic-bezier(.6, 0, .2, 1) forwards;
}
/* DIE ORDNUNG DES ANFANGS (v0.36): Schwarz · Schimmer · Buchstaben · */
.hero .rule--top    { animation-delay: 2.3s; }
.hero .rule--bottom { animation-delay: 4.3s; }
@keyframes ruleDraw { to { transform: scaleX(1); } }

/* Scroll-Wink: ein Dreieck weist nach unten in die Katalyse */
.hero__hint {
    position: absolute;
    bottom: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.1rem;
    color: var(--blood);
    opacity: 0;
    animation: hintIn 1.2s ease forwards 6.1s;
    transition: opacity .6s ease;
}
.hero__hint svg { display: block; animation: hintBob 2.6s ease-in-out infinite 6.7s; }
.hero__hint.is-gone { opacity: 0 !important; }
@keyframes hintIn  { to { opacity: .8; } }
@keyframes hintBob {
    0%, 100% { transform: translateY(0)   rotate(var(--nr, 0deg)); }
    50%      { transform: translateY(7px) rotate(var(--nr, 0deg)); }
}

.rule {
    width: min(22rem, 60vw);
    height: 1px;
    background: var(--blood);
}
.rule--top    { margin-bottom: 3rem; }
.rule--bottom { margin-top: 3rem; }

/* ═══ DIE PASSAGE — aus der Nacht ins Licht ═══════════════════════── */
.passage {
    height: 52vh;
    height: 52svh;
    background: linear-gradient(to bottom,
        #060505 0%,
        var(--night) 8%,
        #2c2523 34%,
        #8c827c 62%,
        #e8e4e1 84%,
        var(--paper) 100%);
}

/* ═══ DIE SIEBEN ZEICHEN (v1.10) ══════════════════════════════════── */
/* Sie stehen bei 61 % der Passage — dort, wo der Verlauf sein Grau hat
   (die Marke #8c827c liegt bei 62 %). Wer den Verlauf ändert, verschiebt
   auch diese Zahl, sonst stehen sie plötzlich im Schwarz oder im Weiss.

   ZUM transform HIER: Regel 1 verbietet transform an VORFAHREN von
   `position: fixed` — also von `.thread`, `body::after` und den
   `.nb-*`-Ebenen. `.sozial` ist keiner davon; sie enthält nur ihre
   eigenen sieben Kinder. Dieselbe Ausnahme wie bei `.nb-schacht`.
   `.passage` ist bereits `position: relative` (siehe ganz oben, bei
   `main, header, footer, .passage`) — das ist der Bezugsrahmen. */
.sozial {
    position: absolute;
    left: 50%;
    top: 61%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v1.11: die Zeichen sind grösser geworden, der Abstand wächst mit —
       sonst rückt die Reihe zu einem Band zusammen. */
    gap: clamp(1rem, 4vw, 2.4rem);
}

.sozial__link {
    display: block;
    /* GRÖSSER UND KRÄFTIGER (v1.11). Bis v1.10 waren es 1.65rem bei
       Deckkraft .82 — auf einer Seite, deren Titel 7.5rem gross wird, war
       das eine Fussnote. Jetzt stehen sie voll da: keine Deckkraft unter
       eins, und ein Mass, das auf dem grossen Schirm mitwächst. */
    width: clamp(2rem, 4.2vw, 2.9rem);
    color: var(--lit);
    line-height: 0;
    text-decoration: none;
    opacity: 1;
    transition: color .35s ease, transform .35s ease;
}
.sozial__bild {
    display: block;
    width: 100%;
    height: auto;
}

/* Der stumme Zustand ist KEIN Zeiger und keine Handlung. */
.sozial__link--stumm { cursor: default; }

/* Regel 13: jede :hover-Regel braucht ihre Gegenregel für Finger. */
/* Regel 1: das transform steht am <a> selbst, und darunter hängt nur
   sein eigenes <svg> — kein position:fixed weit und breit. */
@media (hover: hover) {
    a.sozial__link:hover { color: #d02a22; transform: translateY(-3px); }
}
a.sozial__link:focus-visible {
    outline: 2px solid var(--lit);
    outline-offset: 6px;
}

/* Regel 12: unter (pointer: coarse) mindestens 44 px Trefferfläche. Seit
   v1.11 sind die Zeichen selbst schon rund 2rem breit; die Fläche darum
   wächst mit padding auf mindestens 44 px, ohne dass das Bild wächst. */
@media (pointer: coarse) {
    .sozial {
        gap: clamp(.2rem, 1.6vw, .9rem);
    }
    .sozial__link {
        width: max(44px, 2.2rem);
        padding: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sozial__link { transition-duration: .01ms; }
    a.sozial__link:hover { transform: none; }
}

/* ═══ PHASEN-MARKEN — römische Ziffer zwischen zwei Linien ════════── */
.phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0 auto 4rem;
    user-select: none;
}
.phase__row {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}
.phase__line {
    display: block;
    width: 5.5rem;
    height: 1px;
    background: var(--blood);
    opacity: .65;
}
.phase__line--solo { width: 8rem; opacity: 1; }
.phase__tri {
    width: 1.15rem;
    color: var(--blood);
    line-height: 0;
}
.phase__tri svg { display: block; }
.phase__num {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .34em;
    padding-left: .34em;
    color: var(--blood);
    line-height: 1;
}
.phase--solo { margin-bottom: 4rem; }

/* ═══ BLÖCKE ══════════════════════════════════════════════════════── */
.block {
    position: relative;
    max-width: var(--col);
    margin: 0 auto;
    padding: 6rem 1.5rem;
    text-align: center;
    background: var(--paper);
}

/* (Hier standen bis v0.26 zwei Regeln für ein ::before ohne content – sie */

/* DE/EN-Blöcke: Trennlinie mit Dreieck als Sigil ─────────────────── */
.lang + .lang {
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--blood-soft);
    position: relative;
}
.lang + .lang::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: var(--paper);
    border: 1px solid var(--blood-soft);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Blocktitel in Guillemets — wie die Phasen des Buches */
.lang__label {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .22em;
    padding-left: .22em;
    color: var(--blood);
    margin-bottom: 1.6rem;
}

.creed {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 400;
    line-height: 2;
    text-wrap: balance;
}
.creed em { font-style: italic; font-weight: 300; color: var(--ink-soft); }

.lang--en .creed { font-style: italic; font-weight: 300; }
.lang--en .creed em { font-style: normal; }

.price {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3em;
    padding-left: .3em;
    margin-top: 1.6rem;
    color: var(--ink);
}

/* ── Hinweistext unter den Bezahl-Knöpfen ─────────────────────────── */
.notice {
    margin: 2rem auto 0;
    max-width: 31rem;
    font-size: .82rem;
    line-height: 1.95;
    font-style: italic;
    color: var(--ink-soft);
}
.lang--en .notice { font-style: normal; }

.preorder__label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .38em;
    padding-left: .38em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 1.4rem;
}

.preorder__email {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1.15rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: .75rem 0 .9rem;
    text-align: center;
    letter-spacing: .04em;
    transition: border-color .3s ease;
    -webkit-appearance: none;
    border-radius: 0;
}
.preorder__email:focus { outline: none; border-color: var(--blood); }
.preorder__email::placeholder { color: #c0bbba; letter-spacing: .04em; font-size: 1rem; }

.preorder__status {
    margin-top: 1.6rem;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--ink-soft);
    font-style: italic;
    white-space: pre-line;
}
.preorder__status.is-error { color: var(--blood); font-style: normal; font-weight: 700; }

/* ── Knöpfe — streng, gefasst, mit rotem Saum bei Berührung ───────── */
.downloads {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
    margin-top: 2.4rem;
}

.btn {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    padding: .9rem 1.8rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.btn::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 50%;
    width: .42rem;
    height: .52rem;
    background: var(--blood);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-6px, -50%);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.btn:hover::before, .btn:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
}
/* DER SAUM WÄCHST MIT scaleX, NICHT MIT left/right (v1.08) */
/* Zwei Kanten zu bewegen heisst, den Kasten in jedem Bild neu zu
   vermessen und neu zu zeichnen. `transform: scaleX()` setzt der Browser
   ohne beides zusammen — dieselbe Bewegung, ein Bruchteil der Arbeit.
   Das ist die Regel, die aus der Recherche zur Bildglätte am häufigsten
   kam, und sie galt hier an drei Stellen nicht. */
.btn::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--blood);
    transform: scaleX(0);
    transition: transform .4s ease;
}
.btn:hover, .btn:focus-visible {
    border-color: var(--blood);
    background: var(--blood);
    color: #fff;
}
.btn:hover::before, .btn:focus-visible::before { background: #fff; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1.02); }
.btn:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }

/* ── Zähler — gesetzt wie eine Seitenzahl, gross wie ein Urteil ───── */
.counter { margin-top: 4.5rem; }
.counter__num {
    display: block;
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    color: var(--blood);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 28px rgba(122, 12, 12, .22);
}
.counter__label {
    display: block;
    margin-top: .8rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .42em;
    padding-left: .42em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* Die englische Zeile darunter, leiser gesetzt (v1.16). */
.counter__label em {
    display: block;
    margin-top: .3rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .18em;
    padding-left: .18em;
    text-transform: none;
    opacity: .78;
}

/* ── DIE LETZTE ZEILE: DIE GESCHLÜPFTEN EIER (v1.20) ─────────────────
   In v1.16 standen sie neben den Downloads. Das war falsch gedacht: dort
   geht es um das WERK und was davon genommen wurde. Jetzt stehen sie
   ganz unten, unter dem Siebeneck — unter den sieben Plätzen, in denen
   die eigenen Siegel liegen, das Mass aller Eier, die je aufgebrochen
   sind.

   Leiser gesetzt als der Download-Zähler und in EINER Zeile: sie ist ein
   Nachsatz, kein zweiter Titel. Wer sie so gross setzt wie die Downloads,
   macht aus dem Schluss der Seite einen zweiten Anfang.

   HIER STANDEN .counter--paar UND .counter__teil (v1.16). Sie sind mit
   dem Zählerpaar entfallen; Regel 10 verlangt, nach jedem Ausbau nach
   Verwaisten zu suchen — im Markup steht keine der beiden Klassen mehr. */
.eierzeile {
    margin: 0 auto;
    padding: 0 1.4rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    line-height: 1.6;
}
.eierzeile__num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--blood);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.eierzeile__label {
    display: block;
    margin-top: .55rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .34em;
    padding-left: .34em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.eierzeile__label em {
    font-style: italic;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: none;
    opacity: .8;
}

/* ── DER OFFENE WEG — GoFundMe (v1.14) ───────────────────────────────
   Er steht ÜBER den beiden Spalten, nicht als dritte daneben. Drei
   gleich grosse Spalten hätten gesagt »sucht euch einen aus«; so sagt es
   »hier entlang — oder darunter selbst überweisen«.

   Gebaut wie der Zahlschein-Stempel des QR-Codes: dünne rote Linie,
   harter Schatten daneben, kein Verlauf, keine Rundung. Beim Berühren
   kippt er ins Volle — das Rot wird Fläche, der Schatten fährt ein, und
   der Baustein rückt um genau die zwei Pixel nach, die der Schatten
   verliert. Er sinkt also nicht weg, er wird gedrückt. */
.gofund {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    max-width: 30rem;
    margin: 3.2rem auto 0;
    padding: 1.1rem 1.3rem;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--blood);
    box-shadow: 3px 3px 0 var(--blood-soft);
    transition: background .28s ease, color .28s ease,
                box-shadow .28s ease, transform .28s ease;
}

.gofund__mark { display: block; width: 2.35rem; color: var(--lit); line-height: 0; }
.gofund__mark svg { display: block; width: 100%; height: auto; }

.gofund__wort { display: block; }
.gofund__label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: .42rem;
}
.gofund__label i { font-style: italic; letter-spacing: .18em; }
.gofund__name { display: block; font-size: 1rem; line-height: 1.4; }
.gofund__en {
    display: block;
    font-size: .82rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-soft);
    transition: color .28s ease;
}

.gofund__zeiger { display: block; width: .82rem; color: var(--blood); line-height: 0; }
.gofund__zeiger svg { display: block; width: 100%; height: auto; }

/* Regel 13: die :hover-Regel steht in ihrer eigenen Abfrage, damit
   Finger nicht in einem hängenden Zustand steckenbleiben. */
@media (hover: hover) {
    .gofund:hover {
        background: var(--blood);
        color: var(--paper);
        box-shadow: 1px 1px 0 var(--blood-soft);
        transform: translate(2px, 2px);
    }
    .gofund:hover .gofund__mark,
    .gofund:hover .gofund__label,
    .gofund:hover .gofund__zeiger { color: var(--paper); }
    .gofund:hover .gofund__en { color: rgba(255, 255, 255, .78); }
}
.gofund:focus-visible {
    outline: 2px solid var(--blood);
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .gofund { gap: .9rem; padding: 1rem 1.05rem; }
    .gofund__mark { width: 2rem; }
    .gofund__name { font-size: .95rem; }
}

/* Im Fenster ist weniger Platz, und der Baustein soll die beiden
   Spalten darunter nicht erdrücken.

   DIESER BLOCK STEHT ABSICHTLICH NACH DER SCHMALEN BÜHNE (v1.14). Beide
   setzen `padding` und `gap` an `.gofund` mit gleichem Gewicht; bei
   gleichem Gewicht entscheidet die Reihenfolge. Stünde er davor, bekäme
   das Fenster auf dem Telefon die Masse der grossen Fassung — nicht
   falsch, aber auch nicht das, was hier steht. Wer die beiden Blöcke
   vertauscht, ändert das Fenster, ohne es zu wollen. */
.gofund--klein {
    max-width: none;
    margin-top: 2.1rem;
    padding: .9rem 1.05rem;
    gap: .9rem;
}
.gofund--klein .gofund__mark { width: 1.95rem; }
.gofund--klein .gofund__name { font-size: .93rem; }
.gofund--klein .gofund__en   { font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
    .gofund { transition-duration: .01ms; }
    .gofund:hover { transform: none; }
}

/* ── Spenden-Details ──────────────────────────────────────────────── */
.detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    /* v1.14: 2.4rem statt 3.2rem — darüber steht jetzt der offene Weg,
       und zwischen ihm und den Spalten soll weniger Luft sein als vor
       ihm. Sonst zerfällt der Abschnitt in zwei Hälften, statt eine
       Reihenfolge zu sein. */
    margin-top: 2.4rem;
    text-align: left;
}
@media (max-width: 600px) { .detail-cols { grid-template-columns: 1fr; } }

.detail { border-top: var(--hairline); padding-top: 1.3rem; }
.detail__title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: .9rem;
}
.detail__body { font-size: .93rem; line-height: 2; }
.detail__body--mono {
    font-size: .84rem;
    word-break: break-all;
    letter-spacing: .02em;
}

.copy {
    margin-top: .9rem;
    font-family: inherit;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 1px solid var(--blood);
    color: var(--ink);
    padding: 0 0 .18rem;
    cursor: pointer;
    transition: color .3s ease;
}
.copy:hover { color: var(--blood); }

/* ── Recht — gesetzt wie eine Buchseite: Blocksatz, Trennungen ────── */
.block--legal { text-align: left; }
.block--legal .phase { justify-content: center; }

.legal__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3rem;
}
.legal__text p {
    font-size: .88rem;
    line-height: 2;
    margin-bottom: 1.3rem;
    color: var(--ink-soft);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.legal__text strong { color: var(--ink); font-weight: 700; }
.legal__en { border-top: 1px solid var(--blood-soft); padding-top: 1.3rem; }

/* ═══ DAS ENDE — Impressum, dann Weiss. Wie der «Göttertanz». ═════── */
.impressum {
    background: var(--paper);
    text-align: center;
    /* DAS SIEBENECK RÜCKT NÄHER (v1.10). Unten standen bis v1.09 28vh —
       auf einem hohen Schirm über ein Viertel Bildhöhe leere Fläche
       zwischen dem roten Dreieck und den sieben Plätzen. Beide gehören
       zusammen: das Zeichen legt das Ei, die sieben nehmen es auf, und
       die Schlange läuft von hier nach dort. Was zusammengehört, soll
       auch beieinander stehen.
       Ganz aufheben lässt sich der Abstand nicht: die Schlange braucht
       den Weg nach unten, und sie soll dabei sichtbar wachsen (§4). 11vh
       ist knapp genug, dass man beides in einem Blick hat, und weit
       genug, dass die Wanderung noch eine ist. */
    padding: 5rem 1.5rem var(--impressum-fuss);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.impressum .rule--top { margin-bottom: 2.8rem; width: min(14rem, 50vw); }
.impressum__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .45em;
    padding-left: .45em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 1.4rem;
}
.impressum__text { font-size: .92rem; line-height: 2.1; }
.impressum__contact {
    margin-top: 2.2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .32em;
    padding-left: .32em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 2.4;
}
.impressum__contact a {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 300;
    font-size: .95rem;
    border-bottom: 1px solid var(--blood);
    padding-bottom: .1rem;
    transition: color .3s ease;
}
.impressum__contact a:hover { color: var(--blood); }

/* ── Schluss-Sigil — ein letztes Zeichen im Weiss ─────────────────── */
.sigil {
    width: 1.05rem;
    color: var(--blood);
    /* v1.10: 4rem statt 6rem. Zusammen mit dem kleineren Fuss des
       Impressums rückt das Siebeneck ein gutes Stück herauf, ohne dass
       das Zeichen selbst an den Text stösst. */
    margin-top: 4rem;
    opacity: .55;
    line-height: 0;
}
.sigil svg { display: block; }

/* ── Modal — weisses Blatt in der Verdunkelung ────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }

.modal__veil {
    position: absolute; inset: 0;
    background: rgba(6, 5, 5, .72);
    backdrop-filter: blur(2px);
}

.modal__card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--blood);
    max-width: 34rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem 2.2rem 2.2rem;
    text-align: center;
    animation: rise .5s ease both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.modal__close {
    position: absolute;
    top: .6rem; right: .95rem;
    font-family: inherit;
    font-size: 1.6rem;
    background: none;
    border: none;
    color: var(--ink);
    cursor: pointer;
    line-height: 1;
}
.modal__close:hover { color: var(--blood); }

.modal__tri {
    width: 1.15rem;
    color: var(--blood);
    margin: 0 auto 1.5rem;
    line-height: 0;
}
.modal__tri svg { display: block; }

.modal__title { font-size: 1.3rem; font-weight: 700; }
.modal__sub   { font-size: .92rem; line-height: 1.95; margin-top: .9rem; color: var(--ink-soft); }

.modal__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    /* v1.14: 1.5rem statt 2.1rem — darüber steht der offene Weg. */
    margin-top: 1.5rem;
    text-align: left;
}
@media (max-width: 520px) { .modal__details { grid-template-columns: 1fr; } }

.modal__skip {
    margin-top: 2.3rem;
    font-family: inherit;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: none;
    border: none;
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    padding-bottom: .18rem;
    transition: color .3s ease, border-color .3s ease;
}
.modal__skip:hover { color: var(--blood); border-bottom-color: var(--blood); }

body.modal-open { overflow: hidden; }

/* Erscheinen beim Scrollen */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); }
.reveal--above { transform: translateY(-20px); }
.reveal.is-visible { opacity: 1; transform: none; }
/* DER SPIEGEL VERSCHIEBT NICHTS MEHR (v1.04) */
/* `.reveal` trägt zwanzig Pixel translate. Solange der Bogen nur */
/* vorwärts lief, sah das niemand zweimal; seit v0.33 nimmt der Spiegel */
/* beim Zurückscrollen `is-visible` wieder weg — und dann rutschte jeder */
/* Block beim nächsten Vorwärtsscrollen erneut um zwanzig Pixel ein. */
/* Genau das war das gemeldete »Dinge verschieben sich plötzlich«. */
/* Ist der Spiegel scharf, bleibt es beim reinen Verblassen. */
html.nb-mirror .reveal,
html.nb-mirror .reveal--above { transform: none; }

/* ── Smartphone-Feinschliff ───────────────────────────────────────── */
@media (max-width: 600px) {
    .hero { min-height: 92vh; min-height: 92svh; padding: 3rem 1rem; }
    .hero__sub { letter-spacing: .24em; padding-left: .24em; }
    .rule { width: min(16rem, 72vw); }
    .rule--top    { margin-bottom: 2.2rem; }
    .rule--bottom { margin-top: 2.2rem; }

    .passage { height: 38vh; height: 38svh; }

    .block { padding: 4rem 1.25rem; }
    .lang + .lang { margin-top: 3rem; }
    .phase { margin-bottom: 3rem; }
    .phase__line { width: 3.4rem; }
    .phase__line--solo { width: 6rem; }

    .creed { line-height: 1.9; }

    .downloads {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
    .preorder { max-width: 100%; }
    .preorder__email { font-size: 1rem; }
    .btn { padding: 1rem 1.2rem; text-align: center; }

    .counter { margin-top: 3.4rem; }
    .counter__label { letter-spacing: .3em; padding-left: .3em; }

    .detail-cols { gap: 2rem; margin-top: 2.6rem; }

    .modal { padding: .9rem; align-items: end; }
    .modal__card { padding: 2.6rem 1.4rem 1.9rem; max-height: 86vh; }
    .modal__title { font-size: 1.15rem; }
    .modal__details { gap: 1.4rem; }

    .legal__title { letter-spacing: .2em; padding-left: .2em; }
    /* v1.10: der Fuss kommt aus --impressum-fuss (dort unten auf
       9vh gesetzt); hier stehen nur noch die seitlichen Masse. */
    .impressum { padding: 3.5rem 1.25rem var(--impressum-fuss); }
    :root { --impressum-fuss: 9vh; }
}

/* Sehr schmale Geräte */
@media (max-width: 370px) {
    .hero__title { font-size: 2.1rem; letter-spacing: .04em; }
    .hero__sub { font-size: 1.1rem; letter-spacing: .17em; padding-left: .17em; }
    .block { padding: 3.2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .modal__card { animation: none; }
    .btn, .copy, .modal__skip { transition: none; }
    html.nb-js .hero__title { opacity: 1; animation: none; }
    .hero::before { animation: none; opacity: 0; }
    .hero__inner::before { animation: none; opacity: .7; }
    .hero__ch { animation: none; opacity: 1; transform: none; filter: none; }
    .hero__sub { animation: none; opacity: 1; }
    .rule--draw { animation: none; transform: none; }
    .hero__hint { animation: none; opacity: .8; }
    .hero__hint svg { animation: none; }
    .thread__fill { box-shadow: none; }
    /* Wer weniger Bewegung wünscht, bekommt keinen wandernden Kopf. */
    .thread__head { display: none; }
}

/* ═══ v0.13 · ERGÄNZUNGEN — QR, Zahlschein-Fallback, Feinschliff ═════── */

/* Anker-Sprünge landen mit Luft nach oben */
section[id] { scroll-margin-top: 2.5rem; }

/* ── Bitcoin-QR — wie ein Stempel auf dem Zahlschein ──────────────── */
.btc-qr {
    display: block;
    margin-top: 1.2rem;
    padding: .55rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 2px 2px 0 var(--blood-soft);
    image-rendering: pixelated;
}
.btc-qr--modal { margin-left: auto; margin-right: auto; }

@media (max-width: 600px) {
    .btc-qr { margin-left: auto; margin-right: auto; }
}

/* v0.15 · FEINSCHLIFF — Sprach-Trennung DE/EN + neu gesetzter Zahlschein */

/* ── Sprach-Kennung: macht sofort klar, welcher Block Deutsch / English ist ── */
.lang { position: relative; }

/* Deutlichere, ruhige Trennlinie zwischen den beiden Sprachblöcken. */
.lang + .lang {
    margin-top: 3.4rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--blood-soft);
}
.lang + .lang::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 11px; height: 10px;
    background: var(--paper);
    border: none;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 0 0 1px var(--paper);
    /* Dreieck aus zwei Hairlines, passend zu den Phasen-Sigeln */
    background-image: linear-gradient(var(--blood-soft), var(--blood-soft));
}

/* Vorbestellung · der Zahlschein */
.preorder {
    max-width: 27rem;
    margin: 4.2rem auto 0;
    text-align: center;
}
.preorder[hidden] { display: none; }

.preorder__card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow:
        0 0 0 1px var(--paper),
        0 0 0 2px var(--blood-soft),
        0 26px 50px -34px rgba(6, 5, 5, .55);
    padding: 3rem 2.1rem 2.5rem;
}
/* Dreieck-Sigil, das die obere Rahmenlinie durchstösst */
.preorder__card::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 11px;
    background: var(--paper);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 0 0 2px var(--paper);
    background-image: linear-gradient(var(--blood), var(--blood));
}

/* Preis als Stempel zwischen zwei Hairlines (Echo der Phasen-Marke) */
.preorder__price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.2rem;
}
.preorder__price::before,
.preorder__price::after {
    content: "";
    width: 2rem;
    height: 1px;
    background: var(--blood-soft);
}
.preorder__price-val {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: var(--blood);
    font-variant-numeric: tabular-nums;
}

/* Zweisprachiges Feld-Etikett — DE führend, EN darunter, klar getrennt */
.preorder__label { display: block; margin-bottom: 1.3rem; }
.preorder__label-de {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .36em;
    padding-left: .36em;
    text-transform: uppercase;
    color: var(--blood);
}
.preorder__label-en {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
    font-style: italic;
    letter-spacing: .02em;
    color: var(--ink-soft);
}

/* Das Eingabefeld selbst: ausfüllbare Linie wie auf einem Beleg, mit */
.preorder__field {
    position: relative;
    max-width: 21rem;
    margin: 0 auto;
}
.preorder__email {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1.15rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: .7rem .3rem .85rem;
    text-align: center;
    letter-spacing: .03em;
    -webkit-appearance: none;
    border-radius: 0;
    transition: color .3s ease;
}
.preorder__email:focus { outline: none; }
.preorder__email::placeholder { color: #bdb8b7; letter-spacing: .03em; font-size: 1rem; }
/* wachsender roter Saum */
.preorder__field::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--blood);
    transform: scaleX(0);
    transition: transform .35s cubic-bezier(.6,0,.2,1);
}
.preorder__field:focus-within::after { transform: scaleX(1); }

/* Voll-breiter Knopf im bestehenden Knopf-Stil */
.btn--full {
    display: block;
    width: 100%;
    margin-top: 2.4rem;
    text-align: center;
    padding: 1rem 1.8rem;
}

.preorder__hint {
    margin-top: 1.6rem;
    font-size: .74rem;
    line-height: 1.85;
    font-style: italic;
    color: var(--ink-soft);
}
.preorder__hint span[lang="en"] { color: #8f8987; }

/* Status-Meldung (Fehler / "einen Moment…") */
.preorder__status {
    margin-top: 1.7rem;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--ink-soft);
    font-style: italic;
    white-space: pre-line;
}
.preorder__status.is-error { color: var(--blood); font-style: normal; font-weight: 700; }

/* ── Datenschutz: englische Zusammenfassung klarer abgesetzt ──────────── */
.legal__en {
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--blood-soft);
}

/* ── Mobile-Feinschliff für die Vorbestell-Karte ─────────────────────── */
@media (max-width: 600px) {
    .preorder { max-width: 100%; margin-top: 3.4rem; }
    .preorder__card { padding: 2.5rem 1.4rem 2rem; }
    .preorder__email { font-size: 1.05rem; }
    .lang + .lang { margin-top: 2.8rem; padding-top: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .preorder__field::after { transition: none; }
}

/* v0.15 · Disclaimer-Abstand DE / EN */
.notice--en { margin-top: 1.4rem; }

/* BESTÄTIGUNG NACH DER VORBESTELLUNG */

.confirm {
    max-width: 27rem;
    margin: 3.4rem auto 0;
    text-align: center;
    outline: none;
}
.confirm[hidden] { display: none; }

.confirm__card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow:
        0 0 0 1px var(--paper),
        0 0 0 2px var(--blood-soft),
        0 26px 50px -34px rgba(6, 5, 5, .55);
    padding: 2.6rem 2.1rem 2.4rem;
}

.confirm__sigil {
    font-size: .8rem;
    line-height: 1;
    color: var(--blood);
    margin-bottom: 1.4rem;
}

.confirm__title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .32em;
    padding-left: .32em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 1.5rem;
}

.confirm__lead {
    font-size: .95rem;
    line-height: 1.9;
    color: var(--ink);
}

/* Die Adresse als Beleg-Zeile zwischen zwei Haarlinien */
.confirm__addr {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--blood);
    word-break: break-all;
    border-top: 1px solid var(--blood-soft);
    border-bottom: 1px solid var(--blood-soft);
    padding: 1rem .2rem;
    margin: 1.2rem 0 1.4rem;
}

.confirm .confirm__note {
    font-size: .78rem;
    line-height: 1.95;
    color: var(--ink-soft);
    margin: 1.1rem auto 0;
    max-width: 22rem;
}
.confirm .confirm__note em { font-style: italic; color: #8f8987; }

@media (max-width: 600px) {
    .confirm { max-width: 100%; }
    .confirm__card { padding: 2.2rem 1.3rem 2rem; }
}

/* ── Honigtopf gegen Bots: für Menschen und Screenreader unsichtbar ── */
.nb-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* v0.25 · DAS KONTINGENT — das Siegel der Auflage */

.tally {
    max-width: 27rem;
    margin: 4.2rem auto 0;
    text-align: center;
}

/* ── Marke zwischen zwei Haarlinien (Echo der Phasen-Sigel) ─────────── */
.tally__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.4rem;
}
.tally__marker-line {
    flex: 0 1 4.5rem;
    height: 1px;
    background: var(--blood-soft);
}
.tally__marker-word {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .38em;
    padding-left: .38em;
    text-transform: uppercase;
    color: var(--blood);
    white-space: nowrap;
}

/* ── Das Siegel: 12 × 12 Dreiecke ───────────────────────────────────── */
.tally__seal {
    max-width: 21rem;
    margin: 0 auto;
}
.tally__grid {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Ein noch freies Tausend: nur eine Haarlinie. */
.tri {
    fill: none;
    stroke: var(--blood-soft);
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
}
/* Ein vollständig vergebenes Tausend: ausgefüllt. */
.tri--full {
    fill: var(--blood);
    stroke: var(--blood);
}
/* Das laufende Tausend: kräftige Linie, damit man sieht, wo man steht. */
.tri--active {
    stroke: var(--blood);
    stroke-width: 1.7;
}
/* Die Teilfüllung des laufenden Dreiecks (durch clipPath begrenzt). */
.tri--fill {
    fill: var(--blood);
    stroke: none;
    transition: y .9s cubic-bezier(.6,0,.2,1), height .9s cubic-bezier(.6,0,.2,1);
}
.tri--fill[hidden] { display: none; }

/* Die Tinte läuft diagonal ein, sobald das Siegel ins Bild kommt. */
.tally .tri { opacity: 0; }
.tally.is-visible .tri {
    animation: triInk .55s ease-out forwards;
    animation-delay: calc(var(--d, 0) * 38ms);
}
/* Das laufende Dreieck atmet danach weiter — der einzige bewegte Punkt. */
.tally.is-visible .tri--active {
    animation:
        triInk .55s ease-out forwards,
        triBreath 3.8s ease-in-out calc(var(--d, 0) * 38ms + .7s) infinite;
}
@keyframes triInk   { from { opacity: 0 } to { opacity: 1 } }
@keyframes triBreath { 0%, 100% { opacity: .42 } 50% { opacity: 1 } }

/* ── Die Zahl ───────────────────────────────────────────────────────── */
.tally__figure { margin-top: 2.6rem; }
.tally__num {
    display: block;
    font-size: clamp(2.9rem, 10vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--blood);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 32px rgba(122, 12, 12, .2);
}
.tally__caption {
    display: block;
    margin-top: .95rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .4em;
    padding-left: .4em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.tally__caption span[lang="en"] { color: #8f8987; }

/* ── Der Faden: feiner Balken für alles unterhalb eines Dreiecks ────── */
.tally__meter {
    position: relative;
    height: 1px;
    max-width: 21rem;
    margin: 2.2rem auto 0;
    background: var(--blood-soft);
}
.tally__meter-fill {
    position: absolute;
    left: 0;
    top: -1px;
    height: 3px;
    width: calc(var(--ratio, 0) * 100%);
    max-width: 100%;
    background: #a31313;
    box-shadow: 0 0 10px rgba(163, 19, 19, .55);
    transition: width 1.4s cubic-bezier(.6,0,.2,1);
}
/* Sobald das erste Exemplar vergeben ist, bleibt der Faden sichtbar — */
.tally--started .tally__meter-fill { min-width: 3px; }

/* ── Die kleinen Zeilen darunter ────────────────────────────────────── */
.tally__of {
    margin-top: 1.5rem;
    font-size: .78rem;
    line-height: 1.9;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.tally__of b { font-weight: 700; color: var(--ink); }
.tally__of em { font-style: italic; color: #8f8987; }

.tally__legend {
    margin-top: 1rem;
    font-size: .7rem;
    line-height: 1.9;
    color: #8f8987;
}
.tally__legend em { font-style: italic; }

/* Nur für Screenreader — die Zahlen als ganzer Satz. */
.tally__live {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Vergriffen ─────────────────────────────────────────────────────── */
.tally--closed .tally__num     { color: var(--ink); }
.tally--closed .tally__caption { color: var(--blood); }

.tally__closed-note {
    position: relative;
    max-width: 27rem;
    margin: 3.6rem auto 0;
    padding: 2.6rem 2rem 2.3rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow:
        0 0 0 1px var(--paper),
        0 0 0 2px var(--blood-soft),
        0 26px 50px -34px rgba(6, 5, 5, .55);
    text-align: center;
    font-size: .92rem;
    line-height: 1.95;
}
/* Dasselbe Dreieck-Sigil wie auf der Vorbestell-Karte */
.tally__closed-note::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 11px;
    background: var(--paper);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 0 0 2px var(--paper);
    background-image: linear-gradient(var(--blood), var(--blood));
}
.tally__closed-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .32em;
    padding-left: .32em;
    text-transform: uppercase;
    color: var(--blood);
    margin-bottom: 1.3rem;
}
.tally__closed-note p + p { margin-top: .9rem; }
.tally__closed-note em { color: var(--ink-soft); }

/* ── Kleine Geräte ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tally { max-width: 100%; margin-top: 3.2rem; }
    .tally__seal { max-width: 100%; }
    .tally__marker { gap: .7rem; margin-bottom: 2rem; }
    .tally__marker-line { flex: 0 1 2.4rem; }
    .tally__marker-word { letter-spacing: .3em; padding-left: .3em; }
    .tally__caption { letter-spacing: .28em; padding-left: .28em; }
    .tally__closed-note { padding: 2.2rem 1.3rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tally .tri,
    .tally.is-visible .tri,
    .tally.is-visible .tri--active { opacity: 1; animation: none; }
    .tri--fill { transition: none; }
    .tally__meter-fill { transition: none; }
}

/* DER WALD · v0.33 — DAS BEET IN DER NACHT */

.sturz,
.aufgang,
.block--garden {
    /* Der Grund und seine Stimmen. Bewusst hier und nicht in :root – */
    --soil:     #0b0a09;                  /* derselbe Ton wie die Nacht  */
    --lit:      #a31313;                  /* das Rot der LINIEN auf Schwarz */
    /* Und ein zweites Rot für SCHRIFT auf dem Grund (neu in v0.32). */
    --lit-txt:  #e2564e;
    --lit-thin: rgba(163, 19, 19, .34);
    /* Auch diese beiden waren zu leise (v0.31: .64 und .40). */
    --ash:      rgba(255, 255, 255, .76);
    --ash-dim:  rgba(255, 255, 255, .56);
    /* Die Gegenstimme zur Georgia: eine Grotesk aus dem System. Sie */
    --sans: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
}

/* I · DIE SCHWELLE */

/* DIE STAPELFOLGE (v0.33). Bis v0.32 lagen die beiden Schwellen mit */
.sturz,
.aufgang {
    position: relative;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    background: var(--paper);
}
/* DIE HÖHE MACHT DIE SPITZE (v0.32). Die Grundlinie ist immer die volle */
.sturz   { height: clamp(16rem, 58vh, 40rem); margin-bottom: -2px; }
.aufgang { height: clamp(14rem, 48vh, 34rem); margin-top: -2px; }

.sturz__dark,
.aufgang__dark {
    position: absolute;
    inset: 0;
    background: var(--soil);
}
/* KEIN inset: -1px (behoben in v0.32). Der dunkle Körper ragte damit einen */
.sturz__dark   { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.aufgang__dark { clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Das Netz füllt die ganze Fläche und wird vom Dreieck beschnitten – */
.sturz__roots,
.aufgang__roots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: var(--lit);
}

/* WAS AUSSERHALB DES BILDES STEHT, WIRD NICHT GEZEICHNET (v0.74) */
@supports (content-visibility: auto) {
    .sturz__roots,
    .aufgang__roots,
    .flor {
        content-visibility: auto;
        /* Ein Platzhalter für den Fall, dass doch einmal etwas nach der */
        contain-intrinsic-size: auto 1200px auto 440px;
    }
}

/* Der Faden läuft weiter, in die Spitze hinein und aus ihr heraus. */
.sturz__line,
.aufgang__line {
    position: absolute;
    left: 50%;
    width: 1px;
    margin-left: -.5px;
}
.sturz__line {
    top: 0;
    height: 44%;
    background: linear-gradient(to bottom, var(--lit), rgba(163, 19, 19, 0));
}
.aufgang__line {
    bottom: 0;
    height: 46%;
    background: linear-gradient(to bottom, rgba(163, 19, 19, 0), var(--lit));
}

/* ═══ II · DER GRUND ═════════════════════════════════════════════════ */

.block--garden {
    position: relative;
    /* Der Wald liegt ÜBER den beiden Schwellen und deckt deren */
    z-index: 1;
    max-width: none;
    width: 100%;
    padding: 5rem 1.5rem 6.5rem;
    background: var(--soil);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.garden__inner {
    position: relative;
    z-index: 1;
    max-width: var(--col);
    margin: 0 auto;
}

/* Das Rankenwerk an den Rändern. Es begleitet die Lesespalte und */
.garden__flor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--lit);
    /* v0.29 stand hier .30 – zu leise, um überhaupt bemerkt zu werden. */
    opacity: .62;
}
.flor {
    position: absolute;
    top: 0;
    height: 100%;
    width: min(22rem, 26vw);
}
.flor--l { left: 0; }
/* Rechts wird NICHT mehr gespiegelt: es ist eine eigene Zeichnung. */
.flor--r { right: 0; transform: scaleX(-1); }
.flor--r > * { /* nur die Lage spiegeln, nicht die Zeichnung erfinden */ }

/* Auf mittleren Geräten wird die Lesespalte breiter als die Ränder – */
@media (max-width: 900px) {
    .garden__flor { opacity: .50; }
    .flor { width: min(11rem, 30vw); }
}

/* AUF DEM TELEFON gab es das Netz bis v0.29 gar nicht (display:none) – */
@media (max-width: 600px) {
    .garden__flor { opacity: .34; }
    .flor { width: 5.4rem; }
    /* Nur die äussere Hälfte zeigen: der Rest liefe unter den Text. */
    .flor--l { left: -1.6rem; }
    .flor--r { right: -1.6rem; }
}
@media (max-width: 370px) {
    .flor { width: 4rem; }
    .garden__flor { opacity: .26; }
}

.lib__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* III · DIE MARKE */

.apart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}
.apart__line {
    flex: 1 1 4rem;
    max-width: 11rem;
    height: 1px;
}
.apart__line:first-child { background: linear-gradient(to right, rgba(163,19,19,0), var(--lit)); }
.apart__line:last-child  { background: linear-gradient(to left,  rgba(163,19,19,0), var(--lit)); }

.apart__marks {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--lit);
    flex: 0 0 auto;
}
.apart__marks svg { display: block; width: 12px; height: 11px; opacity: .7; }
/* Das mittlere Dreieck zeigt nach unten und ist gefüllt: der Same, der */
.apart__marks svg:nth-child(2) { width: 20px; height: 18px; opacity: 1; }
.apart__marks svg:nth-child(2) path { fill: var(--lit); }

.apart__word { margin-bottom: 3.8rem; }
.apart__word-de {
    display: block;
    font-family: var(--sans);
    font-weight: 200;
    font-size: clamp(1.9rem, 8.5vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: #fff;
}
.apart__word-en {
    display: block;
    margin-top: 1rem;
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .52em;
    padding-left: .52em;
    text-transform: uppercase;
    color: var(--lit);
}

/* Die zweisprachigen Blöcke auf dem dunklen Grund */
.block--garden .lang__label {
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .42em;
    padding-left: .42em;
    text-transform: uppercase;
    color: var(--lit-txt);
    margin-bottom: 1.5rem;
}
.block--garden .creed    { color: #fff; }
.block--garden .creed em { color: var(--ash); }
.block--garden .lang + .lang { border-top-color: var(--lit-thin); }
.block--garden .lang + .lang::before {
    background: var(--soil);
    border-color: rgba(163, 19, 19, .55);
}

.lib__flash {
    font-size: .88rem;
    color: #fff;
    border-top: 1px solid var(--lit);
    border-bottom: 1px solid var(--lit);
    padding: .85rem 0;
    margin: 0 auto 2rem;
    max-width: 34rem;
}

.lib__empty {
    font-size: .95rem;
    color: var(--ash);
    border: 1px dashed var(--lit-thin);
    padding: 2.4rem 1.4rem;
    margin: 0 auto 3rem;
    max-width: 30rem;
    line-height: 2;
}
.lib__empty em { color: var(--ash-dim); }

/* IV · DAS BEET */

/* Das Blatt. Beide – Liste und Formular – benutzen dieselbe Grundform, */
.lib__sheet {
    --fade: 1.7rem;
    /* Eine Spur Wärme von oben nach unten – Papier, kein Bildschirm. */
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf9 100%);
    color: var(--ink);
    border-radius: 3px;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
        linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
        linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-composite: intersect;
}

.lib__votes  { margin-top: 3.4rem; }
.lib__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Die Liste ────────────────────────────────────────────────────────── */
.lib__list {
    /* 2.2rem rundum: der Saum des Blattes ist 1.7rem breit, das Polster */
    padding: 2.2rem 2.2rem 2.2rem;
}

table.lib {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .95rem;
    min-width: 23rem;
}

.lib__caption {
    caption-side: top;
    font-family: var(--sans);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--blood);
    text-align: left;
    padding-bottom: 1.5rem;
}
.lib__caption em { font-style: normal; color: #6f6a68; letter-spacing: .18em; }

table.lib th {
    font-family: var(--sans);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .18em;
    padding-left: .18em;
    text-transform: uppercase;
    color: #6f6a68;
    padding: 0 .5rem .75rem;
    border-bottom: 1px solid #e6e2e1;
    white-space: nowrap;
}
table.lib th:first-child { padding-left: 2.7rem; }

table.lib td {
    padding: 1.05rem .5rem;
    border-bottom: 1px solid #f0eded;
    vertical-align: middle;
}

.lib__h-date, .lib__h-vote, .lib__h-dl { text-align: center; }
.lib__h-vote { width: 3.6rem; }
.lib__h-dl   { width: 5.6rem; }
.lib__h-date { width: 6rem; }
.lib__h-vote .thumb__icon { width: 15px; height: 15px; color: var(--blood); margin: 0 auto; }
.lib__h-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lib__row { transition: background .22s ease; }
.lib__row:last-child td { border-bottom: 0; }
.lib__row:hover                    { background: rgba(122, 12, 12, .045); }
.lib__row:hover .lib__name::before { color: var(--blood); opacity: 1; }
.lib__row--flash                   { background: rgba(122, 12, 12, .10); }

.lib__name {
    position: relative;
    min-width: 11rem;
    /* Der Platz für die Ziffer. Er ist absichtlich grösser als sie */
    padding-left: 4.1rem;
}
/* DIE PLATZZIFFER (grösser seit v0.55) */
.lib__name::before {
    content: attr(data-platz);
    position: absolute;
    left: 0;
    top: .95rem;
    width: 3.2rem;
    text-align: right;
    font-family: var(--sans);
    font-size: 1.32rem;
    line-height: 1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: #cfc9c6;
    transition: color .22s ease, opacity .22s ease;
}
.lib__row:nth-child(-n+3) .lib__name::before { color: rgba(122, 12, 12, .42); }

.lib__link {
    color: var(--ink);
    font-size: 1.04rem;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 12, 12, .38);
    word-break: break-word;
    transition: border-color .22s ease, color .22s ease;
}
.lib__link:hover,
.lib__link:focus-visible { color: var(--blood); border-bottom-color: var(--blood); }
.lib__link:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }

.lib__size {
    display: block;
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .14em;
    color: #6f6a68;
    margin-top: .45rem;
}

/* Der Säer und die Verbindung */
.lib__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .85rem;
    margin-top: .5rem;
    font-family: var(--sans);
    font-size: .73rem;
    letter-spacing: .03em;
    line-height: 1.5;
}

.lib__sower {
    display: inline-flex;
    align-items: baseline;
    gap: .34rem;
    color: var(--ink-soft);
    min-width: 0;
}
.lib__sower-mark {
    font-size: .5em;
    color: var(--blood);
    transform: translateY(-.15em);
    flex: 0 0 auto;
}
.lib__sower-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

/* Die Verbindung führt aus dem Wald hinaus. Der Pfeil sagt das, bevor */
.lib__ext {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    color: #6f6a68;
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 12, 12, .26);
    padding-bottom: .05em;
    max-width: 100%;
    min-width: 0;
    transition: color .22s ease, border-color .22s ease;
}
.lib__ext-mark { color: var(--blood); font-size: .9em; flex: 0 0 auto; }
/* Der Text muss selbst kürzen können – ein Flex-Behälter kürzt nicht. */
.lib__ext-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.lib__ext:hover,
.lib__ext:focus-visible { color: var(--blood); border-bottom-color: var(--blood); }
.lib__ext:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }

.lib__date {
    text-align: center;
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .03em;
    color: #6f6a68;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lib__vote { text-align: center; padding-left: 0; padding-right: 0; }

.lib__dl {
    text-align: center;
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    font-size: .92rem;
    color: var(--ink);
}
/* Wie weit dieser Same gekommen ist – gemessen am weitesten von allen. */
.lib__grow {
    display: block;
    position: relative;
    width: 2.8rem;
    height: 2px;
    border-radius: 2px;
    margin: .45rem auto 0;
    background: #ece8e7;
    overflow: hidden;
}
.lib__grow::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--g, 0) * 100%);
    background: var(--blood);
    border-radius: 2px;
}

/* ── Der Daumen ─────────────────────────────────────────────────────── */
.thumb {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: none;
    border: 0;
    border-radius: 3px;
    padding: .4rem .35rem;
    cursor: pointer;
    color: #6f6a68;
    font-family: var(--sans);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    transition: color .22s ease, background .22s ease, transform .12s ease;
}
.thumb:hover { color: var(--ink); background: rgba(122, 12, 12, .06); }
.thumb:focus-visible { outline: 2px solid var(--blood); outline-offset: 2px; }
.thumb:active { transform: scale(.9); }
.thumb__icon { width: 17px; height: 17px; display: block; }
.thumb__n { font-variant-numeric: tabular-nums; }

.thumb.is-mine { color: var(--blood); }
.thumb.is-mine .thumb__n { font-weight: 700; }
.thumb[disabled] { opacity: .45; cursor: default; }

@keyframes thumbPulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.thumb.is-just .thumb__icon { animation: thumbPulse .5s ease; }

/* ── Die vollständige Liste ─────────────────────────────────────────── */
/* DIE SEITEN DES WALDES (v0.55) */
.lib__seiten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: .4rem;
    margin-top: 1.8rem;
}
.lib__blatt {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    min-width: 3.1rem;
    padding: .5rem .55rem;
    background: transparent;
    border: 1px solid rgba(122, 12, 12, .26);
    border-radius: 0;
    color: #6f6a68;
    font-family: var(--sans);
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.lib__blatt-nr  { font-size: .96rem; font-variant-numeric: tabular-nums; }
.lib__blatt-von { font-size: .54rem; letter-spacing: .08em; opacity: .62; }
.lib__blatt:hover:not(:disabled) {
    color: var(--blood);
    border-color: var(--blood);
    background: rgba(122, 12, 12, .04);
}
.lib__blatt:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }
.lib__blatt.is-hier {
    color: var(--blood);
    border-color: var(--blood);
    background: rgba(122, 12, 12, .08);
}
.lib__blatt:disabled { opacity: .3; cursor: default; }
/* Vor und zurück tragen nur ein Zeichen und brauchen die zweite Zeile */
.lib__blatt--zurueck, .lib__blatt--vor { min-width: 2.2rem; font-size: 1.1rem; }

/* Eine Zeile, die nicht auf der aufgeschlagenen Seite steht. display: */
.lib__row--aus { display: none; }

/* Die Hinweise stehen wieder auf der Erde, nicht auf dem Blatt. */
.lib__hint {
    font-size: .8rem;
    line-height: 1.9;
    color: var(--ash-dim);
    margin-top: 1.4rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}
.lib__hint em { color: rgba(255, 255, 255, .3); }

/* V · EIN WERK HINLEGEN */

.lib__give { margin-top: 4.2rem; }

.lib__give-title {
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--lit-txt);
    margin-bottom: 1.5rem;
}
.lib__give-title em { font-style: normal; color: var(--ash-dim); }

.lib__form {
    position: relative;
    max-width: 32rem;
    margin: 0 auto;
    padding: 2.6rem 2.2rem 2.2rem;
    text-align: left;
}

.lib__label { display: block; margin-bottom: .55rem; }
.lib__label-de {
    display: block;
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: var(--ink);
}
.lib__label-en {
    display: block;
    font-size: .74rem;
    font-style: italic;
    color: #6f6a68;
    margin-top: .2rem;
}

/* Das Eingabefeld: eine Linie zum Ausfüllen, wie auf einem Beleg, mit */
.lib__field { position: relative; margin-bottom: 1.7rem; }
.lib__input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ddd8d7;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.02rem;
    padding: .6rem .1rem .7rem;
}
.lib__input:focus { outline: none; }
.lib__input::placeholder { color: #c6c1bf; }
.lib__field::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--blood);
    transform: scaleX(0);
    transition: transform .3s ease;
}
.lib__field:focus-within::after { transform: scaleX(1); }

/* Die freiwilligen Felder */
.lib__optional { margin-top: .2rem; }

.lib__optional-mark {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: .2rem 0 1.5rem;
}
.lib__optional-line {
    flex: 1 1 auto;
    height: 1px;
    background: #eae6e5;
}
.lib__optional-word {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #97918f;
}
.lib__optional-word em { font-style: normal; opacity: .7; }

/* Zwei Felder nebeneinander, solange sie nebeneinander lesbar sind. */
.lib__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.3rem;
}
.lib__half { min-width: 0; }

/* ── Die Datei ──────────────────────────────────────────────────────── */
.lib__file {
    width: 100%;
    font-family: var(--sans);
    font-size: .8rem;
    color: var(--ink-soft);
    padding: .3rem 0 .9rem;
}
.lib__file::file-selector-button {
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ink);
    border: 1px solid #ddd8d7;
    border-radius: 2px;
    padding: .65rem 1.1rem;
    margin-right: .9rem;
    cursor: pointer;
    transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.lib__file::file-selector-button:hover {
    border-color: var(--blood);
    color: var(--blood);
    background: rgba(122, 12, 12, .04);
}

.lib__check {
    display: flex;
    gap: .7rem;
    font-size: .82rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: .6rem 0 1.8rem;
}
.lib__check input { margin-top: .35rem; accent-color: var(--blood); flex: 0 0 auto; }
.lib__check em { color: #6f6a68; }

/* Der Knopf auf dem weissen Blatt: derselbe wie überall auf der Seite. */
.lib__form .btn {
    display: block;
    width: 100%;
    text-align: center;
}

.lib__progress {
    height: 2px;
    background: #ece8e7;
    border-radius: 2px;
    margin-top: 1.4rem;
    overflow: hidden;
}
.lib__progress[hidden] { display: none; }
.lib__progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--blood);
    transition: width .2s ease;
}

.lib__status {
    font-size: .84rem;
    line-height: 1.7;
    color: var(--ink-soft);
    font-style: italic;
    margin-top: 1.1rem;
}
.lib__status[hidden] { display: none; }
.lib__status.is-error {
    color: var(--blood);
    font-style: normal;
    font-weight: 700;
}
.lib__status.is-done { color: var(--ink); font-style: normal; }

.lib__closed {
    max-width: 32rem;
    margin: 0 auto;
    padding: 2rem 1.6rem;
    font-size: .9rem;
    line-height: 1.9;
    color: var(--ash);
    border: 1px dashed var(--lit-thin);
    border-radius: 3px;
}

/* Die Regeln und die Summe stehen auf der Erde – sie sind Beschriftung, */
.lib__rules {
    max-width: 34rem;
    margin: 1.8rem auto 0;
    font-size: .76rem;
    line-height: 1.95;
    color: var(--ash-dim);
}
.lib__rules em { color: rgba(255, 255, 255, .3); }

.lib__totals {
    margin-top: 2.2rem;
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

/* VI · DAS WACHSTUM */

.grow__v, .flor__v {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-opacity: var(--o, .8);
}

/* DIE KNOTEN (neu in v0.30). An jeder Kreuzung des Netzes sitzt ein */
.grow__n, .flor__n {
    fill: currentColor;
    opacity: .55;
}

html.nb-js .grow__v { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.nb-js .grow__n { opacity: 0; }

html.nb-js .is-grown .grow__v {
    animation: nbGrow .8s cubic-bezier(.24, .68, .35, 1) var(--d, 0s) forwards;
}
html.nb-js .is-grown .grow__n {
    animation: nbNode .6s ease var(--d, 0s) forwards;
}
@keyframes nbGrow { to { stroke-dashoffset: 0; } }
@keyframes nbNode {
    from { opacity: 0; }
    60%  { opacity: .85; }
    to   { opacity: .55; }
}

/* ═══ VII · SCHMALE GERÄTE ═══════════════════════════════════════════ */

@media (max-width: 600px) {
    /* DAS FLACHE DREIECK (v0.33). Auf dem Rechner ist die Grundlinie */
    .sturz   { height: clamp(5rem,  12vh, 8rem); }
    .aufgang { height: clamp(4.2rem, 10vh, 7rem); }
    /* Der Faden darf in der flacheren Figur nicht bis fast zur */
    .sturz__line   { height: 38%; }
    .aufgang__line { height: 40%; }

    /* Steht hier ausdrücklich: die allgemeine .block-Regel für Telefone */
    .block--garden { padding: 3.6rem 1.25rem 4.6rem; }

    .apart { gap: 1rem; }
    .apart__line { flex: 1 1 2rem; max-width: 5rem; }
    .apart__word { margin-bottom: 2.8rem; }
    .apart__word-de { letter-spacing: .2em; padding-left: .2em; }
    .apart__word-en { letter-spacing: .38em; padding-left: .38em; }

    .block--garden .lang__label { letter-spacing: .3em; padding-left: .3em; }

    /* DAS BEET AUF DEM TELEFON */
    .lib__votes { margin-top: 2.6rem; }
    .lib__scroll { overflow-x: visible; }        /* nichts mehr zu schieben */

    /* Auf dem Telefon trägt jede Karte ihr eigenes Blatt – das grosse */
    .lib__list {
        background: none;
        box-shadow: none;
        padding: 0;
        /* Wichtig: das gemeinsame Blatt gibt es auf dem Telefon nicht */
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* ACHTUNG, hier lag bis v0.31 ein Fehler: die Liste stand zwar als */
    table.lib,
    table.lib tbody { display: block; width: 100%; }
    table.lib td { display: block; }
    table.lib { min-width: 0; border-collapse: separate; }
    table.lib thead { display: none; }           /* die Karte beschriftet sich selbst */

    /* Der Listentitel steht auf dem Telefon auf der ERDE, nicht mehr auf */
    .lib__caption {
        font-size: .58rem;
        letter-spacing: .2em;
        padding-bottom: 1.1rem;
        color: var(--lit-txt);
        text-align: center;
    }

    /* Auf dem Telefon ist jede KARTE der weisse Kasten – also verläuft */
    .lib__row {
        position: relative;
        --fade: .7rem;
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        grid-template-areas:
            "werk werk werk werk"
            "datum hoch runter last";
        align-items: center;
        column-gap: .45rem;
        border: 0;
        border-radius: 3px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfaf9 100%);
        box-shadow: none;
        padding: 1.25rem 1.15rem .95rem;
        margin-bottom: .85rem;
        overflow: hidden;
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
            linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
            linear-gradient(to right,  transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
        mask-composite: intersect;
    }
    .lib__row:hover { background: linear-gradient(180deg, #ffffff 0%, #fbfaf9 100%); }
    /* Die eben hinzugekommene Karte wird nicht mehr umrandet (ein Rahmen */
    .lib__row--flash { background: linear-gradient(180deg, #fdf1f1 0%, #fbeaea 100%); box-shadow: none; }
    .lib__row td { border: 0; padding: 0; }

    .lib__name  { grid-area: werk;   padding-left: 0; min-width: 0; padding-right: 2.4rem; }
    .lib__date  { grid-area: datum; }
    .lib__vote--up   { grid-area: hoch; }
    .lib__vote--down { grid-area: runter; }
    .lib__dl    { grid-area: last; }

    /* Die Ordnungszahl sitzt als Marke oben rechts in der Karte. */
    /* Auf dem Telefon sitzt die Ziffer als Marke oben rechts in der */
    .lib__name  { padding-right: 3.4rem; }
    .lib__name::before {
        position: absolute;
        top: .5rem; right: .7rem;
        left: auto;
        width: auto;
        font-size: 1.5rem;
        opacity: .55;
    }
    .lib__link { font-size: 1.06rem; line-height: 1.45; }

    /* Werk, Säer und Verbindung stehen untereinander – dafür ist auf */
    .lib__meta { margin-top: .5rem; font-size: .78rem; }
    .lib__size { display: inline-block; margin-top: .35rem; }

    /* Die Fusszeile der Karte: Datum links, Daumen und Downloads rechts. */
    .lib__date {
        justify-self: start;
        margin-top: .85rem;
        font-size: .66rem;
        text-align: left;
    }
    .lib__vote  { margin-top: .55rem; padding: 0; }
    .lib__dl {
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-top: .8rem;
        padding-left: .5rem;
        font-size: .84rem;
        text-align: left;
    }
    .lib__dl::before { content: "↓"; font-size: .76rem; color: #97918f; }
    .lib__grow { width: 1.8rem; margin: 0; }

    /* Grössere Trefferflächen: 44 Pixel ist das Mass, unter dem ein */
    .thumb { padding: .55rem .65rem; min-height: 2.6rem; }
    .thumb__icon { width: 19px; height: 19px; }

    .lib__hint { font-size: .78rem; }

    .lib__give { margin-top: 3.6rem; }
    .lib__form { padding: 2.2rem 1.45rem 1.8rem; max-width: 100%; --fade: 1.1rem; }
    /* Auf dem Telefon untereinander – zwei Felder nebeneinander wären */
    .lib__pair { display: block; }
    .lib__input { font-size: 16px; }   /* verhindert das Zoomen in iOS */
    .lib__file  { font-size: .82rem; }
    .btn--full  { padding: 1.05rem 1rem; }
}

@media (max-width: 370px) {
    .block--garden { padding: 3rem 1rem 3.8rem; }
    .apart__word-de { font-size: 1.75rem; }
    .lib__row { padding: 1.1rem .95rem .8rem; --fade: .6rem; }
    .lib__link { font-size: 1rem; }
    .lib__form { padding: 1.9rem 1.25rem 1.5rem; --fade: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lib__link, .thumb, .lib__field::after,
    .lib__progress-bar, .lib__row, table.lib td { transition: none; }
    .thumb.is-just .thumb__icon { animation: none; }
    /* Kein Wachsen, aber auch kein Verschwinden: alles steht sofort da. */
    html.nb-js .grow__v { stroke-dashoffset: 0; animation: none; }
    html.nb-js .grow__n { opacity: .55; animation: none; }
}

/* v0.33 · DER FEINSCHLIFF */

/* 1 · DER ZEILENFALL */
.hero__title,
.legal__title,
.lang__label,
.apart__word,
.tally__caption,
.modal__title,
.lib__give-title,
.preorder__label { text-wrap: balance; }

.creed,
.notice,
.lib__hint,
.lib__rules,
.legal__text p,
.preorder__hint,
.modal__sub { text-wrap: pretty; }

/* 2 · DIE BERÜHRUNG */
a, button, summary, label, input, .thumb {
    -webkit-tap-highlight-color: rgba(122, 12, 12, .12);
}

/* 3 · DIE MARKIERUNG IM WALD */
.block--garden ::selection { background: var(--lit); color: #fff; }
/* Auf den weissen Blättern IM Wald wieder wie überall sonst. */
.lib__sheet ::selection,
.lib__row ::selection { background: var(--blood); color: #fff; }

/* 4 · DER SCHIMMER UNTER DEN BLÄTTERN */
.lib__votes,
.lib__give { position: relative; }
.lib__votes::before,
.lib__give::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(255, 255, 255, .055) 0%,
        rgba(255, 255, 255, .02) 42%,
        transparent 72%);
}

/* 5 · DIE SPRUNGMARKEN */
[id] { scroll-margin-top: 2.5rem; }

/* 6 · DIE FLÄCHEN, DIE BEWEGT WERDEN */
.thread__fill,
.thread__head { will-change: transform, opacity; }

/* 7 · DIE GESPIEGELTE WIEDERKEHR, TEIL ZWEI */
@media (prefers-reduced-motion: reduce) {
    html.nb-mirror .reveal { opacity: 1 !important; transform: none !important; }
}

/* 8 · DER LETZTE ATEMZUG DES FADENS */
.thread__head { filter: blur(.3px); }

/* v0.35 · DIE NARRHEITEN */

/* II · DAS WORT WÄCHST */
.apart__word-de {
    transform-origin: 50% 50%;
    transition: transform 1.15s cubic-bezier(.16, .84, .28, 1);
}
.apart__word-de.is-growing { transform: scale(1.18); }

/* UND WENN DER ZEIGER SCHON ERWEITERT IST (v0.51) */
.apart__word-de { transition: transform 2.4s cubic-bezier(.22, .9, .28, 1); }
.apart__word-de.is-growing--riesig {
    transform: scale(4.2);
    letter-spacing: .34em;
}

/* III · DAS SIGIL KIPPT */
.sigil {
    cursor: pointer;
    /* Bezugsrahmen für die Marken und die Wellen (v0.56). */
    position: relative;
    /* v0.80: die Breite wächst nicht mehr in Stufen. Geblieben ist der */
    transition: opacity 1.6s cubic-bezier(.3, .8, .3, 1);
}
/* HIER STANDEN DIE STUFEN DES SIGILS (bis v0.79) */
/* BEHOBEN IN v0.38: hier stand transform: rotate(180deg) auf dem svg – */
.sigil.is-fool { --nr: 180deg; }

/* IV · DER MÜSSIGGANG */
.hero__idle {
    /* ABSOLUT, nicht im Fluss: sonst schöbe sie den Titelblock schon */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2.2rem;
    width: max-content;
    max-width: 88vw;
    text-align: center;
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .34em;
    padding-left: .34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    opacity: 0;
    transition: opacity 1.6s ease;
    pointer-events: none;
}
.hero__idle.is-on { opacity: 1; }
.hero__idle span[lang="en"] { color: rgba(255, 255, 255, .22); }

/* V · DER WINK LÜGT MANCHMAL */
.hero__hint { transition: opacity .6s ease, transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.hero__hint.is-fool { transform: translateX(-50%) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .apart__word-de,
    .sigil svg,
    .hero__hint,
    .hero__idle { transition: none; }
    .apart__word-de.is-growing,
    .apart__word-de.is-growing--riesig { transform: none; }
}

/* VII · DAS DREIECK, DAS FALSCH ATMET */
.tally.is-visible .tri--fool {
    animation:
        triInk .55s ease-out forwards,
        triBreath 3.8s ease-in-out .2s infinite;
}

/* VIII · DIE SEITE ATMET MIT */
.thread { transition: opacity .25s linear, filter 2.4s ease-in-out; }
.thread.is-breathing { filter: brightness(2.4) saturate(1.15); }

@media (prefers-reduced-motion: reduce) {
    .tally.is-visible .tri--fool { animation: none; opacity: 1; }
    .thread { transition: none; }
    .thread.is-breathing { filter: none; }
}

/* v0.37 · DER ATEM — WAS AUF DIESER SEITE LEBT */

/* Der gemeinsame Nenner: eine Klasse, die nur den Puls setzt. Die */
@keyframes nbAtem {
    0%, 100% { opacity: var(--a0, .55); transform: rotate(var(--nr, 0deg)) scale(1); }
    50%      { opacity: var(--a1, 1);   transform: rotate(var(--nr, 0deg)) scale(var(--as, 1.05)); }
}

/* Die Phasen-Sigel */
.phase__tri svg,
.apart__marks svg:nth-child(2),
.sigil svg,
.modal__tri svg {
    transform-origin: 50% 50%;
    animation: nbAtem calc(var(--atem) * 1.4) ease-in-out infinite;
    animation-delay: calc(var(--p, 0) * var(--atem) * -1.4);
}
.phase__tri svg              { --a0: .5;  --a1: 1;   --as: 1.07; }
.apart__marks svg:nth-child(2) { --a0: .72; --a1: 1; --as: 1.1; }
.sigil svg                   { --a0: .45; --a1: .95; --as: 1.06; }
.modal__tri svg              { --a0: .6;  --a1: 1;   --as: 1.05; }

/* Die Haarlinien */
.phase__line,
.apart__line,
.tally__marker-line,
.lib__optional-line {
    animation: nbLinie calc(var(--atem) * 2.2) ease-in-out infinite;
    animation-delay: calc(var(--p, 0) * var(--atem) * -2.2);
}
@keyframes nbLinie { 0%, 100% { opacity: .74; } 50% { opacity: 1; } }

/* Der Wald schwankt */
.flor {
    transform-origin: 50% 0;
    /* HIER STAND will-change: transform (bis v0.73) */
    animation: florSchwank calc(var(--atem) * 4.4) ease-in-out infinite;
}
.flor--r { animation-delay: calc(var(--atem) * -2.2); }
@keyframes florSchwank {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); }
    50%      { transform: translate3d(0, -9px, 0) rotate(.35deg); }
}
/* Rechts ist gespiegelt – die Spiegelung muss in jedem Bild erhalten */
.flor--r { animation-name: florSchwankR; }
@keyframes florSchwankR {
    0%, 100% { transform: scaleX(-1) translate3d(0, -9px, 0) rotate(-.35deg); }
    50%      { transform: scaleX(-1) translate3d(0, 0, 0) rotate(.35deg); }
}

/* Die Knoten des Netzes */
/* NUR JEDER NEUNTE KNOTEN PULSIERT, und das aus zwei Gründen. */
html.nb-js .is-grown .grow__n.puls {
    animation:
        nbNode .6s ease var(--d, 0s) forwards,
        knotenPuls calc(var(--atem) * 1.9) ease-in-out calc(var(--d, 0s) + 1.1s) infinite;
}
/* Die Knoten an den Rändern des Waldes wachsen nicht (sie stehen von */
.flor__n.puls {
    animation: knotenPuls calc(var(--atem) * 1.9) ease-in-out infinite;
    animation-delay: calc(var(--p, 0) * var(--atem) * -1.9);
}
@keyframes knotenPuls { 0%, 100% { opacity: .34; } 50% { opacity: .78; } }

/* Der Schimmer unter den weissen Blättern */
.lib__votes::before,
.lib__give::before {
    animation: blattSchein calc(var(--atem) * 3) ease-in-out infinite;
}
.lib__give::before { animation-delay: calc(var(--atem) * -1.5); }
@keyframes blattSchein {
    0%, 100% { opacity: .7;  transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.035); }
}

/* Der Grund des Waldes */
/* ZWEI ENTSCHEIDUNGEN, DIE MESSUNGEN SIND, KEINE MEINUNGEN. */
.block--garden::after {
    content: "";
    position: absolute;
    top: 0; left: -15%; right: -15%;
    height: 70vh;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 62% at 50% 12%,
        rgba(163, 19, 19, .11) 0%,
        rgba(163, 19, 19, .035) 45%,
        transparent 72%);
    will-change: opacity;
    animation: erdSchein calc(var(--atem) * 5) ease-in-out infinite;
}
@keyframes erdSchein {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1;  }
}

/* Der Titel glimmt */
html.nb-js .hero__title.is-split {
    animation: titelGlimm calc(var(--atem) * 2.4) ease-in-out infinite 8s;
}
@keyframes titelGlimm {
    0%, 100% { text-shadow: 0 0 60px rgba(255, 255, 255, .07); }
    50%      { text-shadow: 0 0 78px rgba(255, 255, 255, .16); }
}

/* Wer weniger Bewegung wünscht, bekommt kein Leben – nur Ruhe. */
@media (prefers-reduced-motion: reduce) {
    .phase__tri svg, .apart__marks svg:nth-child(2), .sigil svg, .modal__tri svg,
    .phase__line, .apart__line, .tally__marker-line, .lib__optional-line,
    .flor, .flor--r, .lib__votes::before, .lib__give::before,
    .block--garden::after, html.nb-js .hero__title.is-split {
        animation: none !important;
    }
    html.nb-js .is-grown .grow__n { animation: none; opacity: .55; }
}

/* XIII · DER RAUSCH (v0.40; gewürfelt seit v0.45; EIN SCHWARM SEIT v0.46) */

html {
    --rausch: 0;
    /* Rückfallwerte = die festen Zahlen aus v0.44. */
    --r-wx: 8px;        /* Ausschlag der Woge, waagrecht   */
    --r-wy: 6px;        /* Ausschlag der Woge, senkrecht   */
    --r-wr: 1.35deg;    /* Drehung in der Woge             */
    --r-ws: .042;       /* Dehnung in der Woge (der Atem)  */
    --r-asym: 1.15;     /* wie ungleich hin und her sind   */
    --r-wander: 26s;    /* wie lange die Wanderung dauert  */
    --r-glatt: 62ms;    /* Überbrückung zweier Stützstellen */
    --r-wucht: 1;       /* die Steigerung über den Bogen, 1 … 3.4 */
}

/* DIE WOGE */
@keyframes rauschWoge {
    from {
        translate:
            calc(var(--rausch) * var(--r-wx) * var(--wa, 1) * -1)
            calc(var(--rausch) * var(--r-wy) * var(--wa, 1));
        rotate: calc(var(--rausch) * var(--r-wr) * var(--wa, 1) * -1);
        scale:  calc(1 - var(--rausch) * var(--r-ws) * var(--wa, 1));
    }
    to {
        translate:
            calc(var(--rausch) * var(--r-wx) * var(--wa, 1) * var(--r-asym))
            calc(var(--rausch) * var(--r-wy) * var(--wa, 1) * var(--r-asym) * -1);
        rotate: calc(var(--rausch) * var(--r-wr) * var(--wa, 1) * var(--r-asym));
        scale:  calc(1 + var(--rausch) * var(--r-ws) * var(--wa, 1) * var(--r-asym));
    }
}

/* DAS ZURÜCKSCHNAPPEN GILT SEIT v0.78 FÜR VIER EIGENSCHAFTEN */
.melt {
    transition:
        transform .55s cubic-bezier(.2, .85, .25, 1),
        translate .55s cubic-bezier(.2, .85, .25, 1),
        rotate    .55s cubic-bezier(.2, .85, .25, 1),
        scale     .55s cubic-bezier(.2, .85, .25, 1),
        opacity   .55s ease;
}
/* SEIT v0.46 STEHT HIER KEIN transform MEHR, und das ist die grösste */
html.nb-drift .melt {
    transition: opacity var(--r-wander) cubic-bezier(.55, .02, .8, .72);
    /* SEIT v0.55 HÄNGT DIE DECKKRAFT AUCH AN --rausch, und das ist die */
    opacity: calc(1 - (1 - var(--mo, 1)) * var(--rausch));
}

/* DER KURZE ÜBERGANG, DER RECHNUNG SPART (v0.47) */
/* UND SEIT v0.78 GILT DASSELBE FÜR DIE WOGE */
html.nb-schwarm .melt {
    transition:
        opacity   var(--r-wander) cubic-bezier(.55, .02, .8, .72),
        transform var(--r-glatt, 62ms) linear,
        translate var(--r-glatt, 62ms) linear,
        rotate    var(--r-glatt, 62ms) linear,
        scale     var(--r-glatt, 62ms) linear;
}

/* KEIN will-change AUF DEN STÜCKEN, obwohl es hier naheliegt. */
/* ZWEI KLASSEN UND NICHT EINE, und das ist keine Ordnungsliebe. */
/* SEIT v0.78 STEHT HIER nb-woge-css DAVOR. Die Klasse setzt script.js nur */
html.nb-rausch.nb-woge-css .melt {
    animation: rauschWoge var(--wd, 17s) ease-in-out var(--wp, 0s) infinite alternate;
}

/* DAS ATMEN */

/* DIE FARBE */
.nb-rausch-farbe {
    position: fixed;
    inset: 0;
    z-index: 93;
    pointer-events: none;
}

/* DIE WOLKE (neu in v0.45) */
.nb-rausch-wolke {
    position: fixed;
    inset: -30vmax;
    z-index: 91;
    pointer-events: none;
    opacity: 0;
    /* Die Deckkraft hängt an --rausch: bei null ist die Wolke */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
    /* DIE EBENE NUR, SOLANGE SIE GEBRAUCHT WIRD (v0.75) */
html.nb-rausch .nb-rausch-wolke { will-change: transform, opacity; }
html.nb-rausch .nb-rausch-wolke {
    opacity: calc(var(--rausch) * var(--r-wolke, .6) * var(--r-wucht, 1));
    animation: rauschWolke var(--r-wolke-dauer, 90s) linear infinite var(--r-wolke-sinn, normal);
}
@keyframes rauschWolke {
    from {
        transform: rotate(0deg)
                   translate3d(var(--r-wolke-weg, 5vmax), 0, 0)
                   scale(1);
    }
    50% {
        transform: rotate(180deg)
                   translate3d(var(--r-wolke-weg, 5vmax), 0, 0)
                   scale(var(--r-wolke-mass, 1.2));
    }
    to {
        transform: rotate(360deg)
                   translate3d(var(--r-wolke-weg, 5vmax), 0, 0)
                   scale(1);
    }
}

/* DIE ZUTATEN (neu in v0.45) */

/* KANTEN · chromatische Aberration. */
.phase__num, .lang__label, .apart__word, .counter__num,
.tally__figure, .legal__title, .detail__title, .lib__give-title {
    transition: text-shadow 8s ease-in-out;
}
html.nb-r-kanten.nb-rausch .phase__num,
html.nb-r-kanten.nb-rausch .lang__label,
html.nb-r-kanten.nb-rausch .apart__word,
html.nb-r-kanten.nb-rausch .counter__num,
html.nb-r-kanten.nb-rausch .tally__figure,
html.nb-r-kanten.nb-rausch .legal__title,
html.nb-r-kanten.nb-rausch .detail__title,
html.nb-r-kanten.nb-rausch .lib__give-title {
    text-shadow:
        calc(var(--r-kanten, 1.4px) * -1) 0 0 rgba(255, 0, 40, .55),
        var(--r-kanten, 1.4px) 0 0 rgba(0, 220, 255, .45);
}

/* FADEN · der rote Faden gerät ausser sich. */
html.nb-r-faden .thread {
    filter: brightness(var(--r-fadenlicht, 3.6)) saturate(1.4);
    transition: filter 6s ease-in-out, opacity .25s linear;
}
html.nb-r-faden.nb-rausch .thread__fill {
    box-shadow: 0 0 calc(9px + var(--rausch) * 26px) rgba(163, 19, 19, .75);
}

/* KNOTEN · das Wurzelwerk gerät in Bewegung. */
html.nb-r-knoten.nb-rausch .grow__n.puls,
html.nb-r-knoten.nb-rausch .flor__n.puls {
    animation-duration: calc(var(--atem) * 1.9 * var(--r-knotentempo, .4));
}

@media (prefers-reduced-motion: reduce) {
    /* html.nb-rausch.nb-woge-css .melt steht seit v0.78 mit drei Klassen */
    .melt, html.nb-drift .melt, html.nb-rausch .melt, html.nb-schwarm .melt,
    html.nb-rausch.nb-woge-css .melt {
        transition: none;
        transform: none;
        animation: none;
        translate: none;
        rotate: none;
        scale: none;
        opacity: 1;
    }
    /* Der Vollständigkeit halber, obwohl script.js den ganzen Rausch */
    .nb-rausch-wolke { display: none; }
    html.nb-r-kanten.nb-rausch .phase__num,
    html.nb-r-kanten.nb-rausch .lang__label,
    html.nb-r-kanten.nb-rausch .apart__word,
    html.nb-r-kanten.nb-rausch .counter__num,
    html.nb-r-kanten.nb-rausch .tally__figure,
    html.nb-r-kanten.nb-rausch .legal__title,
    html.nb-r-kanten.nb-rausch .detail__title,
    html.nb-r-kanten.nb-rausch .lib__give-title { text-shadow: none; }
    html.nb-r-faden .thread { filter: none; transition: none; }
}

/* v0.47 · WAS AUS DEM FADEN STEIGT */

/* DIE SAAT UND IHRE SPUR */
.nb-saat {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 89;
    pointer-events: none;
    opacity: 0;
}
html.nb-rausch .nb-saat { will-change: opacity; }
html.nb-r-saat.nb-rausch .nb-saat {
    opacity: calc(var(--rausch) * .85);
}

/* DER TITEL MACHT MIT */
html.nb-schwarm .hero__inner:not(.is-vanishing):not(.is-hidden) .hero__ch {
    animation: none;
    opacity: 1;
}

/* SPUR · Nachbilder an den Überschriften */
html.nb-r-spur.nb-rausch .phase__num,
html.nb-r-spur.nb-rausch .lang__label,
html.nb-r-spur.nb-rausch .apart__word,
html.nb-r-spur.nb-rausch .counter__num,
html.nb-r-spur.nb-rausch .tally__figure,
html.nb-r-spur.nb-rausch .legal__title,
html.nb-r-spur.nb-rausch .detail__title,
html.nb-r-spur.nb-rausch .lib__give-title,
html.nb-r-spur.nb-rausch .hero__sub {
    text-shadow: var(--r-spur, none);
}

/* SCHLEIER · das Filmkorn tritt hervor */
body::after { transition: opacity 9s ease-in-out; }
html.nb-r-schleier.nb-rausch body::after {
    opacity: var(--r-schleier, .16);
}

/* DER FADEN IM RAUSCH, NEU GEFASST */
html.nb-r-faden.nb-rausch .thread {
    filter: brightness(var(--r-fadenlicht, 3.6)) saturate(1.4);
}
html.nb-r-faden.nb-rausch .thread__fill {
    box-shadow:
        0 0 calc(9px + var(--rausch) * 34px) rgba(163, 19, 19, .8),
        0 0 calc(2px + var(--rausch) * 9px)  rgba(255, 190, 190, .5);
}

/* DAS NETZ DARUNTER */
@media (prefers-reduced-motion: reduce) {
    html.nb-r-spur.nb-rausch .phase__num,
    html.nb-r-spur.nb-rausch .lang__label,
    html.nb-r-spur.nb-rausch .apart__word,
    html.nb-r-spur.nb-rausch .counter__num,
    html.nb-r-spur.nb-rausch .tally__figure,
    html.nb-r-spur.nb-rausch .legal__title,
    html.nb-r-spur.nb-rausch .detail__title,
    html.nb-r-spur.nb-rausch .lib__give-title,
    html.nb-r-spur.nb-rausch .hero__sub { text-shadow: none; }
    body::after { transition: none; }
    html.nb-r-schleier.nb-rausch body::after { opacity: .045; }
    html.nb-r-faden.nb-rausch .thread { filter: none; }
    html.nb-r-faden.nb-rausch .thread__fill { box-shadow: none; }
    html.nb-schwarm .hero__inner:not(.is-vanishing):not(.is-hidden) .hero__ch {
        animation: none; opacity: 1; transform: none;
    }
}

/* v0.38 · DIE UMKEHR, DAS VERSCHWINDEN UND VIER WEITERE NARRHEITEN */

/* XVIII · DIE UMKEHR */
.nb-umkehr {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    /* Dauer kommt aus dem Takt (siehe DER TAKT in script.js). */
    transition: opacity var(--umkehr-blende, 1.15s) cubic-bezier(.45, 0, .35, 1);
}
html.nb-invert .nb-umkehr { opacity: 1; }

/* DIE GLUT */
.nb-glut {
    position: fixed;
    inset: 0;
    z-index: 96;
    pointer-events: none;
    opacity: 0;
}
.nb-glut.gluehen { animation: nbGlut var(--umkehr-glut, 1.3s) cubic-bezier(.3, 0, .4, 1); }
@keyframes nbGlut {
    0%   { opacity: 0; }
    45%  { opacity: 1; }
    100% { opacity: 0; }
}

/* DAS VERSCHWINDEN DES TITELS (v0.40) */
html.nb-js .hero__inner.is-vanishing .hero__ch {
    animation: chDruckWeg .95s cubic-bezier(.5, 0, .75, .9) both;
    animation-delay: calc(var(--d, 0s) * .34);
}
html.nb-js .hero__inner.is-vanishing .hero__ch::before {
    animation: chFormWeg 1.5s cubic-bezier(.3, .1, .25, 1) both;
    animation-delay: calc(var(--d, 0s) * .34);
}
html.nb-js .hero__inner.is-vanishing .hero__sub {
    animation: fadeDown .8s ease both;
    animation-delay: .1s;
}
html.nb-js .hero__inner.is-vanishing .rule--draw {
    animation: ruleUndraw 1s cubic-bezier(.6, 0, .2, 1) both;
    animation-delay: 0s;
}
@keyframes fadeDown {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(10px); }
}
@keyframes ruleUndraw { to { transform: scaleX(0); } }

/* Der Ruhezustand danach: fort, ohne jede Bewegung. */
html.nb-js .hero__inner.is-hidden .hero__ch,
html.nb-js .hero__inner.is-hidden .hero__ch::before { animation: none; opacity: 0; }
html.nb-js .hero__inner.is-hidden .hero__sub  { animation: none; opacity: 0; }
html.nb-js .hero__inner.is-hidden .rule--draw { animation: none; transform: scaleX(0); }
html.nb-js .hero__inner.is-hidden .hero__title,
html.nb-js .hero__inner.is-vanishing .hero__title { animation: none; }

/* DIE SIEBENTE WIEDERKEHR */
.hero__inner.hero--gewandelt .hero__title {
    font-family: var(--sans);
    font-weight: 200;
    letter-spacing: .22em;
    padding-left: .22em;
    font-size: clamp(1.9rem, 8.4vw, 6.2rem);
}
.hero__inner.hero--gewandelt .hero__ch {
    color: transparent;
    -webkit-text-stroke-width: .012em;
    -webkit-text-stroke-color: var(--lit);
}
.hero__inner.hero--gewandelt .hero__ch::before {
    -webkit-text-stroke-color: rgba(255, 255, 255, .55);
}
.hero__inner.hero--gewandelt .hero__sub {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
    font-size: clamp(.62rem, 1.5vw, .82rem);
    letter-spacing: .62em;
    padding-left: .62em;
    color: #fff;
}
.hero__inner.hero--gewandelt .rule { background: rgba(255, 255, 255, .5); }

/* XIV · DAS WORT «NARR» */
html.nb-narr { --nr: 180deg; }

/* XV · DER FADEN SPÜRT DIE HAND */
.thread.is-near { filter: brightness(3) saturate(1.25); }

@media (prefers-reduced-motion: reduce) {
    html { transition: none; }
    html.nb-invert .nb-umkehr { opacity: 0; }
    .nb-glut.gluehen { animation: none; opacity: 0; }
    html.nb-js .hero__inner.is-vanishing .hero__ch,
    html.nb-js .hero__inner.is-vanishing .hero__sub,
    html.nb-js .hero__inner.is-vanishing .rule--draw { animation: none; }
    .thread.is-near { filter: none; }
}

/* XXIV · DER SPIEGEL (v0.43) */
html.nb-spiegel .hero,
html.nb-spiegel .passage,
html.nb-spiegel main,
html.nb-spiegel .impressum {
    transform: scaleX(-1);
}

/* UND EINE ZEILE, DIE ERST DIE MESSUNG NÖTIG MACHTE. Das Impressum ist */
.impressum { transition-property: opacity; }

@media (prefers-reduced-motion: reduce) {
    html.nb-spiegel .hero,
    html.nb-spiegel .passage,
    html.nb-spiegel main,
    html.nb-spiegel .impressum { transform: none; }
}

/* DAS ZEICHEN AM WERK */
.lib__zeichen {
    display: inline-block;
    /* Rechts vom Namen (v0.54): der Abstand wandert mit. */
    margin-left: .45em;
    font-size: .72em;
    line-height: 1;
    vertical-align: .04em;
    color: var(--blood);
}
/* Gedämpfte Fassungen der sieben Elementfarben: auf weissem Papier neben */
.lib__zeichen--0 { color: #332b9e; }   /* DIE LUFT   — Indigo   */
.lib__zeichen--1 { color: #a68300; }   /* DAS OBEN   — Gelb     */
.lib__zeichen--2 { color: #114f96; }   /* DAS WASSER — Blau     */
.lib__zeichen--3 { color: #b31616; }   /* DAS FEUER  — Rot      */
.lib__zeichen--4 { color: #b25709; }   /* DIE ERDE   — Orange   */
.lib__zeichen--5 { color: #237a28; }   /* DAS UNTEN  — Grün     */
.lib__zeichen--6 { color: #6f26a1; }   /* DAS INNEN  — Violett  */

/* SIEBEN: DER KREIS AUS ALLEN FARBEN (v1.04) */
/* Wer alle sieben Siegel gesetzt hat, legt sein Werk nicht mehr unter */
/* einem Element ab, sondern unter allen. Das Dreieck weicht einem Ring. */
/* Er trägt keinen Text — darum ein leeres <span> mit fester Grösse. */
.lib__zeichen--7 {
    /* GRÖSSER UND MAGISCHER (v1.08). Wer alle sieben Siegel gesetzt hat,
       soll es am Werk auch sehen: der Kreis war mit 0,82 em kaum grösser
       als ein Dreieck. Jetzt anderthalb Zeilen hoch, mit einem leisen
       Schein und einer sehr langsamen Drehung — neun Sekunden je Umlauf,
       weit über der Vier-Sekunden-Grenze aus Regel 4. Gedreht wird mit
       `transform`, das kostet nichts. */
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    vertical-align: -.42em;
    box-shadow: 0 0 6px rgba(122, 12, 12, .18);
    animation: libKreis 9s linear infinite;
    /* IN DER FOLGE DES REGENBOGENS, nicht in der der Elemente (v1.05):
       Rot · Orange · Gelb · Grün · Blau · Indigo · Violett. Das ist die
       Folge der ORTE im Siebeneck, nicht die der Zahlen 0…6. */
    background:
        conic-gradient(#b31616 0 14.28%, #b25709 0 28.57%, #a68300 0 42.85%,
                       #237a28 0 57.14%, #114f96 0 71.42%, #332b9e 0 85.71%,
                       #6f26a1 0 100%);
    /* Der helle Kern macht aus der Scheibe einen Ring — dieselbe */
    /* Gestalt wie ein Ouroboros, nur klein. */
    box-shadow: inset 0 0 0 .26em var(--paper), 0 0 7px rgba(122, 12, 12, .20);
}
@keyframes libKreis { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lib__zeichen--7 { animation: none; }
}

/* DIE FRISCH EINGEHÄNGTE ZEILE (v0.54) */
.lib__row--frisch > td {
    animation: libFrisch 2s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes libFrisch {
    from { opacity: 0; transform: translateY(-.5em); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lib__row--frisch > td { animation: none; }
}

/* v0.56 · DAS AUFLADEN DES ZEICHENS */

/* DER STOSS */
.sigil--stoss svg { animation: sigilStoss .2s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sigilStoss {
    0%   { scale: 1; }
    38%  { scale: .82; }
    100% { scale: 1; }
}

/* DIE WELLE */
.sigil__welle {
    position: absolute;
    left: 50%; top: 50%;
    width: 1.6em; height: 1.6em;
    margin: -.8em 0 0 -.8em;
    border: 1px solid var(--blood);
    border-radius: 50%;
    pointer-events: none;
    animation: sigilWelle .9s cubic-bezier(.16, .8, .3, 1) forwards;
}
.sigil__welle--gross {
    border-width: 2px;
    animation-duration: 1.5s;
}
@keyframes sigilWelle {
    from { transform: scale(.35); opacity: .85; }
    to   { transform: scale(4.2); opacity: 0; }
}
.sigil__welle--gross { --w: 1; }
@supports (animation-timeline: view()) { .sigil__welle { will-change: transform, opacity; } }

/* DIE MARKEN */
.sigil__ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .9s ease;
}
.sigil__marke {
    position: absolute;
    left: 50%; top: 50%;
    width: 3px; height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: var(--blood);
    transform: rotate(calc(var(--i, 0) * 51.43deg)) translateY(-1.55em);
    animation: sigilMarke .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* .sigil__marke--zwei ist mit der zweiten Ladung in v0.80 entfallen. */
@keyframes sigilMarke {
    from { opacity: 0; scale: 0; }
    to   { opacity: .9; scale: 1; }
}
/* Beim Auslösen fallen alle Marken zugleich in das Zeichen zurück. Das */
.sigil__ring.is-sog { transform: scale(.05) rotate(200deg); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .sigil--stoss svg { animation: none; }
    .sigil__welle { display: none; }
    .sigil__marke { animation: none; opacity: .9; }
    .sigil__ring { transition: none; }
}

/* v0.58 · DER WALD IST KEIN KÄFIG */
html.nb-drift .block--garden { overflow: visible; }
html.nb-drift .lib__scroll   { overflow-x: visible; }
html.nb-drift .lib__sheet    { -webkit-mask-image: none; mask-image: none; }

/* WACHSTUM ANTWORTET (v0.58) */
.apart__word-de.is-zuck { animation: wortZuck .28s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes wortZuck {
    0%   { letter-spacing: .34em; }
    45%  { letter-spacing: .48em; }
    100% { letter-spacing: .34em; }
}
/* Ein neuer Wurf: das Wort atmet einmal tief durch. Länger als das */
.apart__word-de.is-wurf { animation: wortWurf 1.1s cubic-bezier(.2, .9, .3, 1); }
@keyframes wortWurf {
    0%   { transform: scale(4.2);  opacity: 1; }
    30%  { transform: scale(4.75); opacity: .55; }
    100% { transform: scale(4.2);  opacity: 1; }
}

/* HIER STAND DIE GEBURT DER ERWEITERUNG (bis v0.79). Der Nachhall gehört */
@media (prefers-reduced-motion: reduce) {
    .apart__word-de.is-zuck,
    .apart__word-de.is-wurf { animation: none; }
}

/* v0.72 · DER ROTE SEED IST ÜBERALL DER BESONDERE */

/* 1 · HIER STAND DAS WÄRMERE ATMEN DES ZEICHENS (bis v1.03). Es hing */
/* an `.sigil--wink`, und diese Klasse wird seit v0.81 von niemandem */
/* mehr gesetzt — der Wink «Wachstum» ist damals entfallen. Die Regel */
/* meldete sich nie (Regel 14) und ist in v1.04 mitsamt ihren beiden */
/* Keyframes gestrichen (Regel 10: nach jedem Ausbau nach Verwaisten */
/* suchen). Das Rot bleibt im Rausch und im Blitz das Besondere. */

/* 4 · Das laufende Tausend im Siegel der Auflage glüht mit. Es pulsiert */
html[data-seed="3"] .tally.is-visible .tri--active { filter: drop-shadow(0 0 3px var(--blood)); }

@media (prefers-reduced-motion: reduce) {
    html[data-seed="3"] .tally.is-visible .tri--active { filter: none; }
}
/* v0.66 · DER LEICHTE RAUSCH, DER WINK UND DAS ZEICHEN, DAS ATMET */

/* DER LEICHTE RAUSCH */
/* Und die Wolke bleibt weit unter dem, was sie im vollen Rausch darf. */
html.nb-leicht .nb-rausch-wolke { opacity: calc(var(--rausch) * .3); }

/* HIER STAND DAS ATMENDE ZEICHEN UND DER WINK «Wachstum» (bis v1.03). */
/* Beide hingen an `.sigil--wink`; die Klasse ist seit v0.81 tot. */

/* v0.72 · DER BLITZ — von Grund auf neu */

.nb-blitz-feld {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;          /* kein Blitz erzeugt jemals eine Bildlaufleiste */
    contain: strict;           /* nichts hierin zwingt die Seite zu neuem Layout */
}

/* DAS AUFBLITZEN DES DREIECKS SELBST */
.nb-tri-wink { position: relative; transition: scale .45s cubic-bezier(.2, 1.5, .4, 1); }
.nb-tri-wink.is-aus { scale: calc(1 + .42 * (.2 + var(--naehe, 0))); }

.nb-blitz {
    position: absolute;
    width: var(--w, 120px);
    height: var(--h, 120px);
    margin-left: calc(var(--w, 120px) / -2);
    pointer-events: none;
    /* Die Farbe des Seeds. Der Rückfall ist das Rot der Seite – wer ohne */
    color: var(--bf, #a31313);
    animation: blitzLeben 1.1s cubic-bezier(.1, .9, .3, 1) both;
}
.nb-blitz svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nb-blitz path {
    /* 4000 ist grosszügig länger als jeder mögliche Streckenzug – ein zu */
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: blitzFahrt .3s cubic-bezier(.2, .9, .4, 1) both;
}
.nb-blitz__kern {
    stroke-width: calc(1.6px + 3.4px * var(--kraft, .5));
    opacity: .98;
    /* Der Schein sitzt auf dem KERN und nicht auf dem ganzen Blitz. Ein */
    filter: drop-shadow(0 0 calc(2px + 12px * var(--kraft, .5)) currentColor);
}
.nb-blitz__ast {
    stroke-width: calc(.9px + 1.8px * var(--kraft, .5));
    opacity: .46;
    animation-delay: .06s;      /* er zweigt ab, er entsteht nicht daneben */
}
/* Das Beiwerk fährt nicht mit, es GEHT AUF. Punkte und Tropfen haben */
.nb-blitz__zier {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0;
    transform-origin: 50% 40%;
    animation: blitzZier .8s cubic-bezier(.2, .9, .3, 1) .18s both;
}

/* DIE SCHOCKWELLE */
.nb-blitz__welle {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(26px + 90px * var(--kraft, .5));
    height: calc(26px + 90px * var(--kraft, .5));
    margin: calc((26px + 90px * var(--kraft, .5)) / -2);
    margin-bottom: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    animation: blitzWelle .9s cubic-bezier(.15, .85, .3, 1) both;
}

/* DER AUFSCHLAG */
.nb-blitz__stoss {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(20px + 140px * var(--kraft, .5));
    height: calc(6px + 34px * var(--kraft, .5));
    margin-left: calc((20px + 140px * var(--kraft, .5)) / -2);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, currentColor 0%, transparent 72%);
    animation: blitzStoss .7s cubic-bezier(.1, .9, .3, 1) .22s both;
}

@keyframes blitzFahrt { to { stroke-dashoffset: 0; } }
@keyframes blitzLeben {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    52%  { opacity: .88; }
    100% { opacity: 0; }
}
@keyframes blitzZier {
    0%   { opacity: 0; scale: .5; }
    40%  { opacity: 1; scale: 1.08; }
    100% { opacity: .55; scale: 1; }
}
@keyframes blitzWelle {
    0%   { opacity: .9; scale: .12; }
    100% { opacity: 0;  scale: 1; }
}
@keyframes blitzStoss {
    0%   { opacity: 0;  scale: .3 .2; }
    22%  { opacity: .85; scale: 1 1; }
    100% { opacity: 0;  scale: 1.5 .6; }
}

/* DIE SIEBEN FARBEN DES BLITZES */
/* DIE SIEBEN DES REGENBOGENS (v1.05). Bis v1.04 standen hier sieben
   gebrochene Töne (Graublau, Lehm, Wurzelgrün). Jetzt sind es die
   sieben Farben des Regenbogens — dieselben Werte wie in ELEMENTE[]
   und in FARBEN (js), .siegel__platz--n und nb_mail_farben(). */
.nb-blitz--0 { --bf: #4038c4; }   /* Indigo  · DIE LUFT   */
.nb-blitz--1 { --bf: #e3b505; }   /* Gelb    · DAS OBEN   */
.nb-blitz--2 { --bf: #1565c0; }   /* Blau    · DAS WASSER */
.nb-blitz--3 { --bf: #e01b1b; }   /* Rot     · DAS FEUER  */
.nb-blitz--4 { --bf: #e8720c; }   /* Orange  · DIE ERDE   */
.nb-blitz--5 { --bf: #2f9e35; }   /* Grün    · DAS UNTEN  */
.nb-blitz--6 { --bf: #8b30c9; }   /* Violett · DAS INNEN  */

/* NUR DIE DRITTE LEUCHTET DOPPELT. Sie ist die Gestalt, die im Zeichen */
.nb-blitz--3 .nb-blitz__kern {
    stroke-width: calc(2px + 4.2px * var(--kraft, .5));
    filter: drop-shadow(0 0 calc(3px + 14px * var(--kraft, .5)) currentColor)
            drop-shadow(0 0 calc(8px + 34px * var(--kraft, .5)) currentColor);
}
.nb-blitz--3 .nb-blitz__welle { border-width: 2px; }

/* DAS ZEICHEN ANTWORTET */
.sigil--gerufen {
    animation: sigilGerufen 1.5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes sigilGerufen {
    0%   { filter: none; scale: 1; }
    18%  { filter: drop-shadow(0 0 10px var(--blood)) drop-shadow(0 0 26px var(--blood));
           scale: 1.22; }
    100% { filter: none; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nb-blitz-feld, .nb-blitz { display: none; }
    .nb-tri-wink.is-aus { scale: 1; }
    .sigil--gerufen { animation: none; }
}

/* v0.71 · DIE ZWEITE HÄLFTE */

/* 1 UND 2 – DER TUNNEL UND DIE GEOMETRIE – GIBT ES NICHT MEHR. */

/* 3 · DIE SEITE ATMET SCHNELLER. --atem treibt alles Lebendige (siehe */
html.nb-rausch { --atem: calc(7.6s * (1 - var(--r-zweite, 0) * .45)); }

/* Und die Erweiterung antwortet häufiger auf den Takt, weil der Takt */

/* v0.73 · DAS WORT SCHRUMPFT ZURÜCK */
/* KEINE EIGENE ANIMATION, SONDERN NUR EIN ÜBERGANG MEHR. Das Wort trägt */
.apart__word-de.is-schrumpf {
    transition: transform 2s cubic-bezier(.33, 0, .2, 1),
                letter-spacing 2s cubic-bezier(.33, 0, .2, 1);
}

/* v1.04 · DIE SIEBEN SIEGEL — DAS ENDE DER SEITE */
/* Hier stand von v0.73 bis v1.03 die Vollbild-Endsequenz (.nb-ende): */
/* eine weisse Fläche über allem, sieben Ringe, ein Satz — und danach */
/* ruhen(), die Seite lag für immer still. Sie ist ersatzlos entfallen. */
/* Wer alle sieben Siegel hat, soll DANACH noch ein Werk hinlegen und */
/* vorbestellen können; ein Vorhang, der alles schluckt, macht das */
/* unmöglich. An seine Stelle tritt dieses Band ganz unten. */

.siegel {
    /* DIE FELDGRÖSSE ist die eine Zahl, an der alles hängt: Radius, */
    /* Feldgrösse und die Zugabe unten leiten sich daraus ab. */
    --siegel-feld: min(92vw, 34rem);
    /* Wie weit die sieben vom Mittelpunkt stehen. 36 % entspricht dem */
    /* Radius 72 im 200er-Feld der Verzierung — die Dreiecke sitzen also */
    /* genau auf den Ecken des Siebenecks. Wer eines ändert, ändert beide. */
    --siegel-r: 36%;
    --siegel-d: calc(var(--siegel-feld) * .24);
    /* Der Ton der leeren Plätze (v1.10). Auf Papierweiss mit Deckkraft
       .45 ergibt das rund #c2bebc: sichtbar, aber offenkundig unfertig —
       ein Bleistiftstrich, kein Zeichen. */
    --siegel-grau: #8a8482;

    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    /* DER PLATZ GANZ UNTEN. Unten grosszügig, damit das Siebeneck nicht */
    /* am Rand des Bildschirms klebt und die Schlange Auslauf hat. */
    padding: 1rem 1rem max(3.5rem, env(safe-area-inset-bottom));
    background: var(--paper);
    -webkit-user-select: none;
    user-select: none;
}

.siegel__rund {
    position: relative;
    width: var(--siegel-feld);
    height: var(--siegel-feld);
}

/* DIE SIEBEN FELDER */
/* Gesetzt wird mit left/top und einem negativen Rand, NICHT mit */
/* translate: ein transform an diesen Kästen wäre ein transform an einem */
/* Vorfahren der abgelegten Abbilder — und die Regel 1 dieser Seite */
/* heisst, dass man das nicht tut, auch wenn es hier gerade gutginge. */
.siegel__platz {
    position: absolute;
    display: block;
    width:  var(--siegel-d);
    height: var(--siegel-d);
    margin-left: calc(var(--siegel-d) / -2);
    margin-top:  calc(var(--siegel-d) / -2);
    /* Der eigene Stapelraum: das Abbild liegt mit z-index -1 darin und */
    /* soll nicht hinter das Papier rutschen (die Falle aus v0.85). */
    isolation: isolate;
}

/* Die sieben Ecken. cos/sin von −90°, −38,57°, 12,86°, 64,29°, 115,71°, */
/* 167,14°, 218,57° — mal 36 %, plus 50 %. Ausgerechnet und nicht */
/* geschätzt, damit sie mit der Verzierung deckungsgleich sind. */
/* IM UHRZEIGERSINN VON OBEN, IN DER FOLGE DES REGENBOGENS (v1.05):
   Rot · Orange · Gelb · Grün · Blau · Indigo · Violett. Die Klasse
   trägt weiter die ELEMENTZAHL (0…6, eingefroren, Regel 2) — nur ihr
   Ort richtet sich nach dem Rang. Wer das umstellt, stellt RANG/FOLGE
   in script.js mit um, sonst kriecht sie zum falschen Feld.
       Ort 0 (oben)  Rot     → --3   Ort 4  Blau    → --2
       Ort 1  Orange → --4   Ort 5  Indigo  → --0
       Ort 2  Gelb   → --1   Ort 6  Violett → --6
       Ort 3  Grün   → --5                              */
.siegel__platz--3 { left: 50.00%; top: 14.00%; }   /* Rot     */
.siegel__platz--4 { left: 78.15%; top: 27.55%; }   /* Orange  */
.siegel__platz--1 { left: 85.10%; top: 58.01%; }   /* Gelb    */
.siegel__platz--5 { left: 65.62%; top: 82.43%; }   /* Grün    */
.siegel__platz--2 { left: 34.38%; top: 82.43%; }   /* Blau    */
.siegel__platz--0 { left: 14.90%; top: 58.01%; }   /* Indigo  */
.siegel__platz--6 { left: 21.85%; top: 27.55%; }   /* Violett */

/* DIE DREIECKE STEHEN VON ANFANG AN DA — ABER OHNE FARBE (v1.10) */
/* Bis v1.09 waren sie unsichtbar (`opacity: 0`), und erst das erste
   WACHSTUM liess sie erscheinen. Der Gedanke war, dass es vorher nichts
   zu ahnen geben soll. In der Ausführung stimmte das nicht: wer die Seite
   zum ersten Mal sieht, sieht unten eine leere weisse Fläche und hat
   keinen Grund, dort etwas zu vermuten — das Siebeneck war ein Versprechen
   an niemanden.
   Jetzt stehen die sieben Dreiecke von der ersten Sekunde an da, aber in
   GRAU: ein leerer Rahmen, sieben Plätze, offenkundig zu füllen. Was das
   Wachstum bringt, ist nicht mehr ihr Erscheinen, sondern ihre FARBE — und
   das ist der stärkere Auftritt, weil man den Vorher-Zustand kennt. */
.siegel__tri {
    display: block;
    width: 46%;
    height: auto;
    margin: 27% auto 0;
    /* Das Grau steht HIER und nicht am Platz: `.siegel__platz--n` trägt
       die Elementfarbe, und die soll unangetastet bleiben — sie ist eine
       von fünf Farbtafeln, die `pruef_farben.js` gegeneinander prüft.
       `color: inherit` unten holt sie sich wieder. */
    color: var(--siegel-grau);
    opacity: .45;
    transition: opacity 2.6s ease, color 2.6s ease;
}
html.nb-siegel-an .siegel__tri { color: inherit; opacity: .5; }

/* Jede Ecke trägt ihre Farbe. Fünfte Farbtafel neben ELEMENTE (js), */
/* FARBEN (js), .nb-blitz--n und .lib__zeichen--n — wer eine ändert, */
/* ändert alle. */
.siegel__platz--3 { color: #e01b1b; }   /* Rot     */
.siegel__platz--4 { color: #e8720c; }   /* Orange  */
.siegel__platz--1 { color: #e3b505; }   /* Gelb    */
.siegel__platz--5 { color: #2f9e35; }   /* Grün    */
.siegel__platz--2 { color: #1565c0; }   /* Blau    */
.siegel__platz--0 { color: #4038c4; }   /* Indigo  */
.siegel__platz--6 { color: #8b30c9; }   /* Violett */

/* Liegt das Siegel, tritt das Dreieck darunter zurück — es hat seine */
/* Aufgabe erfüllt und war nur der Zielpunkt. */
.siegel__platz.is-voll .siegel__tri { opacity: .14; }

/* DAS ABGELEGTE SIEGEL. Es füllt sein Feld ganz aus; nichts wird */
/* gemessen, also verrutscht auch nichts beim Drehen des Geräts. */
.siegel__platz .nb-ouro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* DER KNALL (v1.07) — DIE FARBE PLATZT AUS DEM SIEGEL */
/* Drei Kästen, zwei Bewegungen (transform, opacity), kein Filter und
   keine Fläche, die gelesen werden muss. Der conic-gradient ist ein
   RECHENAUSDRUCK: er wird je Bildpunkt ausgewertet und kostet fast
   nichts — anders als ein backdrop-filter, der alles Darunterliegende
   erst in ein Zwischenbild zeichnen muss. */
.nb-knall {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    margin: -50% 0 0 -50%;
    z-index: 2;
    pointer-events: none;
    display: block;
}
.nb-knall > span {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(var(--dreh, 0deg)) scale(.18);
}

/* DIE STRAHLEN. Sechzehn Keile aus einem einzigen Farbverlauf — der
   Kranz ist EIN Kasten, nicht sechzehn. */
.nb-knall__strahlen {
    background: conic-gradient(from 0deg,
        var(--f) 0deg 6deg, transparent 6deg 22.5deg,
        var(--fh) 22.5deg 27deg, transparent 27deg 45deg,
        var(--f) 45deg 51deg, transparent 51deg 67.5deg,
        var(--fh) 67.5deg 72deg, transparent 72deg 90deg,
        var(--f) 90deg 96deg, transparent 96deg 112.5deg,
        var(--fh) 112.5deg 117deg, transparent 117deg 135deg,
        var(--f) 135deg 141deg, transparent 141deg 157.5deg,
        var(--fh) 157.5deg 162deg, transparent 162deg 180deg,
        var(--f) 180deg 186deg, transparent 186deg 202.5deg,
        var(--fh) 202.5deg 207deg, transparent 207deg 225deg,
        var(--f) 225deg 231deg, transparent 231deg 247.5deg,
        var(--fh) 247.5deg 252deg, transparent 252deg 270deg,
        var(--f) 270deg 276deg, transparent 276deg 292.5deg,
        var(--fh) 292.5deg 297deg, transparent 297deg 315deg,
        var(--f) 315deg 321deg, transparent 321deg 337.5deg,
        var(--fh) 337.5deg 342deg, transparent 342deg 360deg);
    /* Innen ausgespart: der Ouroboros soll sichtbar bleiben. */
    -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 42%, #000 82%, transparent 96%);
    mask-image: radial-gradient(circle, transparent 26%, #000 42%, #000 82%, transparent 96%);
}
.nb-knall__ring {
    border: 2px solid var(--f);
    background: none;
}
.nb-knall__ring--zwei { border-color: var(--fh); border-width: 1px; }

/* DAS AUFFAHREN. Die Strahlen drehen dabei ein Stück weiter — eine
   Explosion, die sich zugleich öffnet und wendet, liest sich als
   Aufblühen und nicht als Sprengung. */
/* SIEBEN HANDSCHRIFTEN (v1.08). Weite, Dauer, Beschleunigung und
   Mitdrehung kommen aus KNALL[] im Skript — hier stehen nur noch die
   Vorgaben für den Fall, dass keine gesetzt sind. Bewegt werden weiterhin
   ausschliesslich `transform` und `opacity`. */
.nb-knall.is-da .nb-knall__strahlen {
    opacity: 0;
    transform: rotate(calc(var(--dreh, 0deg) + var(--auf, 38deg)))
               scale(calc(var(--weite, 4.6) * 1));
    transition: opacity calc(var(--dauer, 1.5s) * .85) ease-out,
                transform var(--dauer, 1.5s) var(--kurve, cubic-bezier(.08, .82, .3, 1));
}
.nb-knall.is-da .nb-knall__ring {
    opacity: 0;
    transform: rotate(var(--dreh, 0deg)) scale(calc(var(--weite, 4.6) * 1.2));
    transition: opacity calc(var(--dauer, 1.7s) * 1.05) ease-out,
                transform calc(var(--dauer, 1.7s) * 1.15) var(--kurve, cubic-bezier(.05, .85, .25, 1));
}
/* NACHLAUF (v1.08). Nicht alles soll zugleich anfangen und aufhören —
   die Staffelung ist nach der Bewegungslehre der zweite grosse Hebel.
   Die Strahlen führen, der erste Ring folgt nach 80 ms, der zweite nach
   260 ms und braucht am längsten. Erst wenn er zur Ruhe kommt, ist die
   Bewegung ANGEKOMMEN — eine Bewegung ohne Zielpunkt hört bloss auf. */
.nb-knall.is-da .nb-knall__ring {
    transition-delay: .08s;
}
.nb-knall.is-da .nb-knall__ring--zwei {
    transform: rotate(var(--dreh, 0deg)) scale(calc(var(--weite, 4.6) * .72));
    transition: opacity calc(var(--dauer, 2s) * 1.25) ease-out .26s,
                transform calc(var(--dauer, 2s) * 1.35) var(--kurve, cubic-bezier(.05, .85, .25, 1)) .26s;
}
/* Der Ausgangszustand darf nicht mitübergeblendet werden — sonst
   verblasst der Knall, statt zu platzen (dieselbe Falle wie beim
   Zeigerfunken in v0.83). */
.nb-knall > span { transition: none; }
.nb-knall:not(.is-da) .nb-knall__strahlen { opacity: .85; }
.nb-knall:not(.is-da) .nb-knall__ring { opacity: .7; }

/* DAS AUSHOLEN (v1.08) */
/* Die Bewegungslehre nennt die Antizipation den wichtigsten einzelnen
   Hebel: eine kurze Gegenbewegung vor der Tat lässt sie verdient statt
   beliebig wirken. Der Kranz zieht sich in 150 ms zusammen und wird dabei
   dichter — dann platzt er. Ohne dieses Ausholen sah der Knall aus, als
   sei er schon halb vorbei, wenn er beginnt. */
.nb-knall.is-bereit:not(.is-da) .nb-knall__strahlen {
    opacity: 1;
    transform: rotate(var(--dreh, 0deg)) scale(.09);
    transition: opacity .15s ease-out, transform .15s cubic-bezier(.4, 0, .7, .2);
}
.nb-knall.is-bereit:not(.is-da) .nb-knall__ring {
    opacity: .9;
    transform: rotate(var(--dreh, 0deg)) scale(.12);
    transition: opacity .15s ease-out, transform .15s cubic-bezier(.4, 0, .7, .2);
}

@media (prefers-reduced-motion: reduce) {
    .nb-knall { display: none; }
}

/* DIE VERZIERUNG — MAJESTÄTISCH, ABER SIMPEL */
/* Sie ist bis zum siebten Siegel gar nicht da und zeichnet sich dann */
/* langsam selbst: erst der Ring, dann das Siebeneck, zuletzt der Stern. */
.siegel__zier {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--blood);
    opacity: 0;
    pointer-events: none;
    transition: opacity 5s ease-in-out;
}
html.nb-siegel-voll .siegel__zier { opacity: .34; }

.siegel__zier-ring,
.siegel__zier-eck,
.siegel__zier-stern {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}
html.nb-siegel-voll .siegel__zier-ring {
    animation: siegelZug 4.5s ease-in-out .6s forwards;
}
html.nb-siegel-voll .siegel__zier-ring--innen {
    animation: siegelZug 4.5s ease-in-out 1.4s forwards;
}
html.nb-siegel-voll .siegel__zier-eck {
    animation: siegelZug 6s ease-in-out 2.6s forwards;
}
html.nb-siegel-voll .siegel__zier-stern {
    animation: siegelZug 9s ease-in-out 5s forwards;
}
@keyframes siegelZug { to { stroke-dashoffset: 0; } }

/* Und die sieben liegenden Siegel bekommen einen sehr leisen Schein — */
/* die einzige Regung auf dieser Fläche, und sie ist länger als vier */
/* Sekunden (Regel 4: nichts blinkt). */
html.nb-siegel-voll .siegel__platz .nb-ouro.is-da {
    animation: siegelAtem 11s ease-in-out infinite alternate;
}
@keyframes siegelAtem {
    from { filter: none; }
    to   { filter: drop-shadow(0 0 6px currentColor); }
}

/* DAS SIEBENECK AUF DEM TELEFON (v1.06) */
/* Drei Dinge, die auf 390 px anders sein müssen als auf dem Schirm:

   1 · Das Feld darf breiter werden (96vw statt 92vw) — auf dem Telefon
       ist Rand teuer, und das Siebeneck ist das Letzte, was man sieht.
   2 · Die Felder werden GRÖSSER, nicht kleiner (28 % statt 24 %). Ein
       Siegel von 80 px ist auf Armlänge kaum zu erkennen; die sieben
       liegen weit genug auseinander, dass sie sich auch bei 28 % nicht
       berühren (der Abstand zweier Nachbarn auf dem Siebeneck beträgt
       2·36 %·sin(π/7) = 31 % der Feldbreite).
   3 · Unten mehr Luft, weil dort auf vielen Telefonen die Leiste des
       Browsers ein- und ausfährt. */
@media (max-width: 600px) {
    .siegel {
        --siegel-feld: min(96vw, 30rem);
        --siegel-d: calc(var(--siegel-feld) * .28);
        padding: .5rem .5rem max(4.5rem, calc(env(safe-area-inset-bottom) + 2.5rem));
    }
    /* Die Verzierung wird kräftiger: auf einem kleinen Schirm geht eine
       Linie von 0,4 px unter, besonders auf Papierweiss. */
    .siegel__zier-ring { stroke-width: 1.1; }
    .siegel__zier-ring--innen { stroke-width: .7; }
    .siegel__zier-eck { stroke-width: 1.2; }
    .siegel__zier-stern { stroke-width: .9; }
    html.nb-siegel-voll .siegel__zier { opacity: .42; }
    /* Und die Dreiecke etwas deutlicher, aus demselben Grund — die
       grauen wie die farbigen (v1.10). */
    .siegel__tri { opacity: .55; }
    html.nb-siegel-an .siegel__tri { opacity: .62; }
}

/* Im Querformat ist die HÖHE knapp, nicht die Breite. Dann richtet sich
   das Feld nach der Höhe, sonst reicht das Siebeneck über den Schirm
   hinaus und man sieht nie alle sieben zugleich. */
@media (max-height: 560px) and (orientation: landscape) {
    .siegel { --siegel-feld: min(72vh, 30rem); }
}

@media (prefers-reduced-motion: reduce) {
    .siegel__tri,
    .siegel__zier { transition-duration: .01ms; }
    .siegel__zier-ring,
    .siegel__zier-eck,
    .siegel__zier-stern { animation: none; stroke-dashoffset: 0; }
    html.nb-siegel-voll .siegel__platz .nb-ouro.is-da { animation: none; }
}

/* v0.83 · DER SCHACHT — DIE EKSTASE */
.nb-schacht {
    position: fixed;
    inset: 0;
    z-index: 87;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    perspective: var(--r-schacht-sicht, 600px);
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    color: var(--r-schacht-farbe, var(--lit));
    /* Der Übergang ist lang: der Schacht kommt nicht, er WÄCHST. */
    transition: opacity 3.2s ease;
}

/* WANN ER ÜBERHAUPT DA IST */
html.nb-rausch .nb-schacht {
    opacity: calc(
        var(--rausch, 0)
        * var(--r-schacht-deck, .6)
        * clamp(0, (var(--r-wucht, 1) - 1.35) * .9, 1)
        + var(--r-durchbruch, 0) * .5
    );
}

/* Die Brennweite wird im Durchbruch kürzer: man fällt hindurch. Das ist */
html.nb-rausch .nb-schacht {
    perspective: calc(var(--r-schacht-sicht, 600px)
                      * (1 - var(--r-durchbruch, 0) * .62));
}

/* DER SCHLUND */
.nb-schacht__schlund {
    position: absolute;
    left: 50%; top: 50%;
    width: 60vmin; height: 60vmin;
    margin: -30vmin 0 0 -30vmin;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        currentColor 0%, transparent 62%);
    opacity: .22;
    transform: translateZ(-1400px) scale(3);
}

/* DIE RINGE */
.nb-schacht__r {
    position: absolute;
    left: 50%; top: 50%;
    width: 78vmin;
    height: 78vmin;
    margin: -39vmin 0 0 -39vmin;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: schachtFlug calc(var(--r-schacht-dauer, 16s) * var(--nb-takt, 1))
               linear infinite;
    animation-delay: calc(var(--r-schacht-dauer, 16s) * var(--nb-takt, 1)
                          * var(--i) / var(--n) * -1);
}

/* Der Flug. Von weit hinten bis knapp hinter das Auge, dabei auf- und */
@keyframes schachtFlug {
    0% {
        transform: translateZ(-2600px)
                   rotate(calc(var(--r-schacht-dreh, 6deg) * var(--i)))
                   scaleY(var(--r-schacht-stauch, .85));
        opacity: 0;
    }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% {
        transform: translateZ(320px)
                   rotate(calc(var(--r-schacht-dreh, 6deg) * var(--i) + 42deg))
                   scaleY(var(--r-schacht-stauch, .85));
        opacity: 0;
    }
}

/* DER RÜCKWEG LÄUFT VERKEHRT HERUM */
html.nb-rueckweg .nb-schacht__r { animation-direction: reverse; }

/* Und er wird schneller, wenn die Seite es wird (--r-zweite, v0.71). */
html.nb-rausch .nb-schacht__r {
    animation-duration: calc(var(--r-schacht-dauer, 16s) * var(--nb-takt, 1)
                             * (1 - var(--r-zweite, 0) * .45));
}

/* DIE NOTLAGE (v0.85). Sie bleibt — aber sie hängt an der GEMESSENEN
   Bildzeit (nb_takt), nicht an der Bildschirmbreite. Seit v1.06 gilt das
   für den ganzen Rausch: ein Telefon bekommt alle 24 Ringe. */
html.nb-notlage .nb-schacht { display: none; }

/* DIE NOTLAGE GREIFT WEITER (v1.08) */
/* Bis v1.07 schaltete die zweite Stufe des Taktes ausschliesslich den
   Schacht ab. Das ist die eine Fläche, die ohnehin am wenigsten kostet —
   sie ist ein Rand, keine Füllung. Teuer sind die Dinge, die ein schon
   gezeichnetes Bild LESEN müssen (Regel 30): Weichzeichner, Filter,
   Mischarten. Wer wirklich in Not ist, muss die zuerst loswerden.
   Der Takt misst die Bildzeit; wenn er Stufe 2 meldet, ist die Lage
   ernst, und dann gilt: lieber weniger sehen als hakeln. */
html.nb-notlage .nb-zeigerfunke,
html.nb-notlage .nb-zeigergas,
html.nb-notlage .nb-knall { display: none; }
/* Der Weichzeichner der Scherben ist ein Filter über einer bewegten
   Fläche — der teuerste Posten am Schlüpfen. */
html.nb-notlage .nb-ei__scherbe { filter: none; }
/* Und die Verzierung des Siebenecks hört auf zu atmen. */
html.nb-notlage .siegel__platz .nb-ouro.is-da { animation: none; }
html.nb-notlage .lib__zeichen--7 { animation: none; }

/* DIE ERSTE STUFE IST SPARSAM, NICHT ARM (v1.08) */
/* `nb-sparsam` setzt der Takt schon bei mässiger Last. Hier fällt nur,
   was gross und weich ist — die Gestalt bleibt vollständig. */
html.nb-sparsam .nb-ei__scherbe { filter: none; }
html.nb-sparsam .siegel__platz .nb-ouro.is-da { animation-duration: 22s; }

/* Auf schmalen Bildschirmen ein WEITERER Gang: dort sieht man den Rand
   des Ringes sonst nie, und aus dem Tunnel wird ein Punkt. Das ist keine
   Drosselung, sondern die richtige Grösse für einen kleinen Schirm. */
@media (max-width: 620px) {
    .nb-schacht__r { width: 96vmin; height: 96vmin; margin: -48vmin 0 0 -48vmin; }
}

/* Ohne 3-D-Raum ergibt der Schacht kein Bild, sondern einen Stapel */
@supports not (transform-style: preserve-3d) {
    .nb-schacht { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nb-schacht { display: none; }
}

/* v0.81 · DAS EI IM ZEICHEN, DIE SCHLANGE IM GRUND, DER TOD */

/* DAS DREIECK, SOLANGE EIN WESEN VON IHM LEBT */
.sigil.is-leer > svg { opacity: .18; transition: opacity 1.2s ease; }

/* DAS EI */
.nb-ei {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5.4rem;
    height: 5.4rem;
    margin: -2.7rem 0 0 -2.7rem;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transform: scale(.25) rotate(-12deg);
    transition: opacity .8s ease, transform .9s cubic-bezier(.3, .8, .3, 1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.nb-ei.is-da { opacity: 1; transform: scale(1) rotate(0deg); }
.nb-ei__bild { display: block; width: 100%; height: 100%; overflow: visible; }

/* ES ATMET */
.nb-ei__bild {
    animation: eiAtem var(--atem, 7.6s) ease-in-out infinite alternate;
    transform-origin: 50% 62%;
}
@keyframes eiAtem {
    from { transform: scale(1) rotate(-1.2deg); }
    to   { transform: scale(1.045) rotate(1.2deg); }
}

/* Ein sehr weicher Schein HINTER dem Ei — kein Filter darauf. Ein Filter */
.nb-ei::before {
    content: "";
    position: absolute;
    inset: -46%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 52%, var(--f) 0%, transparent 62%);
    opacity: .17;
    animation: eiSchein calc(var(--atem, 7.6s) * 2) ease-in-out infinite alternate;
}
@keyframes eiSchein {
    from { opacity: .10; transform: scale(.88); }
    to   { opacity: .26; transform: scale(1.06); }
}

/* DAS FEUER GLÜHT, UND NUR ES. Dieselbe Entscheidung wie an jeder */
.nb-ei--feuer::before { opacity: .32; }
.nb-ei--feuer .nb-ei__bild { filter: drop-shadow(0 0 9px rgba(193, 31, 31, .55)); }

/* DIE SIEBEN RISSE */
.nb-ei__riss {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: eiRiss .55s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes eiRiss { to { stroke-dashoffset: 0; } }

/* DER STOSS. Ein kurzes Zucken bei jedem Klick, und es wird mit jedem */
.nb-ei.is-stoss .nb-ei__bild {
    animation: eiAtem var(--atem, 7.6s) ease-in-out infinite alternate,
               eiStoss .26s ease-in-out;
}
@keyframes eiStoss {
    0%, 100% { translate: 0 0; }
    30%      { translate: calc(-1px * var(--sprung, 1)) calc(.5px * var(--sprung, 1)); }
    70%      { translate: calc(1px * var(--sprung, 1)) calc(-.5px * var(--sprung, 1)); }
}

/* Der siebte Klick: die Schale springt und ist fort. */
.nb-ei.is-springt .nb-ei__bild { animation: eiBeben .3s ease-in-out 4; }
@keyframes eiBeben {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(-3px, 1.5px) rotate(-2.2deg); }
    75%      { transform: translate(3px, -1.5px) rotate(2.2deg); }
}
/* DER ALTE WEG: das ganze Ei verblasst und wächst. Er gilt seit v1.08
   nur noch für `prefers-reduced-motion` — dort soll nichts kippen. */
.nb-ei.is-fort {
    opacity: 0;
    transform: scale(1.9) rotate(8deg);
    transition: opacity 1.1s ease-in, transform 1.1s ease-in;
}

/* DIE SCHALE BRICHT (v1.08) */
/* Zwei Kopien desselben Bildes, jede auf ihre Hälfte beschnitten. Sobald
   `is-bricht` steht, trägt das Ei selbst keine eigene Bewegung mehr —
   `is-fort` blendet dann nur noch die Scherben aus, und die kippen. */
.nb-ei.is-bricht { transform: none; }
.nb-ei.is-bricht.is-fort { opacity: 1; transform: none; }

.nb-ei__scherbe {
    position: absolute;
    inset: 0;
    display: block;
    transform: translate3d(0, 0, 0) rotate(0deg);
    /* Die Bruchkante bekommt eine Spur Schatten — ohne sie sähen die
       beiden Hälften aus wie ein aufgeschnittenes Bild, nicht wie
       Bruchstücke. */
    filter: drop-shadow(0 1px 0 rgba(11, 10, 9, .28));
}
.nb-ei__scherbe > svg { display: block; width: 100%; height: 100%; }

/* Oben kippt nach links und hebt sich, unten kippt nach rechts und
   sinkt — wie eine Schale, die auseinanderfällt. Beide fallen zuletzt,
   weil ein Bruchstück nicht schwebt. */
.nb-ei.is-bricht.is-fort .nb-ei__scherbe--a {
    opacity: 0;
    transform: translate3d(var(--weg-a, -12px), -14px, 0) rotate(var(--kipp-a, -16deg));
    transition: opacity 1.05s ease-in .06s,
                transform 1.05s cubic-bezier(.34, .04, .62, 1) .06s;
}
.nb-ei.is-bricht.is-fort .nb-ei__scherbe--b {
    opacity: 0;
    transform: translate3d(var(--weg-b, 14px), 22px, 0) rotate(var(--kipp-b, 20deg));
    transition: opacity 1.05s ease-in,
                transform 1.05s cubic-bezier(.34, .04, .62, 1);
}

@media (prefers-reduced-motion: reduce) {
    .nb-ei__scherbe { display: none; }
}

/* Ohne Bewegung liegt das Ei still da. Der Ablauf bleibt vollständig — */
.nb-ei.is-still .nb-ei__bild,
.nb-ei.is-still::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .nb-ei, .nb-ei__bild, .nb-ei::before { animation: none !important; }
    .nb-ei__riss { animation: none; stroke-dashoffset: 0; }
}

/* DIE ZEICHENFLÄCHE DER SCHLANGE */
.nb-brut {
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
}

/* HIER STAND DER KREUZ-ZEIGER ÜBER DEM OUROBOROS (bis v1.03). Der */
/* Ring war anklickbar; seit v1.04 versiegelt er sich von selbst, und */
/* es gibt nichts mehr zu treffen. */

@media (prefers-reduced-motion: reduce) {
    .nb-brut { display: none; }
}

/* DIE VIER ZEIGER (v0.83) */
html.nb-zeiger-farbig { cursor: var(--nb-cur-pfeil, auto); }

html.nb-zeiger-farbig a,
html.nb-zeiger-farbig button,
html.nb-zeiger-farbig summary,
html.nb-zeiger-farbig label,
html.nb-zeiger-farbig .thumb,
html.nb-zeiger-farbig .sigil,
html.nb-zeiger-farbig .nb-ei,
html.nb-zeiger-farbig [role="button"],
html.nb-zeiger-farbig input[type="submit"],
html.nb-zeiger-farbig input[type="button"],
html.nb-zeiger-farbig input[type="file"],
html.nb-zeiger-farbig input[type="checkbox"],
html.nb-zeiger-farbig select { cursor: var(--nb-cur-hand, pointer); }

html.nb-zeiger-farbig input[type="text"],
html.nb-zeiger-farbig input[type="email"],
html.nb-zeiger-farbig input[type="url"],
html.nb-zeiger-farbig input[type="search"],
html.nb-zeiger-farbig textarea { cursor: var(--nb-cur-text, text); }

/* (Die Vorrangregel des Ouroboros über allen anderen Zeigern ist mit */
/* dem Klick in v1.04 entfallen.) */

/* DER FUNKE, DER DAS UMSCHALTEN BEGLEITET */
.nb-zeigerfunke {
    position: fixed;
    z-index: 96;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid var(--f, var(--blood));
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(.2);
}
.nb-zeigerfunke.is-da {
    opacity: 0;
    transform: scale(9);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(.1, .8, .3, 1);
}
.nb-zeigerfunke { transition: none; }
.nb-zeigerfunke:not(.is-da) { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
    .nb-zeigerfunke { display: none; }
}

/* DAS AUSGASEN (v1.06) — DAS ENDE DES RAUSCHES */
/* Der Funke oben ist ein Ring, der nach aussen fährt: die Farbe kommt an.
   Das Gas ist eine FLÄCHE, die sich auflöst: die Farbe geht fort. Darum
   eine weiche Scheibe statt eines Randes, langsamer (2 s statt 1,2 s) und
   mit einem leichten Aufsteigen — Gas fällt nicht. */
.nb-zeigergas {
    position: fixed;
    z-index: 96;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle,
                var(--f, var(--blood)) 0%,
                color-mix(in srgb, var(--f, var(--blood)) 45%, transparent) 45%,
                transparent 72%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(0) scale(.35);
    filter: blur(1px);
}
.nb-zeigergas.is-da {
    opacity: 0;
    transform: translateY(-26px) scale(7);
    filter: blur(7px);
    transition: opacity 2s ease-out,
                transform 2s cubic-bezier(.15, .7, .35, 1),
                filter 2s ease-out;
}
.nb-zeigergas { transition: none; }
.nb-zeigergas:not(.is-da) { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    .nb-zeigergas { display: none; }
}

/* AUF BERÜHRGERÄTEN GIBT ES KEINEN ZEIGER (v1.06) */
/* Farbige Zeiger, Funke und Gas hängen alle an einer Mausspitze. Auf dem
   Telefon steht diese Spitze da, wo zuletzt getippt wurde — die Wolke
   käme also an einer beliebigen Stelle aus dem Nichts. Sie bleibt fort;
   das Ende des Rausches zeigt sich dort ohnehin daran, dass die Seite
   wieder aussieht wie zuvor. Die Zeigerregeln selbst schaden nicht (ein
   Berührgerät wertet `cursor` gar nicht aus), aber die beiden Regungen
   sind sichtbar und darum ausdrücklich abgeschaltet. */
@media (hover: none) {
    .nb-zeigerfunke,
    .nb-zeigergas { display: none; }
}

/* DER ABGELEGTE OUROBOROS (v0.84 · ein Abbild, seit v1.04 im Siegel) */
.nb-ouro {
    position: absolute;
    /* MINUS EINS UND NICHT NULL (v0.85). Ein positioniertes Element mit */
    z-index: -1;
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity 2.2s ease;
}
/* GRUNDWERT (v1.01 · Normfall, falls ein Element keine eigene Regel */
/* unten hat). Vorher lag der Grundwert bei .5 und nur der Garten */
/* hatte eine Ausnahme — dadurch blieben sechs der sieben Elemente */
/* zu blass. Jetzt hat jedes der sieben eine eigene Zeile (Regel 15). */
.nb-ouro.is-da { opacity: .75; }

/* SEIT v1.04 LIEGEN ALLE SIEBEN AUF DEMSELBEN GRUND: dem Papierweiss */
/* des Siegelbandes ganz unten. Die alte Unterscheidung »dunkler Grund */
/* (Hero, Garten) gegen hellen Grund« ist damit gegenstandslos — die */
/* Abschnitte tragen keine Abbilder mehr. Die sieben Zeilen bleiben */
/* trotzdem einzeln stehen: die Farben sind unterschiedlich hell, und */
/* Regel 15 sagt, dass eine globale Regel mit einer Ausnahme keine */
/* Normierung ist. Die helleren Elemente bekommen etwas mehr. */
.nb-ouro--luft.is-da   { opacity: .86; }   /* Graublau, hell            */
.nb-ouro--oben.is-da   { opacity: .82; }   /* Sonnengold                */
.nb-ouro--wasser.is-da { opacity: .84; }   /* Tiefblau                  */
.nb-ouro--feuer.is-da  { opacity: .82; }   /* das Blutrot der Seite     */
.nb-ouro--erde.is-da   { opacity: .84; }   /* Lehm                      */
.nb-ouro--unten.is-da  { opacity: .84; }   /* Wurzelgrün                */
.nb-ouro--innen.is-da  { opacity: .82; }   /* Violett                   */

/* HIER STAND DAS TOTE ABBILD (v1.01 bis v1.03). Mit dem Zerfall ist */
/* auch `.nb-ouro--tot` entfallen — es gibt keine Niederlage mehr. */

/* Der Sonderfall ohne Bewegung: dort gibt es keine Schlange, also wird */
/* das Ei selbst versiegelt. */
.nb-ouro--ei > svg { display: block; width: 100%; height: 100%; }
.nb-ouro--ei > svg,
.nb-ouro--ei * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .nb-ouro { transition: opacity .3s linear; }
}

/* HIER STAND DER TOD (bis v1.03): `.sigil.is-fort` und `html.nb-tot`. */
/* Beide sind mit dem Zerfall entfallen. */

/* v0.79 · DAS TELEFON — EINE SEITE, DIE OHNE ZOOM AUSKOMMEN MUSS */

/* 1 · DIE SICHEREN RÄNDER */
@supports (padding: env(safe-area-inset-bottom)) {
    /* Der Abgang der Seite. Die Luft darunter steht schon da; der Balken */
    /* v1.10: EINE Zeile statt zweier. Die schmale Bühne braucht hier
       nichts Eigenes mehr — --impressum-fuss ist dort schon kleiner. */
    .impressum { padding-bottom: calc(var(--impressum-fuss) + env(safe-area-inset-bottom)); }
    /* Das Spendenfenster steht auf dem Telefon UNTEN am Rand */
    .modal { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
    @media (max-width: 600px) {
        .modal { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
    }

    /* Querformat: hier liegt die Kerbe seitlich. max() statt calc(), */
    @media (orientation: landscape) and (max-height: 620px) {
        .hero, .block, .impressum {
            padding-left:  max(1.5rem, env(safe-area-inset-left));
            padding-right: max(1.5rem, env(safe-area-inset-right));
        }
    }
}

/* 2 · DIE TREFFERFLÄCHEN */
@media (pointer: coarse) {
    .btn {
        min-height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .thumb {
        min-width: 2.75rem;
        min-height: 2.75rem;
        justify-content: center;
    }
    /* Die Zeilen des Waldes sind Links in einer Tabelle – ohne diese */
    .lib__link { display: inline-block; padding: .35rem 0; }
    .impressum__contact a,
    .legal__text a { display: inline-block; padding: .3rem 0; }
    .lib__file::file-selector-button { min-height: 2.75rem; }
    /* DAS LANGE DRÜCKEN */
    .sigil,
    .nb-ei,
    .nb-ei * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* 3 · DER SCHWEBEZUSTAND, DEN ES AUF DEM TELEFON NICHT GIBT */
@media (hover: none) {
    .btn:hover {
        border-color: var(--ink);
        background: transparent;
        color: var(--ink);
    }
    .btn:hover::before { opacity: 0; transform: translate(-6px, -50%); background: var(--blood); }
    .btn:hover::after  { transform: scaleX(0); }
    .thumb:hover { color: #6f6a68; background: none; }
    .thumb.is-mine:hover { color: var(--blood); }
    /* Was gedrückt wird, antwortet trotzdem – nur eben beim Drücken und */
    .btn:active { border-color: var(--blood); background: var(--blood); color: #fff; }
}

/* 4 · DIE SCHRIFT, DIE OHNE ZOOM LESBAR SEIN MUSS */
@media (max-width: 600px) {
    /* Der Hinweistext unter den Bezahl-Knöpfen: 13 px kursiv auf Weiss */
    .notice        { font-size: .92rem; line-height: 1.85; }
    .impressum__text { font-size: 1rem; line-height: 2; }
    .preorder__hint,
    .modal__sub    { font-size: .92rem; }
    /* Der Wald. Diese vier standen zwischen 10 und 13 px. */
    .lib__meta     { font-size: .86rem; }
    .lib__date     { font-size: .78rem; }
    .lib__hint     { font-size: .88rem; line-height: 1.7; }
    .lib__rules    { font-size: .86rem; line-height: 1.75; }
    .thumb         { font-size: .82rem; }
    .thumb__icon   { width: 21px; height: 21px; }
    /* Die Etiketten bleiben klein, bekommen aber Luft zwischen den */
    .preorder__label,
    .impressum__label { font-size: .72rem; }
}

/* 5 · DIE EINGABEFELDER: SECHZEHN BILDPUNKTE, AUSNAHMSLOS */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea,
.preorder__email,
.lib__input,
.lib__file { font-size: max(16px, 1rem); }

/* 6 · DAS FENSTER UND DIE TASTATUR */
@media (max-width: 600px) {
    .modal__card { max-height: 86vh; max-height: 82dvh; }
    /* Und die Tabelle des Waldes reicht ihre waagrechte Bewegung nicht */
    .lib__scroll { overscroll-behavior-x: contain; }
}

/* 7 · WER WENIGER DATEN WILL, WILL AUCH WENIGER RECHNUNG */
@media (prefers-reduced-data: reduce) {
    /* Seit v0.81 gibt es Tunnel und Geometrie nicht mehr; geblieben ist */
    .nb-rausch-farbe { display: none; }
}

/* v0.78 · DIE NOTBREMSE — WAS MAN STREICHEN KANN, UND IN WELCHER REIHENFOLGE */
/* .nb-schacht { display: none !important; }                    */

/* 2 · DIE FARBFLÄCHE */
/* .nb-rausch-farbe { display: none !important; }               */

/* 3 · DIE SAAT */
/* .nb-saat { display: none !important; }                       */

/* 5 · DIE WOLKE */
/* .nb-rausch-wolke { display: none !important; }               */

/* 6 · DAS FILMKORN */
/* body::after { display: none !important; }                    */

/* 7 · DIE ZAHL DER STÜCKE */

/* ═══════════════════════════════════════════════════════════════════════
   DIE PROPHEZEIUNG DER SIEBEN NARRENPROPHETEN · v1.31
   ═══════════════════════════════════════════════════════════════════════
   Sie steht unter dem Wald und über dem Datenschutz, auf schwarzem Grund.

   WARUM SIE ANDERS DUNKEL IST ALS DER WALD.
   Der Wald wird ANGEKÜNDIGT: ein Dreieck stürzt aus dem Weiss in die
   Nacht, ein zweites hebt wieder heraus. Man sieht ihn kommen.

   Die Prophezeiung wird nicht angekündigt. Sie beginnt mit einer harten
   Kante und hört mit einer harten Kante auf. Kein Übergang, keine Figur,
   kein Netz. Ein Mysterium, das sich vorstellen lässt, ist keines.

   Sie erbt die Farben des Waldes (--soil, --lit, --lit-txt, --ash), aber
   keines seiner Mittel: keine Grotesk, keine Dreiecke, keine Wurzeln.
   Nur Schrift auf Schwarz und sieben Linien. ES KOMMT KEINE NEUE FARBE
   HINZU.

   DIE SIEBEN LINIEN SIND DER GANZE ENTWURF. Jeder Eintrag hängt an einer
   waagrechten Haarlinie; sieben davon untereinander, und die siebte hat
   nichts unter sich. Das Auge zählt sie, ohne es zu merken – und stolpert
   über die letzte.
   ═══════════════════════════════════════════════════════════════════════ */

.prophezeiung {
    /* Dieselben Stimmen wie im Wald. Sie stehen hier noch einmal, weil
       dieser Abschnitt NICHT in .block--garden liegt und die Merkmale
       sonst nicht erbte. */
    --soil:     #0b0a09;
    --lit:      #a31313;
    --lit-txt:  #e2564e;
    --lit-thin: rgba(163, 19, 19, .34);
    --ash:      rgba(255, 255, 255, .78);
    --ash-dim:  rgba(255, 255, 255, .50);

    position: relative;
    background: var(--soil);
    color: var(--ash);
    /* DIE HARTE KANTE. Kein Dreieck, kein Verlauf – die Nacht beginnt
       mitten im Satz. Die Haarlinie aus Blut oben und unten ist das
       Einzige, was den Schnitt begleitet. */
    border-top: 1px solid var(--lit);
    border-bottom: 1px solid var(--lit);
    padding: clamp(4rem, 11vh, 8rem) 1.5rem clamp(4rem, 10vh, 7rem);
    margin: clamp(3rem, 8vh, 6rem) 0 0;
    overflow: hidden;
}

.proph__innen { max-width: 44rem; margin: 0 auto; }

/* ── DER KOPF ──────────────────────────────────────────────────────── */

.proph__kopf {
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .46em;
    text-indent: .46em;
    text-transform: uppercase;
    color: var(--lit-txt);
    margin: 0 0 1.1rem;
}
.proph__titel {
    text-align: center;
    font-size: clamp(1.5rem, 5.2vw, 2.3rem);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: .02em;
    color: #fff;
    margin: 0;
}
.proph__titel-en {
    text-align: center;
    font-size: clamp(.82rem, 2.4vw, .95rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--ash-dim);
    margin: .8rem 0 0;
}

/* Der Spruch. Er trägt den Witz und steht darum allein, mit Luft nach
   beiden Seiten – zentriert wie die Zeilen im Werk, die es genauso
   halten. */
.proph__spruch {
    text-align: center;
    margin: clamp(2.6rem, 7vh, 4.2rem) auto clamp(2.2rem, 6vh, 3.4rem);
    max-width: 30rem;
}
.proph__spruch p { font-size: 1.06rem; line-height: 2.05; margin: 0; }
.proph__spruch .en {
    font-size: .88rem;
    font-style: italic;
    color: var(--ash-dim);
    margin-top: 1.1rem;
}

.proph__gabe {
    max-width: 34rem;
    margin: 0 auto clamp(2.8rem, 7vh, 4rem);
    text-align: left;
}
.proph__gabe p { font-size: .95rem; line-height: 2; margin: 0 0 .6rem; }
.proph__gabe .en { font-size: .86rem; font-style: italic; color: var(--ash-dim); }
.proph__gabe strong { color: var(--lit-txt); font-weight: 700; }

/* ── DIE SIEBEN ────────────────────────────────────────────────────── */

.proph__reihe { list-style: none; margin: 0; padding: 0; }

/* EINE SPALTE, KEIN RASTER. Die sechs von v1.30 standen in drei Spalten,
   und das war der Fehler: ein Raster ist ein Katalog, und ein Katalog ist
   kein Mysterium. Untereinander liest man sie wie Verse und kommt an der
   siebten nicht vorbei. */
.proph__eintrag {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding: clamp(1.6rem, 4vh, 2.4rem) 0 clamp(1.4rem, 3.4vh, 2rem) 3.6rem;
}
@media (max-width: 560px) { .proph__eintrag { padding-left: 2.7rem; } }

/* Die Ziffer steht LINKS AUSSERHALB des Textes, wie eine Verszahl. Sie
   ist das, was die sieben zu einer Zählung macht statt zu einer Liste. */
/* GRÖSSER ALS IM ERSTEN ENTWURF (v1.31). Dort waren sie .82rem und
   verschwanden neben dem Namen – man sah eine Liste, keine Zählung. Die
   Ziffer IST hier aber der Inhalt: an ihr merkt das Auge, dass sieben
   Zeilen kommen, und nur darum stolpert es über die letzte. */
.proph__ziffer {
    position: absolute;
    left: 0;
    top: calc(clamp(1.6rem, 4vh, 2.4rem) - .1em);
    width: 2.8rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--lit-txt);
    line-height: 1.5;
}
@media (max-width: 560px) { .proph__ziffer { font-size: 1rem; width: 2.2rem; } }

.proph__name { margin: 0 0 .7rem; font-weight: 400; }
.proph__name > span[lang="de"] {
    display: block;
    font-size: clamp(1.12rem, 3.6vw, 1.32rem);
    color: #fff;
    letter-spacing: .015em;
}
.proph__name-en {
    display: block;
    font-size: .8rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: .08em;
    color: var(--ash-dim);
    margin-top: .18rem;
}

.proph__satz { font-size: .98rem; line-height: 1.95; margin: 0 0 .5rem; }
.proph__satz--en { font-size: .85rem; font-style: italic; color: var(--ash-dim); }

/* Der Refrain. Er ist der Takt, an dem man das Werk wiedererkennt –
   darum in Blut und mit Luft davor, damit er als eigene Stimme steht
   und nicht als letzter Satz des Absatzes. */
.proph__refrain {
    margin: 1.1rem 0 0;
    font-size: .86rem;
    font-style: italic;
    letter-spacing: .06em;
    color: var(--lit-txt);
}

.proph__weg {
    margin: 1rem 0 0;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}
.proph__weg-sep { padding: 0 .5em; color: var(--lit-thin); }

/* DER HASSPROPHET bricht die Reihe: seine Linie ist rot. Ein Werk, das
   den Spott über sich selbst nicht aushält, hätte den Namen Narrenbibel
   nicht verdient. */
.proph__eintrag--hass { border-top-color: var(--lit); }

/* ── DER SIEBTE ────────────────────────────────────────────────────── */

/* DIE LEERE FLÄCHE IST DER INHALT. Er hat mehr Luft als die anderen,
   keinen Weg, keinen englischen Namen und keinen Namen überhaupt – nur
   einen Gedankenstrich und den Grund, warum dort nichts steht.
   Dieselbe Figur wie Phase III des Werkes: sieben leere Seiten. */
.proph__eintrag--sieben {
    border-top: 1px solid var(--lit);
    padding-top: clamp(2.6rem, 6vh, 3.6rem);
    padding-bottom: clamp(3.4rem, 9vh, 5.5rem);
}
/* Die Ziffer des siebten steht so gross wie sein Strich. */
.proph__eintrag--sieben .proph__ziffer { font-size: 1.3rem; color: var(--lit); }
/* DER GEDANKENSTRICH IST DER NAME. Er muss so gross stehen wie die
   Namen der anderen sechs, sonst liest man ihn als fehlend statt als
   gesetzt – und die leere Fläche wäre ein Versehen statt einer Aussage. */
.proph__name--leer > span[lang="de"] {
    color: var(--lit);
    font-size: clamp(2.2rem, 7vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
}
.proph__refrain--stark {
    font-style: normal;
    font-size: 1rem;
    letter-spacing: .14em;
    line-height: 2.1;
    margin-top: 1.6rem;
}

/* ── DER NACHSATZ ──────────────────────────────────────────────────── */

/* GENAUSO GROSS wie alles andere. Wer eine Einschränkung ins
   Kleingedruckte setzt, hat sie nicht gesagt, sondern versteckt. */
.proph__nach {
    max-width: 34rem;
    margin: clamp(3rem, 8vh, 4.5rem) auto 0;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
    text-align: left;
}
.proph__nach p { font-size: .9rem; line-height: 2; margin: 0 0 .6rem; }
.proph__nach .en { font-size: .84rem; font-style: italic; color: var(--ash-dim); }
.proph__nach strong { color: var(--lit-txt); font-weight: 700; }