/* Oberflaeche des Rundgangs (fuer jede Tour gleich) */
:root{--ink:#1f2328;--muted:#6b6f75;--bg:rgba(255,255,255,.86);--line:rgba(0,0,0,.08);--acc:#7d8f78}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#e9e5df;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none}
canvas#c{display:block;width:100vw;height:100vh;outline:none;cursor:grab}
canvas#c.drag{cursor:grabbing}
.panel{position:fixed;background:var(--bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
#info{top:16px;left:16px;padding:12px 12px 10px;width:236px}
#info h1{font-size:14px;margin:0 2px 1px;font-weight:650;letter-spacing:-.01em}
#info .sub{margin:0 2px 8px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
#map{display:block;width:210px;height:264px;cursor:crosshair;border-radius:8px;background:#fff}
#maplbl{font-size:10.5px;color:var(--muted);text-align:center;margin-top:5px}
#room{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;transition:opacity .3s}
#room span{font-weight:400;color:var(--muted);margin-left:6px}
#rooms{left:50%;transform:translateX(-50%);bottom:16px;padding:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px)}
#rooms button,.btn{border:0;background:transparent;font:inherit;font-size:13px;padding:8px 12px;border-radius:9px;cursor:pointer;color:var(--ink)}
#rooms button:hover,.btn:hover{background:rgba(0,0,0,.06)}
#rooms button.on{background:var(--ink);color:#fff}
#set{right:16px;top:16px;padding:10px 12px;font-size:12.5px;min-width:210px}
#set label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0}
#set input[type=range]{width:110px;accent-color:var(--acc)}
#set .row{display:flex;gap:4px;margin-top:6px}
#set .row .btn{flex:1;background:rgba(0,0,0,.05);padding:6px 8px;font-size:12px}
#set .row .btn.on{background:var(--ink);color:#fff}
#help{right:16px;bottom:16px;padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.5;max-width:230px}
#help b{color:var(--ink);font-weight:600}
#cover{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(233,229,223,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10;transition:opacity .5s}
#cover .card{background:#fff;border-radius:18px;padding:28px 30px;max-width:420px;width:calc(100vw - 40px);box-shadow:0 20px 60px rgba(0,0,0,.15);text-align:left}
#cover small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-weight:650}
#cover h2{margin:6px 0 8px;font-size:22px;letter-spacing:-.02em;line-height:1.2}
#cover p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.5}
#go{width:100%;border:0;border-radius:12px;background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:600;padding:14px;cursor:pointer}
#go:disabled{opacity:.5;cursor:wait}
#bar{height:3px;background:#eee;border-radius:3px;margin:-8px 0 16px;overflow:hidden}
#bar i{display:block;height:100%;width:5%;background:var(--acc);transition:width .3s}
#joy{position:fixed;left:24px;bottom:96px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.7);display:none;z-index:5}
#joy i{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.15)}
#err{position:fixed;inset:auto 16px 16px 16px;background:#fff3f0;color:#8a2a17;padding:10px 12px;border-radius:10px;font-size:12px;display:none;z-index:20}
.disc{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;font-size:10.5px;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}
#tourBtn{position:fixed;right:16px;top:16px;z-index:4}
#seeBtn{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:10px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18);cursor:pointer;display:none;z-index:6}
#seeBtn:hover{background:#f6f4f1}
#gal{position:fixed;inset:0;background:rgba(20,20,22,.92);display:none;z-index:30;align-items:center;justify-content:center;flex-direction:column}
#gal.open{display:flex}
#gal img{max-width:min(94vw,1600px);max-height:80vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4);transition:opacity .25s}
#gal .cap{color:#e9e6e1;font-size:13px;margin-top:12px;text-align:center;padding:0 16px}
#gal .cap b{font-weight:600;color:#fff}
#gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
#gal .nav:hover{background:rgba(255,255,255,.26)}
#gal .prev{left:16px}#gal .next{right:16px}
#gal .x{position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
#gal .thumbs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center}
#gal .thumbs img{width:72px;height:42px;object-fit:cover;border-radius:5px;opacity:.5;cursor:pointer;box-shadow:none;max-height:none}
#gal .thumbs img.on{opacity:1;outline:2px solid #fff}
#cover .hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:12px;margin:-8px 0 16px;display:block}
#gear{display:none;position:fixed;right:16px;top:64px;padding:6px 10px;font-size:12px}
@media (max-width:760px){
  #info{width:auto;padding:6px;top:calc(10px + env(safe-area-inset-top));left:10px}#info h1,#info .sub,#maplbl{display:none}#map{width:104px;height:131px}
  #help,#set{display:none}#set.open{display:block;top:calc(60px + env(safe-area-inset-top));right:10px}
  #gear{display:block!important;top:calc(10px + env(safe-area-inset-top));right:10px}
  /* Raumchip oben mittig zwischen Grundriss und Optionen */
  #room{top:calc(12px + env(safe-area-inset-top));left:calc(50% + 26px);font-size:12px;padding:7px 10px;max-width:calc(100vw - 250px);overflow:hidden;text-overflow:ellipsis}
  #room span{display:none}
  /* Raumleiste: eine Zeile, horizontal wischbar, grosse Tippflächen */
  #rooms{left:8px;right:8px;transform:none;max-width:none;bottom:calc(20px + env(safe-area-inset-bottom));flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}
  #rooms::-webkit-scrollbar{display:none}
  #rooms button{padding:10px 12px;font-size:13px;white-space:nowrap;flex:0 0 auto}
  #joy{display:block;left:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:104px;height:104px}#joy i{left:32px;top:32px}
  #seeBtn{left:auto;right:12px;transform:none;bottom:calc(92px + env(safe-area-inset-bottom));font-size:12.5px;padding:10px 14px}
  .disc{display:block;bottom:calc(3px + env(safe-area-inset-bottom));font-size:9.5px;color:rgba(255,255,255,.9)}
}