/* Werke: dreizehn Gemälde im wahren Größenverhältnis, der Zeiger ist die Lampe (assets/js/gemaelde.js) */
.saal{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b0b0d 0,#09090b 60%,var(--bg) 100%)}
.saal>*{position:relative;z-index:1}
.saal .saal__schein{position:absolute;z-index:0;left:0;top:0;width:1100px;height:1100px;margin:-550px 0 0 -550px;pointer-events:none;opacity:0;will-change:transform,opacity;background:radial-gradient(closest-side,rgba(255,238,210,.085),rgba(255,238,210,.04) 38%,rgba(255,238,210,.012) 70%,rgba(255,238,210,0))}
.saal__tipp{display:block;margin-top:.5rem;font-size:.95rem}
.saal__tipp--finger{display:none}
@media (hover:none){.saal__tipp--maus{display:none}.saal__tipp--finger{display:block}}
.wand{--cm:min(.36vw,5.6px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(48px,7vw,104px) clamp(26px,4.4vw,72px);margin-top:clamp(40px,7vw,96px)}
.gemaelde{margin:0;width:max(calc(var(--wcm)*var(--cm)),12.5rem);max-width:100%}
.gemaelde__bild{display:block;width:calc(var(--wcm)*var(--cm));max-width:100%}
.gemaelde canvas,.gemaelde img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);background:#0d0d10;box-shadow:var(--sx,0px) var(--sy,10px) 34px rgba(0,0,0,.78),var(--sx,0px) var(--sy,10px) 8px rgba(0,0,0,.5)}
.gemaelde canvas{opacity:0;transition:opacity .9s}
.gemaelde canvas.da{opacity:1}
@media (hover:hover){.gemaelde canvas{cursor:none}}
.gemaelde figcaption{margin-top:1.15rem}
.gemaelde h3{font-family:"Metal Mania",Inter,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:1.18rem;line-height:1.2}
.gemaelde__daten{font-size:.9rem;line-height:1.45;color:var(--grau);margin-top:.3rem}
.gemaelde__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:.75rem}
.gemaelde__preis{font-size:1.12rem;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gemaelde .knopf{padding:.42em 1em;font-size:.86rem}
.gemaelde.weg canvas,.gemaelde.weg img{filter:saturate(.55)}
.saal__fuss{margin-top:clamp(48px,7vw,96px);padding-top:1.4rem;border-top:1px solid var(--linie);font-size:.92rem;color:var(--grau);max-width:74ch}
.saal__fuss a{color:var(--fg)}
@media (max-width:820px){
  .wand{--cm:calc((100vw - 2*var(--rand))/120);gap:44px 20px;justify-content:flex-start}
  .gemaelde{width:max(calc(var(--wcm)*var(--cm)),9.6rem)}
  .gemaelde h3{font-size:1.05rem;min-height:2.4em}
  .gemaelde__daten{min-height:4.35em}
  .gemaelde[style*="--wcm:120"] h3,.gemaelde[style*="--wcm:8"] h3{min-height:0}
  .gemaelde[style*="--wcm:120"] .gemaelde__daten,.gemaelde[style*="--wcm:8"] .gemaelde__daten{min-height:0}
}

/* Fliegende T-Shirts (assets/js/hemden.js) */
.hemdflug{position:fixed;left:0;top:0;z-index:70;pointer-events:none;will-change:transform;contain:layout style}
.hemdflug canvas{display:block;width:100%;height:100%}
.hemdflug__griff{position:absolute;inset:19% 15% 17%;border-radius:28%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hemdflug__griff:focus-visible{outline:0}
.hemdflug--halt .hemdflug__griff{cursor:default}
.hemdschild{position:absolute;pointer-events:auto;width:min(292px,82vw);top:50%;translate:0 -50%;background:var(--tafel);border:1px solid var(--linie);padding:18px 20px 16px;box-shadow:0 26px 54px -20px rgba(0,0,0,.85);animation:hemdschild .45s var(--ease) both}
.hemdflug[data-seite=rechts] .hemdschild{left:86%}
.hemdflug[data-seite=links] .hemdschild{right:86%}
.hemdflug[data-seite=unten] .hemdschild{top:90%;left:50%;translate:-50% 0}
@keyframes hemdschild{from{opacity:0;transform:translateY(8px)}}
.hemdschild__art{font-size:.8rem;color:var(--grau);letter-spacing:.02em}
.hemdschild h2{font-family:"Metal Mania",Inter,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:1.5rem;line-height:1.1;margin-top:.3rem}
.hemdschild__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:.6rem 0 1rem;font-size:.88rem;color:var(--grau)}
.hemdschild__zeile b{font-size:1.35rem;font-weight:500;color:var(--fg);letter-spacing:-.02em}
.hemdschild .knopf{width:100%}
.hemdschild__weiter{display:block;margin:.8rem auto 0;font-size:.88rem;color:var(--grau);text-decoration:underline;text-underline-offset:.2em}
.hemdschild__weiter:hover{color:var(--fg)}
/* 3D-Hemd im Raum (assets/js/raum/hemd3d.js): das Hemd selbst ist Teil der Szene, nur das Schild ist HTML */
.hemd3d{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;will-change:transform}
.hemd3d[hidden]{display:none}
.hemd3d .hemdschild{top:0;left:0;translate:-50% -50%}
.raum__ebene>.hemd3d{z-index:6} /* über den Hinweiszeilen der Stationen (raum.css setzt für alle Kinder der Ebene z-index 2) */
.still .hemd3d{opacity:0;pointer-events:none;transition:opacity .4s}
.still .hemd3d .hemdschild{pointer-events:none}
.hemdschild [hidden]{display:none}
.hemdschild__zeile span{min-width:0}
.hemdschild__zeile b{white-space:nowrap}
/* Handy: Tippziele mindestens 44 px hoch */
@media (max-width:860px){.hemd3d .hemdschild{padding:14px 16px 8px}.hemd3d .hemdschild .knopf{min-height:44px}.hemd3d .hemdschild__weiter{margin-top:.2rem;min-height:44px;padding:0 1em}}