.l3dpdf {
  --l3dpdf-bg: #10131a;
  --l3dpdf-panel: rgba(255,255,255,.08);
  --l3dpdf-text: #f7f7fb;
  --l3dpdf-muted: rgba(247,247,251,.72);
  --l3dpdf-border: rgba(255,255,255,.18);
  --l3dpdf-page: #f7f3ea;
  --l3dpdf-height: 720px;
  width: 100%;
  max-width: 1180px;
  margin: 2rem auto;
  color: var(--l3dpdf-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.l3dpdf-theme-light {
  --l3dpdf-bg: #f1f3f7;
  --l3dpdf-panel: rgba(0,0,0,.06);
  --l3dpdf-text: #131722;
  --l3dpdf-muted: rgba(19,23,34,.68);
  --l3dpdf-border: rgba(0,0,0,.12);
  --l3dpdf-page: #fffaf0;
}

.l3dpdf-title {
  margin: 0;
  padding: .9rem 1.1rem;
  color: var(--l3dpdf-text);
  background: linear-gradient(135deg, var(--l3dpdf-panel), rgba(255,255,255,.03));
  border: 1px solid var(--l3dpdf-border);
  border-bottom: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.l3dpdf-title + .l3dpdf-toolbar {
  border-radius: 0;
}

.l3dpdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .75rem;
  background: linear-gradient(135deg, var(--l3dpdf-panel), rgba(255,255,255,.03));
  border: 1px solid var(--l3dpdf-border);
  border-radius: 1.25rem 1.25rem 0 0;
  backdrop-filter: blur(14px);
}

.l3dpdf-counter {
  min-width: 7.5rem;
  text-align: center;
  color: var(--l3dpdf-muted);
  font-size: .95rem;
  font-weight: 650;
}

.l3dpdf-btn,
.l3dpdf-nav {
  appearance: none;
  border: 1px solid var(--l3dpdf-border);
  color: var(--l3dpdf-text);
  background: rgba(255,255,255,.09);
  border-radius: 999px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  text-decoration: none !important;
  line-height: 1;
}

.l3dpdf-btn {
  min-width: 2.45rem;
  min-height: 2.45rem;
  padding: .65rem .9rem;
}

.l3dpdf-btn-secondary {
  font-size: .88rem;
  font-weight: 700;
}

.l3dpdf-btn:hover,
.l3dpdf-nav:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
}

.l3dpdf-btn:disabled,
.l3dpdf-nav:disabled {
  opacity: .36;
  cursor: not-allowed;
  transform: none;
}

.l3dpdf-jump-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--l3dpdf-muted);
  font-size: .9rem;
  font-weight: 650;
}

.l3dpdf-jump {
  width: 4.25rem;
  min-height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--l3dpdf-border);
  background: rgba(255,255,255,.09);
  color: var(--l3dpdf-text);
  text-align: center;
  font: inherit;
}

.l3dpdf-stage {
  position: relative;
  min-height: min(var(--l3dpdf-height), 78vh);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.6rem);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.17), transparent 28%),
    linear-gradient(145deg, var(--l3dpdf-bg), #05070b 110%);
  border: 1px solid var(--l3dpdf-border);
  border-top: 0;
  border-radius: 0 0 1.25rem 1.25rem;
  overflow: hidden;
  perspective: 2200px;
  outline: none;
}

.l3dpdf-theme-light .l3dpdf-stage {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, var(--l3dpdf-bg), #cfd5df 110%);
}

.l3dpdf-stage::before {
  content: "";
  position: absolute;
  inset: auto 10% 7% 10%;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 68%);
  filter: blur(12px);
  transform: translateZ(-40px);
  pointer-events: none;
}

.l3dpdf-no-shadow .l3dpdf-stage::before {
  display: none;
}

.l3dpdf-spread {
  position: relative;
  width: min(96%, calc((var(--l3dpdf-height) - 80px) * 1.42));
  height: min(calc(var(--l3dpdf-height) - 110px), 72vh);
  max-width: 1040px;
  min-height: 360px;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(0deg);
  transition: transform .25s ease;
  /* Gestures live on the spread, not the stage, so the side-nav buttons
     (which sit inside the stage but outside the spread) keep their click
     handlers. pan-y lets the browser scroll the page vertically while we
     capture horizontal swipes. */
  touch-action: pan-y;
}

.l3dpdf-spread:hover {
  transform: rotateX(3deg) rotateY(-1.5deg);
}

/* ----- Zoom mode -----
   Spread scales up; zoom origin is the click point (set by JS via
   --zoom-x / --zoom-y). Drag-pan adds a translate via --pan-x / --pan-y.
   Scale level is driven by JS via --zoom-scale (1.5, 2, 3, or any value
   from pinch / mouse wheel between MIN_ZOOM and MAX_ZOOM). */
.l3dpdf.is-zoomed .l3dpdf-spread,
.l3dpdf.is-zoomed .l3dpdf-spread:hover {
  transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom-scale, 2));
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  cursor: grab;
}

.l3dpdf.is-zoomed .l3dpdf-spread.is-panning {
  /* No transition while user is actively dragging — feels laggy otherwise. */
  transition: none;
  cursor: grabbing;
}

.l3dpdf.is-zoomed .l3dpdf-stage {
  /* Hide the big side-nav arrows during zoom — turning is disabled anyway. */
  cursor: zoom-out;
}

.l3dpdf.is-zoomed .l3dpdf-nav {
  opacity: 0;
  pointer-events: none;
}

.l3dpdf.is-zoomed .l3dpdf-spread {
  /* Capture all gestures (drag-pan) while zoomed. */
  touch-action: none;
}

.l3dpdf-page,
.l3dpdf-flip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.l3dpdf-page {
  background: var(--l3dpdf-page);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 20px 45px rgba(0,0,0,.34);
  backface-visibility: hidden;
}

.l3dpdf-no-shadow .l3dpdf-page {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.l3dpdf-page span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.l3dpdf-left {
  left: 0;
  border-radius: .9rem 0 0 .9rem;
  transform-origin: right center;
}

.l3dpdf-right {
  right: 0;
  border-radius: 0 .9rem .9rem 0;
  transform-origin: left center;
}

.l3dpdf-left::after,
.l3dpdf-right::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.l3dpdf-left::after {
  background: linear-gradient(to left, rgba(0,0,0,.18), transparent 18%);
}

.l3dpdf-right::after {
  background: linear-gradient(to right, rgba(0,0,0,.18), transparent 18%);
}

.l3dpdf-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 10px);
  width: 20px;
  background: linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,.18), rgba(0,0,0,.22));
  transform: translateZ(2px);
  pointer-events: none;
  opacity: .85;
}

/* Flip wrapper: 3D scene container — children faces are rendered in 3D space.
   Backface-visibility lives on each face, NOT on the wrapper. */
.l3dpdf-flip {
  display: none;
  z-index: 10;
  transform-style: preserve-3d;
}

.l3dpdf-flip-next {
  right: 0;
  border-radius: 0 .9rem .9rem 0;
  transform-origin: left center;
}

.l3dpdf-flip-prev {
  left: 0;
  border-radius: .9rem 0 0 .9rem;
  transform-origin: right center;
}

/* Each flip face fills the wrapper. Front faces viewer at rotateY(0);
   back is pre-rotated 180° so when wrapper hits 180°, back ends up correctly
   oriented and visible. */
.l3dpdf-flip .l3dpdf-face {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--l3dpdf-page);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 20px 45px rgba(0,0,0,.34);
  backface-visibility: hidden;
  border-radius: inherit;
}

.l3dpdf-no-shadow .l3dpdf-flip .l3dpdf-face {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.l3dpdf-flip .l3dpdf-face-back {
  transform: rotateY(180deg);
}

.l3dpdf.is-turning-next .l3dpdf-flip-next {
  display: block;
  animation: l3dpdfNext .62s cubic-bezier(.2,.7,.2,1) forwards;
}

.l3dpdf.is-turning-prev .l3dpdf-flip-prev {
  display: block;
  animation: l3dpdfPrev .62s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes l3dpdfNext {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  42% { filter: brightness(.85); }
  100% { transform: rotateY(-178deg); filter: brightness(.95); }
}

@keyframes l3dpdfPrev {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  42% { filter: brightness(.85); }
  100% { transform: rotateY(178deg); filter: brightness(.95); }
}

.l3dpdf-nav {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 3.1rem;
  height: 3.1rem;
  font-size: 2rem;
  display: grid;
  place-items: center;
}

.l3dpdf-nav-prev { left: clamp(.5rem, 2vw, 1.25rem); }
.l3dpdf-nav-next { right: clamp(.5rem, 2vw, 1.25rem); }

.l3dpdf-error {
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  border: 1px solid rgba(185, 28, 28, .3);
  background: rgba(185, 28, 28, .08);
  color: #991b1b;
}

.l3dpdf.is-fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: var(--l3dpdf-bg);
}

.l3dpdf.is-fullscreen .l3dpdf-stage {
  min-height: calc(100vh - 74px);
  border-radius: 0;
}

.l3dpdf.is-fullscreen .l3dpdf-toolbar,
.l3dpdf.is-fullscreen .l3dpdf-title {
  border-radius: 0;
}

@media (max-width: 760px) {
  .l3dpdf-toolbar {
    flex-wrap: wrap;
  }

  .l3dpdf-stage {
    padding: 1rem .7rem;
  }

  .l3dpdf-spread {
    width: min(94vw, calc((var(--l3dpdf-height) - 80px) * .72));
    min-height: 320px;
  }

  .l3dpdf-page,
  .l3dpdf-flip {
    width: 100%;
  }

  .l3dpdf-left,
  .l3dpdf-spine {
    display: none;
  }

  .l3dpdf-right,
  .l3dpdf-flip-next {
    right: 0;
    left: 0;
    border-radius: .9rem;
  }

  .l3dpdf-flip-prev {
    left: 0;
    border-radius: .9rem;
  }

  .l3dpdf-nav {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1.65rem;
  }

  /* ----- Mobile animation: fast horizontal slide -----
     Desktop flip animations rely on rotateY + backface-visibility:hidden,
     which makes the page invisible past 90° — pointless in single-page mode
     and causes a perceived freeze. Override every animation mode with a
     short slide so the *incoming* page (set by JS in single-mode) glides in. */
  .l3dpdf .l3dpdf-flip {
    transform-origin: center center !important;
  }

  .l3dpdf .l3dpdf-flip .l3dpdf-face {
    box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
    filter: none !important;
    backface-visibility: visible !important;
  }

  /* On mobile the slide only uses the front face; hide the back to avoid
     any 3D rendering oddities during the translate animation. */
  .l3dpdf .l3dpdf-face-back {
    display: none !important;
  }

  .l3dpdf .l3dpdf-flip span::after {
    display: none !important;
  }

  .l3dpdf .l3dpdf-spread,
  .l3dpdf .l3dpdf-spread:hover {
    transform: rotateX(0deg) rotateY(0deg) !important;
  }

  .l3dpdf.is-turning-next .l3dpdf-flip-next,
  .l3dpdf[data-l3dpdf-animation="curl"].is-turning-next .l3dpdf-flip-next,
  .l3dpdf[data-l3dpdf-animation="swing"].is-turning-next .l3dpdf-flip-next,
  .l3dpdf[data-l3dpdf-animation="fade3d"].is-turning-next .l3dpdf-flip-next {
    animation: l3dpdfMobileSlideNext .28s cubic-bezier(.2, .7, .2, 1) forwards !important;
  }

  .l3dpdf.is-turning-prev .l3dpdf-flip-prev,
  .l3dpdf[data-l3dpdf-animation="curl"].is-turning-prev .l3dpdf-flip-prev,
  .l3dpdf[data-l3dpdf-animation="swing"].is-turning-prev .l3dpdf-flip-prev,
  .l3dpdf[data-l3dpdf-animation="fade3d"].is-turning-prev .l3dpdf-flip-prev {
    animation: l3dpdfMobileSlidePrev .28s cubic-bezier(.2, .7, .2, 1) forwards !important;
  }
}

@keyframes l3dpdfMobileSlideNext {
  0%   { transform: translateX(100%); opacity: .85; }
  100% { transform: translateX(0);    opacity: 1; }
}

@keyframes l3dpdfMobileSlidePrev {
  0%   { transform: translateX(-100%); opacity: .85; }
  100% { transform: translateX(0);     opacity: 1; }
}

/* ============================================================
   Animation: curl — paper-peel mit Z-Tiefe und Schattenkurve
   ============================================================ */
.l3dpdf[data-l3dpdf-animation="curl"] .l3dpdf-flip .l3dpdf-face {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), -14px 24px 60px rgba(0,0,0,.55);
}

.l3dpdf[data-l3dpdf-animation="curl"] .l3dpdf-flip span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 65%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  pointer-events: none;
}

.l3dpdf[data-l3dpdf-animation="curl"].is-turning-next .l3dpdf-flip-next {
  animation: l3dpdfCurlNext .92s cubic-bezier(.45,.05,.25,1) forwards;
}

.l3dpdf[data-l3dpdf-animation="curl"].is-turning-prev .l3dpdf-flip-prev {
  animation: l3dpdfCurlPrev .92s cubic-bezier(.45,.05,.25,1) forwards;
}

.l3dpdf[data-l3dpdf-animation="curl"].is-turning-next .l3dpdf-flip-next span::after,
.l3dpdf[data-l3dpdf-animation="curl"].is-turning-prev .l3dpdf-flip-prev span::after {
  animation: l3dpdfCurlShade .92s ease-in-out forwards;
}

@keyframes l3dpdfCurlNext {
  0%   { transform: rotateY(0deg)    translateZ(0)    rotateX(0deg);  }
  35%  { transform: rotateY(-65deg)  translateZ(55px) rotateX(7deg);  }
  62%  { transform: rotateY(-118deg) translateZ(28px) rotateX(-3deg); }
  100% { transform: rotateY(-178deg) translateZ(0)    rotateX(0deg);  }
}

@keyframes l3dpdfCurlPrev {
  0%   { transform: rotateY(0deg)    translateZ(0)    rotateX(0deg);  }
  35%  { transform: rotateY(65deg)   translateZ(55px) rotateX(7deg);  }
  62%  { transform: rotateY(118deg)  translateZ(28px) rotateX(-3deg); }
  100% { transform: rotateY(178deg)  translateZ(0)    rotateX(0deg);  }
}

@keyframes l3dpdfCurlShade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   Animation: swing — federnd schwingende Spread + Page-Scale
   ============================================================ */
.l3dpdf[data-l3dpdf-animation="swing"] .l3dpdf-spread {
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

.l3dpdf[data-l3dpdf-animation="swing"].is-turning-next .l3dpdf-spread {
  transform: rotateX(4deg) rotateY(-7deg) translateY(-6px);
}

.l3dpdf[data-l3dpdf-animation="swing"].is-turning-prev .l3dpdf-spread {
  transform: rotateX(4deg) rotateY(7deg) translateY(-6px);
}

.l3dpdf[data-l3dpdf-animation="swing"].is-turning-next .l3dpdf-flip-next {
  animation: l3dpdfSwingNext .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.l3dpdf[data-l3dpdf-animation="swing"].is-turning-prev .l3dpdf-flip-prev {
  animation: l3dpdfSwingPrev .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes l3dpdfSwingNext {
  0%   { transform: rotateY(0deg)    scale(1);    filter: brightness(1);   }
  55%  { transform: rotateY(-95deg)  scale(1.04); filter: brightness(.82); }
  100% { transform: rotateY(-178deg) scale(1);    filter: brightness(.95); }
}

@keyframes l3dpdfSwingPrev {
  0%   { transform: rotateY(0deg)   scale(1);    filter: brightness(1);   }
  55%  { transform: rotateY(95deg)  scale(1.04); filter: brightness(.82); }
  100% { transform: rotateY(178deg) scale(1);    filter: brightness(.95); }
}

/* ============================================================
   Animation: fade3d — cinematic lift, blur und auflösen
   ============================================================ */
.l3dpdf[data-l3dpdf-animation="fade3d"] .l3dpdf-flip .l3dpdf-face {
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.5));
}

.l3dpdf[data-l3dpdf-animation="fade3d"].is-turning-next .l3dpdf-flip-next {
  animation: l3dpdfFade3dNext .78s cubic-bezier(.7, 0, .3, 1) forwards;
}

.l3dpdf[data-l3dpdf-animation="fade3d"].is-turning-prev .l3dpdf-flip-prev {
  animation: l3dpdfFade3dPrev .78s cubic-bezier(.7, 0, .3, 1) forwards;
}

@keyframes l3dpdfFade3dNext {
  0%   { transform: rotateY(0deg)    translateZ(0)    scale(1);    opacity: 1;   filter: blur(0); }
  45%  { transform: rotateY(-92deg)  translateZ(180px) scale(.94); opacity: 1;   filter: blur(.6px); }
  100% { transform: rotateY(-178deg) translateZ(0)    scale(1);    opacity: .15; filter: blur(2.5px); }
}

@keyframes l3dpdfFade3dPrev {
  0%   { transform: rotateY(0deg)   translateZ(0)    scale(1);    opacity: 1;   filter: blur(0); }
  45%  { transform: rotateY(92deg)  translateZ(180px) scale(.94); opacity: 1;   filter: blur(.6px); }
  100% { transform: rotateY(178deg) translateZ(0)    scale(1);    opacity: .15; filter: blur(2.5px); }
}

/* ============================================================
   Accessibility: prefers-reduced-motion
   Animations bleiben funktional, sind aber massiv verkürzt.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .l3dpdf .l3dpdf-flip {
    animation-duration: 0.18s !important;
  }
  .l3dpdf .l3dpdf-spread {
    transition-duration: 0.1s !important;
    transform: rotateX(0) rotateY(0) !important;
  }
  .l3dpdf .l3dpdf-spread:hover {
    transform: rotateX(0) rotateY(0) !important;
  }
}