@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #101713;
  --forest: #15231d;
  --forest-2: #23382b;
  --moss: #6f8a5c;
  --fern: #9eae77;
  --gold: #d4b638;
  --sun: #f1d768;
  --cream: #f4efdf;
  --mist: #dbe2d3;
  --muted: #aeb9a7;
  --line: rgba(244, 239, 223, .15);
  --shadow: 0 30px 90px rgba(0, 0, 0, .36);
  --shell: min(1180px, calc(100vw - 40px));
  --header-height: 84px;
  --serif: "Lora", Georgia, serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% calc(15% + var(--page-progress, 0) * 45%), rgba(212, 182, 56, .1), transparent 28rem),
    linear-gradient(180deg, #111a15 0%, #17251d 45%, #0b120f 100%);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
}
body.theme-band-2 {
  --forest: #211816;
  --forest-2: #3b2721;
  --moss: #8b654e;
  --fern: #c99a79;
  --gold: #ad4633;
  --sun: #ef8064;
  background:
    radial-gradient(circle at 18% calc(15% + var(--page-progress, 0) * 45%), rgba(173,70,51,.14), transparent 28rem),
    linear-gradient(180deg, #171311 0%, #251b17 45%, #0e0b0a 100%);
}
body.theme-band-3 {
  --forest: #152126;
  --forest-2: #26373d;
  --moss: #5f7f88;
  --fern: #9bbbc4;
  --gold: #6f9da9;
  --sun: #8dbac6;
  --ice: #8dbac6;
  --ice-hover: #b8dde6;
  --mist: #d8e3e5;
  --muted: #a9b8bb;
  --line: rgba(141,186,198,.2);
  background:
    radial-gradient(circle at 18% calc(15% + var(--page-progress, 0) * 45%), rgba(141,186,198,.16), transparent 28rem),
    linear-gradient(180deg, #11191c 0%, #1d2a2f 45%, #0a0f11 100%);
}
body.theme-band-4 {
  --forest: #0e0f10;
  --forest-2: #1d1f22;
  --moss: #55585d;
  --fern: #a2a5a9;
  --gold: #76797e;
  --sun: #b7b9bc;
  --mist: #dedede;
  --muted: #a9aaac;
  --line: rgba(183,185,188,.2);
  background:
    radial-gradient(circle at 18% calc(15% + var(--page-progress, 0) * 45%), rgba(95,97,100,.17), transparent 28rem),
    linear-gradient(180deg, #08090a 0%, #18191b 45%, #050506 100%);
}
body.theme-band-5 {
  --forest: #24131e;
  --forest-2: #3a2032;
  --moss: #834568;
  --fern: #d49ab9;
  --gold: #a94d80;
  --sun: #d96ba8;
  --mist: #eadde5;
  --muted: #c1aeb8;
  --line: rgba(217,107,168,.21);
  background:
    radial-gradient(circle at 18% calc(15% + var(--page-progress, 0) * 45%), rgba(116,56,97,.2), transparent 28rem),
    linear-gradient(180deg, #1a0d16 0%, #2c1725 45%, #0d070b 100%);
}
body.has-dialog { overflow: hidden; }
body.nav-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
svg { display: block; }
::selection { color: #101713; background: var(--sun); }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--sun);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 100;
  background: linear-gradient(90deg, var(--moss), var(--sun));
  transform: scaleX(0);
  transform-origin: left;
}
.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: clamp(5.5rem, 10vw, 9rem) 0; }
.section--tight { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section--line { border-top: 1px solid var(--line); }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(11, 18, 15, .82);
  backdrop-filter: blur(18px);
}
.site-header__inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand-cluster { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brand-cluster .publisher-brand { padding-right: 1rem; border-right: 1px solid var(--line); }
.publisher-brand { display: inline-flex; flex: 0 0 auto; align-items: center; text-decoration: none; }
.publisher-brand__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: opacity .2s ease, filter .2s ease;
}
.publisher-brand:hover .publisher-brand__logo,
.publisher-brand:focus-visible .publisher-brand__logo { filter: brightness(0) saturate(100%) invert(87%) sepia(57%) saturate(542%) hue-rotate(354deg) brightness(103%); opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; color: var(--cream); text-decoration: none; }
.brand__mark { flex: 0 0 auto; width: 2.25rem; color: var(--sun); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sun) 34%, transparent)); }
.brand__mark circle, .brand__mark ellipse { fill: none; stroke: currentColor; stroke-width: 1.6; }
.brand__text { min-width: 0; line-height: 1.05; }
.brand__text strong { display: block; overflow: hidden; font: 500 .92rem var(--serif); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.brand__text small { display: block; margin-top: .28rem; color: var(--muted); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
.brand:hover, .brand:focus-visible { color: var(--sun); }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 29px); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.main-nav > a, .volume-nav__toggle { position: relative; padding: 31px 0; color: rgba(244,239,223,.76); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.main-nav > a::after, .volume-nav__toggle::after { position: absolute; right: 0; bottom: 24px; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .22s ease; }
.main-nav > a:hover, .main-nav > a:focus-visible, .volume-nav__toggle:hover, .volume-nav__toggle:focus-visible { color: var(--sun); }
.main-nav > a:hover::after, .main-nav > a:focus-visible::after, .volume-nav__toggle:hover::after, .volume-nav__toggle:focus-visible::after, .volume-nav.is-open .volume-nav__toggle::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 100%; height: 1px; margin: 6px 0; background: currentColor; transition: transform .22s ease, opacity .22s ease; }

.volume-nav { position: relative; }
.volume-nav__toggle { display: flex; align-items: center; gap: .45rem; border: 0; background: transparent; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.volume-nav__chevron { width: 7px; height: 7px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg) translateY(-2px); }
.volume-nav__panel {
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  width: min(620px, calc(100vw - 32px));
  padding: 1.1rem;
  border: 1px solid rgba(212,182,56,.3);
  background: rgba(13, 24, 18, .98);
  box-shadow: var(--shadow);
}
.volume-nav__overview { display: flex; justify-content: space-between; padding: .7rem .8rem 1rem; color: var(--sun); text-decoration: none; }
.volume-nav__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
.volume-nav__item { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: .8rem; min-height: 60px; padding: .6rem; border: 1px solid var(--line); text-decoration: none; text-transform: none; letter-spacing: 0; }
.volume-nav__item img { width: 42px; height: 56px; object-fit: cover; }
.volume-nav__item b { display: grid; place-items: center; width: 42px; height: 56px; border: 1px solid var(--line); color: var(--fern); font: 400 1rem var(--serif); }
.volume-nav__item span { display: grid; }
.volume-nav__item small { color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.volume-nav__item strong { font: 600 .92rem var(--serif); }
.volume-nav__item.is-current, .volume-nav__item:hover { border-color: rgba(241,215,104,.55); background: rgba(241,215,104,.06); }
.volume-nav__item.is-reserved { opacity: .6; }

.hero { position: relative; min-height: min(900px, calc(100svh - var(--header-height))); overflow: hidden; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(8,15,11,.96) 0%, rgba(8,15,11,.75) 43%, rgba(8,15,11,.05) 78%),
    url("band-1/images/quotes/03-04-sie-genoss-es-als-spitzhuendin-durch-den-wald-zu-laufen.webp") center/cover;
  filter: saturate(.85);
  transform: scale(1.03) translate(calc(var(--pointer-x, 0) * -10px), calc(var(--pointer-y, 0) * -8px));
  transition: transform .25s ease-out;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; z-index: -1; background: linear-gradient(transparent, #111a15); }
.hero__ambient { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 73% 35%, rgba(241,215,104,.22), transparent 25%), linear-gradient(180deg, transparent 58%, rgba(20,38,27,.8)); }
.theme-band-2 .hero::before {
  background:
    linear-gradient(90deg, rgba(12,10,9,.97) 0%, rgba(23,16,14,.76) 43%, rgba(14,10,9,.08) 78%),
    url("band-2/images/quotes/04-04-das-schmuckstueck-das-heinrich-und-ich-gefunden-haben-sc.webp") center/cover;
}
.theme-band-2 .hero::after { background: linear-gradient(transparent, #171311); }
.theme-band-2 .hero__ambient { background: radial-gradient(circle at 73% 35%, rgba(239,128,100,.2), transparent 25%), linear-gradient(180deg, transparent 58%, rgba(45,25,20,.82)); }
.theme-band-3 .hero::before {
  background:
    linear-gradient(90deg, rgba(8,15,18,.97) 0%, rgba(20,31,35,.78) 43%, rgba(12,20,23,.1) 78%),
    url("band-3/images/quotes/05-06-eine-mine-hier-bei-uns-im-wald-murmelte-kira-besorgt-wir.webp") center/cover;
}
.theme-band-3 .hero::after { background: linear-gradient(transparent, #11191c); }
.theme-band-3 .hero__ambient { background: radial-gradient(circle at 73% 35%, rgba(141,186,198,.22), transparent 25%), linear-gradient(180deg, transparent 58%, rgba(18,30,34,.86)); }
.theme-band-4 .hero::before {
  background:
    linear-gradient(90deg, rgba(5,5,6,.98) 0%, rgba(18,18,20,.82) 43%, rgba(5,5,6,.14) 78%),
    url("band-4/images/quotes/03-10-zuerst-war-es-nur-ein-rabe-der-regelmaessig-auf-dem-dach.webp") center/cover;
}
.theme-band-4 .hero::after { background: linear-gradient(transparent, #08090a); }
.theme-band-4 .hero__ambient { background: radial-gradient(circle at 73% 35%, rgba(183,185,188,.14), transparent 25%), linear-gradient(180deg, transparent 58%, rgba(12,12,13,.9)); }
.theme-band-5 .hero::before {
  background:
    linear-gradient(90deg, rgba(18,8,15,.97) 0%, rgba(40,18,32,.78) 43%, rgba(20,8,16,.1) 78%),
    url("band-5/images/quotes/02-03-beide-waren-sich-einig-tilo-war-definitiv-mehr-als-nur-d.webp") center/cover;
}
.theme-band-5 .hero::after { background: linear-gradient(transparent, #1a0d16); }
.theme-band-5 .hero__ambient { background: radial-gradient(circle at 73% 35%, rgba(217,107,168,.2), transparent 25%), linear-gradient(180deg, transparent 58%, rgba(46,18,36,.84)); }
.hero__inner { min-height: inherit; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); align-items: center; gap: 3rem; padding-block: 5rem; }
.hero__copy { position: relative; z-index: 3; max-width: 640px; }
.eyebrow { margin: 0 0 1.1rem; color: var(--sun); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0; font: 500 clamp(4rem, 8vw, 7.4rem)/.86 var(--serif); letter-spacing: -.06em; }
.book-hero h1 { font-size: clamp(3.6rem, 6vw, 5.55rem); }
.hero h1 span { display: block; color: var(--sun); font-style: italic; font-weight: 400; }
.hero__lead { max-width: 590px; margin: 2rem 0 0; color: rgba(244,239,223,.88); font: 400 clamp(1.15rem, 2vw, 1.45rem)/1.55 var(--serif); }
.hero__actions, .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .8rem 1.35rem; border: 1px solid transparent; text-decoration: none; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.button--primary { color: var(--ink); background: var(--sun); }
.button--primary:hover { background: #ffe787; }
.theme-band-3 .button--primary { background: var(--ice); }
.theme-band-3 .button--primary:hover { background: var(--ice-hover); }
.theme-band-4 .button--primary, .theme-band-5 .button--primary { color: #081018; background: var(--sun); }
.theme-band-4 .button--primary:hover { background: #d0d1d2; }
.theme-band-5 .button--primary:hover { background: #ee98c8; }
.button--quiet { border-color: rgba(244,239,223,.3); background: rgba(10,17,13,.25); }
.button--quiet:hover { border-color: var(--sun); color: var(--sun); }
.book-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.book-meta li { padding: .35rem .7rem; border: 1px solid var(--line); color: var(--mist); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }

.animal-stoerer { position: relative; z-index: 6; height: 0; pointer-events: none; }
.animal-stoerer__card {
  position: absolute;
  top: 0;
  right: clamp(0rem, 3vw, 2.5rem);
  width: clamp(300px, 34vw, 460px);
  min-height: 230px;
  transform: translateY(-53%) rotate(1.25deg);
}
.animal-stoerer__card::before { position: absolute; inset: 18% 7% 9%; border: 1px solid color-mix(in srgb, var(--sun) 34%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 17%, transparent), transparent 68%); box-shadow: 0 0 48px color-mix(in srgb, var(--sun) 14%, transparent); content: ""; transform: rotate(-7deg); }
.animal-stoerer__card img { position: relative; z-index: 1; width: 100%; height: 250px; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,.62)); }
.animal-stoerer__card > strong { position: absolute; right: .4rem; bottom: .15rem; z-index: 2; padding: .5rem .75rem; border: 1px solid color-mix(in srgb, var(--sun) 42%, transparent); color: var(--cream); background: color-mix(in srgb, var(--forest) 88%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,.35); font: 500 .8rem var(--serif); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); }
.theme-band-2 .animal-stoerer__card, .theme-band-4 .animal-stoerer__card { right: auto; left: clamp(0rem, 3vw, 2.5rem); transform: translateY(-53%) rotate(-1.25deg); }
.theme-band-2 .animal-stoerer__card > strong, .theme-band-4 .animal-stoerer__card > strong { right: auto; left: .4rem; }
.theme-band-4 .animal-stoerer__card > strong { background: rgba(16,17,18,.88); }

.hero__visual { position: relative; align-self: stretch; min-height: 680px; }
.hero__figure { position: absolute; right: 6%; bottom: 0; width: min(46%, 320px); height: 73%; object-fit: cover; object-position: 50% 28%; border-radius: 48% 48% 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.15), var(--shadow); filter: saturate(.85); }
.hero__cover { position: absolute; right: 38%; bottom: 8%; width: min(39%, 260px); max-height: 62%; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 35px 35px rgba(0,0,0,.55)); }
.hero__halo { position: absolute; right: 3%; top: 8%; width: 78%; color: rgba(241,215,104,.42); animation: halo-turn 38s linear infinite; }
.hero__halo circle, .hero__halo path { fill: none; stroke: currentColor; stroke-width: 1; }
.hero__index { position: absolute; right: 0; top: 20%; color: rgba(244,239,223,.08); font: 400 clamp(10rem, 20vw, 18rem)/1 var(--serif); }

.intro-grid { display: grid; grid-template-columns: .38fr 1fr; gap: 4rem; }
.intro-grid__aside { margin: .5rem 0 0; color: var(--fern); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.intro-grid__copy { max-width: 820px; }
.intro-grid__copy p { margin: 0 0 1.5rem; color: rgba(244,239,223,.78); font: 400 clamp(1.25rem, 2.5vw, 2rem)/1.45 var(--serif); }
.intro-grid__copy p:first-child { color: var(--cream); font-size: clamp(1.8rem, 3.4vw, 3.3rem); line-height: 1.16; }

.transformation-map { position: relative; overflow: hidden; padding: clamp(4.5rem, 8vw, 7rem) 0; border-block: 1px solid var(--line); background: linear-gradient(110deg, rgba(111,138,92,.08), rgba(212,182,56,.05)); }
.transformation-map__heading { display: grid; grid-template-columns: 1fr .55fr; gap: 3rem; align-items: end; }
.transformation-map h2, .section-heading h2, .synopsis h2, .character-stage h2, .purchase h2 { margin: 0; font: 500 clamp(2.5rem, 5vw, 4.9rem)/.98 var(--serif); letter-spacing: -.04em; }
.transformation-map__heading > p, .section-heading > p { margin: 0; color: var(--muted); }
.transformation-path { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); }
.transformation-step { position: relative; min-height: 260px; padding: 2rem; background: #132019; overflow: hidden; }
.transformation-step span { color: var(--sun); font: 400 3rem/1 var(--serif); }
.transformation-step h3 { margin: 3.4rem 0 .7rem; font: 500 1.55rem var(--serif); }
.transformation-step p { max-width: 32ch; margin: 0; color: var(--muted); }
.transformation-step svg { position: absolute; right: -1.4rem; top: .6rem; width: 150px; color: rgba(158,174,119,.15); }
.transformation-step svg * { fill: none; stroke: currentColor; stroke-width: 2; }

.section-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 3rem; align-items: end; margin-bottom: 3.3rem; }
.volume-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
.volume-card { position: relative; display: flex; min-height: 0; flex-direction: column; padding: 0; border: 1px solid var(--line); color: inherit; background: rgba(10,18,13,.45); text-align: left; text-decoration: none; overflow: hidden; }
.volume-card--active { grid-column: span 1; }
.volume-card__cover { order: 1; width: 100%; aspect-ratio: 800 / 1293; object-fit: contain; background: #080b09; opacity: 1; transition: transform .6s ease, filter .6s ease; }
.volume-card--active::after { display: none; }
.volume-card:hover .volume-card__cover { transform: scale(1.015); filter: brightness(1.04); }
.volume-card__number, .volume-card__content { position: relative; z-index: 2; }
.volume-card__number { order: 2; display: inline-block; margin: 1.15rem 1.25rem 0; color: var(--sun); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.volume-card__content { position: static; order: 3; padding: .55rem 1.25rem 1.4rem; }
.volume-card__content h3, .volume-card__content strong { margin: 0; font: 500 1.65rem/1.05 var(--serif); hyphens: auto; overflow-wrap: anywhere; }
.volume-card__content p { margin: .7rem 0 0; color: var(--muted); }
.volume-card--reserved { min-height: 230px; border-style: dashed; cursor: pointer; }
.volume-card--reserved::before { content: ""; position: absolute; width: 190px; aspect-ratio: 1; right: -65px; top: -65px; border: 1px solid rgba(158,174,119,.14); border-radius: 50%; box-shadow: 0 0 0 25px rgba(158,174,119,.03), 0 0 0 50px rgba(158,174,119,.02); }
.volume-card--reserved .volume-card__content { position: absolute; }

.forest-break { position: relative; display: grid; place-items: center; min-height: 480px; overflow: hidden; text-align: center; isolation: isolate; }
.forest-break::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(6,12,8,.45), rgba(6,12,8,.82)), url("band-1/images/quotes/13-02-ich-weiss-genau-was-du-meinst-es-ist-als-ob-alle-sorgen.webp"); background-position: center, center 18%; background-size: cover; background-repeat: no-repeat; }
.forest-break::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(241,215,104,.16), transparent 34%); }
.forest-break__copy { max-width: 760px; }
.forest-break h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6rem)/.92 var(--serif); }
.forest-break p:last-child { color: var(--mist); font: 400 1.25rem var(--serif); }

.synopsis { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(3rem,8vw,8rem); align-items: center; }
.synopsis__art { position: relative; min-height: 650px; }
.synopsis__art img { position: absolute; width: 72%; height: 88%; object-fit: cover; box-shadow: var(--shadow); }
.synopsis__art img:first-child { left: 0; top: 0; transform: rotate(-3deg); }
.synopsis__art img:last-child { right: 0; bottom: 0; width: 58%; height: 70%; object-fit: contain; transform: rotate(5deg); filter: drop-shadow(0 25px 30px rgba(0,0,0,.48)); }
.synopsis__copy p { color: var(--muted); }
.synopsis__copy .opening { margin-top: 2rem; color: var(--cream); font: 400 1.45rem/1.5 var(--serif); }
.why-section {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(212,182,56,.1), transparent 28rem),
    linear-gradient(145deg, rgba(111,138,92,.05), transparent 52%);
}
.why-section::after { content: ""; position: absolute; right: -9rem; bottom: -12rem; width: 34rem; aspect-ratio: 1; border: 1px solid rgba(158,174,119,.08); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(158,174,119,.018), 0 0 0 8rem rgba(158,174,119,.012); pointer-events: none; }
.why-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(460px,1fr); gap: clamp(3rem,8vw,8rem); align-items: start; }
.why-intro { position: sticky; top: 8.5rem; padding-top: 1rem; }
.why-intro h2 { max-width: 9ch; margin: 0; font: 500 clamp(2.8rem,5vw,5rem)/.96 var(--serif); letter-spacing: -.045em; }
.why-intro > p:not(.eyebrow) { max-width: 36ch; margin: 1.7rem 0 0; color: var(--muted); }
.why-intro__hint { display: inline-block; margin-top: 3rem; color: var(--fern); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.why-path { position: relative; display: grid; gap: .4rem; padding-left: 1rem; }
.why-path::before { content: ""; position: absolute; left: 2.8rem; top: 2.8rem; bottom: 2.8rem; width: 1px; background: linear-gradient(var(--sun), rgba(158,174,119,.25), var(--moss)); box-shadow: 0 0 18px rgba(212,182,56,.22); }
.why-stop { position: relative; display: grid; grid-template-columns: 5.7rem 1fr; align-items: center; min-height: 10.5rem; }
.why-stop__marker { position: relative; z-index: 1; display: grid; place-items: center; width: 3.7rem; aspect-ratio: 1; border: 1px solid rgba(212,182,56,.5); border-radius: 50%; color: var(--sun); background: #14221a; box-shadow: 0 0 0 .55rem #111c16; font: 500 1rem var(--serif); }
.why-stop > div { padding: 1.6rem 1.8rem; border: 1px solid var(--line); background: rgba(16,27,20,.76); transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.why-stop:nth-child(even) > div { transform: translateX(2.2rem); }
.why-stop:hover > div { border-color: rgba(212,182,56,.4); background: rgba(24,39,29,.9); }
.why-stop:nth-child(even):hover > div { transform: translateX(2.2rem) translateY(-3px); }
.why-stop:nth-child(odd):hover > div { transform: translateY(-3px); }
.why-stop h3 { margin: 0 0 .55rem; font: 500 1.45rem var(--serif); }
.why-stop p { margin: 0; color: var(--muted); font-size: .92rem; }
.theme-band-3 .why-section { background: radial-gradient(circle at 82% 22%, rgba(141,186,198,.13), transparent 28rem), linear-gradient(145deg, rgba(95,127,136,.11), transparent 52%); }
.theme-band-3 .why-section::after { border-color: rgba(141,186,198,.1); box-shadow: 0 0 0 4rem rgba(141,186,198,.022), 0 0 0 8rem rgba(141,186,198,.014); }
.theme-band-3 .why-path::before { background: linear-gradient(var(--sun), rgba(141,186,198,.25), var(--moss)); box-shadow: 0 0 18px rgba(141,186,198,.24); }
.theme-band-3 .why-stop__marker { border-color: rgba(141,186,198,.55); background: #122126; box-shadow: 0 0 0 .55rem #0d191d; }
.theme-band-3 .why-stop > div { background: rgba(14,27,32,.78); }
.theme-band-3 .why-stop:hover > div { border-color: rgba(141,186,198,.45); background: rgba(22,42,49,.92); }
.theme-band-4 .why-section { background: radial-gradient(circle at 82% 22%, rgba(183,185,188,.1), transparent 28rem), linear-gradient(145deg, rgba(85,88,93,.12), transparent 52%); }
.theme-band-4 .why-section::after { border-color: rgba(183,185,188,.1); box-shadow: 0 0 0 4rem rgba(183,185,188,.022), 0 0 0 8rem rgba(183,185,188,.014); }
.theme-band-4 .why-path::before { background: linear-gradient(var(--sun), rgba(183,185,188,.22), var(--moss)); box-shadow: 0 0 18px rgba(183,185,188,.18); }
.theme-band-4 .why-stop__marker { border-color: rgba(183,185,188,.5); background: #1b1c1e; box-shadow: 0 0 0 .55rem #0e0f10; }
.theme-band-4 .why-stop > div { background: rgba(20,20,22,.82); }
.theme-band-4 .why-stop:hover > div { border-color: rgba(183,185,188,.4); background: rgba(31,32,35,.94); }
.theme-band-5 .why-section { background: radial-gradient(circle at 82% 22%, rgba(217,107,168,.13), transparent 28rem), linear-gradient(145deg, rgba(131,69,104,.13), transparent 52%); }
.theme-band-5 .why-section::after { border-color: rgba(217,107,168,.1); box-shadow: 0 0 0 4rem rgba(217,107,168,.022), 0 0 0 8rem rgba(217,107,168,.014); }
.theme-band-5 .why-path::before { background: linear-gradient(var(--sun), rgba(217,107,168,.22), var(--moss)); box-shadow: 0 0 18px rgba(217,107,168,.24); }
.theme-band-5 .why-stop__marker { border-color: rgba(217,107,168,.52); background: #2b1624; box-shadow: 0 0 0 .55rem #1b0d17; }
.theme-band-5 .why-stop > div { background: rgba(38,17,31,.8); }
.theme-band-5 .why-stop:hover > div { border-color: rgba(217,107,168,.44); background: rgba(55,26,45,.94); }

.paw-break { position: relative; min-height: 380px; display: grid; place-items: center; border-block: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(212,182,56,.12), transparent 32%), #0d1711; }
.paw-break__copy { position: relative; z-index: 2; max-width: 760px; text-align: center; }
.paw-break h2 { margin: 0; font: italic 400 clamp(2.8rem,6vw,5.8rem)/.96 var(--serif); }
.theme-band-2 .paw-break { background: radial-gradient(circle at 50% 50%, rgba(173,70,51,.16), transparent 32%), #15100e; }
.theme-band-3 .paw-break { background: radial-gradient(circle at 50% 50%, rgba(141,186,198,.18), transparent 32%), #0c1316; }
.theme-band-3 .paw { color: rgba(141,186,198,.2); }
.theme-band-4 .paw-break { background: radial-gradient(circle at 50% 50%, rgba(183,185,188,.14), transparent 32%), #09090a; }
.theme-band-4 .paw { color: rgba(183,185,188,.18); }
.theme-band-5 .paw-break { background: radial-gradient(circle at 50% 50%, rgba(217,107,168,.17), transparent 32%), #170b13; }
.theme-band-5 .paw { color: rgba(217,107,168,.2); }
.paw-trail { position: absolute; inset: 0; }
.paw { position: absolute; width: 58px; height: 70px; color: rgba(158,174,119,.18); transform: rotate(var(--r)); }
.paw::before { content: ""; position: absolute; left: 15px; top: 26px; width: 29px; height: 34px; border-radius: 55% 55% 45% 45%; background: currentColor; }
.paw::after { content: "•  •\A •  •"; white-space: pre; position: absolute; left: 6px; top: -11px; font-size: 27px; line-height: .68; letter-spacing: 2px; }
.paw:nth-child(1) { left: 8%; top: 64%; --r: 29deg; }
.paw:nth-child(2) { left: 23%; top: 30%; --r: 38deg; }
.paw:nth-child(3) { right: 27%; top: 22%; --r: 123deg; }
.paw:nth-child(4) { right: 9%; top: 58%; --r: 138deg; }

.character-section { position: relative; padding: clamp(5rem,9vw,9rem) 0; background: linear-gradient(120deg, #132019, #0c1510); }
.character-layout { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 1.2rem; }
.character-controls { grid-column: 2; grid-row: 1; display: grid; align-content: center; gap: .7rem; }
.character-tab { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: .85rem; padding: .55rem; border: 1px solid transparent; color: var(--muted); background: transparent; text-align: left; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.character-tab img { width: 56px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 20%; filter: saturate(.65) brightness(.72); transition: filter .25s ease, box-shadow .25s ease; }
.character-tab > span { display: grid; }
.character-tab small { color: var(--moss); font-size: .64rem; letter-spacing: .12em; }
.character-tab strong { font: 500 1rem var(--serif); }
.character-tab:hover, .character-tab:focus-visible { border-color: rgba(158,174,119,.25); transform: translateX(-3px); }
.character-tab.is-active { border-color: rgba(212,182,56,.42); color: var(--sun); background: rgba(212,182,56,.055); }
.character-tab.is-active img { filter: none; box-shadow: 0 0 0 2px var(--sun), 0 0 24px rgba(212,182,56,.2); }
.character-stage { display: grid; grid-template-columns: minmax(280px,.72fr) 1fr; min-height: 650px; border: 1px solid var(--line); background: #17251d; overflow: hidden; transition: opacity .16s ease; }
.character-stage.is-changing { opacity: .45; }
.character-stage__image { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.character-stage__copy { align-self: center; padding: clamp(2rem,6vw,5.5rem); }
.character-stage__role { margin: 0 0 .55rem; color: var(--fern); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.character-stage__description { max-width: 55ch; color: var(--muted); font-size: 1.03rem; }
.theme-band-2 .character-section { background: linear-gradient(120deg, #251a17, #120e0c); }
.theme-band-2 .character-stage { background: #2b1e1a; }
.theme-band-3 .character-section { background: linear-gradient(120deg, #18272c, #0b1215); }
.theme-band-3 .character-stage { background: #1d2d33; }
.theme-band-3 .character-tab:hover, .theme-band-3 .character-tab:focus-visible { border-color: rgba(141,186,198,.3); }
.theme-band-3 .character-tab.is-active { border-color: rgba(141,186,198,.5); background: rgba(141,186,198,.075); }
.theme-band-3 .character-tab.is-active img { box-shadow: 0 0 0 2px var(--sun), 0 0 24px rgba(141,186,198,.24); }
.theme-band-4 .character-section { background: linear-gradient(120deg, #202124, #09090a); }
.theme-band-4 .character-stage { background: #26272a; }
.theme-band-4 .character-tab.is-active { border-color: rgba(183,185,188,.46); background: rgba(183,185,188,.065); }
.theme-band-5 .character-section { background: linear-gradient(120deg, #351b2c, #160a12); }
.theme-band-5 .character-stage { background: #3c2032; }
.theme-band-5 .character-tab.is-active { border-color: rgba(217,107,168,.48); background: rgba(217,107,168,.07); }

.media-grid { display: grid; grid-template-columns: minmax(0,16fr) minmax(0,9fr); align-items: stretch; gap: 1rem; }
.media-grid:has(.video-shell[data-video-aspect="square"]) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.video-shell, .audio-player { position: relative; overflow: hidden; border: 1px solid var(--line); background: #09100c; }
.video-shell { --video-ratio: 16 / 9; width: 100%; min-height: 0; aspect-ratio: var(--video-ratio); align-self: stretch; background: #030604; }
.video-shell[data-video-aspect="square"] { --video-ratio: 1 / 1; }
.video-shell video { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.video-shell__cover { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; color: var(--cream); background: linear-gradient(rgba(7,12,8,.12), rgba(7,12,8,.74)); cursor: pointer; transition: opacity .35s ease, visibility .35s ease; }
.video-shell.is-playing .video-shell__cover { visibility: hidden; opacity: 0; }
.play-mark { position: relative; display: block; width: 84px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; backdrop-filter: blur(8px); }
.play-mark::after { content: ""; position: absolute; left: 35px; top: 27px; border-left: 20px solid currentColor; border-block: 14px solid transparent; }
.media-label { position: absolute; bottom: 2rem; left: 2rem; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.audio-player { min-height: 0; aspect-ratio: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.35rem,2.4vw,2rem); background: radial-gradient(circle at 50% 35%, rgba(212,182,56,.18), transparent 35%), repeating-radial-gradient(circle at 50% 35%, transparent 0 22px, rgba(244,239,223,.045) 23px 24px), #101b14; }
.theme-band-2 .audio-player { background: radial-gradient(circle at 50% 35%, rgba(173,70,51,.24), transparent 35%), repeating-radial-gradient(circle at 50% 35%, transparent 0 22px, rgba(244,239,223,.045) 23px 24px), #1c1412; }
.theme-band-3 .audio-player { background: radial-gradient(circle at 50% 35%, rgba(141,186,198,.25), transparent 35%), repeating-radial-gradient(circle at 50% 35%, transparent 0 22px, rgba(244,239,223,.045) 23px 24px), #101a1e; }
.theme-band-3 .audio-player__disc { background: repeating-radial-gradient(circle, #18272d 0 3px, #0a1114 4px 7px); box-shadow: inset 0 0 0 35px #142329, inset 0 0 0 38px rgba(141,186,198,.5), 0 25px 50px rgba(0,0,0,.45); }
.theme-band-3 .audio-progress::-webkit-slider-thumb { border-color: #101a1e; box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 12px rgba(141,186,198,.48); }
.theme-band-3 .audio-progress::-moz-range-thumb { border-color: #101a1e; }
.theme-band-4 .audio-player { background: radial-gradient(circle at 50% 35%, rgba(183,185,188,.18), transparent 35%), repeating-radial-gradient(circle at 50% 35%, transparent 0 22px, rgba(244,239,223,.04) 23px 24px), #111214; }
.theme-band-4 .audio-player__disc { background: repeating-radial-gradient(circle, #292a2d 0 3px, #09090a 4px 7px); box-shadow: inset 0 0 0 35px #1e1f21, inset 0 0 0 38px rgba(183,185,188,.42), 0 25px 50px rgba(0,0,0,.5); }
.theme-band-5 .audio-player { background: radial-gradient(circle at 50% 35%, rgba(217,107,168,.22), transparent 35%), repeating-radial-gradient(circle at 50% 35%, transparent 0 22px, rgba(244,239,223,.045) 23px 24px), #21101b; }
.theme-band-5 .audio-player__disc { background: repeating-radial-gradient(circle, #3d2033 0 3px, #160a12 4px 7px); box-shadow: inset 0 0 0 35px #321828, inset 0 0 0 38px rgba(217,107,168,.48), 0 25px 50px rgba(0,0,0,.45); }
.audio-player__disc { display: grid; place-items: center; width: min(62%,10.5rem); margin: auto; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: repeating-radial-gradient(circle, #1b281f 0 3px, #0b110d 4px 7px); box-shadow: inset 0 0 0 35px #17231b, inset 0 0 0 38px rgba(212,182,56,.45), 0 25px 50px rgba(0,0,0,.45); }
.audio-player__disc::after { content: "KIRA"; display: grid; place-items: center; width: 100%; height: 100%; color: var(--sun); font: 500 1.1rem var(--serif); letter-spacing: .2em; }
.audio-player.is-playing .audio-player__disc { animation: disc-spin 7s linear infinite; }
.audio-player__controls { display: flex; align-items: center; gap: 1rem; }
.audio-toggle { display: grid; place-items: center; width: 48px; padding: 0; aspect-ratio: 1; border: 1px solid var(--sun); border-radius: 50%; background: transparent; cursor: pointer; }
.audio-toggle::before { content: ""; display: block; border-left: 11px solid var(--sun); border-block: 8px solid transparent; transform: translateX(1px); }
.is-playing .audio-toggle::before { width: 10px; height: 14px; border: 0; border-inline: 3px solid var(--sun); transform: none; }
.audio-meta { display: grid; }
.audio-meta strong { font: 500 1.1rem var(--serif); }
.audio-meta small { color: var(--muted); }
.audio-player__transport { width: 100%; margin: 0 0 1.2rem; }
.audio-progress { --audio-progress: 0%; width: 100%; height: 1.1rem; margin: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; }
.audio-progress::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--sun) 0 var(--audio-progress), rgba(255,255,255,.18) var(--audio-progress) 100%); }
.audio-progress::-moz-range-track { height: 3px; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); }
.audio-progress::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--sun); }
.audio-progress::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5px; appearance: none; -webkit-appearance: none; border: 2px solid #101b14; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 12px rgba(212,182,56,.45); }
.audio-progress::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #101b14; border-radius: 50%; background: var(--sun); }
.audio-progress:focus-visible { outline: 1px solid var(--sun); outline-offset: 4px; }
.audio-time { display: flex; justify-content: space-between; margin-top: .2rem; color: var(--muted); font-size: .66rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }

.spoiler-gate { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.5rem; border: 1px solid rgba(212,182,56,.3); background: rgba(212,182,56,.04); }
.spoiler-gate h3 { margin: 0; font: 500 1.25rem var(--serif); }
.spoiler-gate p { margin: .25rem 0 0; color: var(--muted); }
.theme-band-3 .spoiler-gate { border-color: rgba(141,186,198,.34); background: rgba(141,186,198,.055); }
.theme-band-4 .spoiler-gate { border-color: rgba(183,185,188,.32); background: rgba(183,185,188,.05); }
.theme-band-5 .spoiler-gate { border-color: rgba(217,107,168,.34); background: rgba(217,107,168,.055); }
.chapter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.chapter-card { min-height: 320px; background: #101b14; }
.chapter-card > button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.chapter-card__image { position: relative; display: block; height: 215px; overflow: hidden; }
.chapter-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(9,15,11,.75)); }
.chapter-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.chapter-card button:hover img { transform: scale(1.04); }
.chapter-card__image span { position: absolute; left: 1rem; bottom: .75rem; z-index: 2; color: var(--cream); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chapter-card__copy { display: grid; padding: 1rem; }
.chapter-card__copy small { color: var(--fern); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.chapter-card__copy strong { margin-top: .35rem; font: 500 1.15rem var(--serif); }
.chapter-card__copy em { margin-top: .7rem; color: var(--sun); font-style: normal; font-size: .75rem; }
.chapter-card.has-sample { display: flex; flex-direction: column; }
.chapter-card.has-sample .chapter-card__copy { flex: 1; }
.chapter-card.has-sample:hover img { transform: scale(1.04); }
.chapter-card__actions { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: .8rem; }
.chapter-card__actions a, .chapter-card__actions button { padding: 0; border: 0; color: var(--sun); background: transparent; font-size: .75rem; text-decoration: none; cursor: pointer; }
.chapter-card__actions a:hover, .chapter-card__actions a:focus-visible, .chapter-card__actions button:hover, .chapter-card__actions button:focus-visible { color: var(--cream); }
.chapter-card.is-locked { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.2rem; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 14px), #0d1610; }
.chapter-card.is-locked small { color: var(--moss); text-transform: uppercase; letter-spacing: .1em; }
.chapter-card.is-locked h3 { margin: .5rem 0; font: 500 1.15rem var(--serif); }
.chapter-card.is-locked p { margin: 0; color: #718075; font-size: .8rem; }
.chapter-card__lock { margin-bottom: auto; color: rgba(158,174,119,.25); font: 400 4rem var(--serif); }
.theme-band-3 .chapter-card { background: #101b1f; }
.theme-band-3 .chapter-card.is-locked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 14px), #0c1518; }
.theme-band-3 .chapter-card__lock { color: rgba(141,186,198,.26); }
.theme-band-4 .chapter-card { background: #18191b; }
.theme-band-4 .chapter-card.is-locked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 14px), #0d0e0f; }
.theme-band-5 .chapter-card { background: #281421; }
.theme-band-5 .chapter-card.is-locked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 14px), #1a0c16; }

.purchase { position: relative; overflow: hidden; padding: clamp(6rem,11vw,10rem) 0; border-top: 1px solid var(--line); background: radial-gradient(circle at 82% 18%, rgba(212,182,56,.11), transparent 30rem), linear-gradient(135deg, #111e16, #08100c 72%); }
.purchase__copy { max-width: 720px; }
.purchase__copy > p:not(.eyebrow):not(.isbn) { max-width: 55ch; color: var(--mist); }
.isbn { color: var(--muted); font-size: .72rem; letter-spacing: .1em; }
.ebook-price-note { flex-basis: 100%; display: block; color: var(--sun); font: 600 .95rem/1.5 var(--sans); }
.theme-band-3 .purchase { background: radial-gradient(circle at 82% 18%, rgba(141,186,198,.14), transparent 30rem), linear-gradient(135deg, #101e23, #070e11 72%); }
.theme-band-4 .purchase { background: radial-gradient(circle at 82% 18%, rgba(183,185,188,.1), transparent 30rem), linear-gradient(135deg, #1a1b1d, #060607 72%); }
.theme-band-5 .purchase { background: radial-gradient(circle at 82% 18%, rgba(217,107,168,.14), transparent 30rem), linear-gradient(135deg, #2a1423, #0f070c 72%); }

.quote-dialog { width: min(1060px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid rgba(212,182,56,.35); color: var(--cream); background: #0e1812; box-shadow: var(--shadow); }
.quote-dialog::backdrop { background: rgba(3,7,4,.86); backdrop-filter: blur(10px); }
.quote-dialog__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.quote-dialog__media { background: #080d0a; }
.quote-dialog__media img, .quote-dialog__media video { width: 100%; height: 100%; max-height: calc(100vh - 34px); object-fit: cover; }
.quote-dialog__copy { display: flex; flex-direction: column; padding: clamp(1.5rem,4vw,3.5rem); }
.quote-dialog__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.quote-dialog__top p { margin: 0; color: var(--fern); font-size: .72rem; }
.quote-dialog__top h2 { margin: .35rem 0 0; font: 500 1.45rem var(--serif); }
.dialog-close { width: 42px; aspect-ratio: 1; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 1.5rem; }
.quote-dialog blockquote { margin: auto 0; color: var(--cream); font: italic 400 clamp(1.15rem,2vw,1.55rem)/1.55 var(--serif); }
.quote-dialog__nav { display: flex; justify-content: space-between; gap: 1rem; }
.quote-dialog__nav button { padding: .6rem 0; border: 0; color: var(--sun); background: transparent; cursor: pointer; }
.quote-dialog__nav button:disabled { color: #5d675f; cursor: default; }
.theme-band-3 .quote-dialog { border-color: rgba(141,186,198,.4); background: #0d181c; }
.theme-band-4 .quote-dialog { border-color: rgba(183,185,188,.36); background: #151618; }
.theme-band-5 .quote-dialog { border-color: rgba(217,107,168,.4); background: #21101c; }

.reading-page { background: linear-gradient(180deg, #101a14, #09100c); }
.reading-header { position: sticky; top: 0; z-index: 80; padding: .7rem 0; border-bottom: 1px solid var(--line); background: rgba(11,18,15,.9); box-shadow: 0 12px 42px rgba(0,0,0,.25); backdrop-filter: blur(18px); }
.theme-band-2 .reading-header { background: rgba(23,17,15,.92); }
.theme-band-3.reading-page { background: linear-gradient(180deg, #101b1f, #080f12); }
.theme-band-3 .reading-header { background: rgba(13,22,26,.93); }
.reading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.reading-actions .volume-nav__toggle { padding: .75rem 0; }
.reading-actions .volume-nav__toggle::after { bottom: .35rem; }
.reading-actions .button { min-height: 42px; padding: .65rem 1rem; }
.reading-hero { position: relative; display: grid; min-height: 64svh; align-items: end; overflow: hidden; isolation: isolate; }
.reading-hero::before { position: absolute; inset: 0; z-index: -2; content: ""; background: linear-gradient(180deg, rgba(7,13,9,.16), #0d1711 96%), url("band-1/images/quotes/02-01-in-ihrer-freizeit-versank-kira-gerne-in-der-welt-der-bue.webp") center 38% / cover; filter: saturate(.78); }
.reading-hero::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(7,13,9,.7), transparent 68%); }
.reading-page--book-two .reading-hero::before { background-image: linear-gradient(180deg, rgba(18,9,8,.12), #17100e 96%), url("band-2/images/quotes/02-01-es-ist-so-friedlich-hier-sagte-kira-leise-ihre-stimme-vo.webp"); }
.reading-page--book-three .reading-hero::before { background-image: linear-gradient(180deg, rgba(8,16,19,.12), #0d181c 96%), url("band-3/images/quotes/02-01-als-sie-in-den-wald-eintauchten-spuerten-sie-sofort-die.webp"); }
.theme-band-4.reading-page { background: linear-gradient(180deg, #17181a, #070708); }
.theme-band-4 .reading-header { background: rgba(10,10,11,.94); }
.reading-page--book-four .reading-hero::before { background-image: linear-gradient(180deg, rgba(8,8,9,.14), #151618 96%), url("band-4/images/quotes/02-01-aber-tief-im-inneren-wussten-sie-dass-sie-nicht-einfach.webp"); }
.theme-band-5.reading-page { background: linear-gradient(180deg, #25131f, #0f070c); }
.theme-band-5 .reading-header { background: rgba(27,12,22,.94); }
.reading-page--book-five .reading-hero::before { background-image: linear-gradient(180deg, rgba(24,10,19,.12), #21101c 96%), url("band-5/images/quotes/02-01-nach-einem-fruehling-voller-unvorhergesehener-abenteuer.webp"); }
.reading-hero__copy { padding-block: 8rem 4rem; }
.reading-hero h1 { max-width: 13ch; margin: 0; font: 500 clamp(3.5rem,8vw,7rem)/.98 var(--serif); letter-spacing: -.04em; }
.reading-content { width: min(calc(100% - 2rem), 760px); margin: 0 auto; padding: clamp(4rem,8vw,8rem) 0; }
.reading-content > p { margin: 0 0 1.25em; color: var(--mist); font: 400 clamp(1.12rem,2vw,1.3rem)/1.8 var(--serif); }
.reading-content > p:first-child::first-letter { float: left; margin: .1em .12em 0 0; color: var(--sun); font-size: 5.2em; line-height: .72; }
.reading-end { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line); text-align: center; }
.reading-end h2 { margin: .5rem auto 2rem; max-width: 16ch; font: 500 clamp(2.2rem,5vw,4rem)/1.05 var(--serif); }
.reading-end .cta-row { justify-content: center; }

.site-footer { border-top: 1px solid var(--line); background: #080e0a; }
.site-footer__inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: .75rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--sun); }
.theme-band-3 .site-footer { background: #070d0f; }
.theme-band-3 .toast { border-color: rgba(141,186,198,.42); background: #142329; }
.theme-band-4 .site-footer { background: #050506; }
.theme-band-4 .toast { border-color: rgba(183,185,188,.38); background: #242527; }
.theme-band-5 .site-footer { background: #0e060b; }
.theme-band-5 .toast { border-color: rgba(217,107,168,.42); background: #321828; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 200; max-width: calc(100vw - 32px); padding: .85rem 1.1rem; border: 1px solid rgba(212,182,56,.4); color: var(--cream); background: #18261d; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes halo-turn { to { transform: rotate(360deg); } }
@keyframes disc-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .main-nav { gap: 17px; font-size: .7rem; }
}

@media (max-width: 1020px) {
  :root { --shell: min(100% - 32px, 820px); --header-height: 74px; }
  .site-header__inner { min-height: 74px; }
  .publisher-brand__logo { width: 48px; height: 48px; }
  .brand-cluster { gap: .7rem; }
  .brand-cluster .publisher-brand { padding-right: .7rem; }
  .menu-toggle { position: relative; z-index: 2; display: block; }
  .main-nav { position: fixed; top: 0; right: 0; display: block; width: min(88vw, 420px); height: 100dvh; padding: 92px 28px 40px; overflow-y: auto; color: var(--cream); background: rgba(11,18,15,.99); box-shadow: var(--shadow); transform: translateX(102%); transition: transform .3s ease; }
  .nav-open .main-nav { transform: translateX(0); }
  .main-nav > a, .main-nav > .volume-nav > .volume-nav__toggle { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; padding: 0; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
  .main-nav > a::after, .main-nav > .volume-nav > .volume-nav__toggle::after { display: none; }
  .menu-toggle[aria-expanded="true"] span { background: var(--cream); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .main-nav .volume-nav__panel { position: static; width: 100%; margin-top: .5rem; padding-inline: 0; border-width: 0 0 1px; box-shadow: none; }
  .hero__inner { grid-template-columns: 1fr; padding-top: 6rem; }
  .hero__visual { min-height: 560px; }
  .hero__figure { right: 8%; }
  .hero__cover { left: 8%; right: auto; }
  .intro-grid, .synopsis { grid-template-columns: 1fr; }
  .intro-grid { gap: 1.5rem; }
  .transformation-map__heading, .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .volume-list { grid-template-columns: repeat(3,1fr); }
  .volume-card--active { grid-column: span 1; }
  .why-layout { grid-template-columns: 1fr; gap: 3rem; }
  .why-intro { position: static; }
  .why-intro h2 { max-width: 12ch; }
  .why-intro__hint { margin-top: 1.5rem; }
  .character-layout { grid-template-columns: 1fr; }
  .character-stage { grid-column: 1; grid-row: 1; }
  .character-controls { grid-column: 1; grid-row: 2; display: flex; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; -ms-overflow-style: none; }
  .character-controls::-webkit-scrollbar { display: none; }
  .character-tab { flex: 0 0 175px; }
  .character-stage { min-height: 580px; }
  .media-grid { grid-template-columns: 1fr; }
  .audio-player { min-height: 430px; aspect-ratio: auto; }
  .chapter-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 24px); }
  .publisher-brand__logo { width: 44px; height: 44px; }
  .brand__mark { width: 1.9rem; }
  .brand__text small { display: none; }
  .reading-header .site-header__inner { flex-wrap: wrap; padding-block: .2rem; }
  .reading-actions { width: 100%; justify-content: flex-start; }
  .reading-actions > .volume-nav { flex-basis: 100%; }
  .reading-actions .volume-nav__panel { right: auto; left: 0; width: min(620px, calc(100vw - 24px)); }
  .reading-hero { min-height: 56svh; }
  .reading-hero__copy { padding-block: 6rem 3rem; }
  .volume-nav__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero__inner { padding-block: 5rem 1.5rem; }
  .hero h1 { font-size: clamp(3.3rem,16vw,5rem); }
  .book-hero h1 { font-size: clamp(3rem,14vw,4.4rem); }
  .hero__visual { min-height: 430px; }
  .hero__figure { right: 0; width: 48%; height: 72%; }
  .hero__cover { left: 0; width: 49%; bottom: 5%; }
  .hero__halo { width: 100%; right: -14%; }
  .hero__index { font-size: 9rem; }
  .animal-stoerer__card { right: .1rem; width: min(78vw, 330px); min-height: 170px; transform: translateY(-47%) rotate(1deg); }
  .animal-stoerer__card img { height: 185px; }
  .animal-stoerer__card > strong { right: .2rem; bottom: -.1rem; padding: .4rem .6rem; font-size: .68rem; }
  .theme-band-2 .animal-stoerer__card, .theme-band-4 .animal-stoerer__card { left: .1rem; transform: translateY(-47%) rotate(-1deg); }
  .theme-band-2 .animal-stoerer__card > strong, .theme-band-4 .animal-stoerer__card > strong { left: .2rem; }
  .transformation-path { grid-template-columns: 1fr; }
  .transformation-step { min-height: 220px; }
  .volume-list { grid-template-columns: repeat(2,1fr); }
  .volume-card__number { margin-inline: .8rem; }
  .volume-card__content { min-width: 0; padding-inline: .8rem; }
  .volume-card__content h3, .volume-card__content strong { font-size: 1.35rem; line-height: 1.15; }
  .book-hero h1, .purchase h2 { hyphens: auto; overflow-wrap: anywhere; }
  .volume-card--active { grid-column: span 1; min-height: 0; }
  .volume-card--reserved { min-height: 200px; }
  .synopsis__art { min-height: 500px; }
  .why-path { padding-left: 0; }
  .why-path::before { left: 1.8rem; }
  .why-stop { grid-template-columns: 4.6rem 1fr; min-height: 10rem; }
  .why-stop__marker { width: 3.5rem; }
  .why-stop:nth-child(even) > div { transform: none; }
  .why-stop:nth-child(even):hover > div { transform: translateY(-3px); }
  .why-stop > div { padding: 1.25rem; }
  .character-stage { grid-template-columns: 1fr; }
  .character-stage__image { height: 480px; }
  .character-stage__copy { padding: 1.5rem; }
  .video-shell { min-height: 0; }
  .spoiler-gate { align-items: stretch; flex-direction: column; }
  .chapter-grid { grid-template-columns: repeat(2,1fr); }
  .chapter-card { min-height: 280px; }
  .chapter-card__image { height: 175px; }
  .quote-dialog__grid { grid-template-columns: 1fr; }
  .quote-dialog__media { height: 42vh; }
  .quote-dialog__copy { min-height: 46vh; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; justify-content: center; }
}

@media (max-width: 430px) {
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-card { min-height: 310px; }
  .chapter-card__image { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}