/* Theme im Stil von "Life is Feudal: Your Own" - Pergament/Holz/Wachssiegel.
   Hinweis: es werden bewusst frei lizenzierte Schriften (Google Fonts, mit
   System-Fallback) statt der Original-Spieldateien verwendet, da diese Seite
   spaeter oeffentlich erreichbar sein soll und die Original-Fontdateien des
   Spiels nicht ohne Weiteres auf einer oeffentlichen Webseite verteilt werden
   duerfen. Farbgebung und Formensprache orientieren sich am Spiel-UI. */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  --parchment: #e9dcbb;
  --parchment-dark: #d8c69c;
  --parchment-shadow: #a88f63;
  --ink: #3b2b1a;
  --ink-soft: #5a4632;
  --wood-dark: #2b2018;
  --wood-mid: #4a3826;
  --gold: #b8912f;
  --gold-bright: #d9b654;
  --seal-red: #7a1f1f;
  --seal-red-dark: #591414;
  --danger: #8b1e1e;

  --font-display: "Cinzel", "PTF75F", Georgia, serif;
  --font-body: "EB Garamond", "OpenSans", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--wood-dark);
  background-image: url("/assets/background-tile.jpg");
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px;
}

.panel {
  border-radius: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  padding: 32px 36px;
  position: relative;
}

/* Brief/Liste, Buch: Pergament-Textur */
.panel-parchment {
  background-color: var(--parchment);
  background-image: url("/assets/parchment-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Steintafel: Stein-Textur, hellere Schrift fuer Lesbarkeit */
.panel-stone {
  background-color: #2a2a28;
  background-image:
    linear-gradient(rgba(15, 12, 10, 0.45), rgba(15, 12, 10, 0.45)),
    url("/assets/stone-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #efe6d0;
}
.panel-stone h1, .panel-stone h2, .panel-stone h3, .panel-stone h4,
.panel-stone p, .panel-stone label {
  color: #efe6d0;
}
.panel-stone h1 { border-bottom-color: rgba(239, 230, 208, 0.4); }
.panel-stone a { color: #f0d98a; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 0.5px;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  text-align: center;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

a { color: var(--seal-red-dark); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  color: var(--gold-bright);
  font-family: var(--font-display);
}

.site-header a {
  color: var(--gold-bright);
  text-decoration: none;
  font-size: 1.3rem;
}

.lang-switch button {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  padding: 4px 10px;
  margin-left: 4px;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.lang-switch button.active { background: var(--gold); color: var(--wood-dark); }

/* Karten bewusst untereinander statt nebeneinander: "repeat(auto-fit,
   minmax(...))" (CSS Grid) wird von der alten Chromium-Version im
   eingebetteten Spielfenster (Qt-WebEngine 5.9, ca. Chromium 56/61)
   offenbar nicht ausgewertet und faellt dort automatisch auf eine
   einspaltige Darstellung zurueck - im normalen Desktop-Browser stand es
   dagegen nebeneinander. Diese im Spiel entstandene Stapel-Darstellung
   gefiel besser, daher hier bewusst (und ueberall gleich, auch im
   Firefox) mit einfachem Flex-Stack nachgebaut statt mit Grid/auto-fit. */
.type-grid {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

/* Kein "gap" hier: siehe Hinweis oben - "gap" wird von derselben alten
   Chromium-Version nicht unterstuetzt, Abstand daher per margin. */
.type-card {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--gold);
  border-radius: 0;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: block;
  margin: 0 0 20px 0;
}
.type-card:last-child { margin-bottom: 0; }
.type-card h3 { margin-bottom: 8px; }
.type-card p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

.btn {
  font-family: var(--font-display);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--wood-mid);
  color: var(--wood-dark);
  padding: 10px 22px;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary {
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink-soft);
}
.btn.danger {
  background: linear-gradient(180deg, #a34141, var(--seal-red));
  color: #f4e5e5;
}

/* "Tag kopieren": eigene, immer helle Schrift mit eigenem dunklen
   Hintergrund, damit sie sowohl auf dem hellen Pergament als auch auf der
   dunklen Steintafel gleich gut lesbar ist (statt transparent + dunkler
   Schrift wie .btn.secondary, was auf Stein kaum sichtbar war). */
.btn-tag-copy {
  background: rgba(0, 0, 0, 0.4);
  color: #ece0c8;
  border: 1px solid var(--gold);
}
.btn-tag-copy:hover { background: rgba(0, 0, 0, 0.6); filter: none; }

/* Button-Look nach Spiel-Vorlage (Button_normal/hower/pressed.png):
   dunkles Kupfer-Braun mit heller Kupfer-Oberkante und fast schwarzer
   Unterkante fuer einen eingeprägten 3D-Effekt. Wird als Zusatzklasse
   verwendet (z.B. class="btn btn-game" oder class="type-card btn-game"). */
.btn-game {
  /* "background" (Shorthand) statt nur background-color, damit der
     Goldverlauf von .btn/.type-card vollstaendig ersetzt wird und nicht
     als background-image durchscheint. */
  background: #4a1c05;
  border-radius: 0;
  border-style: solid;
  border-width: 2px 1px 2px 1px;
  border-top-color: #82380c;
  border-right-color: #2a1206;
  border-bottom-color: #060504;
  border-left-color: #2a1206;
  color: #ece0c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.btn-game:hover {
  background: #58230a;
  border-top-color: #ad5112;
  filter: none;
}
.btn-game:active {
  background: #3a1504;
  border-top-color: #973f0e;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  transform: translateY(1px);
}

.type-card.btn-game h3,
.type-card.btn-game p {
  color: #ece0c8;
}
.type-card.btn-game p { opacity: 0.85; }

label { display: block; margin: 14px 0 4px; font-weight: 600; color: var(--ink-soft); }

input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid var(--parchment-shadow);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}

.toolbar {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 0;
  flex-wrap: wrap;
}
.toolbar > * { margin: 3px 8px 3px 0; }

/* Fuer Hinweistexte, die auf hellem (Pergament) UND dunklem (Stein) Panel
   gleich gut lesbar sein muessen - KEIN inline style="color:..." hierfuer
   verwenden, das wuerde die hellere Schriftfarbe von .panel-stone p (oben)
   ueberschreiben (siehe "TAG KOPIEREN"-Problem, gleiche Ursache). */
.subtle-hint { font-size: 0.85rem; color: var(--ink-soft); }
.toolbar button {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--parchment-shadow);
  background: var(--parchment);
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
}
.toolbar button.active { background: var(--gold); }

.editor {
  position: relative;
  min-height: 220px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--parchment-shadow);
  border-radius: 0;
  padding: 14px;
  font-family: var(--font-body);
  line-height: 1.5;
}
.editor:focus { outline: 2px solid var(--gold); }
.editor img { max-width: 100%; height: auto; border-radius: 0; cursor: pointer; }
.editor img.img-selected { outline: 2px dashed var(--gold); outline-offset: 2px; }

.img-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--gold-bright);
  border: 2px solid var(--wood-dark);
  border-radius: 0;
  cursor: nwse-resize;
  z-index: 5;
}

.document-content {
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 1.1rem;
}
.document-content img { max-width: 100%; border-radius: 0; margin: 8px 0; }
.document-content p { margin: 0 0 10px; }

.block-divider {
  border: none;
  border-top: 1px dashed var(--parchment-shadow);
  margin: 18px 0;
}

.seal-box {
  text-align: center;
  padding: 30px 16px;
}
.seal-box .seal-icon {
  display: block;
  margin: 0 auto 16px;
  /* Original-Aufloesung der PNG beibehalten, kein Skalieren */
  width: auto;
  height: auto;
}

.tag-box {
  margin-top: 24px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px dashed var(--parchment-shadow);
  border-radius: 0;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tag-box > * { margin: 3px 0; }
.tag-box code { font-size: 1.1rem; color: var(--seal-red-dark); }

/* Ersatz fuer "display:flex; gap:Npx" bei Aktions-Button-Reihen (siehe
   Hinweis bei .toolbar zur fehlenden gap-Unterstuetzung im Spielclient). */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}
.btn-row > * { margin: 0 10px 8px 0; }

/* Seiten-Navigation im Buch-Editor/Betrachter: wiederverwendet das
   .btn-row-Muster (kein "gap", siehe Hinweis oben), Buttons im gleichen
   Look wie die Toolbar-Buttons. */
.page-nav button {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--parchment-shadow);
  background: var(--parchment);
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
}
.panel-stone .page-nav button {
  background: rgba(239, 230, 208, 0.15);
  color: #efe6d0;
  border-color: rgba(239, 230, 208, 0.4);
}

.notice { padding: 10px 14px; border-radius: 0; margin: 12px 0; font-size: 0.95rem; }
.notice.error { background: rgba(139, 30, 30, 0.15); border: 1px solid var(--danger); color: var(--danger); }
.notice.success { background: rgba(60, 120, 40, 0.15); border: 1px solid #3c7828; color: #2d5c1e; }

/* Steintafel-Minispiel */
.tablet-encrypted {
  font-size: 1.2rem;
  letter-spacing: 1px;
  line-height: 1.8;
  padding: 16px;
  background: rgba(0, 0, 0, 0.25);
  color: #e9dcbb;
  border-radius: 0;
  font-family: "PTZ55F", serif;
}
.tablet-encrypted .decoded { color: var(--gold-bright); font-weight: 700; }

.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
.match-col { margin-right: 24px; }
.match-col:last-child { margin-right: 0; }
.match-col h4 { text-align: center; font-family: var(--font-display); }
.tile-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.tile-grid > .tile { margin: 4px; }
.tile {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239, 230, 208, 0.35);
  border-radius: 0;
  background-color: #201d1a;
  background-image:
    linear-gradient(rgba(8, 6, 5, 0.62), rgba(8, 6, 5, 0.62)),
    url("/assets/stone-bg.jpg");
  background-size: cover;
  background-position: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f4ecd8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  user-select: none;
}
.tile.selected { outline: 3px solid var(--gold-bright); }
.tile.solved {
  background-image:
    linear-gradient(rgba(35, 75, 20, 0.62), rgba(35, 75, 20, 0.62)),
    url("/assets/stone-bg.jpg");
  border-color: #8fd66a;
  cursor: default;
}
.tile.wrong-flash {
  animation: shakeTile 0.3s;
  background-image:
    linear-gradient(rgba(120, 20, 20, 0.62), rgba(120, 20, 20, 0.62)),
    url("/assets/stone-bg.jpg");
}
@keyframes shakeTile {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.progress-bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
  margin: 8px 0 4px;
}
.progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* Buch: feste Seitengroesse (gilt fuer Inhaltsseiten UND die Frontansicht/
   den Einband), Seitenverhaeltnis 1:1,414 (DIN-Papierformat-Verhaeltnis).
   Diese Pixelwerte MUESSEN mit PAGE_W/PAGE_H/PAGE_PADDING in book.js
   uebereinstimmen, da dort exakt mit diesen Massen der Seitenumbruch
   (Reflow) berechnet wird. */
.book-page-box {
  width: 340px;
  height: 481px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.book-page-box.book-page-content-box {
  background-color: var(--parchment);
  background-image: url("/assets/parchment-bg.jpg");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--parchment-shadow);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  padding: 24px;
  overflow: hidden;
  position: relative;
}
.book-page-box.book-page-blank-box {
  visibility: hidden;
}
.book-page-box.book-cover-box {
  /* Kein "display:flex" mehr hier - der Titel/Autor sitzt jetzt in
     ".book-cover-text-area", einem absolut positionierten inneren Bereich,
     der genau die im Referenzbild ("BookcoverF_b.png") blau markierte
     Flaeche abdeckt (siehe unten). Die Box selbst ist nur noch der Rahmen
     fuer das per JS eingesetzte, eingefaerbte Einband-Hintergrundbild
     ("background-image", siehe book.js applyCoverTexture). Bewusst OHNE
     eigenen Rahmen ("border") - der fotografierte Einband hat bereits einen
     gepraegten Rand, ein zusaetzlicher 1px-CSS-Rahmen sah dazu doppelt
     gemoppelt aus. */
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
}
/* Deckt exakt die in "BookcBWBL.png" blau markierte Flaeche ab (dort per
   Pixel-Analyse ausgemessen: bbox 82,10 - 329,472 von 340x481 Bildgroesse -
   siehe Prozentwerte unten), auf der Titel/Autor auf dem eingescannten
   Vorderdeckel-Foto ("book-cover-front-bw.png", aus "BookcBWf.png")
   platziert werden sollen. Nur fuer den Vorderdeckel verwendet - der
   Rueckdeckel zeigt bewusst keine Beschriftung. */
.book-cover-text-area {
  position: absolute;
  left: 24.1%;
  top: 2.1%;
  width: 72.9%;
  height: 96.3%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.book-page-content {
  font-family: var(--font-body);
  line-height: 1.5;
  width: 100%;
  height: 100%;
}
.book-page-content.editor {
  border: none;
  background: none;
  padding: 0;
  min-height: 0;
}
.book-page-content img { max-width: 100%; max-height: 300px; height: auto; }
.book-page-content p { margin: 0 0 10px; }

.book-page-number {
  position: absolute;
  bottom: 6px;
  right: 12px;
  font-size: 0.75rem;
  color: var(--ink-soft);
  opacity: 0.6;
}

/* Kein "gap" hier (siehe Hinweis oben bei .toolbar), Abstand zwischen den
   zwei Seiten einer Doppelseite per margin. Horizontales Scrollen als
   einfacher, robuster Ausweg, falls ein sehr schmales Fenster (z.B. im
   eingebetteten Spielbrowser) fuer zwei Seiten nebeneinander nicht reicht -
   bewusst keine JS-Skalierung, um keine weitere Fehlerquelle im alten
   Spielbrowser zu riskieren. */
.book-spread-wrap {
  overflow-x: auto;
  /* WICHTIG: "overflow-y: hidden" hier ist kein Stilmittel, sondern behebt
     einen CSS-Spezifikationsdetail: ist "overflow-x" auf etwas anderes als
     "visible" gesetzt (hier "auto") und "overflow-y" bleibt unangegeben
     (Standardwert "visible"), wird "overflow-y" laut Spec automatisch
     ebenfalls zu "auto" - man bekommt also, ohne es zu wollen, eine
     vertikale Scrollbar dazu, sobald der Browser waehrend der
     Umblaetter-Animation (rotierendes Blatt per Perspektive) auch nur
     minimal mehr vertikalen "scrollbaren Overflow" berechnet als die
     tatsaechliche 481px-Boxhoehe. Explizites "overflow-y: hidden" verhindert
     die Scrollbar zuverlaessig - schneidet dabei aber auch tatsaechlich
     ueberstehende Inhalte ab, siehe "padding" unten. */
  overflow-y: hidden;
  margin: 12px 0;
  /* Das rotierende Blatt braucht durch die Perspektive etwas mehr
     vertikalen Platz als die eigentlichen 481px Seitenhoehe, sonst schneidet
     "overflow-y: hidden" oben/unten sichtbar in die Umblaetter-Animation
     hinein (die Ecken der Seite wurden dabei leicht abgeschnitten). Dieses
     Polster gibt der Animation den noetigen Freiraum, ohne die eigentliche
     Doppelseiten-Darstellung zu beeinflussen (die per "align-items: center"
     in ".book-flip-overlay" zentrierte echte Doppelseite bleibt unveraendert
     481px hoch, bekommt durch das Padding nur zusaetzlichen Abstand
     oben/unten). 70px statt zunaechst 32px, da 32px beim Umblaettern immer
     noch nicht ganz ausreichte. */
  padding: 70px 0;
}
.book-spread {
  display: flex;
  align-items: flex-start;
  /* Zentriert die Doppelseite (bzw. bei Seite 1 die unsichtbare Platzhalter-
     Seite + die echte Seite) unter dem Titel - ohne diese Regel bleibt der
     ganze Doppelseiten-Block linksbuendig, auch wenn eine Seite unsichtbar
     ist, da sie trotzdem Platz beansprucht. */
  justify-content: center;
}
.book-spread > .book-page-box { margin-right: 6px; }
.book-spread > .book-page-box:last-child { margin-right: 0; }

/* 3D-Umblaetter-Optik im Lesemodus: NUR die Seite, die tatsaechlich
   umgeblaettert wird, dreht sich - nicht die ganze Doppelseite (das sah
   deplatziert aus, ein echtes Buch blaettert nie als Ganzes um).

   Fruehere Fassung: ein doppelseitiges "Blatt" mit Vorder-/Rueckseite
   (".book-flip-front"/".book-flip-back", per "backface-visibility: hidden"
   automatisch ein-/ausgeblendet je nach Drehwinkel). Das hat sich als
   unzuverlaessig herausgestellt: live per Screenshot-Debugging (mit dem
   Nutzer gemeinsam, testweise stark verlangsamter Animation +
   Debug-Umrandungen) bestaetigt, dass "backface-visibility: hidden" hier
   NICHT griff - selbst mit Vendor-Praefixen und korrigierter
   "position"-Spezifitaet blieb die Rueckseite eines rotierten Elements
   sichtbar (spiegelverkehrt), statt wie spezifiziert ausgeblendet zu werden.

   Neuer, robusterer Ansatz OHNE "backface-visibility": das Blatt dreht sich
   in zwei Phasen, der Inhalt wird per JS am Scheitelpunkt (90 Grad, wo das
   Blatt wegen der Perspektive ohnehin auf eine Haarlinie zusammenschrumpft
   und damit optisch unsichtbar ist) ausgetauscht:
     Phase 1: 0 -> 90 Grad (alter Inhalt, transition)
     [JS tauscht bei 90 Grad den Inhalt aus und springt uebergangslos auf
      -90 Grad - unsichtbar, da das Blatt bei 90/-90 Grad gleichermassen auf
      eine Linie zusammenschrumpft]
     Phase 2: -90 -> 0 Grad (neuer Inhalt, transition)
   Dadurch wird kein zweites, gegenlaeufig vorgedrehtes Element und keine
   "backface-visibility" mehr benoetigt - nur ein einzelnes, einfach
   rotierendes Element, was in allen bisher getesteten Browsern (Spiel wie
   auch Firefox) zuverlaessig funktioniert. Siehe "playPageFlip" in book.js.

   ".book-flip-track" (der direkte Elternrahmen des Blatts) ist bewusst ein
   ganz normaler, nicht-flexibler Block mit fester Breite/Hoehe, in dem das
   Blatt per fester Pixel-Position (links oder rechts) sitzt - NICHT als Kind
   eines "display:flex"-Containers (das hatte in einer frueheren Fassung zu
   Darstellungsfehlern gefuehrt). Der ".book-flip-overlay"-Aussenrahmen
   zentriert ".book-flip-track" wie ".book-spread" es fuer die echte
   Doppelseite tut. */
.book-flip-container {
  position: relative;
}
.book-flip-overlay {
  position: absolute;
  /* "top/left/right/bottom: 0" spannen sich hier automatisch ueber die
     GESAMTE Padding-Box von ".book-spread-wrap" auf (inkl. dessen 32px
     Padding oben/unten) - der Rahmen fuer absolut positionierte Kind-
     elemente ist per Spezifikation die Padding-Box des positionierten
     Elternelements, nicht dessen Content-Box. Dadurch ist die Ueberlagerung
     selbst 64px hoeher als die echte, im normalen Textfluss um "padding-top"
     nach unten verschobene Doppelseite.
     WICHTIG: "align-items: center" ist deshalb hier noetig (nicht nur
     "justify-content: center", das nur horizontal zentriert) - ohne das
     richtet sich ".book-flip-track" (feste Hoehe 481px, daher nicht vom
     Standard-"stretch" betroffen) am OBEREN Rand der jetzt 64px hoeheren
     Ueberlagerung aus, was das umblaetternde Blatt sichtbar zu hoch
     platzierte, statt auf Hoehe der echten Doppelseite. Zentriert man
     stattdessen vertikal, landet der 481px hohe Track automatisch exakt
     mittig - mit je 32px Puffer oben/unten fuer das rotierende Blatt. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* 340 + 6 + 340 = 686px - MUSS mit der Breite/dem Abstand der echten
   Doppelseite (.book-page-box / .book-spread > .book-page-box) uebereinstimmen. */
.book-flip-track {
  position: relative;
  width: 686px;
  height: 481px;
  perspective: 1800px;
}
/* "left" und "transform-origin" werden bewusst NICHT hier per Klasse
   festgelegt, sondern per Inline-Style von playPageFlip in book.js gesetzt:
   das Blatt "springt" naemlich am unsichtbaren Scheitelpunkt (90 Grad) von
   der einen Buchhaelfte auf die andere (siehe ausfuehrlicher Kommentar dort)
   - eine feste Klasse pro Richtung wuerde das nicht abbilden. */
.book-flip-leaf {
  position: absolute;
  top: 0;
  width: 340px;
  height: 481px;
  transform: rotateY(0deg);
  /* 1s pro Phase = 2s fuer die gesamte Umblaetter-Animation (Phase 1 + Phase
     2, siehe playPageFlip in book.js). */
  transition: transform 1s ease-in;
}