/* =========================================================
   Blätterbuch – animiertes Durchblättern (z. B. Chronik)
   Wird nur auf Projektseiten mit Blätterbuch eingebunden.
   ========================================================= */

.content-body:has(.blaetterbuch){ max-width:1000px; }

.blaetterbuch{
  --seitenverhaeltnis: 1000 / 707;   /* Breite / Höhe einer Einzelseite */
  margin-top:1.6em;
  max-width:980px;
  user-select:none;
  -webkit-user-select:none;
}

.blaetterbuch-buehne{
  position:relative;
  width:100%;
  padding:18px 0 26px;
  perspective:2600px;
  outline:none;
}
.blaetterbuch-buehne:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

/* Das Buch: zwei Seiten breit. Geschlossen wird es so verschoben,
   dass der Umschlag mittig steht. */
.blaetterbuch-buch{
  position:relative;
  width:100%;
  aspect-ratio:calc(2 * var(--seitenverhaeltnis));
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.45,.05,.25,1);
}
.blaetterbuch-buch.ist-vorne{ transform:translateX(-25%); }
.blaetterbuch-buch.ist-hinten{ transform:translateX(25%); }

/* Ein Blatt liegt auf der rechten Hälfte und dreht sich um den Bund. */
.blaetterbuch-blatt{
  position:absolute;
  top:0; left:50%;
  width:50%; height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.45,.05,.25,1);
  cursor:pointer;
}
.blaetterbuch-blatt.ist-umgeblaettert{ transform:rotateY(-180deg); }

.blaetterbuch-seite{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:#fff;
  overflow:hidden;
}
.blaetterbuch-seite img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.blaetterbuch-seite.rueckseite{ transform:rotateY(180deg); }

/* Schatten zum Bund hin – lässt die Doppelseite plastisch wirken */
.blaetterbuch-seite::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.blaetterbuch-seite.vorderseite::after{
  background:linear-gradient(to right, rgba(0,0,0,.22) 0, rgba(0,0,0,.06) 4%, rgba(0,0,0,0) 10%);
}
.blaetterbuch-seite.rueckseite::after{
  background:linear-gradient(to left, rgba(0,0,0,.22) 0, rgba(0,0,0,.06) 4%, rgba(0,0,0,0) 10%);
}
/* Umschläge ohne Bundschatten, dafür kräftiger Buchschatten */
.blaetterbuch-seite.umschlag::after{ background:none; }
/* Schatten unter dem Buch – je eine Fläche pro Buchhälfte */
.blaetterbuch-schatten{
  position:absolute;
  top:0; width:50%; height:100%;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
  transition:opacity .45s;
}
.blaetterbuch-schatten.links{ left:0; }
.blaetterbuch-schatten.rechts{ left:50%; }
.ist-vorne .blaetterbuch-schatten.links,
.ist-hinten .blaetterbuch-schatten.rechts{ opacity:0; transition-delay:0s; }
.blaetterbuch-schatten{ transition-delay:.45s; }

/* Steuerung */
.blaetterbuch-steuerung{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
  font-family:var(--font-main);
}
.blaetterbuch-steuerung button{
  font:inherit;
  font-size:1rem;
  font-weight:700;
  color:var(--red);
  background:#fff;
  border:0;
  border-radius:var(--radius);
  min-width:44px;
  min-height:40px;
  padding:6px 14px;
  cursor:pointer;
  transition:background .2s;
}
.blaetterbuch-steuerung button:hover{ background:#ffe3d8; }
.blaetterbuch-steuerung button:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.blaetterbuch-steuerung button:disabled{
  background:rgba(255,255,255,.3);
  color:rgba(255,255,255,.75);
  cursor:default;
}
.blaetterbuch-steuerung .blaetterbuch-auto{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.8);
  font-weight:400;
}
.blaetterbuch-steuerung .blaetterbuch-auto:hover{ background:rgba(255,255,255,.15); }
.blaetterbuch-stand{
  min-width:9em;
  text-align:center;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion: reduce){
  .blaetterbuch-buch,
  .blaetterbuch-blatt{ transition:none; }
}