/* ===================================================================
   DAS BUCH — RAHMEN, SEITE, TITELSEITE

   Zwei Seiten teilen sich dieses Aussehen: „Über Aerona Space" mit 77
   Seiten und „Über den Erfinder" mit 96. Beide sind ein Buch, das
   eingebettet als Titelseite liegt und sich per Klick im Vollbild
   öffnet.

   ## Der einzige Ort, an dem eine Seite umblättert

   Alles andere auf dieser Webseite steht still, bis man hinzeigt. Hier
   nicht: Wer weiterblättert, sieht die Seite kommen — von rechts
   herein, leicht gedreht, wie Papier. Das ist keine Ausnahme von
   „nichts drängt sich auf", sondern die Antwort auf eine Handlung. Man
   hat geblättert, also blättert es.

   Die halbe Sekunde dafür war die einzige Bewegung der ganzen Webseite
   mit einer eigenen Dauer. Sie holt sich jetzt `--bew-ruhig` wie alles
   andere (`js/bewegung.js`).

   ## Was einen Ring bekommt

   Das eingebettete Buch selbst — es ist der Knopf, der es öffnet.
   Sonst nichts; die Verweise im Fließtext bekommen den Strich aus
   Punkten (siehe `buch-teile.css`).
   =================================================================== */

:root[data-thema] .buch-wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 1.2rem;
}

:root[data-thema] .buch-reader {
    position: relative;

    border-radius: 10px 22px 22px 10px;
}

:root[data-thema] .buch {
    position: relative;
    min-height: 62vh;
    padding: clamp(1.8rem, 4.5vw, 3.6rem);
    perspective: 2200px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px 22px 22px 10px;
    background: var(--k-vertieft);
    overflow: hidden;
}

:root[data-thema] .buch::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-image: var(--k-verlauf);
    pointer-events: none;
    z-index: 2;
}

:root[data-thema] .buch-reader:not(.vollbild) .buch {
    cursor: pointer;
    transition: transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .buch-reader:not(.vollbild) .buch:hover {
    transform: translateY(-4px);
}

:root[data-thema] .buch-seite {
    display: none;
    color: var(--k-text-leise);
    font-size: 1.1rem;
    line-height: 1.9;
}

:root[data-thema] .buch-seite.aktiv {
    display: block;
}

@keyframes seiteVor {
    from {
        opacity: 0;
        transform: rotateY(9deg) translateX(34px);
        transform-origin: left center;
    }

    to {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

@keyframes seiteZurueck {
    from {
        opacity: 0;
        transform: rotateY(-9deg) translateX(-34px);
        transform-origin: right center;
    }

    to {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

:root[data-thema] .buch[data-richtung="vor"] .buch-seite.aktiv {
    animation: seiteVor var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .buch[data-richtung="zurueck"] .buch-seite.aktiv {
    animation: seiteZurueck var(--bew-ruhig) var(--bew-feder);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .buch[data-richtung] .buch-seite.aktiv {
        animation: none;
    }
}

:root[data-thema] .buch-seitenzahl {
    position: absolute;
    top: 1.1rem;
    right: 1.4rem;
    color: var(--k-text-still);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

:root[data-thema] .buch-seite p {
    max-width: 62ch;
    margin-bottom: 1.5rem;
}

:root[data-thema] .buch-seite strong {
    color: var(--k-text);
}

:root[data-thema] .buch-reader.vollbild .buch-seite {
    font-size: clamp(1.1rem, 1.35vw, 1.28rem);
    line-height: 2.05;
}

:root[data-thema] .buch-reader.vollbild .buch-seite p {
    max-width: 68ch;
    margin-bottom: 1.9rem;
}

:root[data-thema] .buch-reader.vollbild .buch-titel {
    margin-bottom: 2.2rem;
}

:root[data-thema] .buch-cover {
    padding: clamp(1rem, 4vw, 3rem) 0.5rem;
    text-align: center;
}

:root[data-thema] .buch-cover__marke {
    color: var(--k-text-still);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

:root[data-thema] .buch-cover__titel {
    margin: 1.2rem 0 1.4rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.4rem, 8vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    background-image: linear-gradient(var(--k-winkel),
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

:root[data-thema] .buch-cover__sub {
    max-width: 34ch;
    margin: 0 auto 2.2rem;
    color: var(--k-text-leise);
    font-size: 1.15rem;
    line-height: 1.7;
}

:root[data-thema] .buch-cover__autor {
    color: var(--k-text);
    font-weight: 600;
}

:root[data-thema] .buch-cover__hint {
    margin-top: 2.4rem;
    color: var(--k-text-still);
    font-size: 0.85rem;
}

:root[data-thema] .buch-oeffnen {
    position: absolute;
    left: 50%;
    bottom: 1.8rem;
    z-index: 5;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.8rem;
    border: none;
    border-radius: var(--k-rund-mittel);

    background: var(--k-verlauf-tief);
    color: var(--k-auf-akzent);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--bew-ruhig) var(--bew-feder),
        box-shadow var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .buch-oeffnen {
    box-shadow:
        var(--k-schatten-eng),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -12px 18px -12px rgba(0, 0, 0, 0.45);
}

:root[data-thema] .buch-oeffnen:hover,
:root[data-thema] .buch-oeffnen:focus-visible {
    transform: translateX(-50%) translateY(-3px);
    outline: none;
    box-shadow:
        0 10px 26px var(--k-schein-verlauf),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -12px 18px -12px rgba(0, 0, 0, 0.45);
}

:root[data-thema] .buch-oeffnen:active {
    transform: translateX(-50%) translateY(1px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -16px 22px -12px rgba(0, 0, 0, 0.5);
}

:root[data-thema] .buch-oeffnen > .knopf-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
    border-radius: inherit;
    z-index: 0;
}

:root[data-thema] .buch-oeffnen > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .buch-oeffnen > span,
:root[data-thema] .buch-oeffnen > i {
    position: relative;
    z-index: 1;
}

:root[data-thema] .buch-oeffnen > i.zeichen--zerfaellt::before {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .buch-oeffnen:active {
        transform: translateX(-50%);
    }
}

:root[data-thema] .buch-reader.vollbild .buch-oeffnen {
    display: none;
}

:root[data-thema] .buch-reader .fenster__ring,
:root[data-thema] .buch .buch-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .buch .buch-pixel {
    left: 0;
    top: 0;
}

@media (max-width: 640px) {
    :root[data-thema] .buch {
        border-radius: 8px 14px 14px 8px;
    }

    :root[data-thema] .buch-seite {
        font-size: 1.02rem;
    }
}