* { box-sizing: border-box; }
:root { color-scheme: light; font-family: 'Avenir Next', Avenir, sans-serif; color: #422c22; }
body { isolation: isolate; margin: 0; background: #c99e6c; }
.library-scene { position: fixed; inset: 0; z-index: -1; background: #c99e6c url('lesebibliothek-raum-vorlage.png') center top / cover no-repeat; }
.library-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #58391612, transparent 22% 78%, #58391612); }
.library { width: min(1100px, 65%); margin: auto; padding: clamp(112px, 13vw, 188px) 0 80px; }
.library-back { position: absolute; top: 16px; left: 20px; color: #573722; font-size: 26px; text-decoration: none; background: #fff1d9d9; border-radius: 50%; width: 40px; text-align: center; }
.library-intro { position: relative; isolation: isolate; width: 88%; max-width: 960px; margin: 0 auto clamp(44px, 4.5vw, 66px); padding: 32px 38px 38px; text-align: center; background: none; }
/* Flexible ornamental parchment: decoration never affects text or grid geometry. */
.library-intro::before { content: ''; position: absolute; inset: -5px -8px; transform: scale(1.1); transform-origin: center; z-index: -1; pointer-events: none; background: url('lesebibliothek-schild.svg') center / 100% 100% no-repeat; filter: drop-shadow(0 5px 12px #65431b30); }
.library-intro::after { content: ''; position: absolute; width: 40%; aspect-ratio: 660 / 170; left: 50%; bottom: calc(100% - clamp(24px, 5vw, 48px)); transform: translateX(-50%); pointer-events: none; background: url('lesebibliothek-schild-buch.svg') center / contain no-repeat; }
h1 { font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.2; color: #213d59; margin: 0 0 20px; }
.library-intro p { width: 92%; margin: -8px auto 0; font-size: .95rem; line-height: 1.6; }
@media (min-width: 1024px) {
  .library-intro {
    width: 880px;
    max-width: calc(100vw - 96px);
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
  .library-intro-content {
    width: 720px;
    max-width: 100%;
    margin-inline: auto;
  }
  .library-intro h1 {
    font-size: 2.9rem;
    line-height: 3.48rem;
    margin: 0 0 20px;
  }
  .library-intro p {
    width: 100%;
    max-width: 720px;
    margin: -8px auto 0;
    font-size: .95rem;
    line-height: 1.52rem;
  }
}
.library-books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; padding: 0; }
.library-book { position: relative; display: flex; flex-direction: column; padding: 16px 10px 12px 17px; aspect-ratio: 3 / 4; border: 0; border-radius: 4px 10px 10px 4px; background: linear-gradient(90deg, #866b48 0 4%, #d0b179 4% 6%, #fff0ce 7%, #f6dfb8); box-shadow: 4px 5px 0 #e2cfaa, 7px 11px 18px #3020185c; cursor: pointer; color: #2d3550; font: inherit; transition: transform .35s ease; }
.library-book:nth-child(3n+2) { background: linear-gradient(90deg,#477b83 0 4%,#9dc3c7 4% 6%,#e8f4f6 7%,#d3e6eb); }
.library-book:nth-child(3n) { background: linear-gradient(90deg,#996474 0 4%,#d0a2ab 4% 6%,#fae8e8 7%,#efd1d7); }
.library-book:hover { transform: translateY(-5px); }
.library-book strong { font-family: Georgia, serif; font-size: clamp(.9rem, 1.4vw, 1.2rem); min-height: 2.5em; line-height: 1.2; margin-bottom: 10px; text-align: center; }
.library-book img { width: 100%; height: 0; flex: 1; min-height: 0; object-fit: contain; border-radius: 5px; }
.library-book.is-reading { visibility: hidden; }
button:focus-visible, a:focus-visible, [role=slider]:focus-visible { outline: 3px solid #9a6a3b; outline-offset: 4px; }
.reader { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #392a22; overflow: visible; }
.reader::backdrop { background: #3325196b; backdrop-filter: blur(8px); }
.reader[open] { display: block; }
.reader-viewport { position: fixed; left: 0; top: 0; width: 100vw; height: 100dvh; }
.reader-frame { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; width: 1100px; height: 780px; margin: -390px 0 0 -550px; border-radius: 14px; background: #faf0dd; overflow: visible; box-shadow: 0 20px 80px #20160f80; transform: scale(var(--reader-scale, 1)); transform-origin: center center; }
.reader-close { position: absolute; right: 8px; top: 4px; z-index: 4; border: 0; background: transparent; color: #6b4932; font-size: 28px; cursor: pointer; }
.reader-spread { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 0; min-height: 0; height: 0; overflow: hidden; border-radius: 14px 14px 0 0; }
.reader-watermark { display: grid; place-items: center; padding: 30px; background: linear-gradient(90deg, #fff7e8, #f5e9d3 95%, #d9c7aa); }
.reader-watermark img { width: 100%; height: 100%; object-fit: contain; opacity: .13; }
.reader-page { padding: 34px 30px 20px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(90deg, #e1d2b6, #fff9ec 4%, #fff9ed); }
.reader-page h2 { margin: 0 14px 18px 0; font: 600 1.65rem/1.25 Georgia,serif; }
.reader-text-area { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.reader-text { height: 100%; overflow: hidden; white-space: pre-wrap; font-size: 1.35rem; line-height: 1.8; overflow-wrap: anywhere; }
.reader-tools { position: relative; z-index: 4; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 16px; padding: 12px; border-top: 1px solid #dcc9a9; }
.reader-tools button, .reader-tools a { display: grid; place-items: center; width: 40px; height: 38px; border: 1px solid #cbb590; border-radius: 9px; color: #6a4e31; background: #efe1c4; font-size: 22px; cursor: pointer; text-decoration: none; }
.reader-tools button:disabled { opacity: .35; cursor: default; }
.reader-tools a[aria-disabled="true"] { opacity: .35; cursor: default; }
.reader-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.reader-tools .reader-print-action { display: inline-flex; width: auto; min-width: 0; padding: 0 11px; gap: 7px; font: 600 .82rem/1.1 'Avenir Next', Avenir, sans-serif; white-space: nowrap; }
.reader-tools .reader-print-action svg { flex: 0 0 auto; }
.reader-count { font-size: .9rem; white-space: nowrap; }
.reading-ruler { position: absolute; left: 0; top: 0; width: 100%; height: 2.1em; font-size: 1.35rem; border-block: 1px solid #9b793b85; border-radius: 4px; background: #c8ab6650; cursor: ns-resize; touch-action: none; z-index: 3; }
.reading-ruler[hidden] { display: none; }
.library-flying-book { position: fixed; z-index: 10000; margin: 0; pointer-events: none; }

@media(max-width: 900px) { .library { width: calc(100% - 64px); } .library-books { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; } }
@media(max-width: 600px) {
  .library { width: calc(100% - 28px); padding-top: 64px; }
  .library-intro { width: 100%; padding: 32px 28px 40px; margin-bottom: 32px; }
  .library-intro p { font-size: .95rem; }
  .library-books { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; padding: 0 6px; }
}
@media(prefers-reduced-motion:reduce) { .library-book { transition: none; } }

.library-flight-veil { position:fixed; inset:0; z-index:9999; background:#33251955; backdrop-filter:blur(7px); }

/* Small, proportional ornaments belong only to the library sign. */

.library-intro h1 { font-weight: 600; color: #183852; text-shadow: 0 1px 1px #fff9e780; }

@media (max-width: 600px) { .library-intro::after { width: 40%; bottom: calc(100% - 24px); } }

/* Light only: shares the existing emblem anchor without changing its geometry. */
.library-book-sunlight { position: absolute; width: 40%; height: auto; aspect-ratio: 660 / 170; left: 50%; bottom: calc(100% - clamp(24px, 5vw, 48px)); transform: translateX(-50%); overflow: visible; pointer-events: none; z-index: -1; }
@media (max-width: 600px) { .library-book-sunlight { bottom: calc(100% - 24px); } }

/* Small parchment return sign; all decoration stays within the page ending. */
.library-bottom-nav { width: min(100%, 460px); margin: clamp(64px, 7vw, 96px) auto 0; padding-bottom: 36px; text-align: center; }
.library-bottom-nav a { position: relative; isolation: isolate; display: block; padding: 24px 65px; background: transparent; color: #69451f; font-size: .9rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.library-bottom-nav a::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20460%2074%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22p%22%3E%3Cstop%20stop-color%3D%22%23fff0cd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e8c998%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e9c777%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ad7a36%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d9ad60%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M30%209C80%202%20147%2012%20230%207C313%2012%20380%202%20430%209Q454%2011%20448%2029Q444%2037%20450%2045Q457%2065%20430%2066C362%2060%20296%2067%20230%2069C164%2067%2098%2060%2030%2066Q3%2065%2010%2045Q16%2037%2012%2029Q6%2011%2030%209Z%22%20fill%3D%22url%28%23p%29%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%221.5%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M31%2013C90%207%20155%2016%20230%2011C305%2016%20370%207%20429%2013Q449%2015%20444%2029Q440%2037%20446%2046Q451%2060%20429%2062C361%2056%20295%2063%20230%2065C165%2063%2099%2056%2031%2062Q9%2060%2014%2046Q20%2037%2016%2029Q11%2015%2031%2013Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff1cc%22%20stroke-width%3D%221%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b88743%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M58%2038C44%2023%2027%2028%2029%2039C31%2051%2044%2044%2039%2038C36%2034%2032%2039%2036%2041M58%2038Q46%2050%2052%2054M58%2038Q48%2024%2054%2021%22%2F%3E%3Cpath%20d%3D%22M402%2038C416%2023%20433%2028%20431%2039C429%2051%20416%2044%20421%2038C424%2034%20428%2039%20424%2041M402%2038Q414%2050%20408%2054M402%2038Q412%2024%20406%2021%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 5px #69441b25); }
.library-bottom-nav a:hover::before { filter: drop-shadow(0 0 6px #edbd6680); }

/* Only the Schmetterlingszug pilot: same type size and line height, full-height flowing text. */
.reader-text.reader-text-flowing { text-align: justify; text-align-last: start; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }

.reader-flowing-story .reader-page h2 { flex-shrink: 0; text-align: center; margin-inline: 0; margin-bottom: 1.8rem; }

/* Schmetterlingszug only: no repeated visible heading; following pages share one text area. */
.reader-flowing-story:not(.reader-first-story-page) .reader-page h2 { visibility: hidden; }
.reader-text.reader-text-flowing { white-space: normal; }
.reader-text-flowing > p { margin: 0; font: inherit; line-height: inherit; }
.reader-text-flowing > p + p { margin-top: .2em; }

/* Osterfeuer only: text is measured in the space above the real control bar. */
.reader-easter-fire-story .reader-text-area {
  flex: 0 0 var(--easter-fire-text-height);
  height: var(--easter-fire-text-height);
  max-height: var(--easter-fire-text-height);
  overflow: hidden;
}
.reader-easter-fire-story:not(.reader-first-story-page) .reader-page h2 { display: none; }

/* Data-driven new books: reserve the lower controls before measuring text. */
.reader-standard-story .reader-text-area {
  flex: 0 0 var(--standard-reader-text-height);
  height: var(--standard-reader-text-height);
  max-height: var(--standard-reader-text-height);
  overflow: hidden;
}
.reader-standard-story:not(.reader-first-story-page) .reader-page h2 { display: none; }

/* An overlay keeps the existing watermark image and its layout untouched. */
.reader-flowing-story .reader-watermark { position: relative; }
.reader-watermark-title { display: none; }
.reader-flowing-story:not(.reader-first-story-page) .reader-watermark-title {
  display: block; position: absolute; inset-inline: 8%; top: 18%;
  text-align: center; font: 600 2rem/1.3 Georgia, serif;
  color: #785d36; opacity: .14; pointer-events: none; overflow-wrap: normal;
}

/* Kürbisfeld only: keep its longer watermark title clearly above the cover. */
.reader-pumpkin-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 3.25%;
}
.reader-police-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
.reader-little-star-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
.reader-fire-station-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
/* Nikolausstrumpf only: its two-line title sits in the clear space above the image. */
.reader-nikolausstrumpf-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
/* Weihnachtsmann im Wald only: keep the title in the clear space above the image. */
.reader-christmas-forest-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
/* Silvester only: keep the long title in the clear space above the image. */
.reader-new-year-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
/* Schneespiel only: keep the title in the clear space above the portrait image. */
.reader-snow-wind-story:not(.reader-first-story-page) .reader-watermark-title {
  top: 5%;
}
/* Temporary animation layers only; the resting reader geometry is untouched. */
.reader.reader-staging { background: transparent; box-shadow: none; }
.reader-staging > :not(.reader-unfold) { visibility: hidden; }
.reader-unfold { position: fixed; z-index: 10; pointer-events: none; perspective: 1400px; transform-origin: top left; }
.reader-unfold-paper, .reader-unfold-leaf, .reader-unfold-inside { position: absolute; inset: 0; border-radius: 8px; }
.reader-unfold-paper, .reader-unfold-inside { background: linear-gradient(90deg, #dfcba7, #fff9ed 6%, #fff5e2); }
.reader-unfold-leaf { transform-origin: left center; transform-style: preserve-3d; }
.reader-unfold .reader-unfold-cover { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; backface-visibility: hidden; }
.reader-unfold-inside { transform: rotateY(180deg); backface-visibility: hidden; }
.reader-sparkles { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: visible; border-radius: inherit; }
.reader-sparkles span { position: absolute; color: #fff0b8; line-height: 1; opacity: 0; text-shadow: 0 0 4px #fffdf5, 0 0 10px #ffedbd, 0 0 19px #ffd06b, 0 0 29px #e79d32d9; }

/* Temporary perimeter light only: no filled overlay over the reading pages. */
.reader-turn-halo { position: absolute; inset: -2px; border: 1px solid #fff4cf; border-radius: inherit; background: transparent; opacity: 0; pointer-events: none; box-shadow: 0 0 10px 4px #fff3d8f5, 0 0 25px 9px #ffd278d6, 0 0 40px 13px #eeb25185; filter: blur(2px); }