@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/gloock-400.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-400.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/lora-400i.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lora-700.woff2) format('woff2');}

/* ============================================================
   ===============  HIER LINKS & BILDER ANPASSEN  =============
   Trage unten im Skript bei LINKS deine echten URLs ein
   (Amazon, Merch, Spiel, Instagram, YouTube).
   Bilder: lege cover.jpg / karte.jpg neben diese Datei.
   ============================================================ */
:root{
  --deep:#0b1614; --teal:#1b302b; --teal2:#26403a; --bronze:#c49a56;
  --bronze-dk:#8f6c39; --parch:#e9dec5; --dim:#9aa79a; --magic:#7fd6c8; --rust:#b0563f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--deep);color:var(--parch);font-family:'Lora',Georgia,serif;line-height:1.6;overflow-x:hidden}
a{color:var(--bronze);text-decoration:none}
h1,h2,h3{font-family:'Gloock',serif;font-weight:700;letter-spacing:2px;color:var(--parch)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.diamond{color:var(--bronze);font-size:14px;display:inline-block}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(9,17,16,.96);border-bottom:1px solid rgba(196,154,86,.25)}
nav .row{display:flex;align-items:center;gap:8px;padding:14px 24px;max-width:1040px;margin:0 auto}
nav .brand{font-family:'Gloock',serif;font-weight:700;letter-spacing:3px;font-size:18px;color:var(--parch)}
nav .links{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav .links a{font-family:'Gloock',serif;font-size:13px;letter-spacing:2px;color:var(--dim);transition:.2s}
nav .links a:hover{color:var(--bronze)}

/* hero */
header.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
#fog{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .inner{position:relative;z-index:2;padding:40px 24px}
.hero .sub{font-family:'Gloock',serif;letter-spacing:8px;font-size:14px;color:var(--bronze);margin-bottom:18px}
.hero h1{font-size:clamp(48px,11vw,118px);letter-spacing:6px;text-shadow:0 0 50px rgba(127,214,200,.18)}
.hero .name{font-family:'Gloock',serif;letter-spacing:5px;font-size:clamp(15px,3vw,20px);color:var(--parch);margin-top:8px}
.hero .tag{font-style:italic;font-size:clamp(17px,2.5vw,22px);color:var(--dim);margin:22px auto 6px;max-width:560px}
.hero .quote{font-style:italic;color:var(--parch);opacity:.85;margin-top:26px}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(0,0,0,0),rgba(11,22,20,.65) 75%);z-index:1}

/* buttons */
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero .cta{flex-direction:column;align-items:center;gap:12px}
.hero .cta .btn{width:min(320px,86vw);text-align:center}
.btn{font-family:'Gloock',serif;letter-spacing:2px;font-size:14px;padding:14px 26px;border-radius:5px;border:1px solid var(--bronze);transition:.2s;cursor:pointer;display:inline-block}
.btn.primary{background:var(--bronze);color:var(--deep)}
.btn.primary:hover{background:#dcb874;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--parch)}
.btn.ghost:hover{background:rgba(196,154,86,.15);transform:translateY(-2px)}

/* sections */
section{padding:84px 0;position:relative}
section.alt{background:linear-gradient(180deg,var(--teal),var(--deep))}
.eyebrow{font-family:'Gloock',serif;letter-spacing:4px;font-size:13px;color:var(--bronze);margin-bottom:14px}
h2{font-size:clamp(26px,5vw,40px);margin-bottom:18px}
.lead{font-size:19px;color:var(--parch)}
.muted{color:var(--dim)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:30px}}
.cover{width:100%;height:auto;max-width:340px;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid rgba(196,154,86,.3);display:block;margin:0 auto}
.coverFallback{width:100%;max-width:340px;aspect-ratio:2/3;border-radius:6px;border:1px solid rgba(196,154,86,.3);
  background:linear-gradient(160deg,#26403a,#0e1d1a);display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Gloock',serif;letter-spacing:3px;color:var(--bronze);padding:30px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* link cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:block;padding:28px 24px;border:1px solid rgba(196,154,86,.3);border-radius:8px;background:rgba(38,64,58,.35);transition:.2s}
.card:hover{transform:translateY(-4px);border-color:var(--bronze);background:rgba(38,64,58,.6)}
.card .ic{font-size:30px;margin-bottom:10px}
.card h3{font-size:18px;letter-spacing:2px;margin-bottom:6px}
.card p{color:var(--dim);font-size:15px}

footer{padding:50px 0 70px;text-align:center;border-top:1px solid rgba(196,154,86,.25);background:var(--deep)}
footer .social{display:flex;gap:24px;justify-content:center;margin:16px 0}
footer .social a{font-family:'Gloock',serif;letter-spacing:2px;font-size:13px}
.tiny{font-size:12px;letter-spacing:2px;color:var(--bronze-dk);font-family:'Gloock',serif;margin-top:18px}
.rune{color:var(--bronze-dk);cursor:default;user-select:none}

/* secret door (easter egg) */
#door{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(20,40,36,.96),rgba(7,13,12,.99));text-align:center;padding:40px}
#door.open{display:flex;animation:fade .8s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
#door .box{max-width:520px}
#door h2{color:var(--magic);margin-bottom:20px}
#door p{font-style:italic;font-size:19px;color:var(--parch);line-height:1.7}
#door .close{margin-top:30px;cursor:pointer}
#secretWhisper{display:block;margin-top:14px;font-style:italic;color:var(--magic);opacity:0;transition:opacity 1.2s;height:1.4em}
#secretWhisper.show{opacity:.9}
.fogtint{position:fixed;inset:0;background:rgba(150,170,165,0);pointer-events:none;z-index:150;transition:background 1.5s}

/* ---- Ergänzungen: Reihe, FAQ, Hinweise ---- */
.books{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px}
@media(max-width:760px){.books{grid-template-columns:1fr;gap:48px}}
.book{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:start}
@media(max-width:520px){.book{grid-template-columns:1fr}.book .cover,.book .coverFallback{max-width:220px}}
.book h3{font-size:21px;margin-bottom:4px;line-height:1.3}
.book .band{font-family:'Gloock',serif;letter-spacing:3px;font-size:12px;color:var(--bronze);display:block;margin-bottom:8px}
.book p{color:var(--dim);font-size:15px;margin-bottom:12px}
.book .btn{font-size:13px;padding:11px 20px}
.faq{margin-top:26px;max-width:820px}
.faq details{border-bottom:1px solid rgba(196,154,86,.22);padding:16px 0}
.faq summary{font-family:'Gloock',serif;letter-spacing:1px;font-size:17px;color:var(--parch);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\25C6";color:var(--bronze);font-size:11px;margin-right:12px;vertical-align:middle}
.faq p{color:var(--dim);margin-top:12px;font-size:16px}
.disclosure{font-size:13px;color:var(--bronze-dk);max-width:820px;margin-top:26px;line-height:1.6}
.badge{display:inline-block;font-family:'Gloock',serif;letter-spacing:2px;font-size:11px;color:var(--deep);
  background:var(--bronze);padding:4px 10px;border-radius:3px;margin-bottom:10px}
.badge.soft{background:transparent;color:var(--bronze);border:1px solid rgba(196,154,86,.5)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ============ Ergänzungen: Mehrseiten-Layout ============ */
nav .links a.on{color:var(--bronze)}
.crumbs{font-size:12px;letter-spacing:1px;color:var(--dim);font-family:'Gloock',serif;margin-bottom:18px}
.crumbs a{color:var(--bronze-dk)}
.crumbs a:hover{color:var(--bronze)}
.crumbs i{color:var(--bronze-dk);font-style:normal;padding:0 4px}

/* Kopfbereich der Unterseiten */
header.page{padding:64px 0 10px;background:linear-gradient(180deg,var(--teal),var(--deep))}
header.page h1{font-size:clamp(30px,5.5vw,50px);line-height:1.15;margin-bottom:14px}
header.page .kicker{font-family:'Gloock',serif;letter-spacing:5px;font-size:12px;color:var(--bronze);margin-bottom:14px}
header.page .intro{font-size:19px;color:var(--parch);max-width:760px}

/* Fließtext */
.prose{max-width:760px}
.prose h2{font-size:clamp(23px,3.6vw,31px);margin:52px 0 14px}
.prose h3{font-size:19px;letter-spacing:1px;margin:32px 0 10px}
.prose p{color:var(--dim);margin-bottom:15px;font-size:17px}
.prose p strong,.prose strong{color:var(--parch)}
.prose ul,.prose ol{color:var(--dim);margin:0 0 18px 22px;font-size:17px}
.prose li{margin-bottom:9px}
.prose blockquote{border-left:2px solid var(--bronze);padding:6px 0 6px 20px;margin:26px 0;
  font-style:italic;color:var(--parch);font-size:19px}

/* Bücher-Raster */
.books{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px}
@media(max-width:860px){.books{grid-template-columns:1fr;gap:48px}}
.book{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:start}
@media(max-width:520px){.book{grid-template-columns:1fr}.book .cover,.book .coverFallback{max-width:220px;margin:0}}
.book h3{font-size:20px;margin-bottom:4px;line-height:1.3}
.book .band{font-family:'Gloock',serif;letter-spacing:3px;font-size:11px;color:var(--bronze);display:block;margin-bottom:8px}
.book p{color:var(--dim);font-size:15px;margin-bottom:12px}
.book .btn{font-size:13px;padding:11px 18px}
.book .cover{max-width:100%}

/* Buchseite: Cover + Text */
.buchhead{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;margin-top:26px}
@media(max-width:760px){.buchhead{grid-template-columns:1fr;gap:30px}}
.meta{list-style:none;margin:22px 0 0 0!important;padding:0;border-top:1px solid rgba(196,154,86,.22)}
.meta li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid rgba(196,154,86,.14);
  font-size:14px;color:var(--dim);margin:0!important}
.meta li b{font-family:'Gloock',serif;letter-spacing:1px;font-weight:400;color:var(--bronze);
  min-width:130px;flex:0 0 130px;font-size:12px;text-transform:uppercase}

/* FAQ */
.faq{margin-top:26px;max-width:820px}
.faq details{border-bottom:1px solid rgba(196,154,86,.22);padding:16px 0}
.faq summary{font-family:'Gloock',serif;letter-spacing:1px;font-size:17px;color:var(--parch);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\25C6";color:var(--bronze);font-size:11px;margin-right:12px;vertical-align:middle}
.faq p{color:var(--dim);margin-top:12px;font-size:16px}

/* Hinweise & Kästen */
.disclosure{font-size:13px;color:var(--bronze-dk);max-width:820px;margin-top:30px;line-height:1.6}
.box-cta{border:1px solid rgba(196,154,86,.35);border-radius:8px;background:rgba(38,64,58,.35);
  padding:30px 28px;margin:44px 0;max-width:820px}
.box-cta h3{font-size:20px;margin-bottom:10px}
.box-cta p{color:var(--dim);margin-bottom:18px;font-size:16px}
.badge{display:inline-block;font-family:'Gloock',serif;letter-spacing:2px;font-size:11px;color:var(--deep);
  background:var(--bronze);padding:4px 10px;border-radius:3px;margin-bottom:10px}

/* Lexikon */
.lex{border-top:1px solid rgba(196,154,86,.22);max-width:820px;margin-top:20px}
.lex dt{font-family:'Gloock',serif;letter-spacing:1px;color:var(--parch);font-size:17px;padding-top:20px}
.lex dd{color:var(--dim);margin:6px 0 20px 0;font-size:16px;border-bottom:1px solid rgba(196,154,86,.14);padding-bottom:20px}

/* Footer-Spalten */
.footcols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:940px;margin:34px auto 0;text-align:left}
@media(max-width:820px){.footcols{grid-template-columns:1fr 1fr;gap:22px}}@media(max-width:480px){.footcols{grid-template-columns:1fr;text-align:center}}
.footcols h4{font-family:'Gloock',serif;letter-spacing:2px;font-size:12px;color:var(--bronze);
  margin-bottom:10px;font-weight:400;text-transform:uppercase}
.footcols a{display:block;color:var(--dim);font-size:14px;padding:4px 0}
.footcols a:hover{color:var(--bronze)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ============ Leseprobe ============ */
.leseprobe{max-width:680px;margin:0 auto}
.leseprobe h2{font-size:clamp(22px,4vw,30px);text-align:center;margin:0 0 8px;letter-spacing:2px}
.leseprobe .kapitel-sub{text-align:center;color:var(--bronze);font-family:'Gloock',serif;
  letter-spacing:4px;font-size:11px;margin-bottom:36px}
.leseprobe p{color:var(--parch);font-size:18px;line-height:1.85;margin-bottom:20px;
  hyphens:auto;-webkit-hyphens:auto}
.leseprobe p:first-of-type::first-letter{font-family:'Gloock',serif;font-size:58px;line-height:.85;
  float:left;padding:6px 12px 0 0;color:var(--bronze)}
.leseprobe hr{border:0;text-align:center;margin:44px 0}
.leseprobe hr::before{content:"\25C6";color:var(--bronze-dk);font-size:12px}
.fadeout{position:relative;max-height:230px;overflow:hidden}
.fadeout::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,rgba(11,22,20,0),var(--deep) 92%)}
.weiterlesen{max-width:680px;margin:-10px auto 0;text-align:center;
  border:1px solid rgba(196,154,86,.35);border-radius:8px;background:rgba(38,64,58,.4);padding:34px 28px}
.weiterlesen h3{font-size:22px;margin-bottom:10px}
.weiterlesen p{color:var(--dim);margin-bottom:20px;font-size:16px}
.weiterlesen .btn{margin:5px}


/* ============ Bildfixes & Karte ============ */
picture{display:block}
img{max-width:100%;height:auto}          /* verhindert Verzerrung durch width/height-Attribute */
.book picture,.buchhead picture{margin:0}
.book .cover{max-width:100%;margin:0}

.kartewrap{max-width:1000px;margin:30px auto 0}
.karte{display:block;width:100%;height:auto;border-radius:6px;border:1px solid rgba(196,154,86,.35);
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.kartewrap figcaption{color:var(--dim);font-size:14px;text-align:center;margin-top:14px;font-style:italic}
.kartewrap a.zoom{display:block}
.kartewrap a.zoom:hover .karte{border-color:var(--bronze)}

/* Merch-Teaser */
.merch{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  border:1px solid rgba(196,154,86,.35);border-radius:8px;background:rgba(38,64,58,.35);padding:28px 30px;
  max-width:900px;margin:36px auto 0}
@media(max-width:620px){.merch{grid-template-columns:1fr;text-align:center}}
.merch h3{font-size:20px;margin-bottom:8px}
.merch p{color:var(--dim);font-size:16px;margin:0}

/* ---- Buchkarten: Buttons auf gleicher Höhe ---- */
.books{align-items:stretch}
.book{align-items:stretch}
.book>div{display:flex;flex-direction:column}
.book picture{align-self:start}
.bookcta{margin-top:auto;padding-top:4px}
.bookcta .btn{margin-right:8px}

/* ============ Mobile Navigation (Burger) ============ */
.burger{display:none;margin-left:auto;width:44px;height:38px;padding:9px 8px;
  background:transparent;border:1px solid rgba(196,154,86,.35);border-radius:5px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--bronze);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger span+span{margin-top:5px}
nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

@media(max-width:860px){
  .burger{display:block}
  nav .row{flex-wrap:wrap;padding:12px 18px}
  nav .brand{font-size:16px}
  nav .links{
    margin-left:0;flex-basis:100%;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav.open .links{max-height:70vh;overflow-y:auto}
  nav .links a{
    display:block;padding:14px 2px;font-size:15px;letter-spacing:2px;
    border-bottom:1px solid rgba(196,154,86,.16);
  }
  nav .links a:last-child{border-bottom:0}
  nav .links a.on{color:var(--bronze)}
}
@media(prefers-reduced-motion:reduce){
  .burger span,nav .links{transition:none}
}

/* ============================================================
   Startseite: zwei Welten  +  Sachbuch-Look (Layer 8)
   ============================================================ */

/* --- Werk-Raster auf Übersichtsseiten --- */
.works{display:grid;gap:26px;margin-top:30px}
.work{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:center;
  border:1px solid rgba(196,154,86,.22);border-radius:10px;padding:24px;background:rgba(38,64,58,.28)}
.work picture{display:block;margin:0}
.work .cover{width:160px;max-width:160px;height:auto;border-radius:5px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);border:1px solid rgba(196,154,86,.3);display:block;margin:0}
@media(max-width:560px){
  .work{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .work .cover{width:190px;max-width:190px;margin:0 auto}
  .work .btn{margin:6px 4px 0}
}
.work .band{font-family:'Gloock',serif;letter-spacing:3px;font-size:11px;color:var(--bronze);
  display:block;margin-bottom:7px;text-transform:uppercase}
.work h3{font-size:20px;line-height:1.3;margin-bottom:8px}
.work h3 a{color:var(--parch)}
.work h3 a:hover{color:var(--bronze)}
.work p{color:var(--dim);font-size:15px;margin-bottom:14px}
.work .btn{font-size:13px;padding:10px 18px;margin:0 8px 8px 0}

/* Zwei-Welten-Trenner auf der Startseite */
.world-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.world-head .eyebrow{margin:0}
.world-head .count{color:var(--bronze-dk);font-size:13px;font-family:'Gloock',serif;letter-spacing:2px}

/* ============================================================
   Sachbuch-Modus: heller, sachlicher  (body.nonfiction)
   Überschreibt die dunkle Fantasy-Palette gezielt.
   ============================================================ */
body.nonfiction{
  --deep:#f4f1ea; --teal:#ffffff; --teal2:#ece7dc;
  --bronze:#9c6b1f; --bronze-dk:#7c5518; --parch:#1c1f24; --dim:#4a4f57;
  background:#f4f1ea;color:#1c1f24;
}
body.nonfiction nav{background:#1c1f24;border-bottom:2px solid #9c6b1f}
body.nonfiction nav .brand{color:#f4f1ea}
body.nonfiction nav .links a{color:#cfc9bd}
body.nonfiction nav .links a:hover,body.nonfiction nav .links a.on{color:#d9a441}
body.nonfiction nav .links a.on{color:#d9a441}
body.nonfiction .burger{border-color:rgba(255,255,255,.3)}
body.nonfiction .burger span{background:#d9a441}
@media(max-width:860px){
  body.nonfiction nav .links{background:#1c1f24}
  body.nonfiction nav .links a{border-color:rgba(255,255,255,.12)}
}
body.nonfiction header.page{background:linear-gradient(180deg,#ffffff,#f4f1ea)}
body.nonfiction .kicker{color:#9c6b1f}
body.nonfiction .prose p,body.nonfiction .prose li{color:#33383f}
body.nonfiction .prose strong{color:#1c1f24}
body.nonfiction .prose blockquote{border-left-color:#9c6b1f;color:#1c1f24}
body.nonfiction .meta li{border-color:rgba(28,31,36,.12);color:#4a4f57}
body.nonfiction .meta li b{color:#9c6b1f}
body.nonfiction .box-cta{background:#1c1f24;border-color:#9c6b1f}
body.nonfiction .box-cta h3{color:#f4f1ea}
body.nonfiction .box-cta p{color:#cfc9bd}
body.nonfiction .faq details{border-color:rgba(28,31,36,.15)}
body.nonfiction .faq summary{color:#1c1f24}
body.nonfiction .faq p{color:#4a4f57}
body.nonfiction .buchhead .cover{box-shadow:0 20px 50px rgba(0,0,0,.25)}
body.nonfiction footer{background:#1c1f24;color:#cfc9bd}
body.nonfiction footer .footcols h4{color:#d9a441}
body.nonfiction footer .footcols a,body.nonfiction footer .social a{color:#b7b1a4}
body.nonfiction footer .footcols a:hover{color:#d9a441}
body.nonfiction .disclosure{color:#6a6f77}
body.nonfiction .checklist{list-style:none;margin:20px 0;padding:0}
body.nonfiction .checklist li{position:relative;padding:8px 0 8px 34px;color:#33383f;
  border-bottom:1px solid rgba(28,31,36,.08)}
body.nonfiction .checklist li::before{content:"\2713";position:absolute;left:4px;top:8px;
  color:#9c6b1f;font-weight:bold}