/* Shavaland Blätter-Buch – gemeinsam genutzt von Landingpage und Probeseite */
@font-face{font-family:'Pacifico';src:url('/fonts/Pacifico.ttf') format('truetype');font-display:swap;}
.dCoverTitle{position:absolute;left:0;right:0;top:20%;transform:translateY(-50%);font-family:'Pacifico',cursive;color:#e0d6fa;line-height:1.25;text-align:center;white-space:nowrap;pointer-events:none;z-index:1;}
.book-frame-outer{max-width:620px;margin:0 auto;}
/* Leichte Aufsicht von oben: Perspektive für die Neigung des ganzen Buchs */
.book-frame{position:relative;display:flex;align-items:center;perspective:1500px;perspective-origin:50% 25%;}
/* #dBook trägt Neigung, Perspektive fürs Umblättern und die Buch-Transformation.
   --thL/--thR: aktuelle Stapeldicke links/rechts in px, --stackMax: maximale Dicke */
#dBook{--stackMax:9;--thL:1;--thR:9;position:relative;width:100%;perspective:2200px;transform-origin:50% 50%;touch-action:pan-y;-webkit-user-select:none;user-select:none;pointer-events:none;}
#dL,#dR,.dBoard{pointer-events:auto;}
.book-glow{position:absolute;inset:-30px;border-radius:24px;background:radial-gradient(ellipse,rgba(255,180,50,0.07) 0%,transparent 70%);pointer-events:none;animation:haloBreath 3s ease-in-out infinite;}
#dBook::before{content:'';position:absolute;inset:-18% -14% -26% -14%;pointer-events:none;transition:transform .9s cubic-bezier(.3,.1,.2,1);background:radial-gradient(ellipse 58% 52% at 47% 42%,rgba(255,214,150,.13) 0%,rgba(255,190,110,.06) 38%,rgba(255,170,80,.02) 62%,transparent 78%);}
/* Lichtkegel folgt dem sichtbaren Deckel (25% der Buchbreite = 19.5% der Kegelbreite) */
#dBook[data-pool="front"]::before{transform:translateX(19.5%);}
#dBook[data-pool="back"]::before{transform:translateX(-19.5%);}

/* ── Hardcover-Deckel: matt laminierte Pappe, 5px Überstand, Licht von oben links ── */
.dBoard{position:absolute;top:-5px;bottom:-8px;transition:transform var(--boardMs,.7s) cubic-bezier(.3,.1,.2,1);}
#dBoardL{left:calc(-5px - var(--stackMax) * 1px);right:calc(50% - 10px);transform:translateX(calc((var(--stackMax) - var(--thL)) * 1px));}
#dBoardR{right:calc(-5px - var(--stackMax) * 1px);left:calc(50% - 10px);transform:translateX(calc((var(--thR) - var(--stackMax)) * 1px));}
.dBoard,.dBoardFace{
  background:
    radial-gradient(130% 100% at 15% 0%,rgba(255,255,255,.075) 0%,transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.66'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>") 0 0/240px 240px,
    linear-gradient(160deg,#27345e 0%,#19234a 50%,#111a37 100%);}
.dBoard{
  box-shadow:
    inset 1px 1px 0 rgba(255,236,190,.28),
    inset 0 2px 3px -1px rgba(255,236,190,.1),
    inset -1px -1px 0 rgba(0,0,0,.6),
    0 1px 1px rgba(0,0,0,.75),
    0 3px 5px rgba(0,0,0,.55),
    12px 20px 34px rgba(0,0,0,.55),
    26px 44px 80px rgba(0,0,0,.4);}
.dBoardFace{box-shadow:inset 1px 1px 0 rgba(255,255,255,.17),inset -1px -1px 0 rgba(0,0,0,.6);}
.dLookL{border-radius:4px 1px 1px 4px;}
.dLookR{border-radius:1px 4px 4px 1px;}
/* Sichtbare Unterkante der Pappe – in jedem Zustand gleich.
   Der helle Papierblock, der früher nur am geschlossenen Buch unten zu sehen war,
   ist raus: Er verschwand beim Aufschlagen schlagartig und tauchte beim Zuklappen
   genauso plötzlich wieder auf. */
.dBoard::after{content:'';position:absolute;left:3px;right:3px;top:calc(100% - 1px);height:3px;background:linear-gradient(#0b1124,#05080f);border-radius:0 0 3px 3px;pointer-events:none;}
/* Außenseite des Deckels (geschlossen): Cover randabfallend + Gelenkfalz */
.dBoardImg{display:none;position:absolute;inset:0;border-radius:inherit;overflow:hidden;background-repeat:no-repeat;}
.dBoardImg::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(128deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,transparent 45%,rgba(0,0,0,.08) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.66'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");background-size:auto,240px 240px;mix-blend-mode:soft-light;}
#dBook.st-front #dBoardR .dBoardImg,#dBook.st-back #dBoardL .dBoardImg{display:block;}
.dBoardImg::after{content:'';position:absolute;top:0;bottom:0;width:7px;pointer-events:none;z-index:2;}
#dBoardR .dBoardImg::after{left:16px;background:linear-gradient(to right,rgba(0,0,0,.32),rgba(255,255,255,.14) 60%,transparent);}
#dBoardL .dBoardImg::after{right:16px;background:linear-gradient(to left,rgba(0,0,0,.32),rgba(255,255,255,.14) 60%,transparent);}

/* ── Buchblock ── */
#dPages{position:relative;display:flex;width:100%;aspect-ratio:2/1;}
#dL,#dR{position:relative;width:50%;height:100%;flex-shrink:0;background-color:#f8f4ec;background-repeat:no-repeat;
  box-shadow:0 0 0 .5px rgba(60,45,25,.45),0 0 3px rgba(0,0,0,.55);}
#dL{border-radius:1px 0 0 1px;}
#dR{border-radius:0 1px 1px 0;}
/* Bundsteg: weicher, nicht-linearer Verlauf ~40-60px, zur Mitte deutlich dunkler */
#dL::after,#dR::after{content:'';position:absolute;top:0;bottom:0;width:clamp(28px,17%,62px);pointer-events:none;z-index:3;}
#dL::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.5) 0%,rgba(0,0,0,.33) 7%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.025) 70%,transparent 100%);}
#dR::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.5) 0%,rgba(0,0,0,.33) 7%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.025) 70%,transparent 100%);}
/* Wölbung: Seite hebt sich aus dem Bund, fällt zur Außenkante leicht ab */
#dL::before,#dR::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;}
#dL::before{background:radial-gradient(ellipse 70% 55% at 30% 12%,rgba(255,252,240,.13),rgba(255,252,240,.04) 45%,transparent 70%),linear-gradient(to right,rgba(0,0,0,.12) 0%,rgba(0,0,0,.03) 9%,transparent 22%,rgba(255,248,230,.08) 62%,rgba(255,248,230,.02) 80%,transparent 88%),linear-gradient(to bottom,transparent 55%,rgba(40,25,10,.05));}
#dR::before{background:radial-gradient(ellipse 60% 45% at 22% 8%,rgba(255,252,240,.07),transparent 65%),linear-gradient(to left,rgba(0,0,0,.12) 0%,rgba(0,0,0,.03) 9%,transparent 22%,rgba(255,248,230,.05) 62%,rgba(255,248,230,.015) 80%,transparent 88%),linear-gradient(to bottom,rgba(20,15,40,.02),rgba(40,25,10,.07));}
/* Falz in der Mitte: keine Leiste, nur eine weiche Kerbe */
#dSpine{position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:rgba(0,0,0,.38);box-shadow:0 0 5px 2px rgba(0,0,0,.3);z-index:10;pointer-events:none;}

/* ── Seitenstapel: Dicke wandert mit dem Lesefortschritt ── */
.dStack,.dStackB{position:absolute;pointer-events:none;z-index:1;transition:transform var(--boardMs,.7s) cubic-bezier(.3,.1,.2,1);}
.dStack{top:0;bottom:0;width:calc(var(--stackMax) * 1px);
  background:
    repeating-linear-gradient(to bottom,rgba(105,82,50,.30) 0 .5px,transparent .5px 1.7px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.45) 0 .6px,transparent .6px 2.9px),
    repeating-linear-gradient(to bottom,rgba(90,70,40,.16) 0 1px,transparent 1px 4.3px),
    repeating-linear-gradient(to bottom,rgba(150,125,85,.12) 0 1.3px,transparent 1.3px 7.1px),
    var(--stackTone);}
.dStackL{left:calc(var(--stackMax) * -1px);transform-origin:100% 50%;transform:scaleX(calc(var(--thL) / var(--stackMax)));border-radius:2px 0 0 2px;
  --stackTone:linear-gradient(to left,#f3ecdc,#ebe2cc 45%,#ddd0b3 85%,#c7b99a);box-shadow:-1px 0 1px rgba(0,0,0,.4);}
.dStackR{left:100%;transform-origin:0 50%;transform:scaleX(calc(var(--thR) / var(--stackMax)));border-radius:0 2px 2px 0;
  --stackTone:linear-gradient(to right,#e6ddc8,#d9ceb4 45%,#c6b898 85%,#a89a7c);box-shadow:1px 1px 2px rgba(0,0,0,.55);}
/* Unterkante des Blocks: Keil, an der Außenkante am dicksten, im Bund null */
.dStackB{top:100%;width:50%;height:calc(var(--stackMax) * .55px);transform-origin:50% 0;
  background:repeating-linear-gradient(to bottom,rgba(105,82,50,.35) 0 .5px,transparent .5px 1.5px),linear-gradient(#e9e0cb,#cdbf9f);}
.dStackBL{left:0;clip-path:polygon(0 0,100% 0,0 100%);transform:scaleY(calc(var(--thL) / var(--stackMax)));}
.dStackBR{left:50%;clip-path:polygon(0 0,100% 0,100% 100%);transform:scaleY(calc(var(--thR) / var(--stackMax)));}

/* Dynamische Schatten auf den darunterliegenden Seiten (nur opacity/transform) */
.dShadeWrap{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;pointer-events:none;z-index:5;}
#dShadeWrapL{left:0;}#dShadeWrapR{right:0;}
.dPaper{position:absolute;top:0;bottom:0;width:50%;z-index:4;pointer-events:none;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .19 0 0 0 .5 -.2'/></filter><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='1' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .16 0 0 0 1 -.42'/></filter><rect width='600' height='600' filter='url(%23m)'/><rect width='600' height='600' filter='url(%23g)'/></svg>"),linear-gradient(#fbf6ea,#f6efdf);background-size:600px 600px,auto;opacity:.38;}
.dPaperL{left:0;}.dPaperR{right:0;}
.dAmb{position:absolute;inset:0;background:#000;opacity:0;}
.dCast{position:absolute;top:0;bottom:0;width:45%;opacity:0;}
#dShadeWrapR .dCast{left:0;transform-origin:0 50%;background:linear-gradient(to right,rgba(0,0,0,.62),rgba(0,0,0,.18) 40%,transparent);}
#dShadeWrapL .dCast{right:0;transform-origin:100% 50%;background:linear-gradient(to left,rgba(0,0,0,.62),rgba(0,0,0,.18) 40%,transparent);}

/* Geschlossene Zustände und ausgeblendete Hälften während Deckel-Animationen */
#dBook.st-front #dL,#dBook.st-front #dR,#dBook.st-front #dBoardL,#dBook.st-front #dShadeWrapL,#dBook.st-front #dShadeWrapR,#dBook.st-front #dSpine,#dBook.st-front .dStack,#dBook.st-front .dStackB,#dBook.st-front .dPaper,
#dBook.st-back #dL,#dBook.st-back #dR,#dBook.st-back #dBoardR,#dBook.st-back #dShadeWrapL,#dBook.st-back #dShadeWrapR,#dBook.st-back #dSpine,#dBook.st-back .dStack,#dBook.st-back .dStackB,#dBook.st-back .dPaper,
#dBook.hideL #dL,#dBook.hideL #dBoardL,#dBook.hideL #dShadeWrapL,#dBook.hideL #dSpine,#dBook.hideL .dStackL,#dBook.hideL .dStackBL,#dBook.hideL .dPaperL,
#dBook.hideR #dR,#dBook.hideR #dBoardR,#dBook.hideR #dShadeWrapR,#dBook.hideR #dSpine,#dBook.hideR .dStackR,#dBook.hideR .dStackBR,#dBook.hideR .dPaperR{visibility:hidden;}

/* Umblätternde Seite: 4 verschachtelte Segmente ergeben eine weiche Papierwölbung */
#dFlap{display:none;position:absolute;top:0;bottom:0;z-index:30;pointer-events:none;transform-style:preserve-3d;}
#dFlap.side-r{left:50%;right:0;transform-origin:0 50%;}
#dFlap.side-l{left:0;right:50%;transform-origin:100% 50%;}
.dSeg{position:absolute;top:0;bottom:0;transform-style:preserve-3d;}
#dFlap.side-r .dSeg0{left:0;width:25%;}
#dFlap.side-l .dSeg0{right:0;width:25%;}
#dFlap.side-r .dSeg .dSeg{left:calc(100% - .5px);width:100%;transform-origin:0 50%;}
#dFlap.side-l .dSeg .dSeg{right:calc(100% - .5px);width:100%;transform-origin:100% 50%;}
.dFace{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.dFace.dBack{transform:rotateY(180deg);}
.dFaceImg{position:absolute;inset:0;background-color:#f8f4ec;background-repeat:no-repeat;}
/* Durchscheinende Rückseite: gespiegelt, nur ein Hauch */
.dThru{position:absolute;inset:0;background-repeat:no-repeat;transform:scaleX(-1);opacity:0;pointer-events:none;}
.dShade,.dHi,.dGutter{position:absolute;top:0;bottom:0;pointer-events:none;}
.dShade,.dHi{left:0;right:0;opacity:0;z-index:3;}
.dShade{background:#0d0906;}
.dHi{background:linear-gradient(150deg,rgba(255,251,238,.95),rgba(255,251,238,.4));}
.dGutter{width:64%;z-index:2;}
#dFlap.side-r .dFront>.dGutter,#dFlap.side-l .dBack>.dGutter{left:0;background:linear-gradient(to right,rgba(0,0,0,.42),rgba(0,0,0,.14) 25%,rgba(0,0,0,.04) 60%,transparent);}
#dFlap.side-r .dBack>.dGutter,#dFlap.side-l .dFront>.dGutter{right:0;background:linear-gradient(to left,rgba(0,0,0,.42),rgba(0,0,0,.14) 25%,rgba(0,0,0,.04) 60%,transparent);}

/* Deckel als umklappendes Brett: gleiche Geometrie wie die statischen Deckel */
#dFlap.board{top:-5px;bottom:-8px;}
#dFlap.board.side-r{left:calc(50% - 10px);right:calc(-5px - var(--thR) * 1px);transform-origin:10px 50%;}
#dFlap.board.side-l{left:calc(-5px - var(--thL) * 1px);right:calc(50% - 10px);transform-origin:calc(100% - 10px) 50%;}
#dFlap.board .dSeg0{left:0;right:0;width:auto;}
#dFlap.board .dSeg .dSeg{display:none;}
#dFlap.board .dGutter,#dFlap.board .dThru{display:none;}
#dFlap.board .dShade{background:#05070f;}
/* Außenseite: Cover randabfallend */
#dFlap.board .dOut .dFaceImg{inset:0;border-radius:inherit;}
#dFlap.board.side-r .dFront.dOut .dFaceImg::after,#dFlap.board.side-l .dBack.dOut .dFaceImg::after{content:'';position:absolute;top:0;bottom:0;left:16px;width:7px;z-index:2;background:linear-gradient(to right,rgba(0,0,0,.32),rgba(255,255,255,.14) 60%,transparent);}
#dFlap.board.side-r .dBack.dOut .dFaceImg::after,#dFlap.board.side-l .dFront.dOut .dFaceImg::after{content:'';position:absolute;top:0;bottom:0;right:16px;width:7px;z-index:2;background:linear-gradient(to left,rgba(0,0,0,.32),rgba(255,255,255,.14) 60%,transparent);}
/* Innenseite: Seite auf der Pappe, Überstand wie beim statischen Deckel */
#dFlap.board .dIn .dFaceImg{top:5px;bottom:8px;}
#dFlap.board.side-r .dFront.dIn .dFaceImg{left:10px;right:calc(5px + var(--thR) * 1px);}
#dFlap.board.side-r .dBack.dIn .dFaceImg{left:calc(5px + var(--thR) * 1px);right:10px;}
#dFlap.board.side-l .dFront.dIn .dFaceImg{left:calc(5px + var(--thL) * 1px);right:10px;}
#dFlap.board.side-l .dBack.dIn .dFaceImg{left:10px;right:calc(5px + var(--thL) * 1px);}
/* Rückseite landet auf der anderen Buchseite: Überstand auf deren Stapeldicke kürzen */
#dFlap.board.side-r .dBack{clip-path:inset(0 0 0 max(0px,calc((var(--thR) - var(--thL)) * 1px)));}
#dFlap.board.side-l .dBack{clip-path:inset(0 max(0px,calc((var(--thL) - var(--thR)) * 1px)) 0 0);}
/* Fullscreen button */
#dFsBtn{position:absolute;bottom:10px;right:12px;z-index:25;width:32px;height:32px;border-radius:7px;background:rgba(0,0,0,.45);border:1px solid rgba(255,221,160,.3);color:rgba(255,221,160,.65);font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(4px);}
#dFsBtn:hover{background:rgba(0,0,0,.7);color:#ffe066;border-color:rgba(255,221,160,.6);}
.demo-single #dFsBtn{display:none;}
/* Fullscreen mode */
.book-frame-outer:fullscreen,.book-frame-outer:-webkit-full-screen{background:#050c1a;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 40px;max-width:100vw!important;width:100%;height:100%;}
.book-frame-outer:fullscreen .book-frame,.book-frame-outer:-webkit-full-screen .book-frame{width:min(92vw,calc(72vh * 1.5));}
.book-frame-outer:fullscreen .book-nav,.book-frame-outer:-webkit-full-screen .book-nav{margin-top:18px;}
.book-frame-outer:fullscreen .sinfo-close,.book-frame-outer:-webkit-full-screen .sinfo-close{top:16px;}
.book-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:48px;}
.book-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,200,80,0.06);border:1.5px solid rgba(255,200,80,0.22);color:rgba(255,220,80,0.75);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}
.book-btn:hover{background:rgba(255,200,80,0.16);border-color:rgba(255,200,80,0.55);color:#ffe066;box-shadow:0 0 20px rgba(255,180,0,0.32);}
.page-dots{display:flex;gap:8px;}
.page-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,220,80,0.2);cursor:pointer;transition:all 0.3s;}
.page-dot.active{background:#ffe066;box-shadow:0 0 10px rgba(255,200,0,0.7);transform:scale(1.3);}
.page-counter{color:rgba(232,224,208,0.35);font-family:'Baloo 2',cursive;font-size:0.85rem;font-weight:700;white-space:nowrap;}
@media(max-width:480px){.book-nav{gap:10px;}.page-dots{gap:5px;}}
@keyframes haloBreath{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}

/* Einmaliges Vorzeichnen nach dem Laden (siehe dWarmup in flipbook.js):
   alle Flächen, die erst beim Aufschlagen sichtbar werden, für zwei Bilder
   zeigen – bei einem Prozent Deckkraft, also für das Auge nicht wahrnehmbar. */
#dBook.warm{opacity:.01;}
#dBook.warm #dL,#dBook.warm #dR,#dBook.warm #dBoardL,#dBook.warm #dBoardR,
#dBook.warm #dSpine,#dBook.warm .dStack,#dBook.warm .dStackB,
#dBook.warm .dPaper,#dBook.warm .dShadeWrap{visibility:visible!important;}
#dBook.warm #dFlap{display:block!important;}