/* ==========================================================================
   Bibliotheks-Ansicht – alle Bücher der Webseite:
   geschichten.html, downloads.html, kuriositaeten.html,
   annalen.html, verzweigungen.html
   Szene: Bib.png als Hintergrund, davor "schwebend" der Buchständer
   (buchstand.png), dessen Breite exakt 1/4 der Bib-Breite beträgt.
   Der Buchständer liegt mittig im Viewport; die Texte erscheinen wie
   von Geisterhand geschrieben (Tinten-Effekt).
   Linke Buchseite = Text; rechte Buchseite = Bild ODER Text – beide
   getrennt pflegbar über das Array buchSeiten im jeweiligen HTML.
   Die Lese-Logik steckt als identisches Inline-Script in jeder
   Buch-Datei (Änderungen dort bitte überall nachziehen).
   ========================================================================== */

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

:root {
    /* Viewport-Höhe: svh berücksichtigt mobile Adressleisten */
    --voll-h: 100vh;

    /* Der Buchständer (1535:1024) füllt den Viewport fast aus */
    --stand-w: min(96vw, calc(var(--voll-h) * 1.43));
    --stand-h: calc(var(--stand-w) * 0.6671);       /* 1024 / 1535 */

    /* Die Bibliothek ist 4x so breit wie der Buchständer (Format 1:4) */
    --szene-w: calc(var(--stand-w) * 4);
    --szene-h: calc(var(--szene-w) * 0.5628);       /* 941 / 1672 */

    /* Ankerpunkt in Bib.png: Mitte unterhalb des runden Fensters
       (Fenster-Mitte x = 53,65 %, Unterkante y = 52 %) */
    --anker-x: 0.5365;
    --anker-y: 0.675;
}

@supports (height: 100svh) {
    :root {
        --voll-h: 100svh;
    }
}

html {
    height: 100%;
}

body.bib-body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background-color: #0a0e14;
    font-family: 'EB Garamond', Garamond, Georgia, serif;
}

/* Nur für Screenreader sichtbar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Die Szene (Bibliothek + Buchständer) ---------- */

/* Der Buchständer liegt mittig im Viewport. clamp() verhindert auf sehr
   schmalen Bildschirmen eine dunkle Lücke unterhalb der Bibliothek. */
.szene {
    position: fixed;
    width: var(--szene-w);
    height: var(--szene-h);
    left: calc(50vw - var(--szene-w) * var(--anker-x));
    top: clamp(calc(var(--voll-h) - var(--szene-h)),
               calc(var(--voll-h) / 2 - var(--szene-h) * var(--anker-y)),
               0px);
}

/* Mit JavaScript startet die Szene unsichtbar und wird nach dem Laden
   der Bilder sanft eingeblendet; ohne JavaScript ist sie sofort da. */
.js .szene {
    opacity: 0;
}

.js .szene.bereit {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.bib-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Der schwebende Buchständer ---------- */

.buchstand {
    position: absolute;
    left: calc(var(--szene-w) * var(--anker-x) - var(--stand-w) / 2);
    top: calc(var(--szene-h) * var(--anker-y) - var(--stand-h) / 2);
    width: var(--stand-w);
    height: var(--stand-h);
}

/* Weicher Schattenwurf verstärkt den Schwebe-Eindruck */
.stand-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 calc(var(--stand-w) * 0.02)
                          calc(var(--stand-w) * 0.035)
                          rgba(0, 0, 0, 0.55));
}

/* ---------- Die beiden Buchseiten ---------- */

/* Gemeinsame Grundwerte: alle Maße hängen an --stand-w, dadurch bleibt
   das Schriftbild bei jeder Fenstergröße identisch. */
.buchseite {
    position: absolute;
    top: 14.6%;
    height: 48%;
    overflow: hidden;
    font-size: calc(var(--stand-w) * 0.0155);
    line-height: 1.45;
    color: #2b1c10;
}

/* Linke Seite: der Text (mit kleinem Rand zur Blattkante) */
.seite-links {
    left: 24%;
    width: 22.2%;
    text-align: justify;
    hyphens: auto;
}

/* Rechte Seite: Text-Fortsetzung ODER – mit Klasse .bild-seite
   (setzt bibliothek.js automatisch) – ein mittig platziertes Bild */
.seite-rechts {
    left: 54.1%;
    width: 24.1%;
    text-align: justify;
    hyphens: auto;
}

.seite-rechts.bild-seite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    hyphens: none;
}

.buchseite h2 {
    font-family: 'Pieces of Eight', 'EB Garamond', serif;
    font-weight: normal;
    font-size: 1.65em;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 0.6em;
}

.buchseite p {
    margin: 0 0 0.7em;
}

/* Mittiger Text (z. B. Titelseiten): <p class="zentriert"> */
.buchseite .zentriert {
    text-align: center;
}

/* Listen im Buch (z. B. Downloads, Verzweigungen) – statt
   Aufzählungspunkten zeigt eine Zeigehand auf jeden Eintrag,
   umbrechende Zeilen rücken hinter die Hand ein */
.buchseite ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.7em;
}

.buchseite li {
    margin: 0 0 0.5em;
    text-align: left;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.buchseite li::before {
    content: '\261E\00A0';   /* ☞ + geschütztes Leerzeichen */
}

/* Links auf den Buchseiten – dunkle Tinte mit Unterstrich */
.buchseite a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.buchseite a:hover,
.buchseite a:focus-visible {
    color: #6b3410;
}

/* Große Initiale am Geschichtenanfang – wie in alten Folianten */
.buchseite h2 + p:not(.zentriert)::first-letter {
    font-family: 'Pieces of Eight', 'EB Garamond', serif;
    font-size: 2em;
    line-height: 0.85;
    float: left;
    padding-right: 0.08em;
}

/* Das Bild wirkt wie ins Buch gedruckt: multiply lässt helle Flächen
   mit dem Pergament verschmelzen, die leichte Sepia-Tönung passt es
   an die alten Seiten an. */
.seiten-bild {
    display: block;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: sepia(0.2);
}

/* Bildunterschrift unter dem Bild (darf ein Link sein) */
.bild-text {
    flex: none;
    font-style: italic;
    font-size: 0.85em;
    margin: 0.6em 0 0;
}

.noscript-hinweis {
    text-align: center;
    font-style: italic;
}

/* ---------- Tinten-Effekt (wie die Karte des Rumtreibers) ----------
   Texte und Bild erscheinen nacheinander aus dem Nichts: erst
   verschwommen und blass, dann ziehen sich die Schriftzüge scharf.
   Die Verzögerung pro Element setzt das Script (transition-delay).    */

.js .buchseite > * {
    opacity: 0;
    filter: blur(0.35em);
}

/* Das Bild behält dabei seine Sepia-Tönung */
.js .buchseite > .seiten-bild {
    filter: sepia(0.2) blur(0.35em);
}

.buchseite > .tinte-da {
    opacity: 1;
    filter: blur(0);
    transition: opacity 1.9s ease-out, filter 1.9s ease-out;
}

.buchseite > .seiten-bild.tinte-da {
    filter: sepia(0.2) blur(0);
}

.buchseite > .tinte-weg {
    opacity: 0;
    filter: blur(0.3em);
    transition: opacity 0.75s ease-in, filter 0.75s ease-in;
}

.buchseite > .seiten-bild.tinte-weg {
    filter: sepia(0.2) blur(0.3em);
}

/* ---------- Blätter-Pfeile auf der Ablagekante ---------- */

.blaetter-pfeil {
    position: absolute;
    top: 70%;
    width: 5.5%;                    /* Pfeil-Bilder sind quadratisch (190x190) */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

.blaetter-pfeil[hidden] {
    display: none;
}

.blaetter-pfeil.links  { left: 13%; }
.blaetter-pfeil.rechts { right: 13%; }

.blaetter-pfeil img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.55;
    transition: opacity 0.3s, transform 0.3s;
}

.blaetter-pfeil:hover img,
.blaetter-pfeil:focus-visible img {
    opacity: 1;
    transform: scale(1.08);
}

.blaetter-pfeil:focus-visible {
    outline: 2px solid #e0c097;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- "Zurück zum Schreibtisch" auf der Querstrebe ----------
   Die Querstrebe verläuft unterhalb der Buchablage (ca. 79-87 % der
   Ständerhöhe). Der Schriftzug ist dort permanent sichtbar.           */

.querstrebe-link {
    position: absolute;
    left: 50%;
    top: 83%;
    transform: translate(-50%, -50%);
    font-family: 'EB Garamond', Garamond, Georgia, serif;
    font-weight: bold;
    font-size: calc(var(--stand-w) * 0.021);
    color: #e9d6a5;
    text-decoration: none;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    z-index: 6;
    transition: transform 0.2s, color 0.2s;
}

.querstrebe-link:hover,
.querstrebe-link:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
    color: #fff3d0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85),
                 0 0 12px rgba(255, 240, 200, 0.45);
}

.querstrebe-link:focus-visible {
    outline: 2px solid #e0c097;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ---------- Nutzer mit reduzierter Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
    .szene,
    .buchseite > .tinte-da,
    .buchseite > .tinte-weg,
    .blaetter-pfeil img,
    .querstrebe-link {
        transition: none !important;
    }
}