/* halle.css — die 2,5D-Schmiede (halle.js, #787). Ein Hallenbild, 4K-Kacheln, Leuchtpunkte, Würfel am Rand (der Unterraum liegt in halle-welt.css).
   Alles liegt in .hl und füllt den Rest des Fensters unter dem Seitenkopf (die Höhe setzt halle.js). Keine Parallaxe, keine Verzerrung. */
.hl { position: relative; width: 100%; min-height: 320px; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border);
    background: var(--welt-grund); --w: 76px; color: var(--text); }
:where(.hl button) { font: inherit; cursor: pointer; }   /* Spezifität 0: die Knopf-Bauteile (.el-neben, .el-haupt: Cinzel) gewinnen, nur nackte Knöpfe erben die Schrift (Nr. 982) */
.hl button:focus-visible, .hl a:focus-visible, .hl-szene:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }
.hl-defs { position: absolute; }
.hl-raum { position: absolute; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.hl-raum.zieht { cursor: grabbing; }
.hl-bild { position: absolute; left: 0; top: 0; width: 1376px; height: 768px; transform-origin: 0 0; will-change: transform; }
.hl-bild img, .hl-bild .hl-ebene { position: absolute; display: block; -webkit-user-drag: none; pointer-events: none; }
.hl-klein { left: 0; top: 0; width: 100%; height: 100%; }
.hl-ebene { inset: 0; }
.hl-ebene img { opacity: 0; transition: opacity .5s ease; }
.hl-ebene img.da { opacity: 1; }
.hl-licht { position: absolute; inset: 0; }   /* Raumlicht: Gamma-Filter (halle.js), die Glut liegt ausserhalb */
/* Glut in der Esse: flackernder Lichtschein über dem Feuer (Bildmass 1376x768) */
.hl-bild .hl-glut { position: absolute; left: 560px; top: 215px; width: 260px; height: 230px; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(closest-side, var(--glut-glow-halb), var(--glut-tief) 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side, var(--schwarz) 55%, transparent 100%); mask-image: radial-gradient(closest-side, var(--schwarz) 55%, transparent 100%);
    animation: hl-flacker 2.3s ease-in-out infinite alternate; }
.hl-bild .hl-glut2 { left: 470px; top: 170px; width: 440px; height: 360px; opacity: .5;
    background: radial-gradient(closest-side, var(--glut-glow-weich), transparent 100%); animation-duration: 3.7s; animation-delay: -1.2s; }
@keyframes hl-flacker { 0% { opacity: .55; } 23% { opacity: .85; } 41% { opacity: .6; } 67% { opacity: .95; } 100% { opacity: .7; } }
.hl-ton { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, var(--abdunkeln-maessig)); }

/* Leuchtpunkte (ohne Namen; der Name erscheint bei Maus-Hover bzw. langem Druck) */
.hl-punkte { position: absolute; inset: 0; pointer-events: none; z-index: 2; }   /* unter dem Wuerfel (z 3): er ueberlagert die Stationsnamen (#884); die Punkte bleiben ausserhalb seiner Flaeche klickbar */
.hl-punkt { position: absolute; left: 0; top: 0; width: var(--tap); height: var(--tap); margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; pointer-events: auto; transition: opacity .4s; }
.hl-punkt i { width: 13px; height: 13px; border-radius: 50%; background: var(--glut-punkt); box-shadow: var(--sh-hotspot);
    transition: all .5s; }   /* kein Atmen mehr (Betreiber 2026-10-13: wirkte neben dem Kaminfeuer wie Flackern); Punkt waechst nur bei Hover/aktiv */
.hl-punkt.an i { width: 19px; height: 19px; background: var(--glut); box-shadow: var(--sh-hotspot-an); animation: none; }
.hl-raum.station + .hl-ton + .hl-punkte .hl-punkt, .hl-raum.station .hl-punkt { opacity: 0; pointer-events: none; }
.hl-tip { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 4px 10px; border-radius: 12px;
    background: var(--glas-tip); border: 1px solid var(--gold); color: var(--gold-h); font-size: var(--fs-sm); font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hl-punkt:hover .hl-tip, .hl-punkt:focus-visible .hl-tip, .hl-punkt.tip-an .hl-tip { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }   /* sichtbares Namensschild ist Teil des Knopfs: Klick darauf führt zum Ziel */

/* Kopfzeile in der Halle: Helligkeit und "Übersicht" (kein Seitentitel, der steht darüber) */
.hl-kopf { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);
    padding: 8px 12px; background: linear-gradient(180deg, var(--bg-glas), transparent); pointer-events: none; }
.hl-kopf > * { pointer-events: auto; }
.hl-hell { display: flex; align-items: center; gap: 6px; color: var(--gold-h); font-size: var(--fs-lg); min-height: var(--tap); }
.hl-hell input { width: 120px; height: var(--tap); min-height: 44px; margin: 0; padding: 0; accent-color: var(--gold); }   /* Trefferflaeche >= 44 px (#849) */
.hl-chip { min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--bm); background: var(--glas-fest); color: var(--gold-h);
    font-size: var(--fs-sm); font-weight: 600; }
.hl-chip:hover { border-color: var(--gold); }
.hl-chip[hidden] { display: none; }

/* Würfel: Harz-Optik, runder goldener Flüssigkern; Kanten nur als weicher Innenschein */
.hl-seite { position: absolute; right: 12px; bottom: 14px; z-index: 3; width: calc(var(--w) + 24px); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: bottom .3s; }
.hl-wbox { position: relative; width: var(--w); height: var(--w); margin: 6px 0 12px; }
.hl-wbox::before { content: ""; position: absolute; inset: -70%; background: radial-gradient(closest-side, var(--gold-schein), transparent); pointer-events: none; }
/* Auflage (Nr. 1013): weicher Schatten unter dem Würfel, nach rechts versetzt (das Licht kommt vom Kamin links der Mitte) */
.hl-wbox::after { content: ""; position: absolute; left: 10%; right: -22%; bottom: -14%; height: 30%; background: radial-gradient(closest-side, var(--abdunkeln-dicht), transparent); filter: blur(var(--sp-1)); pointer-events: none; }
.hl-szene { position: absolute; inset: 0; perspective: 560px; touch-action: none; cursor: grab; }
.hl-szene:active { cursor: grabbing; }
.hl-szene, .hl-szene * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* Ruhepose fast frontal (10 Grad), darueber ein langsames Hin-und-her (+-6 Grad um Y, +-3 um X); beim Ziehen/Einrasten angehalten */
.hl-kipp { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(10deg); animation: hl-schwebe 7.5s ease-in-out infinite alternate; }
.hl-kern { position: absolute; inset: -8%; transform: rotateY(-10deg) rotateX(10deg); pointer-events: none; animation: hl-schwebe-kern 7.5s ease-in-out infinite alternate; }
@keyframes hl-schwebe { from { transform: translateY(-2px) rotateX(-13deg) rotateY(4deg); } to { transform: translateY(2px) rotateX(-7deg) rotateY(16deg); } }
@keyframes hl-schwebe-kern { from { transform: rotateY(-4deg) rotateX(13deg); } to { transform: rotateY(-16deg) rotateX(7deg); } }
.hl-kipp:has(.hl-wuerfel.zieht), .hl-kipp:has(.hl-wuerfel.zieht) .hl-kern { animation-play-state: paused; }
.hl-kern canvas { width: 100%; height: 100%; display: block; }
/* 3D-Fassung des Würfels (#890, halle-wuerfel-3d.js): Leinwand 1,5-mal so groß wie der Würfel, damit Ecken beim Drehen nicht abgeschnitten werden; die CSS-Flächen bleiben nur als Rückfall */
.hl-3d-box { position: absolute; inset: -25%; pointer-events: none; }
.hl-3d-box canvas { width: 100%; height: 100%; display: block; }
.hl-szene.hl-3d .hl-kipp { visibility: hidden; }
.hl-wuerfel { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.hl-wuerfel.zieht { transition: none; }
.hl-wuerfel.rein { animation: hl-rein .45s ease; }
@keyframes hl-rein { 0% { scale: .7; opacity: .3; } 100% { scale: 1; opacity: 1; } }

@media (min-width: 1000px) {
    .hl { --w: 128px; }
    .hl-kopf { padding: 12px 20px; }
    .hl-seite { right: 24px; bottom: auto; top: 50%; transform: translateY(-50%); width: 176px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hl-bild .hl-glut { animation: none; }
    .hl-wuerfel, .hl-ebene img { transition: none; }
    .hl-wuerfel.rein, .hl-kipp, .hl-kern { animation: none; }
}