/* ---------- Karussell ---------- */
.cf{--w:clamp(150px,21vw,230px);position:relative}
.cf.on{overflow:hidden;overflow:clip;contain:paint;padding-bottom:8px}
.cf-stage{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cf-track{list-style:none;display:flex;gap:22px;padding:8px 2px 18px;margin:0}
.cf-item{flex:0 0 var(--w);scroll-snap-align:center;position:relative}
.cf-item .cover{aspect-ratio:2/3;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px}
.cf-item .cover.has-img{padding:0;overflow:hidden}
.cf-item .cover img{width:100%;height:100%;object-fit:cover;display:block}
.cf-item .ct{font-family:var(--display);font-size:15px;line-height:1.22;color:#F2EFE9}
.cf-item .ca{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.6)}
.cf-cover{display:block;position:relative;color:inherit}
.cf-badge{position:absolute;top:10px;left:10px;background:var(--warm);color:#12181C;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.cf-cap .bt{font-family:var(--display);font-size:15px;line-height:1.3;margin-top:11px}
.cf-cap .bm{font-size:12px;color:var(--ink-faint);margin-top:2px}
.cf-ctl,.cf-dots{display:none}
.cf.on .cf-stage{overflow:visible;perspective:1400px;height:calc(var(--w)*1.5 + 70px);position:relative;touch-action:pan-y;user-select:none}
.cf.on .cf-track{display:block;position:relative;height:100%;padding:0;transform-style:preserve-3d}
.cf.on .cf-item{position:absolute;left:50%;top:18px;width:var(--w);margin-left:calc(var(--w)/-2);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,filter .6s;will-change:transform}
.cf.on .cf-item .cover{box-shadow:0 22px 40px -18px rgba(16,20,24,.55),0 2px 4px rgba(0,0,0,.12)}
.cf.on .cf-item::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:22px;background:radial-gradient(ellipse at center,rgba(16,20,24,.22),transparent 70%);filter:blur(4px)}
.cf.on .cf-cap{display:none}
.cf.on img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.cf.on .cf-item:not(.mitte) .cf-cover{cursor:pointer}
.cf.on .cf-ctl{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;max-width:640px;margin:26px auto 0;text-align:center}
.cf-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font-size:18px;cursor:pointer;transition:background .2s,border-color .2s}
.cf-btn:hover{background:#fff;border-color:var(--accent)}
.cf-t{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:var(--ink);display:block}
.cf-m{font-size:12px;letter-spacing:.06em;color:var(--ink-faint);margin-top:6px}
.cf-b{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:12px;min-height:4.8em}
.cf-go{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cf.on .cf-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.cf-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule)}
.cf-dots i.an{background:var(--accent)}
.band .cf-btn{background:var(--band)}
@media(max-width:560px){.cf.on .cf-ctl{grid-template-columns:1fr}.cf-btn{display:none}.cf-b{min-height:0}}
@media(prefers-reduced-motion:reduce){.cf.on .cf-item{transition:none}}

/* ---------- Buch in 3D ---------- */
.b3d{--bw:100%;--t:26px;perspective:1700px;position:relative;padding:6px 0 34px}
.b3d-buch{position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(3deg);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.b3d-vorn{position:relative;transform:translateZ(calc(var(--t)/2));border-radius:2px 4px 4px 2px;overflow:hidden;box-shadow:inset 3px 0 6px -2px rgba(0,0,0,.35)}
.b3d-vorn img{display:block;width:100%;height:auto}
.b3d-vorn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.18),rgba(255,255,255,0) 32%,rgba(0,0,0,0) 70%,rgba(0,0,0,.12));pointer-events:none}
.b3d-hinten{position:absolute;inset:0;transform:translateZ(calc(var(--t)/-2));border-radius:2px;box-shadow:0 30px 60px -20px rgba(16,20,24,.55)}
.b3d-seiten{position:absolute;top:1.2%;bottom:1.2%;right:0;width:var(--t);transform-origin:right center;transform:translateZ(calc(var(--t)/2)) rotateY(-90deg);background:repeating-linear-gradient(90deg,#f6f2ea 0 1px,#ddd6c8 1px 2px);box-shadow:inset 0 0 8px rgba(0,0,0,.18)}
.b3d-schatten{position:absolute;left:10%;right:4%;bottom:6px;height:26px;background:radial-gradient(ellipse at center,rgba(16,20,24,.32),transparent 70%);filter:blur(6px);z-index:-1}
@media(prefers-reduced-motion:reduce){.b3d-buch{transition:none}}

/* ---------- Fächer ---------- */
.fan{position:relative;height:120px;width:150px;flex:0 0 auto}
.fan-b{position:absolute;bottom:0;left:50%;width:74px;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fan-b .cover{aspect-ratio:2/3;border-radius:2px;overflow:hidden;box-shadow:0 8px 18px -8px rgba(16,20,24,.5)}
.fan-b .cover img{width:100%;height:100%;object-fit:cover;display:block}
.fan-b .ct,.fan-b .ca{display:none}
.fan-3-0{transform:translateX(-50%) translateX(-34px) rotate(-11deg)}
.fan-3-1{transform:translateX(-50%) translateY(-6px);z-index:2}
.fan-3-2{transform:translateX(-50%) translateX(34px) rotate(11deg)}
.fan-2-0{transform:translateX(-50%) translateX(-18px) rotate(-7deg)}
.fan-2-1{transform:translateX(-50%) translateX(18px) rotate(7deg);z-index:2}
.fan-1-0{transform:translateX(-50%)}
.shelf:hover .fan-3-0{transform:translateX(-50%) translateX(-46px) rotate(-16deg)}
.shelf:hover .fan-3-2{transform:translateX(-50%) translateX(46px) rotate(16deg)}
.shelf:hover .fan-3-1{transform:translateX(-50%) translateY(-12px)}
.shelf.mitfan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:end}
.shelf.mitfan .stop,.shelf.mitfan p,.shelf.mitfan .sby{grid-column:1}
.shelf.mitfan .fan{grid-column:2;grid-row:1 / span 3;align-self:center}
@media(max-width:560px){.shelf.mitfan .fan{width:96px;height:84px}.shelf.mitfan .fan-b{width:50px}.shelf.mitfan .fan-3-0{transform:translateX(-50%) translateX(-22px) rotate(-11deg)}.shelf.mitfan .fan-3-2{transform:translateX(-50%) translateX(22px) rotate(11deg)}}
.plate .pfan{position:absolute;right:var(--gutter);bottom:34px;width:230px;height:190px}
.plate .pfan .fan-b{width:112px}
.plate .pfan .fan-3-0{transform:translateX(-50%) translateX(-58px) rotate(-12deg)}
.plate .pfan .fan-3-2{transform:translateX(-50%) translateX(58px) rotate(12deg)}
.plate .wrap{position:relative}
@media(max-width:900px){.plate .pfan{display:none}}
@media(prefers-reduced-motion:reduce){.fan-b{transition:none}}

/* ---------- Leiste auf Regalseiten ---------- */
.sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 26px}
.sortbar[hidden]{display:none}
.sb-l{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.sortbar button{font:inherit;font-size:13px;padding:7px 14px;border-radius:100px;border:1px solid var(--rule);background:var(--bg);color:var(--ink-soft);cursor:pointer}
.sortbar button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sortbar label{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;cursor:pointer;margin-left:6px}
.book[hidden]{display:none}

/* ---------- Wegweiser auf dem Telefon in einer Zeile ---------- */
@media(max-width:560px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin-right:calc(var(--gutter)*-1);padding-right:var(--gutter);scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}