/* Bibliothek / Library — Leinen, Holz, Buchrücken, Karteikarte, Strichcode. */
:root{
  --bg:#EFE8DC;--surface:#F8F4EC;--card:#FFFCF5;--ink:#2A2119;--mute:#615345;--line:#D3C5AE;
  --acc:#8E3A1F;--acc-ink:#FFF8EF;--focus:#2A2119;
  --wood:#A06B3C;--wood-hi:#BC8653;--wood-d:#6E4423;--wall:#E4D9C6;--rule:#D9E3EA;--redline:#C2574A;
  --spine-ink:#F7EFE0;--bezel:#17130F;
  --display:'Literata',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1A1612;--surface:#221C17;--card:#29221B;--ink:#F0E7D8;--mute:#BBAC96;--line:#3E342A;
  --acc:#E8945F;--acc-ink:#1A1612;--focus:#F0E7D8;
  --wood:#70482A;--wood-hi:#8A5C37;--wood-d:#3F2715;--wall:#241D17;--rule:#302820;--redline:#A14A3F;
  --bezel:#050403;
}}
.lp-bibliothek{background:var(--bg)}
.lp-bibliothek main h2{font-weight:600;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.01em}
.lp-bibliothek main h3{font-family:var(--font);font-size:1.05rem;font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:6px;
  background:var(--acc);color:var(--acc-ink);font-weight:700;text-decoration:none;border:2px solid var(--acc)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.kick,.eyebrow{font:500 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.note{font-size:.9rem;color:var(--mute)}

/* ── Titel ── */
.hero{display:grid;gap:40px;padding-block:28px 56px;align-items:center}
.hero-text{display:grid;gap:22px;max-width:36rem}
.hero h1{font-size:clamp(2.3rem,6.4vw,5.2rem);font-weight:600;letter-spacing:-.025em;line-height:1.02}
.hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--acc)}
.lead{font-size:1.15rem;max-width:34rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:920px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding-block:40px 80px}}

/* Regal */
.shelf{--k:1;position:relative;background:var(--wall);border-radius:14px;padding:86px 0 0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.shelf ul{list-style:none;margin:0;padding:0}
.shelf .row{display:flex;align-items:flex-end;justify-content:center;gap:calc(3px*var(--k));padding:0 20px;min-height:calc(250px*var(--k))}
.spine{position:relative;height:calc(var(--h)*var(--k));width:calc(var(--w)*var(--k));color:var(--spine-ink);
  border-radius:2px 2px 1px 1px;background:var(--c);overflow:hidden;
  background-image:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.08) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.18));
  box-shadow:inset 0 calc(10px*var(--k)) 0 -6px rgba(255,255,255,.18),inset 0 calc(-10px*var(--k)) 0 -6px rgba(255,255,255,.18);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.spine>span{position:absolute;inset:0;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;
  justify-content:space-between;gap:calc(8px*var(--k));padding:calc(14px*var(--k)) 0}
.spine b{font:italic 600 calc(13px*var(--k))/1 var(--display);white-space:nowrap;letter-spacing:.01em}
.spine small{font:500 calc(8.5px*var(--k))/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;opacity:.92;white-space:nowrap}
.spine:hover{transform:translateY(calc(-10px*var(--k)))}
.c1{--c:#7A2E22}.c2{--c:#23465A}.c3{--c:#3D5A38}.c4{--c:#5B3A68}.c5{--c:#1F2A33}
.c6{--c:#8A561C}.c7{--c:#2C5C58}.c8{--c:#9C3D27}.c9{--c:#4A4038}
.lean{transform:rotate(-9deg);transform-origin:0 100%;margin-left:calc(18px*var(--k))}
.lean:hover{transform:rotate(-9deg)}
.stack ul{display:flex;flex-direction:column;align-items:center}
.box{display:flex;align-items:center;justify-content:center;width:calc(124px*var(--k));height:calc(34px*var(--k));
  background:var(--c);color:var(--spine-ink);border-radius:2px;font:700 calc(11px*var(--k))/1 var(--font);text-transform:uppercase;letter-spacing:.18em;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.g1{--c:#E9DFC9;color:#2A2119;width:calc(116px*var(--k))}.g2{--c:#8E3A1F;width:calc(132px*var(--k))}.g3{--c:#1F2A33;width:calc(120px*var(--k))}
.box+.box{margin-top:2px}
.board{height:calc(18px*var(--k));background:var(--wood);border-top:3px solid var(--wood-hi);box-shadow:0 calc(14px*var(--k)) 0 var(--wood-d)}
.shelf::after{content:"";display:block;height:calc(14px*var(--k))}

/* Strichcode-Etikett mit Scanlinie */
.scanner{position:absolute;top:14px;right:16px;width:calc(150px*var(--k));padding:10px 10px 6px;background:#FFFDF8;border-radius:6px;
  transform:rotate(3deg);box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 24px -12px rgba(40,25,10,.5);overflow:hidden}
.bc{display:block;width:100%;height:auto}
.bc .bars{fill:#17130F}
.bc .digits{font:500 9px var(--mono);fill:#17130F}
.laser{position:absolute;left:4%;right:4%;top:20%;height:2px;background:#E5352B;border-radius:2px;
  box-shadow:0 0 6px 1px rgba(229,53,43,.7);animation:scan 2.4s ease-in-out infinite alternate}
@keyframes scan{from{top:14%}to{top:72%}}

@media (min-width:1140px){.shelf{--k:1.1}}
@media (max-width:919px){.shelf{--k:.82}}
@media (max-width:560px){.shelf{--k:.56;}.spine small{display:none}.shelf{padding-top:64px}.shelf .row{padding:0 10px}.scanner{width:116px;top:10px;right:10px}}

/* ── Auf einen Blick: Karteikarte ── */
.glance{padding-block:8px 72px}
.card{position:relative;max-width:52rem;margin-inline:auto;background:var(--card);border-radius:4px;padding:30px clamp(20px,4vw,48px) 54px;
  box-shadow:0 1px 0 var(--line),0 24px 48px -32px rgba(60,35,10,.45);
  background-image:linear-gradient(var(--redline),var(--redline)),repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px);
  background-size:100% 2px,100% 100%;background-position:0 78px,0 78px;background-repeat:no-repeat,repeat-y}
.card::after{content:"";position:absolute;left:50%;bottom:16px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;height:48px}
.card-head h2{font-size:1.5rem;font-style:italic}
.sig{font:500 .8rem var(--mono);color:var(--mute);letter-spacing:.1em}
.card dl{margin:0;display:grid}
.card dl div{display:grid;gap:0 20px;padding:0;line-height:32px}
.card dt{font:500 .74rem/32px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--acc)}
.card dd{margin:0;max-width:62ch;line-height:32px}
@media (min-width:640px){.card dl div{grid-template-columns:9rem 1fr}}
.stamp{position:absolute;right:clamp(14px,4vw,40px);bottom:30px;transform:rotate(-8deg);border:2.5px solid var(--acc);color:var(--acc);
  padding:5px 12px 4px;border-radius:4px;font:700 .82rem/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;opacity:.9}

/* ── Funktionen ── */
.feat{display:grid;gap:36px;align-items:center;padding-block:56px;border-top:1px solid var(--line)}
.feat-text{display:grid;gap:16px;max-width:36rem}
.feat-text>p:not(.kick):not(.note){max-width:62ch}
@media (min-width:880px){.feat{grid-template-columns:1fr 1fr;gap:64px}.feat.flip .feat-text{order:2}}
.feat-art{display:flex;justify-content:center;min-width:0}

.phone{margin:0;width:min(250px,46vw);border:clamp(5px,1.2vw,9px) solid var(--bezel);border-radius:clamp(26px,5vw,40px);overflow:hidden;
  background:var(--bezel);box-shadow:0 30px 50px -30px rgba(40,25,10,.6),0 0 0 1px var(--line)}
.phone img{display:block;width:100%;height:auto}
.duo{position:relative;padding-bottom:40px}
.duo .phone.back{margin-left:-14%;margin-top:60px;transform:rotate(3deg)}
.duo .phone:first-child{transform:rotate(-2.5deg);position:relative;z-index:1}

.scanart .book-back{position:relative;width:min(360px,68vw);aspect-ratio:3/4;max-width:100%;background:#23465A;border-radius:3px 10px 10px 3px;
  box-shadow:inset 14px 0 0 rgba(0,0,0,.2),0 30px 50px -30px rgba(20,20,30,.7);padding:24px}
.book-back::before{content:"";position:absolute;inset:24px 24px auto;height:46%;border:1px solid rgba(247,239,224,.25);border-radius:2px;
  background:repeating-linear-gradient(to bottom,rgba(247,239,224,.16) 0 2px,transparent 2px 14px)}
.book-back .bc{position:absolute;right:24px;bottom:24px;width:52%;background:#FFFDF8;padding:10px 8px 4px;border-radius:3px}
.book-back .isbn{position:absolute;right:24px;bottom:calc(24px + 52% * .62 + 12px);font:500 .72rem var(--mono);color:#F7EFE0;letter-spacing:.2em}
.book-back .laser{left:calc(48% - 30px);right:18px;height:3px;animation-name:scan2}
@keyframes scan2{from{top:56%}to{top:92%}}

/* ── Daten ── */
.safe{padding-block:64px;border-top:1px solid var(--line)}
.safe h2{margin-bottom:28px}
.safe ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.safe li{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--wood);border-radius:4px;padding:20px;display:grid;gap:8px;align-content:start}
.safe p{color:var(--mute);font-size:.98rem}
.lp-bibliothek .safe p{color:var(--ink)}

/* ── Nächste Stufe ── */
.next{display:grid;gap:32px;padding-block:64px;border-top:1px solid var(--line)}
.next>div{display:grid;gap:16px}
.next>div p:last-child{max-width:62ch}
@media (min-width:920px){.next{grid-template-columns:1.2fr 1fr;align-items:center;gap:64px}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;padding:16px 18px;border-radius:4px;
  border:2px dashed var(--line);background:transparent}
.steps li.now{border:2px solid var(--acc);background:var(--card)}
.steps .lbl{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.steps b{font-family:var(--display);font-size:1.08rem;font-weight:600}
.steps .st{font:500 .78rem var(--mono);color:var(--mute)}
.steps li.now .st{color:var(--acc);font-weight:700}

/* ── Fragen ── */
.faq{padding-block:64px;border-top:1px solid var(--line)}
.faq h2{margin-bottom:24px}
.faq-list{display:grid;gap:10px;max-width:52rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:4px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font-weight:700;min-height:48px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.4rem/1 var(--mono);color:var(--acc);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px;max-width:62ch}

/* ── Kontakt ── */
.contact{display:grid;gap:24px;padding:40px clamp(16px,4vw,48px);margin-top:24px;background:var(--surface);border:1px solid var(--line);
  border-left:10px solid var(--wood);border-radius:6px}
.contact>div:first-child{display:grid;gap:12px;max-width:40rem}
.mail{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mail .lp-copy{min-width:0;flex:1 1 220px}
.contact{grid-template-columns:minmax(0,1fr)}
.contact>*{min-width:0}
@media (min-width:880px){.lp-bibliothek .contact{grid-template-columns:1.2fr 1fr;align-items:center}}

/* ── Teilen-Bild (1200×630) ── */
html.og .lp-top{display:none}
html.og .hero{min-height:630px;padding-block:0;grid-template-columns:1fr 1.05fr}
html.og .shelf{--k:1}

@media (forced-colors:active){.spine,.box,.board,.phone,.card,.scanner{forced-color-adjust:none}
  .stamp,.steps li{border-color:CanvasText}}
@media print{.shelf,.scanart{display:none}}