/* Leseprobe — "Buchseite" im Design der Website */
:root{
  --paper:#f6efdf;
  --paper-ink:#2b2118;
  --gold:#b8892f;
  --gold-soft:#e6b84a;
}

/* dunkle Kopfzeile, damit die Navigation über dem hellen Papier lesbar bleibt */
header::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(5,5,10,.94), rgba(5,5,10,.8)); border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}

/* goldener Faden = Lesefortschritt (passt zur Geschichte) */
.read-thread{position:fixed; left:18px; top:96px; bottom:40px; width:2px; z-index:5; pointer-events:none; opacity:0; transition:opacity .5s ease;}
.read-thread.on{opacity:1;}
.read-thread::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.08); border-radius:2px;}
.read-thread span{position:absolute; left:0; top:0; width:100%; height:calc(var(--p,0) * 100%); background:linear-gradient(#ffeeb4,var(--gold-soft)); box-shadow:0 0 10px rgba(230,184,74,.55); border-radius:2px;}
.read-thread span::after{content:""; position:absolute; left:50%; bottom:-4px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#fff4c9; box-shadow:0 0 12px 3px rgba(230,184,74,.8);}
@media (max-width:900px){
  .read-thread{left:0; right:0; top:0; bottom:auto; width:auto; height:3px; z-index:60;}
  .read-thread span{width:calc(var(--p,0) * 100%); height:100%;}
  .read-thread span::after{left:auto; right:-4px; bottom:auto; top:-3px; margin-left:0;}
}

/* Kopfbereich: Cover + Titel */
.book-hero{padding-top:150px; padding-bottom:50px; display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:clamp(34px,6vw,84px); align-items:center;}
.book-cover{position:relative; perspective:1100px; max-width:340px;}
.book-cover img{width:100%; height:auto; border-radius:2px 8px 8px 2px; transform-origin:left center; transform:rotateY(-9deg);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  box-shadow:16px 26px 54px -14px rgba(0,0,0,.8), 0 0 70px -12px rgba(230,184,74,.28);}
.book-cover:hover img{transform:rotateY(-2deg);}
.book-cover::after{content:""; position:absolute; inset:0; border-radius:2px 8px 8px 2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.32), rgba(255,255,255,.2) 2.2%, rgba(255,255,255,0) 7%);}
.book-meta h1{font-size:clamp(34px,5vw,56px); line-height:1.08; margin-top:16px;}
.book-sub{font-family:'Fraunces',serif; font-style:italic; font-size:clamp(19px,2.4vw,24px); color:var(--text-dim); margin:14px 0 0;}
.book-author{font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.2em; font-size:12.5px; color:var(--text-faint); margin:22px 0 0;}
.book-chip{display:inline-block; margin:22px 0 0; padding:6px 16px; border:1px solid rgba(230,184,74,.55); border-radius:999px; color:var(--gold-soft); font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.book-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
@media (max-width:760px){
  .book-hero{grid-template-columns:1fr; padding-top:118px; text-align:center; justify-items:center; gap:34px;}
  .book-cover{width:min(66vw,260px);}
  .book-cover img{transform:rotateY(-6deg);}
  .book-meta .eyebrow{justify-content:center;}
  .book-actions{justify-content:center;}
}

/* Das Buchblatt */
.book-sheet{--read-base:18px; position:relative; max-width:760px; margin:18px auto 0; scroll-margin-top:90px;
  padding:72px clamp(24px,7vw,84px) 56px; background:var(--paper); color:var(--paper-ink); border-radius:3px;
  box-shadow:0 34px 90px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05);
  background-image:linear-gradient(90deg, rgba(120,90,40,.13), rgba(120,90,40,0) 5%, rgba(120,90,40,0) 95%, rgba(120,90,40,.13)),
                   linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 14%);
  transition:background .5s ease, color .5s ease;}
@media (min-width:900px){.book-sheet{--read-base:19.5px;}}

@media (max-width:600px){
  .book-sheet{margin-left:-16px; margin-right:-16px; padding:68px 22px 44px;}
}

.reader-tools{position:absolute; top:18px; right:18px; display:flex; gap:6px;}
.reader-tools button{width:36px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  border:1px solid rgba(43,33,24,.22); border-radius:3px; background:transparent; color:#6b5a3e; font:600 14px 'Space Grotesk',sans-serif;}
.reader-tools button small{font-size:11px; margin-left:1px;}
.reader-tools button:hover, .reader-tools button[aria-pressed="true"]{border-color:var(--gold); color:var(--gold); background:rgba(184,137,47,.08);}
.reader-tools button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.sheet-head{text-align:center; margin-bottom:38px;}
.sheet-section{font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.24em; font-size:12px; color:var(--gold); margin:0 0 14px;}
.sheet-head h2{font-size:clamp(30px,5vw,44px); line-height:1.15; color:#3a2a17; font-weight:500;}
.orn{width:150px; height:14px; margin:22px auto 0; color:var(--gold);}

.story-photo{margin:0 auto 42px; max-width:440px;}
.story-photo img{width:100%; height:auto; border-radius:3px; box-shadow:0 18px 40px -18px rgba(43,33,24,.55);}
.book-sheet[data-reader="night"] .story-photo img{box-shadow:0 18px 40px -18px rgba(0,0,0,.9);}

.story{font-family:'Lora',Georgia,'Times New Roman',serif; font-size:calc(var(--read-base) * var(--read-scale,1));}
.story p{font-size:1em; line-height:1.85; margin:0 0 1.2em; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; orphans:3; widows:3;}
.story p:first-child{font-size:.84em; letter-spacing:.13em; text-transform:uppercase; color:#5b4524;}
.sheet-end{margin-top:34px;}
.ki-note{margin:26px 0 0; font-size:12px; text-align:center; color:#7a6a50; font-family:'Space Grotesk',sans-serif;}

/* dunkles Papier */
.book-sheet[data-reader="night"]{background:#0d0e17; color:#e9e3d3; box-shadow:0 34px 90px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.09);
  background-image:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,.05));}
.book-sheet[data-reader="night"] .sheet-head h2{color:#f3e7c6;}
.book-sheet[data-reader="night"] .story p:first-child{color:var(--gold-soft);}
.book-sheet[data-reader="night"] .reader-tools button{border-color:rgba(255,255,255,.2); color:#b9ae94;}
.book-sheet[data-reader="night"] .ki-note{color:#9a8f78;}

/* Buch geschenkt bekommen */
.book-gift{padding:80px 30px 40px;}
.gift-card{max-width:640px; margin:0 auto; padding:clamp(26px,5vw,44px); text-align:center; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:6px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); scroll-margin-top:90px;}
.gift-card h2{font-size:clamp(26px,4vw,36px); margin-bottom:16px;}
.gift-line{color:var(--text-dim); margin:0 0 10px;}
#giftForm{margin-top:28px; text-align:left;}
#giftForm .lbl{display:block; font-size:15px; color:var(--text); margin:0 0 10px;}
#giftForm input[type="email"]{width:100%; background:rgba(255,255,255,.05); border:1px solid var(--panel-border); border-radius:3px; padding:14px 15px;
  color:var(--text); font:16px 'Space Grotesk',sans-serif;}
#giftForm input[type="email"]:focus{outline:none; border-color:var(--gold-soft);}
.consent{display:flex; gap:12px; align-items:flex-start; margin:20px 0 8px; font-size:13.5px; line-height:1.55; color:var(--text-dim); cursor:pointer;}
.consent input{flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; accent-color:var(--gold-soft); cursor:pointer;}
.consent a{color:var(--text); text-decoration:underline; text-underline-offset:3px;}
.data-note{font-size:13px; color:var(--text-faint); margin:12px 0 22px;}
#giftForm .btn{width:100%; justify-content:center;}
.form-status{min-height:1.5em; margin:14px 0 0; font-size:14px; color:var(--text-dim); text-align:center;}
.form-status.ok{color:var(--gold-soft);}
.form-status.err{color:#ff9d8a;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .book-cover img, .read-thread, .book-sheet{transition:none;}
  .book-cover:hover img{transform:rotateY(-9deg);}
}