/* index.css – Gestaltung nur fuer index.html (vorher <style> in der Seite;
   als eigene Datei kann der Browser sie zwischenspeichern). */

/* ═══════════════════════════════════════════════════════
   index.html — Band 01, Kamerafahrt-Ausgabe
   Der Scroll ist die Kamera. Kapitel rasten ein (sticky),
   waehrend im Inneren die Einstellung faehrt. Die
   Hintergrundebene laeuft durch und schneidet nie.
   Alle Farben kommen aus common.css — hier wird kein
   einziges neues Farbtoken erfunden (applyTheme schreibt
   inline auf <html> und schlaegt sonst jedes Stylesheet).
   ═══════════════════════════════════════════════════════ */

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

:root {
    --hdr: 62px;          /* Hoehe des Seitenkopfs aus common.css */
    --gut: clamp(16px, 4vw, 40px);
    --g: 0;               /* globaler Scrollfortschritt 0..1, von JS */
}

html { scroll-behavior: smooth; }

/* clip statt hidden: clip erzeugt KEINEN Scroll-Container und
   laesst damit position:sticky der Kapitel intakt. */
body { overflow-x: clip; }

/* ══ Durchlaufende Hintergrundebene = die Kamera ═══════ */
.camera-plane {
    position: fixed;
    inset: -10vh -10vw;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Ben-Day-Raster, driftet und atmet ueber die ganze Seite */
.plane-dots {
    position: absolute;
    inset: -20%;
    background-image: radial-gradient(var(--ink) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.055;
    transform: translate3d(0, calc(var(--g) * -14vh), 0) scale(calc(1 + var(--g) * 0.35));
    will-change: transform;
}

/* Horizontlinie: wandert langsam durchs Bild, gibt der Fahrt Boden */
.plane-horizon {
    position: absolute;
    left: 0; right: 0;
    top: calc(86vh - var(--g) * 62vh);
    height: 2px;
    background: var(--ink);
    opacity: 0.10;
}
.plane-horizon::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 7px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 34px);
    opacity: 0.5;
}

.kanji-watermark {
    position: fixed;
    top: 12vh;
    left: 50%;
    font-family: var(--font-display) !important;
    font-size: clamp(16rem, 40vw, 44rem);
    font-weight: 800;
    color: var(--ink);
    opacity: 0.035;
    line-height: 0.82;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, calc(var(--g) * 26vh)) rotate(calc(-3deg + var(--g) * 7deg));
    will-change: transform;
}

#seasonal-canvas  { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; opacity: .5; }
#speedline-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; opacity: 0; transition: opacity .09s steps(2); }
#speedline-canvas.active { opacity: .8; }
#sparkle-canvas   { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* ══ Fortschrittskante unter dem Kopf ═════════════════ */
.scroll-progress {
    position: fixed;
    top: var(--hdr);
    left: 0; right: 0;
    height: 3px;
    z-index: 499;
    background: var(--paper-lo);
    pointer-events: none;
}
.scroll-progress i {
    display: block;
    height: 100%;
    width: calc(var(--g) * 100%);
    background: var(--spot);
}

/* ══ Kapitelschiene ═══════════════════════════════════ */
.chapter-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 480;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 9px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--rule);
    box-shadow: var(--drop) var(--drop) 0 var(--rule);
}
.rail-dot {
    position: relative;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--font-display) !important;
    font-size: .82rem;
    color: var(--ink-3);
    border: 1px solid var(--ink-line);
    text-decoration: none;
}
@media (hover: hover) { .rail-dot:hover { border-color: var(--ink); color: var(--ink); } }
.rail-dot.on {
    background: var(--spot);
    border-color: var(--spot);
    color: var(--on-accent);
}
.rail-label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: var(--paper-hi);
    font-family: var(--font-plate) !important;
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 9px;
    opacity: 0;
    pointer-events: none;
}
@media (hover: hover) { .rail-dot:hover .rail-label { opacity: 1; } }
@media (max-width: 1080px) { .chapter-rail { display: none; } }

/* ══ Kapitel-Geruest ══════════════════════════════════ */
.volume { position: relative; z-index: 2; }

.chapter { position: relative; }

/* Eingerastetes Kapitel: die Huelle gibt die Scrollstrecke,
   die Buehne bleibt einen Bildschirm lang stehen. */
.chapter.pinned { height: var(--dist, 260vh); }
.chapter.pinned > .stage {
    position: sticky;
    top: 0;
    height: 100svh;
    height: 100dvh;
    overflow: clip;
}

/* Der Seitenkopf steht im Fluss (sticky), also begaenne die erste
   Buehne 62px unter der Fensterkante — beim Landen waere ihr Fuss
   abgeschnitten. Nur das erste Kapitel zieht sich darunter; sein
   Inhalt haelt ueber die Szenen-Einrueckung Abstand zum Kopf. */
#section-hero { margin-top: calc(-1 * var(--hdr)); }

/* Frei scrollendes Kapitel: normaler Fluss, volle Liste */
/* Weiterschauen: waagrechte Reihe, auf dem Handy wischbar */
.continue-chapter { padding-top: 56px; padding-bottom: 60px; }
.continue-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.cont-card { display: flex; gap: 12px; background: var(--paper-hi); border: var(--rule-w) solid var(--rule); box-shadow: 4px 4px 0 var(--rule); padding: 10px; scroll-snap-align: start; }
.cont-cover img { width: 74px; height: 104px; object-fit: cover; display: block; border: 1px solid var(--ink-line); }
.cont-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cont-title { font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cont-ep { font-size: .78rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }
.cont-air { color: var(--spot-deep); font-weight: 700; }
.cont-air:empty { display: none; }
.cont-bar { height: 6px; background: var(--paper-lo); border: 1px solid var(--ink-line); }
.cont-bar i { display: block; height: 100%; background: var(--spot); }
.cont-plus { margin-top: auto; align-self: flex-start; font-size: .76rem !important; padding: 6px 10px !important; }
.chapter.free {
    padding: 84px var(--gut) 92px;
    max-width: 1240px;
    margin: 0 auto;
    border-top: var(--rule-w) solid var(--ink-line);
}

/* Szene: eine Einstellung innerhalb einer Buehne.
   Mehrere Szenen pro Kapitel = die Kamera schwenkt weiter. */
.scene {
    position: absolute;
    inset: calc(var(--hdr) + 20px) var(--gut) 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: scale(1.045) translateY(2.4vh);
    transition: opacity .42s ease, transform .58s cubic-bezier(.2,.8,.3,1);
    pointer-events: none;
}
/* --fit ist das Sicherheitsnetz: passt eine Einstellung bei kurzem
   Fenster nicht in die Buehne, verkleinert JS sie, statt oben und
   unten etwas abzuschneiden. Im Normalfall steht --fit auf 1. */
.scene-inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    transform: scale(var(--fit, 1));
    transform-origin: center center;
}
.scene.on { opacity: 1; transform: none; pointer-events: auto; }
.scene.past { transform: scale(.955) translateY(-3vh); }

/* Szenenzaehler: sagt, dass in diesem Kapitel noch etwas kommt */
/* Im Fluss, nicht darueber: absolut positioniert lag der Zaehler
   unter der letzten Karte und war zur Haelfte verdeckt. */
.scene-meter {
    display: flex;
    align-self: flex-start;
    align-items: center;
    margin-top: 14px;
    gap: 7px;
    font-family: var(--font-plate) !important;
    font-size: .55rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
    z-index: 5;
}
.scene-meter b { width: 16px; height: 3px; background: var(--ink-line); display: block; }
.scene-meter b.on { background: var(--spot); }

/* ══ Kapitelplakette ══════════════════════════════════ */
.manga-chapter-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    background: var(--ink);
    color: var(--paper-hi);
    font-family: var(--font-plate) !important;
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 7px 15px;
    margin-bottom: 18px;
    flex: none;
}
.manga-chapter-badge i { font-size: .76rem; }
.manga-chapter-badge .ch-num { color: var(--spot); }

.section-header { max-width: 68ch; margin-bottom: 24px; }
/* In der Buehne zaehlt jeder Pixel Hoehe — dort knapper setzen. */
.scene .section-header { margin-bottom: 16px; }
.scene .section-header p { font-size: .88rem; }
.section-header h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.65rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 9px;
}
.section-header h2 .jp {
    display: block;
    font-size: .78rem;
    letter-spacing: .34em;
    color: var(--spot) !important;
    margin-bottom: 6px;
    font-weight: 400;
}
.section-header p {
    color: var(--ink-2);
    font-size: .93rem;
    line-height: 1.68;
    max-width: 62ch;
}

/* ══ KAPITEL 00 — PROLOG ══════════════════════════════ */
.cover {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 24px;
    align-items: stretch;
    min-height: 58vh;
}
.cover-main {
    position: relative;
    align-self: center;
    transform: translate3d(0, calc(var(--p) * -8vh), 0) scale(calc(1 - var(--p) * .07));
    transform-origin: left center;
}

/* flex statt inline-flex: als Inline-Box saesse der ebenfalls
   inline-block gesetzte Titel daneben statt darunter. */
.cover-kicker {
    display: flex;
    width: fit-content;
    align-items: center;
    font-family: var(--font-plate) !important;
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.cover-kicker::before {
    content: "";
    width: 34px; height: 2px;
    background: var(--spot);
    margin-right: 11px;
}

.hero-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2.6rem, 7.4vw, 5.6rem);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -.035em;
    color: var(--ink);
    position: relative;
    display: inline-block;
}
.hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .1em;
    width: calc(var(--p) * 100%);
    max-width: 100%;
    height: .1em;
    background: var(--spot);
    opacity: .32;
}
.hero-sub-jp {
    font-family: var(--font-display) !important;
    font-size: .8rem;
    letter-spacing: .5em;
    color: var(--ink-3);
    margin: 8px 0 14px;
}
.hero-subtitle {
    color: var(--ink-2);
    font-size: clamp(.9rem, 1.5vw, 1.02rem);
    line-height: 1.68;
    max-width: 54ch;
    margin-bottom: 20px;
    opacity: calc(1 - clamp(0, calc((var(--p) - .30) / .22), 1));
}

.cover-spine {
    border-left: var(--rule-w) solid var(--ink);
    align-self: center;
    min-height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
.cover-spine .vert {
    writing-mode: vertical-rl;
    font-family: var(--font-display) !important;
    font-size: .7rem;
    letter-spacing: .34em;
    color: var(--ink-3);
}
.cover-spine .vol-mark {
    font-family: var(--font-plate) !important;
    font-size: .56rem;
    letter-spacing: .18em;
    color: var(--paper-hi);
    background: var(--spot);
    padding: 5px 8px;
    writing-mode: vertical-rl;
}
@media (max-width: 900px) { .cover { grid-template-columns: 1fr; } .cover-spine { display: none; } }

/* Suche */
.search-section { position: relative; max-width: 540px; margin-bottom: 16px; }
.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    padding: 11px 15px;
}
.search-input-wrapper i { color: var(--ink-3); font-size: .9rem; }
.search-input-wrapper input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-body);
    font-size: .94rem;
    color: var(--ink);
}
.search-input-wrapper input::placeholder { color: var(--ink-3); }
.search-input-wrapper:focus-within { box-shadow: 4px 4px 0 var(--spot); border-color: var(--spot); }

.search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    z-index: 60;
    max-height: 300px;
    overflow-y: auto;
}
.search-suggestions.open { display: block; }
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-line);
}
.suggestion-item:last-child { border-bottom: none; }
@media (hover: hover) { .suggestion-item:hover { background: var(--spot-wash); } }
.suggestion-item img { width: 34px; height: 46px; object-fit: cover; border: 1px solid var(--ink); }
.suggestion-title { font-weight: 700; color: var(--ink); font-size: .88rem; line-height: 1.3; }
.suggestion-meta { font-size: .74rem; color: var(--ink-3); }

.hero-cta-group { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.btn-glow-primary, .btn-glass-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-plate) !important;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 11px 19px;
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    text-decoration: none;
}
.btn-glow-primary { background: var(--spot); color: #FBF9F4; }
.btn-glass-secondary { background: var(--paper-hi); color: var(--ink); }
@media (hover: hover) { .btn-glow-primary:hover, .btn-glass-secondary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } }

/* Wuerfel: das erste "zu tun" auf der Seite */
.dice-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-plate) !important;
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 10px 16px;
    background: var(--paper-hi);
    border: var(--rule-w) dashed var(--ink);
    color: var(--ink);
    cursor: pointer;
}
@media (hover: hover) { .dice-btn:hover { border-style: solid; background: var(--spot-wash); } }
.dice-result {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 9px 12px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--spot);
    max-width: 460px;
    text-decoration: none;
}
.dice-result.on { display: flex; }
.dice-result img { width: 42px; height: 60px; object-fit: cover; border: 1px solid var(--ink); flex: none; }
.dice-result h4 { font-family: var(--font-display) !important; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.dice-result p { font-size: .72rem; color: var(--ink-3); }
.dice-result .again { margin-left: auto; font-family: var(--font-plate) !important; font-size: .56rem; letter-spacing: .14em; color: var(--spot); text-transform: uppercase; }

.cover-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--rule-w) solid var(--ink);
    border-bottom: 1px solid var(--ink-line);
    max-width: 600px;
}
.fig { padding: 11px 12px; border-right: 1px solid var(--ink-line); }
.fig:last-child { border-right: none; }
.fig-num {
    display: block;
    font-family: var(--font-plate) !important;
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
    line-height: 1;
    color: var(--ink);
}
.fig:first-child .fig-num { color: var(--spot); }
.fig-lbl {
    font-family: var(--font-plate) !important;
    font-size: .54rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
@media (max-width: 620px) {
    .cover-figures { grid-template-columns: repeat(2, 1fr); }
    .fig:nth-child(2) { border-right: none; }
    .fig:nth-child(3), .fig:nth-child(4) { border-top: 1px solid var(--ink-line); }
}

/* Der Coverflug: echte Baende steigen zum Kapitelende auf */
.cover-flight {
    position: absolute;
    left: 0; right: 0;
    bottom: -3vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    --pf: clamp(0, calc((var(--p) - .42) / .58), 1);
    transform: translate3d(0, calc((1 - var(--pf)) * 52vh), 0);
    opacity: var(--pf);
}
.flight-cover {
    width: clamp(54px, 6.6vw, 88px);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: var(--rule-w) solid var(--ink);
    background: var(--paper-lo);
    box-shadow: 4px 4px 0 var(--ink);
    transform:
        rotate(calc((var(--i) - 3.5) * 2.4deg))
        translateY(calc((1 - var(--pf)) * (var(--i) + 1) * 2.2vh));
}
@media (max-width: 900px) { .flight-cover:nth-child(n+6) { display: none; } }
@media (max-width: 560px) { .flight-cover:nth-child(n+4) { display: none; } }

.scroll-indicator {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-family: var(--font-plate) !important;
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: none;
    border: none;
    cursor: pointer;
    opacity: calc(1 - clamp(0, calc(var(--p) / .2), 1));
}
@media (hover: hover) { .scroll-indicator:hover { color: var(--spot-deep); } }
.scroll-indicator i { animation: nudge 1.9s steps(3) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ══ KAPITEL 01 — WELTEN ══════════════════════════════ */
.worlds-container {
    display: grid;
    grid-template-columns: 1.22fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.world-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 20px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    text-decoration: none;
    min-height: clamp(148px, 23vh, 250px);
    transform: translate3d(calc((1 - var(--pw, 1)) * var(--dir, -1) * 48vw), 0, 0);
    opacity: var(--pw, 1);
}
.world-panel:nth-child(1) { --pw: clamp(0, calc(var(--p) / .28), 1); --dir: -1; }
.world-panel:nth-child(2) { --pw: clamp(0, calc((var(--p) - .11) / .28), 1); --dir: 1; }
.world-panel:nth-child(3) { --pw: clamp(0, calc((var(--p) - .22) / .28), 1); --dir: -1; }
@media (hover: hover) { .world-panel:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--spot); } }
.world-index {
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--font-plate) !important;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ink);
    opacity: .09;
}
.world-icon { font-size: 1.4rem; color: var(--ink); margin-bottom: 12px; }
.world-title {
    font-family: var(--font-display) !important;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 7px;
    letter-spacing: -.015em;
}
.world-panel:nth-child(1) .world-title { font-size: 1.8rem; }
.world-desc { color: var(--ink-2); font-size: .88rem; line-height: 1.6; }
.world-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-plate) !important;
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--spot);
    border-top: 1px solid var(--ink-line);
    padding-top: 11px;
}
@media (hover: hover) { .world-panel:hover .world-go i { transform: translateX(4px); } }
.world-go i { transition: transform .12s steps(2); }

/* Nebenwege: die uebrigen Sammlungsseiten, damit nichts versteckt bleibt */
.side-roads {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
    --pq: clamp(0, calc((var(--p) - .5) / .34), 1);
    transform: translate3d(0, calc((1 - var(--pq)) * 14vh), 0);
    opacity: var(--pq);
}
.side-road {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 12px;
    background: var(--paper);
    border: var(--rule-w) solid var(--ink-line);
    text-decoration: none;
}
@media (hover: hover) { .side-road:hover { border-color: var(--ink); background: var(--spot-wash); } }
.side-road i { font-size: .95rem; color: var(--spot); }
.side-road span {
    font-family: var(--font-plate) !important;
    font-size: .58rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink);
}
.side-road b { font-family: var(--font-plate) !important; font-size: 1.05rem; color: var(--ink-2); line-height: 1; }
@media (max-width: 1000px) {
    .worlds-container { grid-template-columns: 1fr; }
    .side-roads { grid-template-columns: repeat(3, 1fr); }
}

/* ══ KAPITEL 02 — DAS REGAL ═══════════════════════════ */
.shelf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.shelf-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.shelf-chip {
    font-family: var(--font-plate) !important;
    font-size: .58rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 7px 13px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    color: var(--ink);
    cursor: pointer;
}
.shelf-chip.on { background: var(--ink); color: var(--paper-hi); }
.shelf-chip.on[data-f="laufend"] { background: var(--spot); border-color: var(--spot); }

.shelf-counter {
    font-family: var(--font-plate) !important;
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.shelf-counter b { color: var(--spot); font-size: 1.05rem; }

/* Nur seitwaerts clippen: die Umschlagvorschau schwebt nach OBEN aus
   dem Regal heraus. clip erlaubt als einziger Wert die Kombination
   mit visible auf der anderen Achse (hidden wuerde zu auto kippen
   und einen Scrollcontainer erzeugen). */
.shelf-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
    border-top: 1px solid var(--ink-line);
    border-bottom: var(--rule-w) solid var(--ink);
    padding: 54px 0 0;
}
.shelf-track {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
    padding-left: 4px;
    will-change: transform;
}

.manga-book {
    position: relative;
    flex: none;
    width: 46px;
    height: 78%;
    background: var(--paper-lo);
    border: var(--rule-w) solid var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.manga-book.face { width: 104px; }
.manga-book:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }
.manga-pages-top {
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--paper-hi) 0 2px, var(--paper-deep) 2px 3px);
    border-bottom: 1px solid var(--ink-line);
    flex: none;
}
.manga-spine {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px;
    overflow: hidden;
}
.manga-publisher-tag {
    font-family: var(--font-plate) !important;
    font-size: .42rem;
    letter-spacing: .08em;
    color: var(--paper-hi);
    background: var(--spot);
    padding: 2px 3px;
    flex: none;
}
.manga-spine-title {
    writing-mode: vertical-rl;
    font-family: var(--font-display) !important;
    font-size: .62rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
}
.manga-spine-vol { font-family: var(--font-plate) !important; font-size: .55rem; color: var(--ink-3); flex: none; }

/* Gesichtsband: jedes siebte Buch steht mit dem Umschlag nach vorn */
.manga-book.face .manga-spine { display: none; }
.manga-face-cover { display: none; flex: 1; position: relative; overflow: hidden; }
.manga-book.face .manga-face-cover { display: block; }
.manga-face-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Vorschau schwebt UEBER dem Regal — kein Layoutsprung im Track */
.manga-cover-preview {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    padding: 8px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--spot);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

.manga-book:focus-visible .manga-cover-preview { opacity: 1; }
@media (hover: hover) { .manga-book:hover .manga-cover-preview { opacity: 1; } }
.manga-cover-preview img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 1px solid var(--ink); margin-bottom: 6px; }
.manga-cover-preview h5 {
    font-family: var(--font-display) !important;
    font-size: .68rem;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 3px;
}
.manga-cover-preview p { font-size: .55rem; color: var(--ink-3); margin-bottom: 5px; }
.manga-status-badge {
    display: inline-block;
    font-family: var(--font-plate) !important;
    font-size: .46rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 5px;
}
.manga-status-badge.laufend   { background: var(--spot); color: #FBF9F4; }
.manga-status-badge.fertig    { background: var(--ink); color: var(--paper-hi); }
.manga-status-badge.watchlist { background: var(--paper-lo); color: var(--ink); }

.shelf-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-plate) !important;
    font-size: .55rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ══ KAPITEL 03 — SENDEPLAN (frei) ════════════════════ */
.calendar-note {
    display: flex;
    gap: 11px;
    padding: 12px 15px;
    background: var(--paper-hi);
    border-left: 4px solid var(--ochre);
    border-top: 1px solid var(--ink-line);
    border-right: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 16px 0;
    max-width: 78ch;
}
.calendar-note i { color: var(--ochre); margin-top: 3px; }
.calendar-controls {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.calendar-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-plate) !important;
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-2);
}
#calendar-weeks-range { accent-color: var(--spot); width: 190px; }
#weeks-val {
    font-family: var(--font-plate) !important;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper-hi);
    padding: 5px 10px;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 980px) { .calendar-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .calendar-grid { grid-template-columns: 1fr; } }
.day-card {
    background: var(--paper-hi);
    border: 1px solid var(--ink-line);
    padding: 11px 11px 13px;
    min-height: 130px;
}
.day-card.today { background: var(--spot-wash) !important; border-color: var(--spot); }
.day-card h4 {
    font-family: var(--font-plate) !important;
    font-size: .56rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.day-card.today h4 { color: var(--spot-deep); border-bottom-color: var(--spot); }
.day-anime-list { display: flex; flex-direction: column; gap: 6px; }
.day-anime-pill.own { border-color: var(--spot) !important; font-weight: 800; }
.day-anime-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .7rem;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-line);
    padding-bottom: 5px;
    line-height: 1.35;
}
.day-anime-pill:last-child { border-bottom: none; }
@media (hover: hover) { .day-anime-pill:hover { color: var(--spot-deep); } }
.day-anime-pill img { width: 18px; height: 18px; object-fit: cover; border: 1px solid var(--ink); flex-shrink: 0; }
.day-empty { color: var(--ink-3); font-size: .68rem; font-style: italic; }

/* ══ KAPITEL 04 — ZAHLEN ══════════════════════════════ */
.story-stats-box {
    position: relative;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    padding: 26px 28px;
    margin-bottom: 18px;
}
.story-stats-title {
    font-family: var(--font-display) !important;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 11px;
}
.story-stats-text { color: var(--ink-2); font-size: 1rem; line-height: 1.8; max-width: 64ch; }
.highlight-counter {
    font-family: var(--font-plate) !important;
    font-size: 1.5rem;
    color: var(--spot);
    padding: 0 3px;
}
.stats-pills-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--rule-w) solid var(--ink);
    margin-top: 18px;
}
.stat-pill {
    padding: 12px 10px;
    border-right: 1px solid var(--ink-line);
    font-family: var(--font-plate) !important;
    font-size: .56rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.stat-pill:last-child { border-right: none; }
.stat-pill strong {
    display: block;
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1.1;
}
@media (max-width: 620px) { .stats-pills-row { grid-template-columns: repeat(2, 1fr); } }

/* Balken, die sich beim Scrollen zeichnen */
.bar-block { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 54px; gap: 12px; align-items: center; }
.bar-key {
    font-family: var(--font-plate) !important;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bar { height: 15px; background: var(--paper-lo); border: 1px solid var(--ink); overflow: hidden; }
.bar i {
    display: block;
    height: 100%;
    width: calc(var(--v, 0) * 1%);
    background: var(--ink);
    transform: scaleX(var(--pb, 1));
    transform-origin: left center;
}
.bar-row.accent .bar i { background: var(--spot); }
.bar-val { font-family: var(--font-plate) !important; font-size: .78rem; color: var(--ink); text-align: right; }

.split-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .split-two { grid-template-columns: 1fr; } }

.rank-list { display: flex; flex-direction: column; }
.rank-row {
    display: grid;
    grid-template-columns: 26px 34px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--ink-line);
    text-decoration: none;
}
@media (hover: hover) { .rank-row:hover { background: var(--spot-wash); } }
.rank-row .n { font-family: var(--font-plate) !important; font-size: 1rem; color: var(--spot); }
.rank-row img { width: 34px; height: 47px; object-fit: cover; border: 1px solid var(--ink); }
.rank-row .t { font-size: .85rem; color: var(--ink); line-height: 1.3; }
.rank-row .t small { display: block; font-size: .68rem; color: var(--ink-3); }
.rank-row .v { font-family: var(--font-plate) !important; font-size: .9rem; color: var(--ink); }

.diary-section {
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    padding: 22px 24px;
}
.diary-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-plate) !important;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: var(--rule-w) solid var(--ink);
    padding-bottom: 9px;
    margin-bottom: 14px;
}
.diary-title i { color: var(--spot); font-size: .92rem; }
.diary-text { color: var(--ink-2); font-size: .96rem; line-height: 1.8; max-width: 66ch; }

.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
@media (max-width: 820px) { .recent-grid { grid-template-columns: 1fr; } }
.recent-card {
    display: flex;
    gap: 11px;
    padding: 10px;
    background: var(--paper);
    border: var(--rule-w) solid var(--ink-line);
    text-decoration: none;
}
@media (hover: hover) { .recent-card:hover { box-shadow: var(--drop) var(--drop) 0 var(--cover-glow, var(--spot)) !important; border-color: var(--ink) !important; } }
.recent-card img { width: 52px; height: 74px; object-fit: cover; border: 1px solid var(--ink); flex-shrink: 0; }
.recent-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recent-flag {
    font-family: var(--font-plate) !important;
    font-size: .48rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--spot);
}
.recent-card h4 {
    font-family: var(--font-display) !important;
    font-size: .92rem;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.recent-card p { font-size: .7rem; color: var(--ink-3); }

/* ══ KAPITEL 05 — EXTRAS ══════════════════════════════ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 17px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    text-decoration: none;
    --pd: clamp(0, calc((var(--ps, 1) - var(--i, 0) * .06) / .5), 1);
    transform:
        translate3d(calc((1 - var(--pd)) * var(--ox, 0) * 1vw), calc((1 - var(--pd)) * var(--oy, 8) * 1vh), 0)
        rotate(calc((1 - var(--pd)) * var(--rot, 0) * 1deg))
        scale(calc(.9 + var(--pd) * .1));
    opacity: var(--pd);
}
@media (hover: hover) { .feature-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--spot); } }
.feature-card i.feat-icon { font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; }
.feature-card h3 {
    font-family: var(--font-display) !important;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 5px;
}
.feature-card p { color: var(--ink-2); font-size: .79rem; line-height: 1.5; }
.note-tag {
    position: absolute;
    top: 11px; right: 13px;
    font-family: var(--font-plate) !important;
    font-size: .5rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--spot);
}

/* Zweite Einstellung: die kompakten Werkzeuge */
.tool-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
.tool-tile {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 14px;
    background: var(--paper);
    border: var(--rule-w) solid var(--ink);
    text-decoration: none;
    --pd: clamp(0, calc((var(--ps, 1) - var(--i, 0) * .045) / .5), 1);
    transform:
        translate3d(0, calc((1 - var(--pd)) * 9vh), 0)
        rotate(calc((1 - var(--pd)) * var(--rot, 0) * 1deg));
    opacity: var(--pd);
}
@media (hover: hover) { .tool-tile:hover { background: var(--paper-hi); box-shadow: 4px 4px 0 var(--spot); } }
.tool-tile i { font-size: 1.1rem; color: var(--spot); }
.tool-tile strong {
    font-family: var(--font-display) !important;
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}
.tool-tile span { font-size: .74rem; color: var(--ink-3); line-height: 1.45; }

/* ══ KAPITEL 06 — LOGBUCH (frei) ══════════════════════ */
.achievements-section { margin-top: 22px; }
.sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 7px;
    margin-top: 14px;
}
.sitemap a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--ink-line);
    background: var(--paper);
    font-size: .8rem;
    color: var(--ink-2);
    text-decoration: none;
}
@media (hover: hover) { .sitemap a:hover { border-color: var(--ink); color: var(--ink); background: var(--spot-wash); } }
.sitemap a i { color: var(--spot); font-size: .8rem; width: 15px; }

#aw-footer { margin-top: 40px; }

/* ══ Randnotiz-Assistentin ════════════════════════════ */
.chibi-widget {
    position: fixed;
    left: 20px;
    top: 120px;
    z-index: 470;
    display: flex;
    align-items: center;
    gap: 11px;
}
.chibi-bubble {
    position: absolute;
    left: calc(100% + 11px);
    width: 208px;
    background: var(--paper-hi);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    padding: 10px 13px;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--ink-2);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.chibi-bubble.show { opacity: 1; transform: none; }
@media (hover: hover) { .chibi-widget:hover .chibi-bubble { opacity: 1; transform: none; } }
.chibi-bubble::after {
    content: "";
    position: absolute;
    left: -7px; top: 16px;
    width: 10px; height: 10px;
    background: var(--paper-hi);
    border-left: var(--rule-w) solid var(--ink);
    border-bottom: var(--rule-w) solid var(--ink);
    transform: rotate(45deg);
}
.chibi-miku-avatar {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    background: var(--spot);
    color: var(--on-accent);
    border: var(--rule-w) solid var(--ink);
    box-shadow: var(--drop) var(--drop) 0 var(--ink);
    cursor: pointer;
}
@media (hover: hover) { .chibi-miku-avatar:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } }
@media (max-width: 1080px) { .chibi-widget { display: none; } }

/* ══ Telefon: Kapitel loesen sich, Inhalt bleibt vollstaendig ══
   --p auf 1 zwingen heisst: alle Eintritts-Transforms stehen
   auf ihrer Ruhelage. Nichts bleibt unsichtbar liegen. */
@media (max-width: 860px) {
    .chapter.pinned:not(.keep-pin) { height: auto !important; --p: 1 !important; }
    .chapter.pinned:not(.keep-pin) > .stage {
        position: static;
        height: auto;
        overflow: visible;
        padding: 64px var(--gut) 56px;
    }
    .chapter.pinned:not(.keep-pin) .scene {
        position: static;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-bottom: 46px;
    }
    .chapter.pinned:not(.keep-pin) .scene:last-of-type { margin-bottom: 0; }
    .chapter.pinned:not(.keep-pin) .scene-inner { transform: none; }
    .chapter.pinned:not(.keep-pin) .scene-meter { display: none; }
    .chapter.pinned.keep-pin > .stage { padding-bottom: 18px; }
    .shelf-viewport { padding-top: 48px; }
    .manga-book { height: 62%; }
    .side-roads { grid-template-columns: repeat(2, 1fr); }
    .scroll-progress { display: none; }
}

/* ══ Bewegung reduziert: kein Pinning, keine Fahrt ════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .chapter.pinned { height: auto !important; --p: 1 !important; }
    #section-hero { --p: 0 !important; }
    .chapter.pinned > .stage {
        position: static;
        height: auto;
        overflow: visible;
        padding: 60px var(--gut) 52px;
    }
    .chapter.pinned .scene {
        position: static;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-bottom: 44px;
    }
    .chapter.pinned .scene-inner { transform: none; }
    .scene-meter, .scroll-progress { display: none; }
    .plane-dots, .kanji-watermark { transform: none; }
    .scroll-indicator i { animation: none; }
    /* Hier scrollt das Regal von Hand. auto auf einer Achse zwingt die
       andere ebenfalls auf auto — die aufklappende Vorschau erzeugte
       dann eine senkrechte Bildlaufleiste, also entfaellt sie. */
    .shelf-viewport { padding-top: 48px; overflow-x: auto; }
    .manga-cover-preview { display: none; }
}