/* Schriften lokal als WOFF2 ablegen (DSGVO) und einkommentieren:
@font-face{font-family:"Cinzel";src:url(fonts/Cinzel-600.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(fonts/CrimsonPro.woff2) format("woff2");font-weight:400 700;font-display:swap}
*/
:root{
  --bg:#0E1512;--card:#15201B;--alt:#10222A;
  --text:#ECE6D6;--muted:#A9B0A3;--gold:#D4A94F;--gold-light:#E8C77A;--emerald:#4FA58A;--focus:#8EC5FF;
  --line:rgba(212,169,79,.22);
  --head:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --body:"Crimson Pro",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--text);font:1.25rem/1.65 var(--body)}
img{max-width:100%;height:auto}
a{color:var(--gold-light);text-underline-offset:.2em}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#0E1512;padding:.75rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2.3rem,7.5vw,4.2rem)}
h2{font-size:clamp(1.8rem,5vw,2.6rem)}
h2::after{content:"";display:block;width:5rem;height:2px;margin-top:.7rem;background:linear-gradient(90deg,var(--gold),transparent)}
h3{font-size:1.3rem;margin-top:1.8em;color:var(--gold-light)}
p{margin:0 0 1.1em;max-width:65ch}

.site-header{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.7rem 1.25rem;background:rgba(14,21,18,.96);border-bottom:1px solid var(--line)}
.logo{font:600 1.2rem/1 var(--head);letter-spacing:.12em;color:var(--gold);text-decoration:none}
.nav-toggle{font:600 .95rem var(--head);letter-spacing:.06em;background:none;color:var(--text);border:1px solid var(--line);padding:.5rem .9rem;cursor:pointer}
#hauptnav{flex-basis:100%;display:none}
#hauptnav.open{display:block}
#hauptnav ul,.site-footer ul{list-style:none;margin:0;padding:0}
#hauptnav li{border-top:1px solid var(--line)}
#hauptnav a{display:block;padding:.8rem 0;color:var(--text);font:600 .9rem var(--head);letter-spacing:.08em;text-decoration:none}
#hauptnav a:hover{color:var(--gold)}
#hauptnav a.btn{display:inline-block;margin:.8rem 0;color:#0E1512}

.btn{display:inline-block;background:var(--gold);color:#0E1512;font:700 .9rem/1.3 var(--head);letter-spacing:.07em;padding:.9rem 1.4rem;border:2px solid var(--gold);border-radius:2px;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light);color:#0E1512}
.btn--ghost{background:transparent;color:var(--gold-light)}
.btn--ghost:hover{background:var(--gold);color:#0E1512}
.btn--small{padding:.5rem 1rem}
.textlink{font-weight:600}

/* Hero: Mondlicht, Nebel und ein Lichtkegel auf dem Cover */
.hero{padding:3.5rem 0 4.5rem;background:
  radial-gradient(ellipse at 80% 20%,rgba(79,165,138,.22),transparent 55%),
  radial-gradient(ellipse at 15% 90%,rgba(212,169,79,.10),transparent 50%),
  linear-gradient(180deg,#0a110e,var(--bg))}
.hero__grid{display:grid;gap:2.5rem;align-items:center}
.overline{font:600 .85rem var(--head);letter-spacing:.14em;color:var(--emerald);margin-bottom:1.2rem}
.lead{font-size:1.35rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1.2rem}
.trust{color:var(--muted);font-size:1.05rem}
.hero__cover{max-width:15rem;justify-self:start}

.section{padding:4.5rem 0}
.section--alt{background:var(--alt)}
.intro{color:var(--muted);margin-bottom:3rem}
.two-col{display:grid;gap:2.5rem}
.prose h3:first-child{margin-top:0}
.pull{margin:1em 0 1.4em;padding:0 0 0 1.2rem;border-left:3px solid var(--gold);font-size:1.45rem;font-style:italic;line-height:1.4}
.pull p{margin:0}
.portrait{aspect-ratio:4/5;max-width:22rem;width:100%;background:linear-gradient(160deg,#2a4a40,#0E1512 75%);border:1px solid var(--line);outline:1px solid var(--line);outline-offset:6px}
.note{color:var(--muted);font-size:1.05rem}

.cover{position:relative;aspect-ratio:2/3;width:100%;max-width:18rem;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;border:1px solid var(--gold);box-shadow:0 12px 32px rgba(0,0,0,.55);overflow:hidden}
.cover::before{content:"";position:absolute;left:50%;top:16%;width:6rem;height:6rem;margin-left:-3rem;border:2px solid var(--gold);border-radius:50%;box-shadow:0 0 0 8px rgba(212,169,79,.15),inset 0 0 24px rgba(212,169,79,.35)}
.cover__title{position:relative;z-index:1;font:700 1.45rem/1.15 var(--head);letter-spacing:.04em;color:var(--gold-light)}
.cover__author{position:relative;z-index:1;font:600 .75rem var(--head);letter-spacing:.2em;margin-top:.7rem}
.cover--1{background:linear-gradient(180deg,#3a1d12,#1a1210 55%,#0b0f0d)}
.cover--2{background:linear-gradient(180deg,#143c4a,#0e2530 55%,#080f14)}
.cover--3{background:linear-gradient(180deg,#27304f,#141a2e 55%,#080b14)}

.book{display:grid;gap:1.5rem;padding:2.5rem 0;border-top:1px solid var(--line)}
.book h3{margin-top:0;font-size:1.9rem;color:var(--text)}
.sub{color:var(--emerald);font:600 .95rem var(--head);letter-spacing:.08em}
.tags,.formats{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1rem;padding:0}
.tags li{border:1px solid var(--emerald);color:var(--emerald);font:600 .8rem var(--head);letter-spacing:.06em;padding:.2rem .7rem}
.formats li{font:600 .8rem var(--head);letter-spacing:.06em;border:1px solid var(--line);padding:.2rem .7rem;background:var(--card);color:var(--muted)}
.quote{margin:0 0 1.5rem;padding:1rem 1.2rem;background:var(--card);border-left:3px solid var(--gold)}
.quote p{margin:0 0 .4rem;font-style:italic;font-size:1.25rem}
.quote footer,.quotes footer{color:var(--muted);font-size:1rem}
.buy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}

.map{margin:0 0 3rem}
.map svg{display:block;width:100%;height:auto;border:1px solid var(--line)}
.map figcaption{color:var(--muted);font-size:1rem;margin-top:.6rem}
.cards{display:grid;gap:1.2rem}
.card{background:var(--card);border:1px solid var(--line);padding:1.5rem}
.card h3{margin-top:0}
.card p{margin:0}

.termine{list-style:none;margin:0 0 3rem;padding:0}
.termine li{display:grid;gap:.2rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.termine time{font:600 1rem var(--head);letter-spacing:.04em;color:var(--gold)}
.termine span{color:var(--muted)}
.quotes{display:grid;gap:1.2rem;margin-bottom:3rem}
.quotes blockquote{margin:0;padding:1.5rem;background:var(--card);border:1px solid var(--line)}
.quotes p{font-size:1.3rem;font-style:italic}

.site-footer{padding:2.5rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:1.05rem}
.site-footer ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:.5rem 0 1rem}
.site-footer a{color:var(--muted)}
.demo{font-size:.95rem}
.legal{padding:3rem 1.25rem}

@media (min-width:48em){
  .site-header{padding:.7rem 2rem}
  .nav-toggle{display:none}
  #hauptnav{display:block;flex-basis:auto}
  #hauptnav ul{display:flex;align-items:center;gap:1.5rem}
  #hauptnav li{border:0}
  #hauptnav a{padding:.3rem 0}
  #hauptnav a.btn{margin:0;padding:.5rem 1rem}
  .hero__grid{grid-template-columns:1.6fr 1fr}
  .hero__cover{justify-self:end;max-width:19rem}
  .two-col{grid-template-columns:1fr 1.6fr;align-items:start}
  .two-col--text{grid-template-columns:1fr 1fr}
  .book{grid-template-columns:16rem 1fr;gap:3rem}
  .buy{flex-direction:row;flex-wrap:wrap;align-items:center}
  .cards{grid-template-columns:repeat(3,1fr)}
  .termine li{grid-template-columns:16rem 1fr 1fr;gap:1.5rem;align-items:baseline}
  .quotes{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}