:root{--ink:#292a26;--paper:#f7f3eb;--muted:#706e65;--line:#d8d1c4;--accent:#6a7e76}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Georgia,'Times New Roman',serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #5b827b;outline-offset:5px}button{border:0}header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5.2%;background:#faf8f2;position:relative;z-index:2;border-bottom:1px solid #e5e0d7}.signature{font-size:28px;color:inherit;text-decoration:none}.menu-button{display:flex;gap:25px;align-items:center;background:none;font-size:16px;padding:12px 0}.menu-button span{font-size:23px;font-family:Arial;font-weight:normal}.scene{height:calc(100svh - 68px);min-height:700px;position:relative;overflow:hidden;background:#e9e5db url('assets/raum.png') center center/cover no-repeat}.intro{position:absolute;left:5.2%;top:5.3%;z-index:1}.eyebrow{text-transform:uppercase;letter-spacing:.23em;font:10px/1.8 Arial,sans-serif;margin:0 0 15px;color:#686a60}h1{font-size:clamp(46px,5.6vw,84px);font-weight:normal;line-height:.99;letter-spacing:-.045em;margin:0 0 22px}.subtitle{font-size:clamp(17px,1.8vw,26px);line-height:1.4;margin:0}.mobile-break{display:none}.shelf{position:absolute;bottom:90px;left:3.7%;right:3.7%;height:min(47vh,480px)}.magazines{display:flex;gap:3%;height:100%;padding:12px 2.5% 20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;align-items:flex-end}.magazines::-webkit-scrollbar{display:none}.magazine{flex:0 0 22.75%;height:calc(100% - 14px);padding:0;background:none;text-align:left;scroll-snap-align:start;perspective:1200px;position:relative;isolation:isolate}.cover{height:100%;display:flex;flex-direction:column;position:relative;background:#f4eee2;box-shadow:7px 3px 0 -2px #c5b9a3,10px 4px 0 -3px #f7f2e8,12px 5px 0 -4px #c4b8a3,9px 14px 14px #3b302b32,inset 2px 0 3px #fff;transform:rotateY(-5deg) rotateZ(-1.3deg);transform-origin:bottom;transition:transform .35s,box-shadow .35s;border:1px solid #dcd3c5}.magazine:nth-child(4n+2) .cover{transform:rotateY(-3deg) rotateZ(.8deg)}.magazine:nth-child(4n+3) .cover{transform:rotateY(-5deg) rotateZ(-.5deg)}.magazine:hover .cover,.magazine:focus-visible .cover{transform:translateY(-12px) rotateY(0);box-shadow:8px 18px 22px #3b302b40}.cover:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(95deg,#b2a8971a,transparent 3%,#fff2 60%,transparent);border-left:4px solid #c4bca123}.cover-copy{padding:8% 8% 3%;position:relative;z-index:1;text-align:center;min-height:35%;background:linear-gradient(#f6f0e8,#f4eee3)}.author{font-size:10px;display:block;margin-bottom:13px;letter-spacing:.02em}.cover h2{font-size:clamp(17px,2vw,30px);font-weight:normal;line-height:1.08;margin:0 0 10px;letter-spacing:-.025em;overflow-wrap:normal;hyphens:auto}.cover .deck{font-size:clamp(10px,.86vw,13px);line-height:1.35;margin:0}.art{background-image:url('assets/motive.png');background-size:400% 300%;background-position:var(--x) var(--y);background-repeat:no-repeat}.cover-art{flex:1;min-height:0}.open-label{font-size:11px;padding:10px 8%;background:#f4eee5}.arrow{position:absolute;z-index:2;top:48%;width:45px;height:45px;border-radius:50%;background:#faf8f0e8;font:31px/1 Arial;color:#5a5b53;box-shadow:0 2px 12px #312b2212}.arrow:hover{background:white}.arrow:disabled{opacity:.3;cursor:default}.previous{left:-28px}.next{right:-28px}.browse{position:absolute;bottom:22px;left:0;right:0;text-align:center}.dots{display:flex;justify-content:center;gap:5px}.dot{width:26px;height:26px;background:none;padding:7px}.dot:after{content:'';display:block;width:9px;height:9px;border:1px solid #77796b;border-radius:50%}.dot[aria-current=true]:after{background:#353e34;border-color:#353e34}.browse p{font-size:13px;margin:4px 0;color:#4b4e43}.browse #position{display:inline-block;margin-left:15px;font:10px Arial;letter-spacing:.12em}.touch-hint{display:none}dialog{border:1px solid #ded6c9;color:var(--ink);background:#faf7f0;box-shadow:0 24px 100px #2225;padding:35px;border-radius:4px;width:min(1080px,94vw);max-height:90svh;overflow:auto}dialog::backdrop{background:#35352e66;backdrop-filter:blur(7px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.dialog-top .eyebrow{margin:0}.close{background:none;font:34px Arial;padding:2px 10px}.overview-dialog h2{font-size:42px;font-weight:normal;margin:15px 0 25px}.search-label{font:12px Arial;color:var(--muted);display:block;margin-bottom:8px}input{width:100%;padding:15px;background:white;border:1px solid var(--line);font-size:16px;margin-bottom:24px;border-radius:0}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.menu-item{background:#f2ede3;text-align:left;padding:0;border:1px solid #e6dfd3;display:flex;align-items:center;gap:13px;min-height:100px}.mini-art{width:75px;align-self:stretch;flex-shrink:0}.menu-item strong{font-weight:normal;font-size:18px;display:block;margin-bottom:6px}.menu-item small{display:block;font-size:11px;line-height:1.5;color:var(--muted);padding-right:8px}.menu-item:hover{background:#e8e6db}.back{background:none;padding:8px 0;font-size:14px}.room-head{display:grid;grid-template-columns:1fr 40%;min-height:270px;background:#ece9df;margin:0 0 25px}.room-heading{padding:30px}.room-heading h2{font-weight:normal;font-size:clamp(28px,4vw,48px);line-height:1.1;margin:10px 0 15px}.room-heading p{line-height:1.6;font-size:17px;margin:0}.room-art{min-height:260px}.demo-note{font:12px/1.6 Arial;color:#727164;border-left:2px solid #a5ad9a;padding:4px 0 4px 12px;margin:22px 0}.story-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.story{padding:25px;background:#fffaf2;border:1px solid #e2ddcf;text-align:left}.story h3{font-size:24px;font-weight:normal;line-height:1.2;margin:8px 0 13px}.story p{font-size:15px;line-height:1.6;margin:0}.story .eyebrow{font-size:9px}.text-link{display:block;margin-top:20px;font-size:13px}.reading{max-width:660px;margin:0 auto;padding:10px 0 30px}.reading h2{font-weight:normal;font-size:40px;line-height:1.12}.reading p{font-size:19px;line-height:1.8}.reading blockquote{margin:30px 0;padding:20px;border-left:2px solid #8eaa9a;background:#eeeee3;font-size:21px;line-height:1.5}.reading .demo-note{font-size:12px}.room-dialog .section-label{font-weight:normal;font-size:25px}.room-footer{font-size:13px;line-height:1.6;color:var(--muted);margin-top:24px}.empty{padding:25px}
@media(min-width:1600px){.shelf{left:8%;right:8%}.cover h2{font-size:32px}}@media(max-height:800px) and (min-width:901px){.scene{min-height:610px}.intro{top:4%}h1{font-size:60px}.eyebrow{margin-bottom:10px}.subtitle{font-size:20px}.shelf{height:43vh;bottom:75px}.browse{bottom:12px}.author{margin-bottom:8px}.cover-copy{padding-top:6%}.cover h2{font-size:24px}}@media(max-width:900px){.magazine{flex-basis:48.5%}.shelf{left:8%;right:8%;height:48vh;max-height:480px}.intro{left:7%;top:5%}h1{font-size:60px}.scene{background-position:60% center}.cover h2{font-size:27px}.cover .deck{font-size:12px}.author{font-size:11px}.menu-grid{grid-template-columns:1fr 1fr}.cover-copy{min-height:34%}.subtitle{font-size:22px}}@media(max-width:560px){header{height:60px;padding:0 6%}.signature{font-size:21px}.menu-button{font-size:0;gap:0}.menu-button span{font-size:24px}.menu-button:before{content:'Alle Räume';font-size:13px;margin-right:12px}.scene{height:calc(100svh - 60px);min-height:670px;background-position:57% center}.intro{left:7%;top:4%}.eyebrow{font-size:8px;letter-spacing:.18em;margin-bottom:12px}h1{font-size:48px;margin-bottom:16px}.subtitle{font-size:18px}.mobile-break{display:block}.shelf{left:13%;right:13%;height:49%;bottom:80px}.magazines{gap:7%;padding:10px 4% 20px}.magazine{flex-basis:100%}.cover h2{font-size:25px}.cover .deck{font-size:11px}.cover-copy{padding:7% 8% 2%;min-height:34%}.author{margin-bottom:10px;font-size:10px}.previous{left:-33px}.next{right:-33px}.arrow{width:38px;height:38px}.browse{bottom:20px}.touch-hint{display:inline}.desktop-hint{display:none}.dot{width:19px;padding:5px}.menu-grid{grid-template-columns:1fr}.overview-dialog h2{font-size:32px}dialog{padding:20px;max-height:94svh;width:96vw}.room-head{grid-template-columns:1fr}.room-art{min-height:200px;order:-1;max-height:220px}.room-heading{padding:23px}.story-list{grid-template-columns:1fr}.reading h2{font-size:30px}.reading p{font-size:17px}.room-heading .eyebrow{font-size:10px}.scene:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f8f4ec77,transparent 85%);pointer-events:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:560px){.scene:before{background:linear-gradient(180deg,#f5f0e8 0%,#f5f0e8ed 32%,#f5f0e833 53%,transparent 68%)}}
@media(max-width:560px){.browse p{display:inline-block;background:#f8f4e9e8;padding:5px 12px;border-radius:20px;color:#42483e}.dots{background:#f8f4e977;border-radius:20px;width:max-content;max-width:95%;margin:0 auto}}
/* Zweite Fassung: freie linke Bildfläche, eine räumliche Gruppe statt einer
   gleichförmigen Reihe. Titel und Magazine bleiben echte Bedienelemente. */
.scene{background-image:url('assets/raum-v2.png')}
@media(min-width:901px){
 .scene{min-height:680px}
 .intro{top:7%;left:7.5%}
 h1{font-size:clamp(52px,5.2vw,80px)}
 .subtitle{font-size:clamp(19px,1.7vw,25px);max-width:440px}
 .shelf{left:25%;right:3.5%;bottom:14.8%;height:min(48vh,490px)}
 .magazines{padding:16px 2.5% 28px;gap:3%;align-items:flex-end}
 .magazine{height:calc(100% - 16px)}
 .magazine:nth-child(4n+1){height:80%}
 .magazine:nth-child(4n+2){height:91%}
 .magazine:nth-child(4n+3){height:98%}
 .magazine:nth-child(4n){height:94%}
 .cover{box-shadow:5px 2px 0 -1px #c8bba5,8px 3px 0 -2px #f5efe4,10px 4px 0 -3px #c6b8a0,12px 18px 15px #3b302b30,inset 2px 0 3px #fff}
 .magazine:nth-child(4n+1) .cover{transform:rotateY(-9deg) rotateZ(4deg);width:95%}
 .magazine:nth-child(4n+2) .cover{transform:rotateY(-5deg) rotateZ(1deg)}
 .magazine:nth-child(4n+3) .cover{transform:rotateY(-7deg) rotateZ(-1.7deg)}
 .magazine:nth-child(4n) .cover{transform:rotateY(-6deg) rotateZ(.6deg);width:96%}
 .magazine:hover .cover,.magazine:focus-visible .cover{transform:translateY(-10px) rotateY(-2deg) rotateZ(0)}
 .cover-copy{padding:8% 6% 3%;min-height:32%;background:linear-gradient(#f6f0e7,#f4eee3)}
 .cover h2{font-size:clamp(17px,1.72vw,27px);line-height:1.12}
 .magazine:nth-child(4n+3) .cover h2{font-size:clamp(16px,1.43vw,23px)}
 .cover .deck{font-size:clamp(9px,.77vw,12px)}
 .author{font-size:9px;margin-bottom:14px}
 .open-label{font-size:10px}
 .browse{left:25%;right:3.5%;bottom:4.5%}
 .arrow{width:38px;height:38px;top:55%}
 .previous{left:-20px}.next{right:-19px}
}
@media(min-width:901px) and (max-height:800px){
 .scene{min-height:610px}
 .intro{top:5%}
 h1{font-size:clamp(48px,4.5vw,66px)}
 .subtitle{font-size:19px;max-width:360px}
 .shelf{height:46vh;bottom:13%}
 .author{margin-bottom:9px}
 .browse{bottom:2%}
}
@media(min-width:561px) and (max-width:900px){
 .shelf{left:22%;right:7%;height:46%;bottom:105px}
 .magazine:nth-child(2n+1){height:89%}
 .magazine:nth-child(2n){height:97%}
 .cover h2{font-size:24px}
 .intro{left:7%}
 .browse{left:15%}
}
@media(max-width:560px){.magazine{height:calc(100% - 14px)}.magazine:nth-child(4n+1) .cover{transform:rotateY(-7deg) rotateZ(2deg)}}
@media(min-width:901px){.shelf{left:28%}.browse{left:28%}}
/* Dritte Fassung: ein durchgehender Bildraum pro Cover, gesetzte Schrift
   innerhalb des Motivs und eine gemeinsame, beschattete Standfläche. */
.integrated-art{background-image:url('assets/coverwelten.png');background-size:400% 300%;background-position:var(--x) var(--y);background-repeat:no-repeat}
.magazines{cursor:grab;user-select:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.magazines.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.magazine{cursor:pointer}
.magazines.dragging .magazine{cursor:grabbing}
.cover.integrated-art{display:block;overflow:visible;border-bottom:2px solid #655d4b;transform-origin:50% 100%;box-shadow:4px 0 0 -1px #e4dccc,7px 0 0 -2px #b7aa95,9px 0 0 -3px #f5f0e7,10px 0 0 -3px #9e927b}
.magazine:before{content:'';position:absolute;z-index:-1;left:0;right:-5%;bottom:-4px;height:10px;border-radius:50%;background:#4c443dd4;filter:blur(2px);box-shadow:12px 5px 7px 2px #51483b4d;transform:skewX(-28deg)}
.cover.integrated-art .cover-copy{display:block;position:absolute;inset:0;min-height:0;padding:0;background:none;text-align:left;text-shadow:0 1px 3px #fff8}
.cover.integrated-art .author{position:absolute;top:5%;left:7%;right:7%;font-size:9px;text-align:center;margin:0}
.cover.integrated-art h2{position:absolute;top:14%;left:8%;width:85%;margin:0;font-weight:normal;font-size:clamp(18px,1.75vw,28px);line-height:1.08}
.cover.integrated-art .deck{position:absolute;left:8%;top:37%;width:46%;font-size:clamp(9px,.78vw,12px);line-height:1.5;margin:0}
.cover.integrated-art .open-label{position:absolute;bottom:4%;left:8%;padding:0;background:none;font-size:10px;text-shadow:0 1px 4px #fff,0 1px 3px #fff}
.magazine:nth-child(4n+1) .deck{width:76%;top:39%}
.magazine:nth-child(4n+3) .cover.integrated-art h2{font-size:clamp(16px,1.42vw,23px);top:13%}
.magazine:nth-child(4n+3) .deck{top:27%;width:38%}
.magazine:nth-child(4n) .deck{top:34%;width:40%}
.magazine:nth-child(4n) .cover.integrated-art h2{top:11%;width:80%}
.magazine:hover .cover.integrated-art,.magazine:focus-visible .cover.integrated-art{filter:brightness(1.035)}
@media(min-width:901px){
 .scene{background-size:100% 100%}
 .shelf{bottom:10.5%;height:min(53vh,535px)}
 .magazines{padding-bottom:8px;padding-top:16px}
 .magazine:nth-child(4n+1) .cover{transform:perspective(1200px) rotateY(-7deg) skewX(-5deg);width:95%}
 .magazine:nth-child(4n+2) .cover{transform:perspective(1200px) rotateY(-4deg) skewX(-1.5deg)}
 .magazine:nth-child(4n+3) .cover{transform:perspective(1200px) rotateY(-5deg) skewX(-1deg)}
 .magazine:nth-child(4n) .cover{transform:perspective(1200px) rotateY(-5deg) skewX(1deg);width:96%}
 .magazine:hover .cover,.magazine:focus-visible .cover{transform:perspective(1200px) rotateY(-2deg) skewX(-1deg)}
 .browse{bottom:2%}
}
@media(min-width:901px) and (max-height:800px){.shelf{height:49vh;bottom:9%}.cover.integrated-art .author{font-size:8px}.cover.integrated-art h2{font-size:clamp(17px,1.6vw,24px)}}
@media(min-width:561px) and (max-width:900px){.magazine:before{bottom:-4px}.cover.integrated-art h2{font-size:25px}.cover.integrated-art .deck{font-size:11px}.magazine:nth-child(4n+3) .cover.integrated-art h2{font-size:21px}}
@media(max-width:560px){.cover.integrated-art h2{font-size:27px}.magazine:nth-child(4n+3) .cover.integrated-art h2{font-size:21px}.cover.integrated-art .deck{font-size:12px}.cover.integrated-art .author{font-size:10px}.cover.integrated-art .open-label{font-size:11px}.magazine:nth-child(n) .cover{transform:skewX(-1deg)}.magazine:hover .cover,.magazine:focus-visible .cover{transform:skewX(-1deg)}}