/* Das Buch des Chronisten: gemeinsamer Look für Menüs auf Tisch, Handy und im Kampagnen-Ersteller.
   Ledereinband, Pergamentseiten mit Mittelfalz, Tinte, rote Initialen. */
:root {
  --leather: #5a2e1c; --leather-dark: #34190e; --leather-light: #7a4428;
  --parch: #f1e2bf; --parch-dark: #e2cc9c; --parch-edge: #c9ad78;
  --ink: #3a2414; --ink-soft: #7a5634; --rubric: #9a2a16; --gilt: #c8902a;
}

/* Einband: dunkles Leder mit Prägung und goldener Linie */
.leather {
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.03) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, var(--leather-light), var(--leather) 40%, var(--leather-dark));
}

/* Eine Pergamentseite */
.page {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,250,235,.55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,80,30,.035) 0 1px, transparent 1px 3px),
    var(--parch);
  color: var(--ink);
}

/* Aufgeschlagenes Buch: zwei Seiten, Falz in der Mitte, Seitenstapel an den Rändern */
.book {
  color: var(--ink);
  background:
    linear-gradient(90deg,
      rgba(90,50,20,.28) 0, rgba(90,50,20,0) 3%,
      rgba(90,50,20,0) 45%, rgba(90,50,20,.22) 48.6%, rgba(40,20,5,.45) 50%, rgba(90,50,20,.22) 51.4%, rgba(90,50,20,0) 55%,
      rgba(90,50,20,0) 97%, rgba(90,50,20,.28) 100%),
    radial-gradient(ellipse at 25% 45%, rgba(255,250,235,.5), transparent 60%),
    radial-gradient(ellipse at 75% 45%, rgba(255,250,235,.5), transparent 60%),
    var(--parch);
  border: 12px solid var(--leather);
  border-image: linear-gradient(135deg, var(--leather-light), var(--leather) 40%, var(--leather-dark)) 1;
  box-shadow:
    inset 0 0 0 2px var(--gilt), inset 3px 0 0 rgba(0,0,0,.08), inset -3px 0 0 rgba(0,0,0,.08),
    0 3px 0 var(--parch-edge), 0 6px 0 var(--parch-dark), 0 9px 0 var(--leather-dark), 10px 14px 0 rgba(0,0,0,.55);
}
.book h2, .book h3, .book h4, .book legend {
  font-family: Georgia, "Times New Roman", serif; color: var(--rubric); letter-spacing: .5px;
}
/* Initiale am Kapitelanfang */
.book h2::first-letter { font-size: 1.6em; color: var(--rubric); text-shadow: 1px 1px 0 var(--gilt); }
.book .hint, .book small, .book .muted { color: var(--ink-soft); }
.book fieldset { border: 0; border-top: 2px solid var(--parch-edge); border-bottom: 1px dashed var(--parch-edge); }
.book input, .book select, .book textarea {
  background: rgba(255,255,255,.35); color: var(--ink); border: 0; border-bottom: 2px solid var(--ink-soft);
}
.book button { background: var(--parch-dark); color: var(--ink); border: 2px solid var(--ink-soft); }
.book button:hover:not(:disabled) { background: #ecd8a8; border-color: var(--rubric); }
.book button.primary { background: var(--rubric); color: var(--parch); border-color: #5a1a0c; }
.book button.danger { color: var(--rubric); border-color: var(--rubric); background: transparent; }
.book a { color: var(--rubric); }
.book kbd { background: var(--parch-dark); color: var(--ink); border-color: var(--ink-soft); }

/* Umblättern: neue Seite schwingt vom Falz herein */
@keyframes pageTurn {
  from { transform: perspective(900px) rotateY(-24deg); transform-origin: left center; opacity: .2; filter: brightness(.8); }
  to   { transform: perspective(900px) rotateY(0); transform-origin: left center; opacity: 1; filter: none; }
}
@keyframes bookOpen {
  from { transform: translateX(-50%) perspective(1200px) rotateX(10deg) scale(.96); opacity: 0; }
  to   { transform: translateX(-50%) perspective(1200px) rotateX(0) scale(1); opacity: 1; }
}