@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/lora-var.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2')}

:root{
  --paper:#FDF7EC; --paper2:#F6EBD7; --panel:#FFFCF6; --plumbg:#411F48;
  --ink:#2C1330; --tx:#4E3853; --mu:#77637C; --mu2:#95849A;
  --plum:#6E2F72; --plum2:#8B4A8C; --gold:#A8761B; --gold2:#F5C451; --heather:#B85E8E;
  --cream:#FBF3E4;
  --line:rgba(65,31,72,.14); --line2:rgba(65,31,72,.24);
  --disp:'Lora',Georgia,'Times New Roman',serif; --body:'Poppins',system-ui,-apple-system,sans-serif;
  --wrap:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--tx);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum);text-decoration:none;transition:color .16s ease}
a:hover{color:var(--heather)}
h1,h2,h3{font-family:var(--disp);font-weight:700;margin:0;color:var(--ink);letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--gold2);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.cat{display:inline-block;vertical-align:middle;fill:currentColor}
.kick{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;background:var(--plum);color:var(--cream);padding:16px 30px;border:1px solid var(--plum);border-radius:3px;transition:background .18s,box-shadow .18s,transform .18s}
.btn:hover{background:var(--plum2);border-color:var(--plum2);color:var(--cream);box-shadow:0 10px 26px -10px rgba(110,47,114,.7);transform:translateY(-1px)}
.btn[data-soon]{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn[data-soon]:hover{background:rgba(110,47,114,.06);border-color:var(--plum);color:var(--ink);box-shadow:none;transform:none}
.btn-ghost{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);padding:16px 30px;border:1px solid var(--line2);border-radius:3px;transition:border-color .18s,background .18s}
.btn-ghost:hover{border-color:var(--plum);background:rgba(110,47,114,.06);color:var(--ink)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(253,247,236,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink)}
.brand:hover{color:var(--plum)}
.brand .cat{color:var(--plum);width:14px;height:18px}
.back{font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--mu)}
.back:hover{color:var(--plum)}

/* breadcrumb */
.crumb{font-family:var(--body);font-size:12.5px;color:var(--mu2);padding:26px 0 0;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.crumb a{color:var(--mu)}
.crumb a:hover{color:var(--plum)}
.crumb span{color:var(--mu2)}

/* buch-hero */
.bhero{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;padding:38px 0 54px}
.bhero-cov{position:relative}
.bhero-cov .aura{position:absolute;inset:-10% -8%;background:radial-gradient(closest-side,rgba(110,47,114,.26),rgba(110,47,114,0) 72%);filter:blur(6px);pointer-events:none}
.bhero-cov img{position:relative;width:100%;border-radius:3px;box-shadow:0 30px 60px -22px rgba(44,19,48,.55),0 0 0 1px rgba(44,19,48,.1)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow span.r{width:26px;height:2px;background:var(--gold2)}
.eyebrow span.t{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.btitle{font-size:clamp(32px,4.6vw,52px);line-height:1.1;margin-bottom:18px;text-wrap:balance}
.bhook{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2.2vw,23px);line-height:1.4;color:var(--plum);margin-bottom:26px;text-wrap:pretty}
.bmeta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.bmeta span{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--tx);background:var(--paper2);border:1px solid var(--line);border-radius:3px;padding:7px 13px}
.bmeta span.hl{background:rgba(245,196,81,.28);border-color:rgba(168,118,27,.3);color:#6B4A0E}
.bcta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:14px}
.bnote{font-size:12.5px;color:var(--mu2);line-height:1.6}

/* klappentext */
.bblurb{max-width:760px;margin:0 auto;padding:8px 0 56px}
.bblurb p{font-size:17.5px;line-height:1.78;color:var(--tx);margin-bottom:20px;text-wrap:pretty}
.bblurb p.first{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.5;color:var(--ink)}
.bblurb p.last{font-family:var(--disp);font-weight:700;font-size:18.5px;line-height:1.55;color:var(--ink);border-top:1px solid var(--line);padding-top:24px;margin-top:30px}

/* genre-hinweis */
.pact{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pact-in{max-width:var(--wrap);margin:0 auto;padding:44px 28px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.pact-in .ic{color:var(--plum);flex-shrink:0}
.pact-in .ic .cat{width:34px;height:42px}
.pact-in b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:6px}
.pact-in p{font-size:15.5px;line-height:1.68;color:var(--mu);max-width:790px}

/* reihen-navigation */
.rnav{max-width:var(--wrap);margin:0 auto;padding:54px 28px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rnav a{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px 20px;transition:border-color .2s,transform .2s}
.rnav a:hover{border-color:rgba(110,47,114,.45);transform:translateY(-2px)}
.rnav a img{width:48px;border-radius:2px;flex-shrink:0}
.rnav a .d{min-width:0}
.rnav a .l{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px}
.rnav a b{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);line-height:1.3;display:block}
.rnav a.nxt{text-align:right;flex-direction:row-reverse}
.rnav .empty{border:1px dashed var(--line);border-radius:4px}

/* weitere bände */
.more{max-width:var(--wrap);margin:0 auto;padding:64px 28px 76px}
.more h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.more .sub{font-size:15.5px;color:var(--mu);margin-bottom:32px}
.more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mcard{display:flex;flex-direction:column;gap:11px}
.mcard .cov{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.mcard:hover .cov{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(44,19,48,.5)}
.mcard .no{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;background:var(--gold2);color:#3A1C10;font-family:var(--disp);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.mcard b{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);line-height:1.28}
.mcard .g{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--mu);line-height:1.5}

/* footer */
footer{border-top:1px solid var(--line);background:var(--paper)}
.ft{padding:40px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto}
.ft .b{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink)}
.ft .b .cat{color:var(--plum);width:12px;height:16px}
.ft nav{display:flex;gap:22px;flex-wrap:wrap}
.ft nav a{font-family:var(--body);font-weight:500;font-size:13px;color:var(--mu)}
.ft nav a:hover{color:var(--plum)}
.ft nav a.q{color:var(--mu2)}
.ft .c{font-family:var(--body);font-size:12.5px;color:var(--mu2)}

@media (max-width:900px){
  .bhero{grid-template-columns:230px 1fr;gap:36px}
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .hdr-in{height:60px;gap:12px}
  .brand{font-size:17px;white-space:nowrap}
  .brand .cat{width:12px;height:15px}
  .back{white-space:nowrap;font-size:12.5px}
  .bhero{grid-template-columns:1fr;gap:30px;padding:26px 0 42px}
  .bhero-cov{max-width:230px}
  .rnav{grid-template-columns:1fr}
  .rnav a.nxt{text-align:left;flex-direction:row}
  .bblurb p.first{font-size:19px}
  .ft{justify-content:center;text-align:center}
}