:root{
  --bg:#06070a; --text:#e9ebf0; --muted:#8d93a1; --accent:#c9d6ff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin:0 0 1.2rem}

/* ---------- Geräte-Gate: Smartphones / Hochformat ---------- */
#device-gate{display:none;position:fixed;inset:0;z-index:99999;background:#000;color:#dfe3ea;text-align:center;align-items:center;justify-content:center;padding:2rem;font-size:1.25rem;line-height:1.5}
#device-gate svg{margin-bottom:1rem;opacity:.8}
#device-gate p{margin:0;max-width:20em}
@media (max-width:767px), (orientation:portrait) and (max-width:1100px){
  #device-gate{display:flex}
  body.library > :not(#device-gate), body.reader > :not(#device-gate){display:none!important}
}

/* ---------- Bibliothek ---------- */
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;overflow:hidden}
.hero__glow{position:absolute;inset:-20%;background:
  radial-gradient(40% 35% at 50% 38%,rgba(110,140,220,.20),transparent 70%),
  radial-gradient(30% 25% at 70% 70%,rgba(60,110,100,.14),transparent 70%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.08)}}
.hero>*{position:relative}
.hero h1{font:200 clamp(3.5rem,11vw,9rem)/1 var(--sans);letter-spacing:-.04em;margin:0 0 1.6rem}
.hero h1 b{font-weight:700}
.lead{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.6rem);color:#b7bccb;line-height:1.6;margin:0}
.scroll-cue{margin-top:4rem;text-decoration:none;color:var(--muted);font-size:1.6rem;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(8px)}}

.shelf{max-width:1400px;margin:0 auto;padding:4rem 4vw 6rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2.2rem}
.card{display:block;text-decoration:none;background:#0d0f14;border-radius:18px;overflow:hidden;opacity:0;transform:translateY(36px);transition:opacity 1s ease var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),box-shadow .5s ease}
.card.in{opacity:1;transform:none}
.card__img{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#10141c,#07080b)}
.card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .8s}
.card:hover{box-shadow:0 30px 70px rgba(0,0,0,.6)}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:1.5rem 1.6rem 1.8rem}
.card__genre{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:#7f8aa8}
.card h2{font:400 1.9rem/1.15 var(--serif);margin:.5rem 0 .7rem}
.card p{margin:0 0 1rem;color:#9aa0ae;line-height:1.55;font-size:.95rem}
.card__meta{font-size:.8rem;color:#6f7585}
.none{color:var(--muted);text-align:center;padding:4rem 0}
.foot{padding:3rem 1rem 4rem;text-align:center;color:#555b69;font-size:.82rem}

@media (prefers-reduced-motion:reduce){
  .hero__glow,.scroll-cue{animation:none}
  .card{transition:none;opacity:1;transform:none}
}