:root{
  --g900:#0F4C30;--g800:#14532D;--g700:#1F7A4D;--g600:#2F9E6B;--g400:#7ED9A6;--g200:#BFEBD3;--g100:#DFF7E8;--g50:#F3FAF5;
  --ink:#12281C;--muted:#5B7466;--line:#D5E9DC;--paper:#fff;--gold:#F2B83B;--danger:#B4342D;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --r:18px;--tab-h:68px;
  --sans:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;
  --serif:"Iowan Old Style","Charter","Georgia",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--g50);color:var(--ink);font-family:var(--sans);line-height:1.55;overscroll-behavior-y:none;padding-left:var(--safe-l);padding-right:var(--safe-r)}
a{color:var(--g700)}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem;font-weight:750;letter-spacing:-.01em}
h1{font-size:1.9rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
p{margin:.4rem 0 .8rem}
.muted{color:var(--muted);font-size:.85rem}
.center{text-align:center}
.grow{flex:1;min-width:200px}
.ic{width:1.25em;height:1.25em;flex:none}
.wrap{max-width:980px;margin:0 auto;padding:1.2rem 1rem 3rem}

/* Buttons */
.btn,.icon-btn{font:inherit;font-weight:650;border:0;cursor:pointer;touch-action:manipulation;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:.55rem 1.1rem;border-radius:14px;background:var(--g700);color:#fff;transition:transform .08s,background .15s}
.btn:active{transform:scale(.97);background:var(--g800)}
.btn.small{min-height:40px;padding:.3rem .85rem;font-size:.85rem;border-radius:12px}
.btn.big{min-height:56px;padding:.7rem 1.5rem;font-size:1.05rem;border-radius:16px}
.btn.block{display:flex;width:100%}
.btn.soft{background:var(--g100);color:var(--g800)}
.btn.soft:active{background:var(--g200)}
.btn.danger{background:#fff;color:var(--danger);box-shadow:inset 0 0 0 1.5px var(--danger)}
.btn[disabled],.icon-btn[disabled]{opacity:.35;pointer-events:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:transparent;color:inherit}
.icon-btn:active{background:rgba(0,0,0,.08)}
.icon-btn .ic{width:1.4em;height:1.4em}

/* Formulare */
.input,textarea,.title-input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:.75rem .95rem}
.input:focus,textarea:focus,.title-input:focus{outline:3px solid var(--g400);border-color:var(--g600)}
.big-input{font-size:1.1rem;min-height:52px}
.field{display:block;margin:.8rem 0}
.field>span{display:flex;align-items:center;gap:.4rem;font-weight:650;margin-bottom:.3rem}
.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.center-row{justify-content:center;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.btn.file{cursor:pointer}

/* Karten, Chips, Hinweise */
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:22px;padding:1.2rem;margin:1rem 0}
.card.narrow{max-width:520px;margin:1.2rem auto}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .65rem;border-radius:99px;background:#EAF1EC;color:var(--muted);font-size:.72rem;font-weight:700}
.chip.ok{background:var(--g100);color:var(--g800)}
.chip.warn{background:#FFF0C9;color:#7A5200}
.notice{padding:.6rem .9rem;border-radius:12px;font-weight:650}
.notice.success{background:var(--g100);color:var(--g800)}
.notice.error{background:#FBE5E3;color:var(--danger)}
.meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;color:var(--muted);font-size:.8rem}
.meta span,.meta a{display:inline-flex;align-items:center;gap:.3rem}
.meta .ic{width:1.05em;height:1.05em}
.meta-link{text-decoration:none;color:var(--muted)}
.ic.gold{color:var(--gold);fill:var(--gold);stroke:none}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty>.ic{width:3rem;height:3rem;color:var(--g600);margin-bottom:.5rem}
.empty h2{color:var(--ink)}

/* Sterne */
.star-row{display:inline-flex;gap:.1rem;vertical-align:middle}
.star-row .ic{width:1.15em;height:1.15em;fill:currentColor;stroke:none}
.star-row .on{color:var(--gold)}.star-row .off{color:#CBDCD1}
.star-row.small .ic{width:.95em;height:.95em}
.rating-sum{display:flex;align-items:center;gap:.6rem;font-size:1.4rem}
.rating-sum span:last-child{font-size:.85rem;color:var(--muted)}
.star-input{display:inline-flex;flex-direction:row-reverse;margin:.2rem 0 .5rem}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{margin:0;padding:.1rem .15rem;color:#CBDCD1;cursor:pointer;line-height:0}
.star-input label .ic{width:2.8rem;height:2.8rem;fill:currentColor;stroke:none}
.star-input input:checked~label,.star-input label:hover,.star-input label:hover~label{color:var(--gold)}
.star-input input:focus-visible+label{outline:3px solid var(--g400);border-radius:10px}
.comment{border-top:1.5px solid var(--line);padding:.8rem 0}
.comment:first-of-type{border-top:0}
.comment.pending{background:#FFF9E6;border-radius:14px;padding:.8rem;margin:.4rem 0;border:0}
.comment-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cm{display:flex;gap:.5rem;margin:.3rem 0}
.cm .ic{margin-top:.2em;color:var(--g700)}

/* Öffentliche Seite */
.site-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--g800);color:#fff;padding:calc(.6rem + var(--safe-t)) 1.1rem .6rem}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none}
.brand .logo-mark{width:42px;height:42px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{font-size:1.15rem}
.brand-text small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g400)}
.btn.ghost-light{background:rgba(255,255,255,.14)}
.hero{position:relative;overflow:hidden;background:var(--g800);color:#fff;border-radius:28px;text-align:center;padding:2.4rem 1.2rem}
.hero h1{font-size:2.3rem;margin:.8rem 0 .3rem}
.hero p{color:var(--g200);max-width:30rem;margin:0 auto;font-size:1.05rem}
.hero-logo{width:96px;height:96px}
.hero-leaf{position:absolute;width:120px;height:120px;opacity:.55}
.hero-leaf.l1{left:-24px;bottom:-30px;transform:rotate(20deg)}
.hero-leaf.l2{right:-20px;top:-26px;transform:rotate(200deg)}
.section-title{margin:1.8rem 0 .2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1rem}
.story-card{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .12s}
.story-card:active{transform:scale(.98)}
.story-card img,.story-card .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--g100)}
.noimg{display:flex;align-items:center;justify-content:center;color:var(--g600)}
.noimg .ic{width:3rem;height:3rem}
.story-card-body{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.story-card h3{margin:0;font-size:1.1rem}
.speak .s-stop{display:none}.speak.on .s-stop{display:inline-flex;gap:.4rem;align-items:center}.speak.on .s-play{display:none}
.speak .s-play{display:inline-flex;gap:.4rem;align-items:center}
.toc ol{margin:.4rem 0 0;padding-left:1.4rem}
.toc a{display:inline-block;padding:.2rem 0}
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:50;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--g400);border-radius:0 4px 4px 0}
.credit{font-size:.72rem;color:var(--muted);text-align:center}
.legal{font-size:.9rem}.legal h2{font-size:1.05rem;margin-top:1.2rem}
.site-foot{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;padding:1.5rem 1rem calc(2rem + var(--safe-b));font-size:.8rem}
.site-foot a{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 14px);transform:translate(-50%,20px);background:var(--g900);color:#fff;padding:.7rem 1.1rem;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;z-index:100;font-weight:650}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* App-Hülle (Schreibbereich) */
.chrome-app,.chrome-editor{background:var(--g50)}
.appbar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:minmax(44px,auto) 1fr auto;align-items:center;gap:.6rem;background:var(--g800);color:#fff;padding:calc(.5rem + var(--safe-t)) .8rem .5rem}
.appbar-left{display:flex;align-items:center}
.appbar-left .logo-mark{width:38px;height:38px;display:block}
.appbar-title{margin:0;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-right{display:flex;align-items:center;gap:.6rem}
.appbar .btn{background:#fff;color:var(--g800)}
.appbar .btn.soft{background:rgba(255,255,255,.18);color:#fff}
.appbar .icon-btn:active{background:rgba(255,255,255,.18)}
.app-main{max-width:920px;margin:0 auto;padding:1rem 1rem calc(var(--tab-h) + var(--safe-b) + 1.5rem)}
.chrome-editor .app-main{padding-bottom:calc(var(--safe-b) + 2rem);max-width:820px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:#fff;border-top:1.5px solid var(--line);padding:6px var(--safe-r) calc(6px + var(--safe-b)) var(--safe-l)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:650;min-height:52px;justify-content:center}
.tab-ic{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:30px;border-radius:15px;transition:background .15s}
.tab-ic .ic{width:1.45em;height:1.45em}
.tab.active{color:var(--g800)}.tab.active .tab-ic{background:var(--g100)}
.dot{position:absolute;top:-4px;right:6px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:.65rem;font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px}
.login-main{display:flex;min-height:100dvh;align-items:center;justify-content:center;padding:1rem}
.login{width:100%;max-width:360px;text-align:center}
.login-logo{width:110px;height:110px;margin-bottom:.4rem}
.login .input{text-align:center;letter-spacing:.3em;margin:.6rem 0 .8rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.stat{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:.8rem;text-align:center}
.stat b{display:block;font-size:1.7rem;color:var(--g700);line-height:1.1}
.stat span{font-size:.75rem;color:var(--muted)}
.new-story{text-align:center}.new-story .hero-ic{width:3rem;height:3rem;color:var(--g600)}
.new-story .input{margin:.6rem 0 1rem}
.chapters{list-style:none;padding:0;margin:0 0 1rem}
.chapters li{display:flex;align-items:center;gap:.4rem;border-bottom:1.5px solid var(--line)}
.chapter-link{flex:1;display:flex;align-items:center;gap:.8rem;padding:.8rem 0;color:inherit;text-decoration:none;min-height:60px}
.chapter-link .num{width:34px;height:34px;border-radius:50%;background:var(--g100);color:var(--g800);display:flex;align-items:center;justify-content:center;font-weight:750;flex:none}
.chapter-link .ct{flex:1;display:flex;flex-direction:column;min-width:0}
.chapter-link small{color:var(--muted)}
.chev{color:var(--muted)}
.move{display:flex}
.cover-row{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.8rem}
.cover-preview{width:200px;border-radius:16px;display:block}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;margin:.6rem 0 1rem}
.img-grid button{border:3px solid transparent;border-radius:14px;padding:0;background:var(--g100);cursor:pointer;overflow:hidden;aspect-ratio:1}
.img-grid button:active{border-color:var(--g600)}
.img-grid img{width:100%;height:100%;object-fit:cover;display:block}
.upload{margin-top:.8rem}
.busy{opacity:.55;pointer-events:none}

/* Editor */
.editor{background:var(--paper);border:1.5px solid var(--line);border-radius:22px;padding:1rem 1.2rem}
.editor .title-input{border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:.4rem 0 .7rem;margin-bottom:.8rem;font-family:var(--serif);font-size:1.6rem;font-weight:700;background:transparent}
.editor .title-input:focus{outline:0;border-color:var(--g600)}
.editor textarea{border:0;border-radius:0;padding:0;font-family:var(--serif);font-size:1.3rem;line-height:1.85;min-height:50vh;resize:none;overflow:hidden;background:transparent;display:block}
.editor textarea:focus{outline:0}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.save{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:650;color:var(--g200)}
.save .ic{display:none}
.save[data-state=saved] .s-saved,.save[data-state=saving] .s-saving,.save[data-state=error] .s-error{display:inline-block}
.save[data-state=error]{color:#FFD3CF}

@media (max-width:700px){
  html{font-size:17px}.hero h1{font-size:1.9rem}.save-text{display:none}.appbar .btn.small{padding:.3rem .65rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Ziffernblock */
.pin-dots{display:flex;justify-content:center;gap:.9rem;margin:1rem 0 1.4rem;min-height:18px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--g600);transition:background .12s,transform .12s}
.pin-dots i.on{background:var(--g700);border-color:var(--g700);transform:scale(1.15)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:300px;margin:0 auto}
.key{aspect-ratio:1;border:0;border-radius:50%;background:#fff;color:var(--g800);font:inherit;font-size:1.9rem;font-weight:650;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .08s,background .1s}
.key:active{transform:scale(.92);background:var(--g100)}
.key.ghost{background:transparent;box-shadow:none;color:var(--muted)}
.key.go{background:var(--g700);color:#fff;box-shadow:none}
.key.go:active{background:var(--g800)}
.key .ic{width:1.5rem;height:1.5rem}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.alt{margin-top:1.6rem;font-size:.85rem;color:var(--muted)}
.alt summary{cursor:pointer;padding:.5rem}
.alt .input{margin:.6rem 0}

/* Cover-Baukasten */
.designer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:start;margin:.6rem 0 1rem}
.designer .stage svg{width:100%;display:block;border-radius:18px}
.designer h3{margin:.2rem 0 .5rem;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.motif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.motif-grid button{border:2.5px solid transparent;border-radius:14px;padding:0;background:#14532D;cursor:pointer;overflow:hidden;color:#fff;font:inherit;font-size:.62rem;display:flex;flex-direction:column;align-items:center;touch-action:manipulation}
.motif-grid svg{width:100%;display:block}
.motif-grid span{padding:0 0 .25rem}
.motif-grid button.sel{border-color:var(--gold)}
.swatches{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.swatches button{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.swatches button.sel{box-shadow:0 0 0 3px var(--g700)}
.switch{display:flex;align-items:center;gap:.7rem;margin:.4rem 0 1rem;font-weight:650;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch .track{width:50px;height:30px;border-radius:15px;background:#C9DDD0;position:relative;transition:background .15s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+.track{background:var(--g600)}
.switch input:checked+.track::after{transform:translateX(20px)}
@media (max-width:700px){.designer{grid-template-columns:1fr}}

/* Buchansicht */
.eyebrow{display:block;font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--g600)}
.book-hero{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:1.6rem;align-items:center;background:var(--g800);color:#fff;border-radius:28px;padding:1.4rem;position:relative;overflow:hidden}
.book-cover img,.book-cover .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;box-shadow:0 14px 30px rgba(0,0,0,.35);background:var(--g700);color:#fff}
.book-info .eyebrow{color:var(--g400)}
.book-info h1{font-size:2.3rem;margin:.3rem 0 .8rem;letter-spacing:-.02em}
.facts{display:flex;flex-wrap:wrap;gap:.5rem}
.facts span,.facts a{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.12);color:#fff;padding:.3rem .8rem;border-radius:99px;font-size:.82rem;font-weight:650;text-decoration:none}
.facts .ic{width:1.05em;height:1.05em}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.btn.light{background:#fff;color:var(--g800)}
.btn.light:active{background:var(--g100)}
.btn.ghost-light.big{background:rgba(255,255,255,.14)}
.reader{max-width:42rem;margin:0 auto;padding-top:1.4rem}
.reader[data-size="1"] .text{font-size:1.1rem}
.reader[data-size="2"] .text{font-size:1.3rem}
.reader[data-size="3"] .text{font-size:1.55rem}
.reader[data-size="4"] .text{font-size:1.85rem}
.reader-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.4rem}
.toc-chips{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0;scrollbar-width:none}
.toc-chips::-webkit-scrollbar{display:none}
.toc-chips a{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:.3rem .9rem .3rem .35rem;text-decoration:none;color:var(--ink);font-weight:650;font-size:.82rem;min-height:40px}
.toc-chips a span{width:28px;height:28px;border-radius:50%;background:var(--g100);color:var(--g800);display:flex;align-items:center;justify-content:center;font-size:.78rem}
.size-tools{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:3px;flex:none}
.size-tools button{width:44px;height:38px;border:0;border-radius:99px;background:transparent;font:inherit;font-weight:700;color:var(--g800);cursor:pointer;font-family:var(--serif);touch-action:manipulation}
.size-tools button:active{background:var(--g100)}
.chapter{margin:2.6rem 0;scroll-margin-top:1rem}
.chapter-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1.5px solid var(--line)}
.chapter-head h2{margin:.1rem 0 0;font-family:var(--serif);font-size:1.7rem}
.text{font-family:var(--serif);line-height:1.9;color:#1a2e22}
.text p{margin:0 0 1.15rem}
.text.dropcap p:first-child::first-letter{float:left;font-size:3.7em;line-height:.8;padding:.08em .12em 0 0;color:var(--g700);font-weight:700}
.next-chapter{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.6rem;padding:.8rem;border-radius:16px;background:var(--g100);color:var(--g800);font-weight:700;text-decoration:none;min-height:52px}
.the-end{text-align:center;margin:3rem 0 1rem;color:var(--g700)}
.the-end .ic{width:2rem;height:2rem}
.the-end strong{display:block;font-family:var(--serif);font-size:1.4rem;margin-top:.3rem;color:var(--ink)}
.rate-box>summary{list-style:none;cursor:pointer;display:inline-flex;margin:.4rem 0 .8rem}
.rate-box>summary::-webkit-details-marker{display:none}
.rate-box[open]>summary{display:none}
.rate-form{background:var(--g50);border-radius:18px;padding:1rem}
@media (max-width:700px){
  .book-hero{grid-template-columns:1fr;padding:1rem;text-align:center}
  .book-info h1{font-size:1.8rem}.facts,.actions{justify-content:center}
  .chapter-head h2{font-size:1.4rem}
}