/* Buchseiten + Buch-Betrachter. Maße der Buchseiten in „cqw“ (1 cqw = 1 % der Seitenbreite), damit Bildschirm und Druck gleich aussehen. */

/* ---------- Seite (21 × 28 cm hoch) ---------- */
.pg{position:relative;overflow:hidden;container-type:inline-size;background:#fbf5ea;aspect-ratio:3/4;color:#1c2340}
.pg img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg img.sp{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.pg img.sp.l{left:0}.pg img.sp.r{left:-100%}
/* gedrehte Doppelseite: Hochformat-Bild (2:3) liegt um 90° gedreht über beiden Seiten */
.pg img.sp.hoch{width:133.334%;height:150%;transform-origin:0 0;transform:rotate(-90deg) translateX(-100%)}
.pg img.blur{filter:blur(var(--bl,14px)) saturate(1.15);transform:scale(1.07)}
.pg img.klar{transition:filter 1.2s ease,transform 1.2s ease}
/* Text steht in einer Wolke im Bild (gleiche Maße wie textFeld() in src/pdf.js; Form aus tools/wolke.mjs) */
.tx{--k:1;position:absolute;left:1.5cqw;top:2cqw;width:97cqw;padding:9cqw 9.5cqw;z-index:2;background:url(/img/wolke.png) 0 0/100% 100% no-repeat;filter:drop-shadow(0 .8cqw 1.2cqw rgba(30,50,90,.16))}
.tx .ort{font:700 2.3cqw/1 Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e2503c;margin-bottom:2.2cqw}
.tx h2{font:400 calc(8.2cqw*min(1,var(--k) + .1))/.98 Bangers,Outfit,sans-serif;letter-spacing:.01em;color:#1f4f96;margin:0 0 1.6cqw}
.tx p{font-size:calc(3.75cqw*var(--k));line-height:1.45;margin:0}
.tx .gag{margin-top:1.8cqw;border-left:.7cqw solid #ffc93c;padding-left:2.7cqw;font-style:italic;font-size:calc(3.45cqw*var(--k));line-height:1.45;color:#2f6db5}
.ribbon{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;z-index:2;background:rgba(20,27,54,.86);color:#fff;border-radius:2.6cqw;padding:2.4cqw 3cqw;font-size:max(9.5px,2.9cqw);line-height:1.35}
.ribbon b{display:inline-block;background:#ffc93c;color:#1c2340;border-radius:99px;padding:0 1.8cqw;margin-right:1.2cqw;font-size:.86em;font-weight:700}
.chip{position:absolute;left:50%;bottom:5cqw;transform:translateX(-50%);z-index:2;white-space:nowrap;background:rgba(20,27,54,.86);color:#fff;border-radius:99px;padding:1.8cqw 3.4cqw;font-size:max(10px,2.8cqw);display:flex;align-items:center;gap:1.8cqw}
.chip .dot{width:1.8cqw;height:1.8cqw;min-width:6px;min-height:6px;border-radius:50%;background:#ffc93c;animation:puls 1s ease-in-out infinite}
@keyframes puls{50%{transform:scale(1.7);opacity:.5}}
/* Cover */
.covertitle{position:absolute;inset:0;pointer-events:none;z-index:2}
.onelove{position:absolute;left:0;right:0;top:8cqw;text-align:center;font:400 21cqw/.88 Bangers,Outfit,sans-serif;letter-spacing:.03em;color:#fff;-webkit-text-stroke:1.6cqw #1f4f96;paint-order:stroke fill;text-shadow:0 1.2cqw 0 #173b73,0 2cqw 2.6cqw rgba(0,0,0,.35)}
.onelove span{color:#ffd23c;display:block}
.names{position:absolute;left:50%;bottom:9cqw;transform:translateX(-50%);white-space:nowrap;background:#e2503c;color:#fff;font:700 6.2cqw/1.9 Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:0 4.5cqw;box-shadow:0 .9cqw 0 #9c2f20}
/* Titel-/Widmungsseite, Ende, Vorsatz */
.tpg{position:absolute;inset:0;background:radial-gradient(circle at 15% 8%,rgba(255,201,60,.2),transparent 40%),radial-gradient(circle at 88% 94%,rgba(47,109,181,.12),transparent 44%),#fbf5ea;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10cqw 6cqw}
.tpg h2{font:400 20cqw/1.05 Bangers,Outfit,sans-serif;color:#1f4f96;margin:0;letter-spacing:.02em}.tpg h2.e{font-size:16cqw}
.tpg .sub{font:700 3.4cqw/1.4 Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e2503c;margin-top:2cqw}
.tpg .wid{font-size:4.4cqw;line-height:1.5;margin-top:12cqw;white-space:pre-wrap;max-width:70cqw}
.tpg .etx{font-size:4.6cqw;line-height:1.5;margin-top:4cqw;max-width:70cqw}
.tpg .mark{font:700 2.4cqw Outfit,sans-serif;letter-spacing:.2em;color:#b9ac95;margin-top:14cqw}
.widbtn{margin-top:8cqw;display:inline-flex;align-items:center;gap:6px;border:1.5px dashed #b9ac95;background:rgba(255,255,255,.7);color:#1f4f96;border-radius:999px;padding:8px 14px;font:600 max(12px,3.2cqw) Outfit,sans-serif;cursor:pointer;max-width:86cqw}
.widbtn .ic{width:1.2em;height:1.2em;flex:none}
.vorsatz{position:absolute;inset:0;background:#f3ead9 radial-gradient(circle at 1px 1px,rgba(31,79,150,.13) 1px,transparent 1.5px) 0 0/14px 14px}
/* Steckbrief auf der letzten Seite (gleiche Maße wie steckPage() in src/pdf.js) */
.steck{position:absolute;inset:0;background:#ecd9b0;color:#3d2b1a;text-align:center}
.steck::before{content:"";position:absolute;inset:4cqw;border:.6cqw solid #5a4028;outline:.2cqw solid #5a4028;outline-offset:-2cqw}
.steck>div{position:absolute;left:0;right:0;line-height:1;white-space:nowrap}
.skopf{top:8cqw;font:400 22cqw/1 Bangers,Outfit,sans-serif;letter-spacing:.05em}
.ssub,.skl{font:700 2.8cqw/1 Outfit,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a5a2b}
.ssub{top:31cqw}.skl{top:108.5cqw}
.steck>.sfoto{left:14cqw;right:auto;top:37cqw;width:72cqw;height:54cqw;overflow:hidden;background:#cdb88c;box-shadow:0 0 0 1cqw #3d2b1a}
.sfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sfoto .chip{font-size:max(9px,2.6cqw)}
.snam{top:95cqw;font:400 10cqw/1 Bangers,Outfit,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.skg{top:112.5cqw;font:400 8cqw/1 Bangers,Outfit,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#a3271a}
.sfu{top:122cqw;font:400 2.7cqw/1 Outfit,sans-serif}
/* Rückseite außen */
.rueck{position:absolute;inset:0;background:#1f4f96;color:#fff;text-align:center}
.rueck>div{position:absolute;left:8cqw;right:8cqw}
.rt{top:52cqw;font:400 14cqw/1 Bangers,Outfit,sans-serif;letter-spacing:.03em;color:#ffd23c}
.rs{top:69cqw;font:400 4.2cqw/1.5 Outfit,sans-serif}
.rmk{bottom:8cqw;font:700 2.6cqw/1 Outfit,sans-serif;letter-spacing:.2em;color:#c9d8f0}
/* Mitte des Buchs: Falz mit Schatten und Lichtkante */
.pgL::after,.pgR::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3}
.pgL::after{background:linear-gradient(to left,rgba(0,0,0,.38) 0,rgba(0,0,0,.17) 1.8%,rgba(0,0,0,.06) 5.5%,rgba(255,255,255,.13) 10%,rgba(255,255,255,0) 22%),linear-gradient(to right,rgba(0,0,0,.07),transparent 5%)}
.pgR::after{background:linear-gradient(to right,rgba(0,0,0,.38) 0,rgba(0,0,0,.17) 1.8%,rgba(0,0,0,.06) 5.5%,rgba(255,255,255,.13) 10%,rgba(255,255,255,0) 22%),linear-gradient(to left,rgba(0,0,0,.07),transparent 5%)}
/* feste Doppelseite für Beispiele */
.bkst{display:flex;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 16px 40px rgba(20,27,54,.24);background:#fff}
.bkst .pg{flex:1}

/* ---------- Betrachter ---------- */
body.cfg{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.ctop{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:54px;padding:0 14px;background:var(--card);box-shadow:0 2px 12px rgba(28,35,64,.07);z-index:20}
.ctop .logo{font-size:26px}.ctop .cartbtn{justify-self:end}
.cinfo{font-size:13px;line-height:1.25;min-width:0}.cinfo b{display:block;font-size:14px}.cinfo span{color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paidbar{flex:none;background:#e8f6ee;color:#1f7a50;text-align:center;padding:8px 14px;font-weight:600;font-size:14px}
/* Hinweisleiste: zwei Gesichter, was gerade zu sehen ist, Fortschritt bis zum Steckbrief */
.hook{flex:none;background:var(--card);border-bottom:1px solid var(--line);padding:8px 14px 0}.hook[hidden],.slot[hidden]{display:none}
.hin{display:flex;align-items:center;gap:11px;max-width:760px;margin:0 auto;min-height:46px}
.faces{display:flex;flex:none}.faces i{width:44px;height:44px;border-radius:50%;background-color:var(--tint);background-repeat:no-repeat;border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--cta),0 3px 8px rgba(28,35,64,.18)}
.faces i+i{margin-left:-10px}
.htx{font-size:13.5px;line-height:1.32;color:var(--mute);min-width:0}.htx b{display:block;color:var(--ink);font-size:14.5px}
.htx em{font-style:normal;display:inline-block;margin-left:8px;background:var(--cta);color:var(--ctaInk);border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700;vertical-align:1px;white-space:nowrap}
.hprog{display:flex;align-items:center;gap:8px;max-width:760px;margin:7px auto 0;padding-bottom:7px}
.hbar{flex:1;position:relative;height:5px;border-radius:99px;background:rgba(28,35,64,.1)}
.hbar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--cta);transition:width .5s ease}
.hziel{flex:none;display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--cta);color:var(--cta);border-radius:99px;padding:2px 9px 2px 6px;font-size:12px;font-weight:700;transition:background .3s,color .3s,transform .3s}
.hziel .ic{width:13px;height:13px}.hziel.da{background:var(--cta);color:var(--ctaInk);transform:scale(1.06)}
#stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;padding:6px 10px;position:relative}
.loading{color:var(--mute)}
.bkbox{flex:none;align-self:stretch;display:grid;place-items:center;transition:height .3s ease}.bkbox.opening{transition:height .95s cubic-bezier(.45,.05,.25,1)}.bkbox.sofort,.bkbox.sofort .bk{transition:none}
.slot{width:100%;max-width:600px;margin:0 auto}#stage .slot{flex:none;padding-top:14px}#stage .ld{margin-top:16px}
.bk{position:relative;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;--cs:1;--t:.95s;--e:cubic-bezier(.45,.05,.25,1);transition:width .3s ease,height .3s ease}
.bk.opening{transition:transform var(--t) var(--e)}
.bk.closed{transform:translateX(calc(-25% * var(--cs))) scale(var(--cs))}
.bk.closedb{transform:translateX(calc(25% * var(--cs))) scale(var(--cs))}
.bkin{position:absolute;inset:0;perspective:2600px}
.pgw{position:absolute;top:0;height:100%;width:50%;box-shadow:0 16px 26px rgba(20,25,50,.24)}
.pgw.l{left:0;transform-origin:right center}.pgw.r{left:50%;transform-origin:left center}
.pgw.none{visibility:hidden}
.pgw .pg{position:absolute;inset:0;aspect-ratio:auto}
.pgw.l .pg{border-radius:5px 0 0 5px}.pgw.r .pg{border-radius:0 5px 5px 0}
/* aufgeklappt: Seiten fallen leicht zur Mitte + Papierstapel an den Außenkanten */
.bk:not(.closed):not(.closedb) .pgw.l{transform:rotateY(3.2deg)}
.bk:not(.closed):not(.closedb) .pgw.r{transform:rotateY(-3.2deg)}
.pgw::before{content:"";position:absolute;top:.8%;bottom:.8%;width:5px;background:repeating-linear-gradient(90deg,#fff 0 1px,#d6cfc1 1px 2px)}
.pgw.l::before{left:-4px;border-radius:3px 0 0 3px}.pgw.r::before{right:-4px;border-radius:0 3px 3px 0}
.bk.closed .pgw.r .pg{border-radius:3px 7px 7px 3px}
.bk.closed .pgR::after{background:linear-gradient(to right,rgba(0,0,0,.3) 0,rgba(255,255,255,.28) 1.4%,rgba(0,0,0,.16) 3.2%,rgba(0,0,0,0) 6%)}
.bk.closedb .pgw.l .pg{border-radius:7px 3px 3px 7px}
.bk.closedb .pgL::after{background:linear-gradient(to left,rgba(0,0,0,.3) 0,rgba(255,255,255,.28) 1.4%,rgba(0,0,0,.16) 3.2%,rgba(0,0,0,0) 6%)}
/* Blatt, das umgeblättert wird: besteht aus 5 Streifen, die an Gelenken hängen – dadurch biegt es sich wie Papier */
.flipper{display:none;position:absolute;top:0;height:100%;width:50%;transform-style:preserve-3d;z-index:6;will-change:transform}
.flipper.on{display:block}
.flipper.halt,.flipper.halt *{animation:none!important}.flipper.halt.fwd{transform:rotateY(-3.2deg)}.flipper.halt.back{transform:rotateY(3.2deg)}.flipper.halt.steif{transform:none}
.st{position:absolute;top:0;height:100%;width:20%;transform-style:preserve-3d}
.st .st{width:100%}
.flipper.fwd .st{left:0;transform-origin:left center}.flipper.fwd .st .st{left:100%}
.flipper.back .st{right:0;transform-origin:right center}.flipper.back .st .st{right:100%}
.face{position:absolute;top:0;bottom:0;left:-.5px;right:-.5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.b{transform:rotateY(180deg)}
.face .pg{position:absolute;top:0;height:100%;aspect-ratio:auto;width:var(--pw);left:calc(var(--pw) * -.2 * var(--o) + .5px)}
.shade{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;animation:schatten var(--t) ease both}
.flipper.fwd .face.f .shade,.flipper.back .face.b .shade{background:linear-gradient(to left,rgba(0,0,0,.42),rgba(255,255,255,.1) 45%,rgba(0,0,0,.12))}
.flipper.fwd .face.b .shade,.flipper.back .face.f .shade{background:linear-gradient(to right,rgba(0,0,0,.42),rgba(255,255,255,.1) 45%,rgba(0,0,0,.12))}
@keyframes schatten{50%{opacity:.75}}
.flipper.fwd{left:50%;transform-origin:left center;animation:blattV var(--t) var(--e) both}
.flipper.back{left:0;transform-origin:right center;animation:blattZ var(--t) var(--e) both}
@keyframes blattV{from{transform:rotateY(-3.2deg)}to{transform:rotateY(-176.8deg)}}
@keyframes blattZ{from{transform:rotateY(3.2deg)}to{transform:rotateY(176.8deg)}}
/* Biegung: die freie Kante eilt erst voraus und hängt beim Ablegen kurz nach */
.flipper.fwd:not(.steif) .st .st{animation:biegV var(--t) ease-in-out both}
.flipper.back:not(.steif) .st .st{animation:biegZ var(--t) ease-in-out both}
@keyframes biegV{0%,100%{transform:rotateY(0)}28%{transform:rotateY(-8deg)}72%{transform:rotateY(6deg)}}
@keyframes biegZ{0%,100%{transform:rotateY(0)}28%{transform:rotateY(8deg)}72%{transform:rotateY(-6deg)}}
/* Warten: Leuchten hinter dem Buch, Lichtstreifen, Funkeln, sanftes Schweben */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.aura{position:absolute;left:50%;top:0;width:50%;height:100%;border-radius:24px;background:conic-gradient(from var(--a),#7b5cff,#ff5ca8,#ffc93c,#3ccf8e,#7b5cff);filter:blur(34px);opacity:0;transition:opacity .8s;animation:dreh 5s linear infinite;pointer-events:none}
@keyframes dreh{to{--a:360deg}}
.bk.wait .aura{opacity:.8}.bk.reveal .aura{opacity:1}
.bk.wait{cursor:default}.bk.wait .bkin{animation:schweb 3.4s ease-in-out infinite}
@keyframes schweb{50%{transform:translateY(-1.6%) rotate(-.6deg)}}
.bk.wait .pgw.r .pg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 68%) 130% 0/260% 100% no-repeat;animation:streif 2.3s ease-in-out infinite}
@keyframes streif{to{background-position:-130% 0}}
.fx{position:absolute;left:50%;top:0;width:50%;height:100%;pointer-events:none;z-index:8}
.fx b{position:absolute;width:20px;height:20px;color:#fff;filter:drop-shadow(0 0 6px rgba(255,220,120,.95));animation:funkel 1.9s var(--d) ease-in-out infinite;opacity:0}
.fx b .ic,.fx i .ic{width:100%;height:100%;display:block}
@keyframes funkel{50%{opacity:1;transform:scale(1.25) rotate(40deg)}0%,100%{opacity:0;transform:scale(.3)}}
.fx .ring{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;border:5px solid #fff;box-shadow:0 0 44px 12px rgba(255,214,110,.85),inset 0 0 30px rgba(255,214,110,.6);animation:ring 1.1s ease-out both}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(2.1);opacity:0}}
.fx i{position:absolute;left:calc(50% - 13px);top:calc(50% - 13px);width:26px;height:26px;color:#ffd23c;filter:drop-shadow(0 0 5px rgba(255,255,255,.9));animation:flieg 1.2s var(--d) cubic-bezier(.15,.7,.3,1) both}
@keyframes flieg{from{transform:rotate(var(--a)) translateY(-20px) scale(.2);opacity:1}70%{opacity:1}to{transform:rotate(var(--a)) translateY(min(-46vw,-250px)) scale(1.1);opacity:0}}
.bk.reveal .bkin{animation:huepf 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes huepf{0%{transform:scale(.96)}45%{transform:scale(1.045)}100%{transform:none}}
.ld{flex:none;width:min(430px,92vw);text-align:center}
.ldh{display:block;font-size:20px;line-height:1.2;margin-bottom:10px}
.ld.done .ldh{color:var(--ok);animation:fadeup .4s}
.ldrow{display:flex;justify-content:space-between;font-size:14px;color:var(--mute);margin-bottom:6px;gap:10px}
.ldst.in{animation:fadeup .45s}.ldpct{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}}
.ldbar{height:10px;border-radius:99px;background:rgba(28,35,64,.1);overflow:hidden}
.ldbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#7b5cff,#ff5ca8,#ffc93c) 0 0/200% 100%;transition:width .5s linear;animation:lauf 1.6s linear infinite}
@keyframes lauf{to{background-position:-200% 0}}
.ld small{display:block;margin-top:9px;color:var(--mute);font-size:13px}
/* Steuerung unter dem Buch */
.cnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;position:relative}
.cnav .grp{display:flex;align-items:center;gap:12px}
.cnav button{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--ink);box-shadow:0 3px 10px rgba(28,35,64,.09)}
.cnav button .ic{width:26px;height:26px}
.cnav #zoom{width:44px;height:44px;justify-self:start}.cnav #zoom .ic{width:21px;height:21px}
.cnav button.hot{background:var(--cta);color:var(--ctaInk);border-color:var(--cta);animation:lock 1.6s ease-in-out infinite}
@keyframes lock{50%{box-shadow:0 0 0 9px var(--ctaGlow)}}
.cnav button[disabled]{opacity:.32;cursor:default;animation:none}
.cnav #plabel{min-width:104px;text-align:center;font-weight:600;font-size:15px}
.nx{position:relative;display:grid}
.fliphint{position:absolute;bottom:calc(100% + 9px);left:50%;translate:-50% 0;pointer-events:none;animation:bob 1.2s ease-in-out infinite}
.fliphint b{display:block;background:var(--ink);color:#fff;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.2}
.fliphint::after{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;border:6px solid transparent;border-bottom-width:0;border-top-color:var(--ink)}
.fliphint[hidden]{display:none}
@keyframes bob{50%{transform:translateY(-4px)}}
/* Kaufleiste */
.buybar{flex:none;background:var(--card);box-shadow:0 -8px 24px rgba(28,35,64,.09);border-radius:20px 20px 0 0;padding:12px 14px calc(10px + env(safe-area-inset-bottom))}
.buybar>*{max-width:600px;margin-left:auto;margin-right:auto}
.buybar .btn{padding:15px 20px;display:flex}
.buybar .btn.puls{animation:lock 1.6s ease-in-out infinite}
.fin{margin:12px auto 0;max-width:600px;animation:fadeup .5s .15s both}.fin[hidden]{display:none}
.fin b{display:block;font-size:18px;margin-bottom:6px;text-align:center}
.fin ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px;line-height:1.35}
.fin li{display:flex;gap:7px;align-items:flex-start}.fin .ic{width:17px;height:17px;flex:none;color:var(--ok);margin-top:1px}
.btrust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 14px;margin-top:9px;font-size:12.5px;color:var(--mute)}
.btrust span{display:inline-flex;align-items:center;gap:5px}.btrust .ic{width:15px;height:15px}
.ov.dark{background:rgba(10,13,28,.9);cursor:zoom-out;padding:8px}#zimg{max-width:100%;max-height:100%;border-radius:8px}
@media(max-width:560px){.htx{font-size:12.5px}.htx b{font-size:13.5px}.faces i{width:38px;height:38px}.fin b{font-size:16.5px}.fin ul{font-size:13px}.ldh{font-size:18px}.btrust{font-size:12px;gap:4px 10px}.buybar .btn{font-size:17px}}
@media(max-height:620px){.cnav button{width:46px;height:46px}.btrust span:last-child{display:none}.fin b{margin-bottom:3px}}
@media(prefers-reduced-motion:reduce){.bk.wait .bkin,.aura,.cnav button.hot,.fliphint{animation:none}}

/* Gesetzter Text als Ebene über dem Bild (Maße wie in buecher/<buch>/komposition/lib.js; 1 Einheit = 1 mm der Seite) */
@font-face{font-family:"Patrick Hand";src:url(/fonts/patrickhand.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo2.woff2) format("woff2");font-weight:800;font-display:swap}
.txl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.txl .tz{font:9.2px "Patrick Hand","Noteworthy","Chalkboard SE",cursive;fill:#2b2233;text-anchor:middle}.txl .tz.d{fill:#fff8e6}
.txl .bt{font:800 7.2px "Baloo 2","Arial Black",sans-serif;letter-spacing:.3px;fill:#c8463c}.txl .bt.b{fill:#2f6fb8}.txl .bt.g{fill:#ffd24a}
.txl .cn{font:800 19px "Baloo 2","Arial Black",sans-serif;letter-spacing:.6px;fill:#fbf7ee;text-anchor:end;stroke:#12284a;stroke-width:2.4px;paint-order:stroke fill;stroke-linejoin:round}
.txl .cz{font:8.4px "Patrick Hand","Noteworthy",cursive;fill:#cfe0f7;text-anchor:end}
.txl .rp{font:800 7px "Baloo 2","Arial Black",sans-serif;letter-spacing:1px;fill:#9fb7dc;text-anchor:end}
.txl.stk text{fill:#3a2410;text-anchor:middle}.txl.stk rect{fill:#3a2410}
.txl .sk{font:800 31px "Baloo 2","Arial Black",sans-serif;letter-spacing:4px}.txl .sd{font:800 12.5px "Baloo 2","Arial Black",sans-serif;letter-spacing:2.2px}
.txl .sn{font:800 18px "Baloo 2","Arial Black",sans-serif;letter-spacing:1px}.txl .sg{font:8.2px "Patrick Hand","Noteworthy",cursive}
.txl .sb{font:800 15px "Baloo 2","Arial Black",sans-serif;letter-spacing:.6px}
.ribbon.oben{bottom:auto;top:5cqw}