:root{ --bg:#FDEED7; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111}

.site-header{display:flex;justify-content:center;padding:16px}
.logo{max-width:220px;height:auto}

.content{display:grid;place-items:center;padding:16px}
.shelf-wrap{position:relative;width:min(1200px,95vw)}
.shelf{width:100%;height:auto;display:block;border-radius:8px}

/* Klickfläche über dem linken Buchfach (für dein Regal3.png zugeschnitten) */
.hotspot{
  position:absolute;
  left:14%;
  top:26%;
  width:23%;
  height:54%;
  background:rgba(255,255,255,0);
  border:0;
  cursor:pointer;
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal.open{display:flex}
.modal-inner{background:#fff;border-radius:12px;max-width:min(900px,95vw);width:100%;padding:16px;position:relative}
.close{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;border:0;background:transparent;cursor:pointer}
.slides{position:relative;overflow:hidden}
.slide{display:none;text-align:center}
.slide.current{display:block}
.slide img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.slide figcaption{margin-top:8px;color:#444}

.controls{display:flex;gap:12px;justify-content:center;margin-top:12px}
.controls button{border:0;background:#111;color:#fff;padding:8px 14px;border-radius:8px;cursor:pointer}
.controls button:hover{opacity:.9}

.dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dot{width:10px;height:10px;border-radius:50%;border:0;background:#bbb;cursor:pointer}
.dot.active{background:#111}

@media (max-width: 640px){
  .hotspot{left:14%;top:26%;width:25%;height:52%;}
  .logo{max-width:180px}
}