*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#263528;background:#f0f3ec}body{padding:14px}main{height:100%;max-width:1500px;margin:auto;display:flex;flex-direction:column;gap:12px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px}h1{font-size:25px;line-height:1.15;margin:0;color:#315e29}h1 span{font-weight:400}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:750;margin:0 0 5px;color:#506443}button,select,.download{font:inherit;font-size:14px;border:1px solid #c3cebc;border-radius:7px;background:#fff;color:#284c26;padding:9px 13px;cursor:pointer;text-decoration:none}button:hover,.download:hover{background:#e0ecd7}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,#stage:focus-visible{outline:3px solid #6a9737;outline-offset:3px}.download{font-weight:650}.toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.toolbar label{font-size:14px}select{padding:8px}#stage{flex:1;min-height:0;width:100%;overflow:hidden;background:#e2e8dc;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:15px;touch-action:pan-y;perspective:none}#book{display:flex;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 7px 22px #243a2729;max-width:100%}.sheet{display:block;width:50%;height:100%;object-fit:contain;background:#fff;min-width:0}.sheet+ .sheet{border-left:0}nav{display:flex;align-items:center;justify-content:center;gap:16px}nav button{min-width:102px;background:#36652c;color:white;border-color:#36652c;font-weight:650}nav button:hover{background:#244b1d}output{font-size:14px;min-width:125px;text-align:center}.hint{font-size:12px;color:#55624e;text-align:center;margin:0}#message{font-size:13px;text-align:center;color:#8b3200;margin:0}#stage.zoomed{display:block;overflow:auto;touch-action:pan-x pan-y}#stage.zoomed #book{max-width:none;margin:0 auto}#viewer:fullscreen{padding:16px;background:#f0f3ec;height:100vh;max-width:none}@media(max-width:600px){body{padding:8px}main{gap:9px}h1{font-size:21px}.download{font-size:12px;padding:9px}header{gap:6px}nav{gap:8px}nav button{min-width:89px;padding:10px}output{min-width:98px;font-size:12px}#stage{padding:8px}.hint{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Ein echtes Blatt dreht um den Buchrücken; Vorder- und Rückseite sind getrennt. */
#book{perspective:1800px;isolation:isolate;box-shadow:none;overflow:clip}
#book>.sheet:not(.blank){box-shadow:none;flex-shrink:0}
.sheet.blank{visibility:hidden}
.turning-leaf{position:absolute;top:0;width:50%;height:100%;z-index:5;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.turning-leaf.forward{left:50%;transform-origin:left center}
.turning-leaf.backward{left:0;transform-origin:right center}
.turning-leaf.single-leaf{left:0;width:100%}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden;box-shadow:none}
.leaf-back{transform:rotateY(180deg)}
.leaf-face .sheet{width:100%;height:100%;border:0}
.leaf-face::after{content:none}

/* Geringere Zeichenlast auf der bewegten Ebene. */
.leaf-face{box-shadow:none}
.leaf-face::after{content:none}
.turning-leaf{transform:translateZ(0)}