/* Das offene Buch: Einleitung links, Gedicht rechts – auf der Startseite außerdem die Europakarte.
 * Die Seitenflächen sind im Bild assets/buch.jpg (1184 × 952) gemessen: links x 150–579, rechts x 588–1030, y 82–812. */
.book{position:relative;width:100%;aspect-ratio:1184/952;background:#2a1b10 url(buch.jpg) center/100% 100% no-repeat;
  border-radius:6px;container-type:inline-size;color:#2b1d0e;box-shadow:0 18px 40px rgb(0 0 0 / .28)}
/* Halbtransparente helle Schicht (#f6d2a3) unter dem Text, mit weichem Rand, damit die Papierstruktur die Schrift nicht stört */
.book{--pg-veil:rgb(246 210 163 / .62)}
.book .pg{position:absolute;top:8.6%;height:76.7%;box-sizing:border-box;padding:3.4cqw 3.3cqw 2.6cqw;overflow:auto;scrollbar-width:thin;
  font:400 1.42cqw/1.55 var(--font-display);text-shadow:0 0 .12em rgb(255 246 228 / .75);
  background:var(--pg-veil);border-radius:1.2cqw;box-shadow:0 0 1.6cqw 1.1cqw var(--pg-veil)}
.book .pg.l{left:14%;width:33.6%}
.book .pg.r{left:51.3%;width:34.4%;padding-left:3.4cqw}
.book .pg h2{font:700 2.5cqw/1.1 var(--font-display);margin:0 0 .7em;color:#2b1d0e;letter-spacing:-.005em}
.book .pg p{margin:0 0 .8em}
.book .pg .poem{white-space:normal;font-style:italic;line-height:1.6}
.book .pg .poem p{margin:0 0 1em}
.book .pg .poem-by{margin-top:.8em;font-style:normal;font-size:.9em;color:#5a3f22}
.book .pg .poem-empty{color:#6b4f30;font-style:italic;border:1px dashed rgb(90 63 34 / .45);border-radius:4px;padding:.8em 1em}
.book .pg .lang{display:flex;gap:.6em;margin:-.3em 0 .9em;font:500 .78em/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em}
.book .pg .lang button{background:none;border:0;padding:0;color:#6b4f30;cursor:pointer;font:inherit}
.book .pg .lang button[aria-pressed="true"]{color:#2b1d0e;text-decoration:underline;text-underline-offset:.25em}
.book .acts{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1.2em;align-items:center}
.book .acts button{font:600 1.05em/1 var(--font-body);border-radius:999px;padding:.7em 1.15em;cursor:pointer;border:1px solid #5a3f22;background:transparent;color:#2b1d0e;text-shadow:none}
.book .acts button.primary{background:#7a2e1c;border-color:#7a2e1c;color:#fbf3e4}
.book .acts button:hover{filter:brightness(1.08)}
.book .acts button:focus-visible,.book .lang button:focus-visible{outline:2px solid #7a2e1c;outline-offset:3px}

/* Willkommen auf den Stadtseiten: das Buch als Dialog */
.book-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:20px;background:rgb(18 12 6 / .72);backdrop-filter:blur(2px)}
.book-modal .book{width:min(1120px,calc((100vh - 40px) * 1.2437),100%)}
.book-modal .close{position:absolute;top:2.5%;right:7.5%;width:2.6em;height:2.6em;border-radius:50%;border:0;background:rgb(251 243 228 / .92);color:#2b1d0e;font:600 18px/1 var(--font-body);cursor:pointer}
@media (prefers-reduced-motion:no-preference){.book-modal{animation:bookIn .35s ease}@keyframes bookIn{from{opacity:0}to{opacity:1}}}

/* Schmale Bildschirme: die Seiten untereinander, jede mit ihrem Ausschnitt des Buchbilds */
@media (max-width:820px){
  .book.is-text{aspect-ratio:auto;background:none;box-shadow:none;display:flex;flex-direction:column;gap:14px;container-type:normal}
  .book.is-text .pg{position:static;width:auto;height:auto;min-height:0;overflow:visible;padding:30px 24px 26px;border-radius:6px;font-size:16.5px;
    background:linear-gradient(var(--pg-veil),var(--pg-veil)),url(buch.jpg) #d8c29d no-repeat;box-shadow:0 8px 22px rgb(0 0 0 / .25)}
  .book.is-text .pg.l{background-size:auto,274.7% auto;background-position:0 0,19.9% 36.9%}
  .book.is-text .pg.r{background-size:auto,267.9% auto;background-position:0 0,79.2% 36.9%}
  .book.is-text .pg h2{font-size:26px}
  .book-modal{place-items:start center;overflow:auto}
  .book-modal .book{width:100%;max-width:560px}
  .book-modal .close{position:fixed;top:12px;right:12px;z-index:2}
}