/* jackrowlandbooks – chinesische Fassung (Stil chinesischer Romanportale). Keine Webfonts: Google Fonts ist in China gesperrt. */
:root{--red:#b8282e;--red2:#d23a3f;--redbg:#fbeeee;--gold:#b08a3e;--ink:#222;--muted:#777;--line:#e8e2d8;--bg:#f5f3ef;--paper:#fff;
--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
--serif:Georgia,"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:60px}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
.w{max-width:1200px;margin:0 auto;padding:0 16px}
img{display:block;max-width:100%}

/* Kopf */
.topbar{background:#f0ede7;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);line-height:32px}
.topbar .w{display:flex;justify-content:space-between;gap:12px}
.topbar .w>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{white-space:nowrap}.tb-r i{font-style:normal;margin:0 8px;color:#ccc}
.hd{background:var(--paper)}
.hd .w{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:56px;height:56px;border-radius:50%}
.logo b{display:block;font:700 28px/1.2 var(--serif);letter-spacing:.12em;color:var(--red)}
.logo small{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold)}
.so{display:flex;flex:0 1 440px;border:2px solid var(--red);border-radius:20px;overflow:hidden;background:#fff}
.so input{flex:1;min-width:0;border:0;padding:8px 16px;font:14px var(--sans);outline:none;background:transparent}
.so button{border:0;background:var(--red);color:#fff;font:15px var(--sans);padding:0 22px;cursor:pointer}
.so button:hover{background:var(--red2)}
.nv{background:var(--red);position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.nv .w{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nv-l{display:flex;overflow-x:auto;scrollbar-width:none}
.nv-l::-webkit-scrollbar{display:none}
.nv-l a{color:#fff;font-size:16px;padding:0 20px;line-height:46px;white-space:nowrap}
.nv-l a:hover,.nv-l a.on{background:rgba(0,0,0,.18);color:#fff}
.lang{display:flex;flex:0 0 auto;border:1px solid rgba(255,255,255,.55);border-radius:15px;overflow:hidden;font-size:12px}
.lang a{color:#fff;padding:3px 11px;line-height:20px}
.lang a:hover{background:rgba(255,255,255,.15);color:#fff}
.lang a.on{background:#fff;color:var(--red);font-weight:700}

/* Kästen */
main.w{padding-top:16px;padding-bottom:30px}
.bx{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px 18px 18px;margin-bottom:16px}
.bx h4{margin:0 0 14px;padding:0 0 10px 12px;border-bottom:1px solid var(--line);font:700 18px/1.3 var(--serif);position:relative}
.bx h4:before{content:"";position:absolute;left:0;top:2px;bottom:12px;width:4px;background:var(--red);border-radius:2px}
.bx h4 small{font:12px var(--sans);color:var(--muted);margin-left:12px;font-weight:400}
.tg{display:flex;flex-wrap:wrap;gap:6px}
.tg span{font-size:12px;line-height:20px;padding:0 8px;border:1px solid #f0c9ca;color:var(--red);background:var(--redbg);border-radius:2px}
.bt{display:inline-block;border:1px solid var(--red);color:var(--red);border-radius:3px;padding:6px 18px;font-size:14px;line-height:20px;background:#fff}
.bt:hover{background:var(--redbg)}
.bt.red{background:var(--red);color:#fff}
.bt.red:hover{background:var(--red2);color:#fff}

/* Reihe 1: Karussell + Aushang */
.r1{display:grid;grid-template-columns:1fr 300px;gap:16px;margin-bottom:16px}
.car{position:relative;background:linear-gradient(135deg,#2a1d1b,#4a2a24 60%,#6b3a2c);border-radius:4px;overflow:hidden;min-height:350px;color:#f6efe6}
.sl{position:absolute;inset:0;display:flex;gap:26px;padding:26px 30px 44px;opacity:0;visibility:hidden;transition:opacity .6s}
.sl.on{opacity:1;visibility:visible}
.sl-c{flex:0 0 190px}
.sl-c img{width:190px;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.sl-t{min-width:0}
.sl-k{margin:0 0 4px;font-size:12px;color:#e8c98a;letter-spacing:.05em}
.sl-t h2{margin:0;font:700 30px/1.3 var(--serif)}
.sl-t h2 a:hover{color:#ffd9a0}
.sl-en{margin:0 0 8px;font:italic 13px Georgia,serif;color:rgba(246,239,230,.6)}
.sl-q{margin:0 0 8px;font:16px/1.6 var(--serif);color:#ffe3b0}
.sl-i{margin:0 0 12px;font-size:13px;color:rgba(246,239,230,.85);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sl .tg span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#f6efe6}
.sl-b{margin:14px 0 0;display:flex;gap:10px}
.sl-b .bt:not(.red){background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.dots button{width:22px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.dots button.on{background:#e8c98a;width:34px}
.news ul{list-style:none;margin:0;padding:0}
.news li{border-bottom:1px dashed var(--line)}
.news li a{display:block;padding:8px 0;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news li b{color:var(--red);font-weight:400;margin-right:8px;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin:12px 0 0;background:#faf7f1;padding:8px 10px;border-radius:3px}

/* Empfehlungen */
.pks{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.pk{display:flex;flex-direction:column;align-items:center;text-align:center}
.pk-c{width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.15);margin-bottom:8px}
.pk-c img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pk:hover .pk-c img{transform:scale(1.05)}
.pk b{font:700 15px/1.4 var(--serif)}
.pk small{color:var(--muted);font-size:12px}

/* Liste + Seitenleiste */
.r2{display:grid;grid-template-columns:1fr 300px;gap:16px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:2px 14px;font:13px/22px var(--sans);color:#555;cursor:pointer}
.tabs button:hover{color:var(--red);border-color:var(--red)}
.tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
.sr{margin:8px 0 0;font-size:13px;color:var(--red)}
.lst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.it{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #f0ece4}
.it[hidden]{display:none}
.it-c{position:relative;flex:0 0 96px}
.it-c img{width:96px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.b18{position:absolute;top:4px;right:4px;font:700 10px/16px var(--sans);font-style:normal;background:rgba(0,0,0,.7);color:#fff;padding:0 5px;border-radius:8px}
.it-t{min-width:0;flex:1}
.it h3{margin:0 0 2px;font:700 17px/1.4 var(--serif)}
.it-m{margin:0 0 6px;font-size:12px;color:var(--muted)}
.st{font-style:normal;font-size:11px;padding:0 6px;margin-left:6px;border-radius:2px;background:#eee;color:#888;white-space:nowrap}
.st.on{background:#e7f3ea;color:#2e7d43}
.it-i{margin:0 0 8px;font-size:13px;line-height:1.65;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rk{list-style:none;margin:0;padding:0;counter-reset:r}
.rk li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;border-bottom:1px dashed #f0ece4}
.rk li i{flex:0 0 20px;height:20px;line-height:20px;text-align:center;font:700 12px/20px var(--sans);font-style:normal;background:#ddd;color:#fff;border-radius:2px}
.rk li:nth-child(1) i{background:#e2393e}.rk li:nth-child(2) i{background:#f0703a}.rk li:nth-child(3) i{background:#f5a623}
.rk li a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk li small{color:#aaa;font-size:12px;white-space:nowrap}
.cloud{display:flex;flex-wrap:wrap;gap:8px}
.cloud a{font-size:13px;padding:2px 10px;background:#f6f3ee;border-radius:2px;color:#555}
.cloud a:nth-child(3n+1){color:var(--red)}
.cloud a:hover{background:var(--redbg);color:var(--red)}
.au{text-align:center}
.au h4{text-align:left}
.au img{width:72px;height:72px;border-radius:50%;margin:0 auto 10px}
.au p{font-size:13px;color:#555;text-align:left;margin:0 0 12px}

/* Fuß */
.ft{background:#2b2422;color:#a99e94;font-size:12px;padding:24px 0 30px;text-align:center}
.ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-bottom:10px}
.ft-links a{color:#ddd;padding:0 12px;border-left:1px solid #5a4f49;line-height:14px}
.ft-links a:first-child{border-left:0}
.ft p{margin:4px 0}

@media(max-width:960px){
 .r1,.r2{grid-template-columns:1fr}
 .pks{grid-template-columns:repeat(5,1fr);gap:12px}
}
@media(max-width:720px){
 body{font-size:15px}
 .topbar{display:none}
 .hd .w{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px;padding-bottom:12px}
 .logo{justify-content:center}
 .logo img{width:44px;height:44px}.logo b{font-size:24px}
 .so{flex:none}
 .nv .w{flex-wrap:wrap;padding:0;gap:0}
 .nv-l{width:100%}
 .nv-l a{font-size:15px;padding:0 13px;line-height:42px}
 .lang{order:-1;width:100%;border:0;border-radius:0;background:rgba(0,0,0,.14);font-size:13px}
 .lang a{flex:1;text-align:center;line-height:30px;padding:0}
 .car{min-height:0}
 .sl{position:relative;display:none;flex-direction:column;align-items:center;text-align:center;padding:20px 18px 40px;gap:14px}
 .sl.on{display:flex}
 .sl-c{flex:none}.sl-c img{width:150px}
 .sl-t h2{font-size:24px}
 .tg,.sl-b{justify-content:center}
 .it .tg{justify-content:flex-start}
 .pks{grid-template-columns:repeat(5,40%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
 .pk{scroll-snap-align:start}
 .lst{grid-template-columns:1fr}
 .it-c{flex-basis:84px}.it-c img{width:84px}
 .bx{padding:12px 14px 14px}
}

/* Buchseite */
.crumb{font-size:12px;color:var(--muted);margin:0 0 12px}
.crumb a:hover{color:var(--red)}
.bk{display:flex;gap:28px;padding:22px}
.bk-c{flex:0 0 230px;position:relative}
.bk-c img{width:230px;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.bk-c p{font-size:11px;color:#aaa;text-align:center;margin:6px 0 0}
.bk-c .b18{top:8px;right:8px}
.bk-t{flex:1;min-width:0}
.bk-t h1{margin:0;font:700 30px/1.3 var(--serif)}
.bk-en{margin:0 0 12px;font:italic 14px Georgia,serif;color:var(--muted)}
.bk-m{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-size:13px}
.bk-m dt{color:var(--muted)}
.bk-m dd{margin:0}
.bk-m .st{margin-left:0}
.bk-q{margin:0 0 12px;padding:8px 14px;background:#faf6ef;border-left:3px solid var(--gold);font:16px/1.6 var(--serif);color:#5a4630}
.bk-b{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.bk-b .bt{padding:8px 18px;font-size:15px}
.bk-b .bt small{font-size:11px;opacity:.75;margin-left:2px}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--muted)}
.buy em{font-style:normal;border:1px dashed #d8d0c2;border-radius:3px;padding:3px 10px;color:#a99e94}
.shr{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12px;color:var(--muted)}
.shr a,.shr button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:1px 10px;font:12px/20px var(--sans);color:#555;cursor:pointer}
.shr a:hover,.shr button:hover{border-color:var(--red);color:var(--red)}
.blurb{font:16px/1.95 var(--serif);color:#333}
.blurb p{margin:0 0 14px;text-indent:2em}
.blurb p:first-child{text-indent:0;font-size:17px}
.blurb em{font-style:normal;color:var(--red);font-family:var(--sans);font-size:14px}
.bk-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:13px}
.bk-nav a{color:var(--red)}
.bk-nav .nx{margin-left:auto}
.sib{list-style:none;margin:0;padding:0}
.sib li{border-bottom:1px dashed #f0ece4}
.sib a{display:flex;gap:10px;padding:8px 0;align-items:center}
.sib img{width:44px;aspect-ratio:2/3;object-fit:cover;border-radius:2px}
.sib b{display:block;font:700 14px/1.4 var(--serif)}
.sib small{color:var(--muted);font-size:12px}
.more{margin:10px 0 0;text-align:right;font-size:13px}
.more a{color:var(--red)}
@media(max-width:720px){
 .bk{flex-direction:column;align-items:center;padding:16px 14px;gap:16px}
 .bk-c{flex:none}.bk-c img{width:180px}
 .bk-t{width:100%}
 .bk-t h1{font-size:24px;text-align:center}
 .bk-en{text-align:center}
 .bk-b .bt{flex:1 1 auto;text-align:center}
 .blurb{font-size:15.5px}
}

/* Hörspiel */
.it.off{opacity:.6}
.hs-k{margin:8px 0 0}
.hs .hs-note{font-size:13px}

/* Textseiten */
.txt{max-width:860px;margin-left:auto;margin-right:auto;padding:22px 30px 26px}
.au-top{display:flex;align-items:center;gap:16px;margin:4px 0 16px}
.au-top img{width:74px;height:74px;border-radius:50%}
.txt h1{margin:0;font:700 28px/1.3 var(--serif)}
.txt .sub{margin:2px 0 0;color:var(--gold);font-size:14px;letter-spacing:.1em}
.txt h1.ser{text-align:center;margin-top:8px}.txt .sub.ser{text-align:center;margin-bottom:18px}
.sig{text-align:right;text-indent:0!important;font-family:var(--serif)}
.loves{display:flex;flex-wrap:wrap;gap:10px}
.loves span{background:var(--redbg);color:var(--red);border-radius:16px;padding:4px 14px;font-size:14px}
.mus audio{width:100%;max-width:420px;height:36px;margin:2px 0 0}
@media(max-width:720px){.txt{padding:16px 16px 20px}}
.lese .lp-k{text-align:center;color:var(--gold);font-size:13px;letter-spacing:.1em;margin:0}
.lese h2.kap{text-align:center;font:700 19px/1.5 var(--serif);color:#555;margin:6px 0 22px}
.lese .sz{text-align:center;text-indent:0;color:#aaa}
.lp-end{text-align:center;border-top:1px dashed var(--line);margin-top:24px;padding-top:16px;font-family:var(--serif);font-size:17px}
.it.off .it-c img{filter:grayscale(1) opacity(.45)}
.it.off h3,.it.off .it-i{color:#b3a892}
.mus .it.off{opacity:1}

/* Online-Leser */
.rd{--fs:18px;--pap:#f6efe0;--tx:#2b2620;--rl:#e5dcc8;max-width:860px;margin:16px auto 30px;padding:0 16px}
.rd-bar{position:sticky;top:46px;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--pap);border:1px solid var(--rl);border-radius:4px 4px 0 0;padding:8px 14px;font-size:14px}
.rd-bk{color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-ctl{display:flex;gap:6px;flex:0 0 auto}
.rd-ctl button,.rd-nav button{border:1px solid var(--rl);background:rgba(255,255,255,.55);color:var(--tx);border-radius:3px;padding:3px 10px;font:13px/20px var(--sans);cursor:pointer}
.rd-ctl button:hover,.rd-nav button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.rd-toc{background:var(--pap);border:1px solid var(--rl);border-top:0;padding:12px 18px 16px}
.rd-toc h4{margin:0 0 10px;font:700 16px var(--serif);color:var(--tx)}
.rd-toc h4 small{font:12px var(--sans);color:#998d78;margin-left:10px}
.rd-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px}
.rd-toc a{display:block;padding:6px 0;border-bottom:1px dashed var(--rl);font-size:14px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-toc a i{font-style:normal;color:#998d78;margin-right:8px}
.rd-toc a.on,.rd-toc a:hover{color:var(--red)}
.rd-txt{background:var(--pap);color:var(--tx);border:1px solid var(--rl);border-top:0;padding:30px 56px 40px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rd-k{margin:0;text-align:center;font-size:13px;color:#998d78;letter-spacing:.08em}
.rd-txt h1{margin:10px 0 28px;text-align:center;font:700 26px/1.4 var(--serif)}
.rd-txt #kx p{margin:0 0 .95em;font:var(--fs)/1.95 var(--serif);text-indent:2em;text-align:justify}
.rd-txt #kx p.sz{text-indent:0;text-align:center;color:#b3a892;margin:1.4em 0}
.rd-msg{text-align:center;min-height:1.4em;margin:10px 0 0;color:var(--red)}
.rd-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 0}
.rd-nav button{flex:1;padding:10px 0;font-size:15px;background:var(--pap)}
.rd-nav button:disabled{opacity:.45;cursor:default}
.rd-note{text-align:center;font-size:12px;color:#aaa;margin:14px 0 0}
.rd.nacht{--pap:#1f1d1a;--tx:#b9b0a0;--rl:#35312b}
.rd.nacht .rd-ctl button,.rd.nacht .rd-nav button{background:#2a2723;color:var(--tx)}
@media(max-width:720px){
 .rd{padding:0 8px;margin-top:10px}
 .rd-bar{top:0;padding:6px 10px}
 .rd-ctl button{padding:3px 7px}
 .rd-txt{padding:20px 18px 28px}
 .rd-txt h1{font-size:21px}
 .rd-toc ol{grid-template-columns:1fr}
}
/* Autorenfoto (wie DE/EN: assets/author/jack.jpg) */
.au-foto{max-width:250px;margin:6px auto 18px}
.au-foto img{width:100%;border-radius:8px;box-shadow:0 16px 42px rgba(0,0,0,.22)}
.au-top{justify-content:center;text-align:center}
.au img.au-bild{width:120px;height:120px;object-fit:cover;object-position:center 30%;border-radius:50%}
