@font-face{font-family:ClearHand;src:url('./assets/clear.woff') format('woff');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Pen;src:url('./assets/pen.woff') format('woff');font-weight:400;font-style:normal;font-display:block}
:root{--paper:#fbefdf;--ink:#44332f;--rose:#8a4b51;--gold:#b49468;--muted:#927b68;--line:#e2cdbb;--hand:ClearHand,cursive;--ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:light;font-synthesis:none}
html[data-font=pen]{--hand:Pen,cursive}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 240px 280px at 104% 14%,#edddd038 0 60%,transparent 61%),radial-gradient(ellipse 310px 340px at -8% 102%,#e8ced029 0 63%,transparent 64%);overscroll-behavior:none}button,input,select{font:inherit}button,a,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--rose);outline-offset:4px}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}a{color:inherit}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.paper-grain{position:fixed;inset:0;z-index:50;opacity:.045;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.6'/%3E%3C/svg%3E")}
.opening{position:fixed;inset:0;display:grid;place-items:center;padding:24px;perspective:1100px}.envelope{position:relative;display:block;width:min(480px,86vw);aspect-ratio:1.6;border:0;padding:0;background:none;border-radius:4px;perspective:1000px;isolation:isolate;transition:transform .35s ease;transform:translateY(12px)}.envelope:disabled{opacity:1}.envelope:hover:not(:disabled){transform:translateY(6px)}.envelope-shadow{position:absolute;inset:8% 4% -5%;background:#72513b33;filter:blur(24px);border-radius:35%;z-index:0}.envelope-back{position:absolute;inset:0;background:#e9d6bf;border:1px solid #d1b795;border-radius:4px;box-shadow:inset 0 0 35px #b4946810;z-index:1}.envelope-sheet{position:absolute;top:7%;left:7%;width:86%;height:88%;background:var(--paper);border:1px solid #e0cdb5;box-shadow:0 2px 10px #6b4f3520;z-index:2;border-radius:2px;padding:17% 10% 0;transition:transform .7s cubic-bezier(.25,.7,.3,1),opacity .3s}.envelope-sheet span{display:block;height:1px;background:#b4946840;margin:14px 0;width:100%}.envelope-sheet span:last-child{width:65%}.envelope-pocket{position:absolute;inset:0;background:linear-gradient(155deg,#f6e7d3,#fbefdf 70%);border:1px solid #d7c0a1;border-radius:4px;clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);z-index:4}.envelope-fold-left,.envelope-fold-right{position:absolute;inset:0;z-index:5;pointer-events:none;background:#eedcc5;clip-path:polygon(0 0,50% 54%,0 100%)}.envelope-fold-right{background:#f3e2ca;clip-path:polygon(100% 0,50% 54%,100% 100%)}.envelope-flap{position:absolute;inset:-1px 0 0;background:linear-gradient(175deg,#f8e9d5,#ead5b9);clip-path:polygon(0 0,100% 0,50% 56%);z-index:6;transform-origin:50% 0;transition:transform .65s cubic-bezier(.25,.65,.25,1);backface-visibility:visible;filter:drop-shadow(0 2px 1px #9b785a22)}.envelope-seal{position:absolute;width:52px;height:52px;top:47%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);border-radius:46% 49% 45% 48%;z-index:7;color:#d7b4ad;background:radial-gradient(circle at 35% 27%,#a96168,#7b3c46 73%);border:1px solid #6a333b;box-shadow:0 3px 7px #5f343942,inset 0 0 0 3px #af727631,inset 0 0 0 5px #4d232b1f;display:grid;place-items:center;transition:opacity .2s,transform .5s}.envelope-seal svg{width:25px;height:25px;stroke-width:1;opacity:.8}.envelope-address{position:absolute;left:0;right:0;top:69%;z-index:8;text-align:center;font-family:ClearHand,cursive;font-weight:400;font-size:clamp(29px,5.8vw,39px);line-height:1.4;color:var(--ink);transition:opacity .25s}.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.is-opening .envelope-seal{opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(.8)}.is-opening .envelope-sheet{transform:translateY(-54%);transition-delay:.35s}.is-opening .envelope-address{opacity:0;transition-delay:.55s}.is-opening .envelope{animation:envelopeExit 1.15s ease both}.load-error{position:absolute;bottom:12%;max-width:300px;text-align:center;font-size:12px;line-height:1.6;color:var(--rose)}
.reading-view{position:fixed;inset:0;height:100%;height:100dvh;display:flex;flex-direction:column;padding:max(7px,env(safe-area-inset-top)) 25px max(12px,env(safe-area-inset-bottom));animation:paperArrive .55s ease both;outline:none}.reader-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;flex:0 0 48px;max-width:820px;width:100%;margin:0 auto;color:var(--muted);padding:0 10px 8px}.reader-mark{font-family:ClearHand,cursive;font-size:20px}.icon-button{flex:0 0 auto;width:38px;height:38px;border:0;background:none;display:grid;place-items:center;border-radius:50%;position:relative;color:var(--muted)}.icon-button:hover:not(:disabled){background:#b4946810;color:var(--rose)}.reader-header .icon-button{width:32px;height:32px}.letter-paper{position:relative;z-index:1;flex:1 1 0;min-height:0;width:min(820px,100%);margin:0 auto;padding:27px 46px 35px;background-color:var(--paper);background-image:radial-gradient(ellipse 160px 180px at 107% 2%,#edddd038 0 60%,transparent 61%),radial-gradient(ellipse 200px 210px at -10% 106%,#e8ced029 0 63%,transparent 64%);border:1px solid #ddc8ac87;border-radius:2px;box-shadow:0 3px 25px #70533308;overflow:hidden}.letter-content{height:100%;width:100%;position:relative;overflow:hidden;font-family:var(--hand);font-size:27px;line-height:1.8;font-weight:400;font-synthesis:none;letter-spacing:0;color:var(--ink);text-rendering:optimizeLegibility;overflow-wrap:normal}.letter-content p{margin:0 0 1.1em;font:inherit;line-height:inherit;font-weight:400;white-space:pre-wrap}.letter-content p:last-child{margin-bottom:0}.letter-word{display:inline-block;white-space:nowrap;position:relative}.ink-letter{display:inline-block;opacity:0;clip-path:inset(-.4em 100% -.5em -.2em);transition:clip-path 100ms linear,opacity 70ms linear;font:inherit;font-weight:400}.ink-letter.written{opacity:1}.pen-cursor{display:inline-block;width:3px;height:3px;background:var(--rose);border-radius:50%;pointer-events:none;animation:penPulse 1.3s ease-in-out infinite}.pending-paragraph{display:none}.paper-sprig{position:absolute;right:8px;bottom:8px;width:32px;height:54px;color:var(--gold);opacity:.24;stroke-width:.8;pointer-events:none}.accelerate-zone{position:absolute;z-index:4;right:0;top:55px;bottom:102px;width:45%;border:0;background:transparent;outline-offset:-8px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.accelerate-zone:after{content:'»';position:absolute;right:16px;top:48%;font-size:25px;color:var(--rose);opacity:0;transition:opacity .15s}.accelerate-zone:active:after,html[data-tempo=boost] .accelerate-zone:after,html[data-tempo=fast] .accelerate-zone:after{opacity:.48}.reader-footer{position:relative;z-index:20;width:min(600px,100%);flex:0 0 auto;margin:0 auto;padding-top:7px}.tempo-hint{height:24px;line-height:24px;margin:0 0 4px;text-align:center;font-size:10px;color:var(--muted);letter-spacing:.02em}.completion-note{height:24px;display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 4px;color:var(--rose)}.letter-finished .tempo-hint{display:none}.reading-controls{position:relative;border-top:1px solid #ddc7ad;border-bottom:1px solid #eadac5;background:#fbefdfcc;min-height:53px}.progress-track{position:absolute;left:0;right:0;top:-1px;height:1px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--rose);transition:width .25s linear}.controls-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 2px}.control-play{border:0;background:transparent;font-size:12px;min-width:55px;padding:10px 6px;color:var(--rose);border-radius:5px}.page-label{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:55px;text-align:center}.control-divider{width:1px;height:19px;background:var(--line);margin:0 5px}.music-toggle{width:32px;height:32px}.music-slash{position:absolute;width:21px;height:1px;background:var(--muted);transform:rotate(-45deg);opacity:.7}.music-toggle[aria-pressed=true] .music-slash{opacity:0}.reading-settings{position:relative}.reading-settings summary{cursor:pointer;list-style:none;font-size:25px;line-height:1;width:32px;height:34px;display:grid;place-items:center;color:var(--muted)}.reading-settings summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;right:0;bottom:49px;width:254px;max-height:calc(100dvh - 140px);overflow:auto;padding:21px;border:1px solid var(--line);background:var(--paper);border-radius:8px;box-shadow:0 10px 35px #4933241f;display:grid;gap:9px;font-size:12px;color:var(--ink)}.settings-panel label{margin-top:5px;color:var(--muted)}.settings-panel select{width:100%;padding:8px;border:1px solid var(--line);border-radius:4px;background:#fff7eb;color:var(--ink);font-size:12px}.text-button{border:0;background:none;padding:6px 0;color:var(--muted);font-size:11px;text-decoration:none;cursor:pointer;line-height:1.4}.text-button:hover{color:var(--rose);text-decoration:underline}.settings-panel .text-button{text-align:left;min-height:30px}#music-dock{display:none!important}
.install-dialog{border:1px solid var(--line);border-radius:9px;max-width:430px;width:calc(100% - 40px);max-height:85dvh;overflow:auto;background:var(--paper);color:var(--ink);padding:34px;box-shadow:0 20px 70px #38241b25}.install-dialog::backdrop{background:#2a1b1655;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:25px;color:var(--muted)}.install-dialog h2{font-family:ClearHand,cursive;font-weight:400;font-size:26px;line-height:1.6;margin:0 0 18px}.install-dialog p{font-size:13px;line-height:1.75;color:#756454}.install-dialog strong{font-weight:600}.offline-section{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--rose);border-radius:5px;padding:11px 17px;background:var(--rose);color:#fff7ed;font-size:12px;font-weight:400}.offline-section .primary-button{width:100%}.offline-section p{font-size:11px}.noscript{position:fixed;inset:30px;z-index:100;background:var(--paper);padding:30px;line-height:1.8}
@keyframes envelopeExit{0%,75%{opacity:1}100%{opacity:0}}@keyframes paperArrive{from{opacity:0}to{opacity:1}}@keyframes penPulse{50%{opacity:.3}}
@media(max-width:700px){.opening{padding:20px}.envelope{width:86vw;max-width:420px}.envelope-seal{width:44px;height:44px}.envelope-seal svg{width:21px;height:21px}.envelope-address{font-size:clamp(27px,7.1vw,34px);top:68%}.reading-view{padding:max(5px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom))}.reader-header{flex-basis:43px;padding:0 8px 6px}.reader-mark{font-size:18px}.letter-paper{padding:19px 22px 26px}.letter-content{font-size:24px;line-height:1.8}.letter-content p{margin-bottom:1em}.paper-sprig{width:24px;height:40px;right:3px;bottom:3px;opacity:.2}.reader-footer{padding-top:5px}.controls-row{gap:4px;padding:7px 0}.icon-button{width:34px;height:34px}.control-play{font-size:11px;min-width:52px}.page-label{font-size:10px;min-width:48px}.control-divider{margin:0 4px}.music-toggle{width:30px}.tempo-hint{font-size:9px}.accelerate-zone{top:48px;bottom:94px}.settings-panel{right:0;width:242px}.install-dialog{padding:30px 24px}}
@media(max-height:640px){.reader-header{flex-basis:34px}.reader-footer{padding-top:3px}.letter-paper{padding-top:12px;padding-bottom:14px}.letter-content{font-size:22px;line-height:1.7}.tempo-hint,.completion-note{height:19px;line-height:19px;margin-bottom:2px}.controls-row{padding:3px 0}.reading-controls{min-height:43px}.accelerate-zone{top:38px;bottom:74px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{html,body{height:auto;overflow:visible}.opening,.reader-header,.reader-footer,.accelerate-zone,.paper-grain,.paper-sprig{display:none!important}.reading-view{position:static;display:block!important;height:auto;padding:0}.letter-paper{border:0;box-shadow:none;padding:0;overflow:visible}.letter-content{height:auto;overflow:visible;font-size:19pt;line-height:1.6}.ink-letter{opacity:1!important;clip-path:none!important}}

/* --- Optimierungen 2026-11-08: iPhone-Zoom, Papierstruktur, Tinte --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{touch-action:manipulation}
body{background-color:var(--paper);background-image:radial-gradient(ellipse 240px 280px at 104% 14%,#edddd038 0 60%,transparent 61%),radial-gradient(ellipse 310px 340px at -8% 102%,#e8ced029 0 63%,transparent 64%),radial-gradient(ellipse at 50% 45%,transparent 55%,#8a5f3f14 100%),url('./assets/paper.webp');background-size:auto,auto,100% 100%,384px 384px}
.accelerate-zone{touch-action:manipulation}
.reading-view,.letter-paper,.letter-content{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.settings-panel select{font-size:16px}
.letter-paper{background-color:#fcf2e3;background-image:radial-gradient(ellipse 160px 180px at 107% 2%,#edddd038 0 60%,transparent 61%),radial-gradient(ellipse 200px 210px at -10% 106%,#e8ced029 0 63%,transparent 64%),url('./assets/paper.webp');background-size:auto,auto,256px 256px;border:1px solid #d9c2a35c;border-radius:3px;box-shadow:inset 0 0 0 1px #fffaf266,inset 0 0 70px #b0875a1c,inset 0 -30px 60px -40px #a0785214,0 1px 2px #6b4f3512,0 10px 34px -6px #6b4f3524}
.ink-letter{text-shadow:0 0 .5px #44332f73,0 0 .1px #44332f}
.pen-cursor{will-change:left}
.paper-grain{opacity:.035}
@media print{.letter-paper{background:none}}