:root{--ink:#5c5140;--gold:#b59052;--ivory:#f6f1e7}*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#welcome{position:absolute;inset:0 0 30px;overflow:hidden;background:#eee5d6}.reference,.door-half{position:absolute;inset:0;background-image:url('design/atelier-55-verbindliche-referenz.png');background-size:100% 100%;background-position:center}.door-half{display:none}.door-half.left{clip-path:inset(0 50% 0 0)}.door-half.right{clip-path:inset(0 0 0 50%)}#enter{position:absolute;left:40.3%;top:76.4%;width:19.5%;height:7.3%;background:transparent;border:0;border-radius:0}#enter:hover{background:#fff2;box-shadow:0 0 25px #d6b56a55}#welcome.entering .reference{opacity:0}#welcome.entering .door-half{display:block;transition:transform 1.6s cubic-bezier(.25,.1,.25,1),opacity 1.6s}#welcome.open .left{transform:translateX(-55%);opacity:0}#welcome.open .right{transform:translateX(55%);opacity:0}#welcome.entering #enter{display:none}
#gallery{position:absolute;inset:0 0 30px;overflow:hidden;background:#f4f0e6}header{position:absolute;top:24px;left:32px;right:32px;display:flex;justify-content:space-between;z-index:3;pointer-events:none}header button{pointer-events:auto;border:1px solid #c5ab7580;background:#fff9;padding:10px 18px;backdrop-filter:blur(10px)}#home{text-transform:uppercase;letter-spacing:3px;font-size:19px}#home small{display:block;font-size:11px;letter-spacing:1px;margin-top:5px;text-transform:none}#reset{align-self:start;font-size:13px}
#viewport{position:absolute;inset:0;perspective:850px;overflow:hidden;cursor:grab;touch-action:none}#viewport.dragging{cursor:grabbing}#room{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}.wall{position:absolute;left:-1200px;top:-540px;width:2400px;height:1080px;backface-visibility:hidden;background:linear-gradient(#fff6,transparent 60%),linear-gradient(90deg,#e9e2d5,#faf7f0 25%,#fffdf8 55%,#e9e3d9);border-top:32px ridge #e9e2d4;border-bottom:24px ridge #e2d8c5;transform-style:preserve-3d}.wall:before{content:'';position:absolute;inset:30px 25px 40px;border:8px double #dfd5c1;pointer-events:none}.wall:after{content:'';position:absolute;left:0;right:0;bottom:220px;border-top:9px ridge #e6dece;pointer-events:none}.floor,.ceiling{position:absolute;left:-1200px;top:-1200px;width:2400px;height:2400px;backface-visibility:hidden}.floor{background:repeating-linear-gradient(45deg,#dfc9aa 0px,#e4cfb1 23px,#d5bd99 24px,#eedcc1 26px,#e8d3b5 70px);transform:translateY(540px) rotateX(90deg);box-shadow:inset 0 0 300px #99805b55}.ceiling{background:#f8f4e9;transform:translateY(-540px) rotateX(-90deg);border:45px ridge #e9dfcd}.window{position:absolute;top:80px;width:270px;height:790px;border:22px ridge #ece6d9;border-radius:120px 120px 0 0;background:linear-gradient(#e8f0edbb,#fff9 55%,#d4dfc0bb),linear-gradient(100deg,#d3dfcd,#f8faf1);box-shadow:0 0 65px #fff,inset 0 0 30px #fff}.window:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 143px,#f7f4e9 145px 157px),linear-gradient(90deg,transparent 46%,#f8f4e8 47% 53%,transparent 54%);border:8px solid #f8f4e8;border-radius:90px 90px 0 0}.picture{position:absolute;top:300px;width:230px;height:290px;border:18px ridge #bc9145;background:#f6efdf;box-shadow:0 9px 14px #80694340,inset 0 0 22px #bc914544;display:flex;align-items:center;justify-content:center;font-size:27px;backface-visibility:hidden}.picture:before{content:'';position:absolute;inset:6px;border:2px solid #d4b476;pointer-events:none}.picture:after{content:'';position:absolute;left:20%;right:20%;top:-55px;height:7px;background:#af8647;border-radius:4px;box-shadow:0 5px 15px #e4c477}.picture:hover{filter:brightness(1.06)}.picture img{width:100%;height:100%;object-fit:contain}.bench{position:absolute;width:400px;height:90px;background:#e5dfd0;border:12px ridge #d0bd99;transform:translate3d(-200px,430px,-700px);box-shadow:0 30px 20px #8c75564a}
#hint{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-size:13px;text-align:center;background:#fff9;padding:9px 18px;width:max-content;max-width:90%;pointer-events:none}.works{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.works button{width:32px;height:32px;background:#fff9;border:1px solid #ba9c64;border-radius:50%;font-size:12px}.works button[aria-current=true]{background:#a88245;color:white}#art-info{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:220px;padding:22px;background:#fffef4ed;border:1px solid #c4a96a;box-shadow:0 15px 45px #69553620}#art-number{font-size:25px}#art-info p{font-size:14px}#art-info a,#art-info button{display:block;text-align:center;text-decoration:none;border:1px solid #c4a96a;padding:10px;margin-top:12px;font-size:13px;width:100%;background:transparent}footer{position:absolute;bottom:0;height:30px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#f5efe4;z-index:5;font-size:11px}footer button{border:0;background:none;font-size:11px}.sound{position:absolute;right:15px;display:flex;gap:6px;align-items:center}#volume{width:65px;height:10px;accent-color:#ae8b4f}dialog{border:1px solid #ba995e;background:#fbf7ef;color:var(--ink);padding:40px;max-width:min(90vw,550px);box-shadow:0 20px 100px #36280e33}dialog::backdrop{background:#342b1f66;backdrop-filter:blur(7px)}dialog h2{font-weight:normal;font-size:30px}dialog p{line-height:1.7}.note{font-size:13px;color:#8a7d68}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px}#fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;background:#f5eee3;display:none;align-items:center;justify-content:center;flex-direction:column}#fullscreen[open]{display:flex}#full-art{width:min(65vw,850px);height:72vh;border:24px ridge #b99450;background:#f8f0df;display:flex;align-items:center;justify-content:center;font-size:40px;cursor:zoom-out;box-shadow:0 15px 50px #70573030}#full-art img{width:100%;height:100%;object-fit:contain}#fullscreen p{font-size:13px}
@media(max-width:700px){#welcome{background:#eee4d3}.reference,.door-half{background-size:auto 100%;background-repeat:no-repeat}#enter{left:28%;width:44%;top:76.4%}header{left:12px;right:12px;top:12px}#home{font-size:15px}#art-info{top:auto;bottom:72px;right:12px;left:12px;width:auto;transform:none;padding:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}#art-info p{margin:0}#art-info a,#art-info button{width:auto;margin:0;padding:8px}#art-number{font-size:18px}#hint{bottom:68px;font-size:11px}.works{gap:4px;bottom:19px}.works button{width:27px;height:27px}.sound{right:5px}#volume{display:none}footer{justify-content:flex-start;padding-left:10px}#full-art{width:90vw}#fullscreen p{max-width:85vw;text-align:center}}
@media(prefers-reduced-motion:reduce){.door-half{transition:none!important}}
/* Wider room view: floor and ceiling remain visible from the centre. */
#viewport{perspective:600px}
/* Keep the approved image's proportions on every screen. */
#welcome{display:flex;align-items:center;justify-content:center}
.reference,.door-half{inset:auto;width:min(100vw,calc((100dvh - 30px)*1.5));height:min(calc(100vw / 1.5),calc(100dvh - 30px));background-size:100% 100%;background-repeat:no-repeat}
#enter{left:calc(50% - min(100vw,calc((100dvh - 30px)*1.5))*.0975);top:calc(50% + min(calc(100vw / 1.5),calc(100dvh - 30px))*.264);width:calc(min(100vw,calc((100dvh - 30px)*1.5))*.195);height:calc(min(calc(100vw / 1.5),calc(100dvh - 30px))*.073)}
/* Windows and frame surfaces are sampled directly from the approved reference. */
.window{top:105px;height:710px;border:0;border-radius:0;background-image:url('design/atelier-55-verbindliche-referenz.png');background-size:3770px 2693px;background-position:-1754px -842px;box-shadow:0 0 75px #fff8}
.window:before{display:none}
.picture{border:0;background-image:url('design/atelier-55-verbindliche-referenz.png');background-size:4910px 3375px;background-position:-1932px -1437px;box-shadow:0 9px 14px #80694340}
.picture:before{inset:28px 30px;background:linear-gradient(120deg,#e9dcc4,#f3e9d8);border:1px solid #c7ad7d;box-shadow:inset 0 0 12px #ad8f6240}
.picture:after{top:-40px;left:25%;right:25%;height:6px}
.placeholder-label{position:relative;z-index:1}
.picture img{position:absolute;inset:28px 30px;width:calc(100% - 60px);height:calc(100% - 56px);z-index:1}
.wall:after{border-color:#ede6d7}
.floor{background:#e6d4b9}
.floor-strip{height:240px;width:2400px;background-image:url('design/atelier-55-verbindliche-referenz.png');background-size:6144px 4096px;background-position:-1800px -2800px}
.bench{height:135px;background-image:url('design/atelier-55-verbindliche-referenz.png');background-size:3793px 2528px;background-position:-1696px -1442px;border:0;transform:translate3d(-200px,355px,-1000px);box-shadow:none}
/* Photographic panorama replaces the preliminary geometric room. */
#panorama,#hotspots{position:absolute;inset:0;width:100%;height:100%}
#room{display:none}
#hotspots{pointer-events:none}
.art-hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:transparent;border:0;cursor:pointer}
.art-hotspot:focus-visible{outline:2px solid #c4a16b;outline-offset:5px}
.panorama-fallback{background:url('design/galerie-panorama.png') center/cover}
.number-mask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:42%;height:32%;background:linear-gradient(105deg,#e9d9ba,#f1e5ce);font-size:clamp(15px,3vw,36px);color:#493d2a}
.work-number{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#58462e;pointer-events:none;font-size:inherit}
.art-hotspot img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.title-cleaner{position:absolute;inset:0;background:url('design/eingang-ohne-schrift.png') center/100% 100%;clip-path:inset(12% 31% 75% 31%)}
.brand{position:absolute;left:35%;top:13.3%;width:30%;aspect-ratio:4.244;overflow:hidden}
.brand img{position:absolute;left:-5.8%;top:-74.53%;width:112.07%;height:auto}
.door-half{background-image:url('design/eingang-ohne-schrift.png')}
.work-number{white-space:nowrap}
.gallery-logo{display:block;position:relative;width:clamp(160px,21vw,250px);aspect-ratio:4.244;overflow:hidden}
.gallery-logo img{position:absolute;left:-5.8%;top:-74.53%;width:112.07%;height:auto}
#home{padding:10px 12px}
#viewport.art-selected{cursor:zoom-out}
#viewport.art-selected{right:0}
#viewport.art-selected .art-hotspot{cursor:zoom-in}
@media(max-width:700px){.gallery-logo{width:155px}#home{padding:8px 10px}}
@media(max-width:700px){#viewport.art-selected{right:0;bottom:230px}}
/* The approved logo and a restrained metallic gold edge for the gallery controls. */
:root{--gold-edge:linear-gradient(135deg,#79581e 0%,#bf974b 19%,#f7e7ae 37%,#c19a50 55%,#896221 76%,#e6ca83 100%)}
.welcome-logo,#home,#reset{border:1px solid transparent;background:linear-gradient(#fffdf7,#f6f0e6) padding-box,var(--gold-edge) border-box;box-shadow:inset 0 0 0 3px #fffaf1,inset 0 0 0 4px #d3be924d,0 2px 8px #6d55201c;backdrop-filter:none}
.welcome-logo{display:inline-block;padding:14px}
#welcome .brand{position:relative;left:auto;top:auto;width:min(240px,30vw);aspect-ratio:1.589;overflow:hidden}
.gallery-logo{width:clamp(110px,12vw,150px);aspect-ratio:1.589}
#welcome .brand img,.gallery-logo img{position:absolute;left:-19.31%;top:-4.35%;width:138.7%;height:auto;max-width:none}
#home{padding:11px 13px}
#reset{padding:11px 19px}
.works button{border:2px solid transparent;background:linear-gradient(#fffdf7,#eee4d3) padding-box,var(--gold-edge) border-box;box-shadow:inset 0 0 0 1px #fffaf0,0 1px 4px #5e461728}
.works button:hover{background:linear-gradient(#fffef8,#f8edda) padding-box,var(--gold-edge) border-box}
.works button[aria-current=true]{background:linear-gradient(145deg,#c29a54,#9e7436) padding-box,var(--gold-edge) border-box;color:#fffaf0;box-shadow:inset 0 0 0 1px #e4c88b,0 1px 4px #5e461728}
@media(max-width:700px){#home{padding:8px 10px}#reset{padding:10px 13px}.gallery-logo{width:110px}.welcome-logo{padding:11px}}
/* The entrance and interior are two camera positions in the same accepted room. */
#welcome{z-index:4;background:transparent;display:block}
#welcome .welcome-logo{position:absolute;left:50%;top:24px;transform:translateX(-50%);transition:opacity .45s ease}
#welcome #enter{position:absolute;left:50%;top:auto;bottom:11%;transform:translateX(-50%);width:auto;min-width:230px;height:auto;padding:15px 32px;border:2px solid transparent;background:linear-gradient(#fffdf7,#f6f0e6) padding-box,var(--gold-edge) border-box;box-shadow:inset 0 0 0 3px #fffaf1,0 5px 20px #3b2a0c24;font-size:24px;transition:opacity .45s ease}
#welcome #enter:disabled{cursor:wait;opacity:.6}
#welcome.entering{pointer-events:none}
#welcome.entering .welcome-logo,#welcome.entering #enter{opacity:0;display:block}
body.entry-mode #gallery header,body.entry-mode .works,body.entry-mode #hint,body.entry-mode #art-info{visibility:hidden}
body.entry-mode #viewport{pointer-events:none}
body.entry-mode #hotspots,body.entry-mode .art-hotspot{pointer-events:none}
@media(max-width:700px){#welcome .brand{width:min(210px,45vw)}#welcome .welcome-logo{top:18px}#welcome #enter{font-size:20px;min-width:200px;bottom:12%}}
@media(prefers-reduced-motion:reduce){#welcome .welcome-logo,#welcome #enter{transition:none}}
.entry-ornament{position:absolute;left:50%;bottom:calc(11% - 50px);transform:translateX(-50%);width:230px;height:36px;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none;transition:opacity .45s ease}
.entry-ornament:before,.entry-ornament:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#ad8548,#dfc68c,#ad8548)}
.entry-ornament svg{width:30px;height:35px;flex:none;filter:drop-shadow(0 1px 0 #f8edcd)}
#welcome #enter{letter-spacing:.035em}
#welcome.entering .entry-ornament{opacity:0}
@media(max-width:700px){.entry-ornament{bottom:calc(12% - 48px);width:200px}}
@media(prefers-reduced-motion:reduce){.entry-ornament{transition:none}}
/* Fine circular gold outlines keep the numbered picture controls understated. */
.works button{border:1px solid #bfa064;background:#fbf5e9;border-radius:50%;padding:0;box-shadow:none}
.works button:hover{background:#fffaf0;border-color:#b59052;box-shadow:none}
.works button[aria-current=true]{border:1px solid #bfa064;background:#a88245;color:#fff;box-shadow:none}
/* The full view keeps the artwork in its original proportions, with space to read and listen. */
#fullscreen{padding:48px clamp(16px,3vw,40px) 24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#c4a46a #f5eee3}
#fullscreen[open]{align-items:center;justify-content:flex-start}
#fullscreen .close{position:fixed;top:12px;right:18px;z-index:2;width:36px;height:36px;padding:0;line-height:1;background:#fbf5e9;border:1px solid #bfa064;border-radius:50%}
.full-work{width:100%;max-width:1120px;margin:auto 0 0;display:flex;flex-direction:column;align-items:center;gap:22px}
#full-art{flex:none;width:auto;height:auto;max-width:100%;max-height:none;padding:7px;border:2px solid transparent;background:linear-gradient(#f7f0e3,#f7f0e3) padding-box,var(--gold-edge) border-box;box-shadow:inset 0 0 0 1px #dcc490,0 8px 24px #70573026;font-size:clamp(25px,4vw,40px);cursor:zoom-out}
#full-art img{display:block;width:auto;height:auto;max-width:min(84vw,1080px);max-height:min(60dvh,calc(100dvh - 370px),780px);object-fit:contain}
#full-art .placeholder-label{display:flex;align-items:center;justify-content:center;width:min(60vw,650px);min-height:min(52dvh,500px)}
.full-details{width:min(100%,760px);text-align:center}
#full-title{font-size:clamp(24px,3vw,32px);font-weight:normal;line-height:1.2;margin:0 0 10px}
#fullscreen #full-description{font-size:16px;line-height:1.6;margin:0 0 15px;white-space:pre-line}
#narration-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:10px 17px;font-size:14px;line-height:1.35;border:1px solid transparent;background:linear-gradient(#fffdf7,#f5ecdd) padding-box,var(--gold-edge) border-box;box-shadow:inset 0 0 0 2px #fffaf1;color:var(--ink)}
#narration-toggle svg{width:22px;height:22px;flex:none;fill:none;stroke:#a88245;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#narration-toggle:disabled{cursor:default;color:#887b67}
#narration-toggle:disabled svg{stroke:#b19a73}
#narration-toggle:not(:disabled):hover{background:linear-gradient(#fffef9,#fbf2e2) padding-box,var(--gold-edge) border-box}
#narration-toggle[aria-pressed=true]{background:linear-gradient(#f8edda,#eee0c6) padding-box,var(--gold-edge) border-box}
#fullscreen #narration-status{font-size:12px;line-height:1.5;color:#8a7d68;margin:8px 0 0}
#fullscreen .full-return-hint{flex:none;text-align:center;font-size:11px;line-height:1.5;margin:18px 0 0;color:#8a7d68}
@media(max-width:700px){#fullscreen{padding:54px 14px 22px}.full-work{gap:18px}#full-art{padding:5px}#full-art img{max-width:calc(100vw - 42px);max-height:58dvh}#fullscreen #full-description{font-size:14px}#narration-toggle{font-size:13px;padding:10px 14px}#fullscreen .full-return-hint{max-width:100%;margin-top:16px}}