/* Hallenplan in 3D (Jobmesse 2026): Lichthalle, Stände mit Theke und Logo-Rückwand, Aussteller-Figuren, Besucher-Männchen,
   Schweben, Rundflug, Ansichtsknöpfe, Ton. Alle Klassen mit hp-, damit nichts mit der Seite kollidiert. Gebraucht von
   vorschau/mischung.html und vorschau/plan-ideen/idee-4-mischung.html. */
@property --c{syntax:'<color>';inherits:true;initial-value:#a6dc1e}
.hp{--hp-blau:#12335e;--hp-dunkel:#0b1f3b;--hp-gelb:#fac00a;--hp-gruen:#8cb229;--hp-holz:#c9a77a;
  --hp-titel:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--hp-text:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --hp-weich:cubic-bezier(.16,1,.3,1);--hp-feder:cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.hp.hp-zieht{cursor:grabbing}
.hp button{font:inherit;color:inherit}
.hp img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.hp-kamera{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 42%}
.hp-welt{position:absolute;left:50%;top:var(--oy,52%);width:var(--W);height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--W) / -2);transform-style:preserve-3d;will-change:transform}
/* 2D-Ebene über der Halle: Schilder an der projizierten Stelle, nach Bildhöhe gestaffelt, schneiden sich nie mit 3D-Teilen */
.hp-schicht{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.hp-o{position:absolute;left:0;top:0;transform-origin:50% 100%;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;will-change:transform}
.hp-o.hp-o-mitte{transform-origin:50% 50%}
.hp-o.hp-zeigt{opacity:1;visibility:visible;transition:opacity .3s}
.hp-welt>*{position:absolute}
.hp-bodenschicht{inset:0;transform:translateZ(.5px)}
.hp-bodenschicht>*{position:absolute}
.hp-fleck>*{position:absolute}
.hp-boden{inset:0;border-radius:4px;background:radial-gradient(60% 70% at 55% 35%,rgba(120,170,230,.22),transparent 70%),linear-gradient(160deg,#173a66,#0d2748 60%,#0a2040);box-shadow:0 0 0 2px rgba(160,200,255,.18) inset}
.hp-gang{background:rgba(110,205,145,.09);box-shadow:inset 0 0 0 1px rgba(110,205,145,.16);border-radius:10px}
.hp-gang.hp-foyer{background:rgba(250,192,10,.13);box-shadow:none}
.hp-weg{left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hp-weg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp-weg .hp-rand{stroke:rgba(250,192,10,.3);stroke-width:24}
.hp-weg .hp-linie{stroke:var(--hp-gelb);stroke-width:8}
.hp-weg .hp-spur-teil{fill:none;stroke:#f3d77a;stroke-width:6;opacity:.45;stroke-linecap:round;stroke-linejoin:round}

/* Wände klappen beim Start (im Rundflug) vom Boden hoch */
.hp-wand,.hp-kante,.hp-tor,.hp-schild,.hp-figur,.hp-aussteller,.hp-schwebe,.hp-schatten{pointer-events:none}
.hp-wand{transform-origin:50% 100%;transform:rotateX(0deg);transition:transform 1.3s var(--hp-weich) .1s}
.hp-wand.hp-fenster{top:-120px;height:120px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 3px,transparent 3px 68px),linear-gradient(180deg,rgba(170,215,250,.55),rgba(120,180,235,.18));border-top:4px solid rgba(255,255,255,.6)}
.hp-los .hp-wand.hp-fenster{transform:rotateX(-90deg)}
.hp-wand.hp-holz{left:-120px;top:0;width:120px;height:100%;transform-origin:100% 50%;transform:rotateY(0deg);background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 24px),linear-gradient(90deg,#8a6a43,#b48b5a)}
.hp-los .hp-wand.hp-holz{transform:rotateY(90deg)}
.hp-kante{transform-origin:50% 100%;background:linear-gradient(180deg,rgba(190,220,255,.35),rgba(190,220,255,.08));transition:transform 1.3s var(--hp-weich) .2s}
.hp-kante.hp-vorn{height:18px}
.hp-los .hp-kante.hp-vorn{transform:rotateX(-90deg)}
.hp-kante.hp-rechts{left:100%;width:18px;transform-origin:0 50%}
.hp-los .hp-kante.hp-rechts{transform:rotateY(-90deg)}
.hp-tor .hp-f{background:var(--hp-gelb);box-shadow:0 0 22px rgba(250,192,10,.7)}
.hp-wand.hp-fenster,.hp-wand.hp-holz,.hp-tor .hp-f{transition:transform 1.3s var(--hp-weich) .1s,opacity .35s}
.hp-nord-vorn .hp-wand.hp-fenster,.hp-nord-vorn .hp-tor.hp-not .hp-f,.hp-west-vorn .hp-wand.hp-holz{opacity:.1}
.hp-ost-vorn .hp-tor:not(.hp-zweit):not(.hp-not) .hp-f{opacity:.25}
.hp-tor.hp-zweit .hp-f{background:#9fb3cc;box-shadow:none}
.hp-tor.hp-not .hp-f{background:#1fb35c;box-shadow:0 0 14px rgba(31,179,92,.6)}
.hp-matte{background:rgba(250,192,10,.85);border-radius:6px}
.hp-matte.hp-zweit{background:rgba(160,185,215,.35)}
.hp-matte.hp-not{background:rgba(31,179,92,.4)}

/* Quader und Stände */
.hp-quader{position:absolute;transform-style:preserve-3d}
.hp-aufbau>*{position:absolute}
.hp-f{position:absolute;left:0;top:0}
.hp-stand{transform-style:preserve-3d;cursor:pointer;outline:none;transition:--c .5s ease}
.hp-stand>*{position:absolute}
.hp-stand:focus-visible{outline:3px solid var(--hp-gelb);outline-offset:6px}
.hp-stand.hp-frei{--c:#4a6488}
.hp-stand.hp-rolle{--c:var(--hp-holz)}
.hp-stand.hp-aus{--c:#2b4467}
.hp-stand.hp-gewaehlt{--c:var(--hp-gelb)}
.hp-tf{background:transparent;transform:translateZ(.9px)}
.hp-schatten{border-radius:10px;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent)}
.hp-teppich{border-radius:7px;background:color-mix(in srgb,var(--c) 38%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 85%,transparent),inset 0 0 16px color-mix(in srgb,var(--c) 55%,transparent),0 0 18px color-mix(in srgb,var(--c) 45%,transparent);transform:translateZ(.6px)}
.hp-aus .hp-teppich{background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.hp-halo{border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 95%,#fff) 0%,color-mix(in srgb,var(--c) 70%,transparent) 38%,transparent 100%);opacity:.32;transition:opacity .6s ease}
.hp-aus .hp-halo{opacity:0}
.hp-treffer .hp-halo,.hp-gewaehlt .hp-halo{opacity:1}
/* Auswahl: einmal kurz aufblitzen, dann ruhig leuchten */
.hp-blink .hp-halo{animation:hp-blink .9s ease-out 1}
.hp-blink .hp-rollup{animation:hp-blitz .9s ease-out 1}
@keyframes hp-blink{0%{transform:scale(.7);opacity:.4}35%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes hp-blitz{0%{box-shadow:0 0 0 transparent}35%{box-shadow:0 0 18px #fff,0 0 50px var(--c),0 0 90px var(--c)}100%{box-shadow:0 0 10px var(--c),0 0 30px color-mix(in srgb,var(--c) 85%,transparent),0 0 60px color-mix(in srgb,var(--c) 55%,transparent)}}
/* nicht passende Stände: deutlich grau */
.hp-stand.hp-aus .hp-theke .hp-oben{background:#7f8b9a;color:#3f4a58;box-shadow:inset 0 0 0 2px #5d6a7b}
.hp-stand.hp-aus .hp-theke .hp-vorn,.hp-stand.hp-aus .hp-theke .hp-hinten{background:#5d6a7b}
.hp-stand.hp-aus .hp-theke .hp-links,.hp-stand.hp-aus .hp-theke .hp-rechts{background:#4b5768}
.hp-fleck.hp-aus .hp-teppich{background:rgba(70,85,105,.25);box-shadow:none}
.hp-fleck.hp-aus .hp-schatten{opacity:.4}
.hp-aufbau{inset:0;transform-style:preserve-3d;transform:translateZ(1.4px) scale3d(1,1,.01);transition:transform .9s var(--hp-feder);transition-delay:calc(.35s + var(--i) * 26ms)}
.hp-los .hp-aufbau{transform:translateZ(1.4px)}
.hp-fertig .hp-aufbau{transition-delay:0s}
/* Theke: weiße Platte mit farbigem Rand, kräftige Front, dunklere Seiten */
.hp-theke .hp-oben{background:#f7f9fc;display:grid;place-items:center;font:800 19px/1 var(--hp-titel);color:var(--hp-blau);border-radius:2px;box-shadow:inset 0 0 0 3px var(--c)}
.hp-theke .hp-vorn,.hp-theke .hp-hinten{background:linear-gradient(180deg,var(--c) 0 7px,color-mix(in srgb,var(--c) 35%,#dfe6ef) 7px 85%,color-mix(in srgb,var(--c) 50%,#7f8ea3) 85%)}
.hp-theke .hp-links,.hp-theke .hp-rechts{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,#8d9db3),color-mix(in srgb,var(--c) 30%,#7c8ca3))}
.hp-stand:hover .hp-theke .hp-oben,.hp-stand:focus-visible .hp-theke .hp-oben{box-shadow:inset 0 0 0 4px var(--hp-gelb)}
/* Rückwand mit Tiefe: Körper in Standfarbe, Logo auf beiden Seiten */
.hp-wandkoerper .hp-oben{background:color-mix(in srgb,var(--c) 70%,#fff)}
.hp-wandkoerper .hp-vorn,.hp-wandkoerper .hp-hinten{background:var(--c)}
.hp-wandkoerper .hp-links,.hp-wandkoerper .hp-rechts{background:color-mix(in srgb,var(--c) 60%,#000)}
.hp-rollup{position:absolute;transform-origin:50% 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 4px 0 0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 4px 4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 0 12px color-mix(in srgb,var(--c) 55%,transparent);transition:box-shadow .5s}
.hp-aus .hp-rollup{box-shadow:none}
.hp-treffer .hp-rollup,.hp-gewaehlt .hp-rollup{box-shadow:0 0 10px var(--c),0 0 30px color-mix(in srgb,var(--c) 85%,transparent),0 0 60px color-mix(in srgb,var(--c) 55%,transparent)}
.hp-karte{width:100%;height:50px;background:#fff;border-radius:4px;display:grid;place-items:center;padding:3px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,.18)}
.hp-karte.hp-dunkel{background:var(--hp-blau)}
.hp-karte img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .4s,filter .4s}
.hp-karte b{font:800 9.5px/1.05 var(--hp-titel);color:var(--hp-blau);text-align:center;overflow-wrap:anywhere}
.hp-karte.hp-leer b{color:#7d8ea4;font-size:9px}
.hp-rollup .hp-nr-r{font:800 12px/1 var(--hp-titel);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hp-rollup.hp-tief{padding:3px 4px 2px}
.hp-rollup.hp-tief .hp-karte{height:38px}
.hp-rollup.hp-tief .hp-nr-r{font-size:10px}
.hp-los.hp-zeig-h .hp-stand.hp-h:not(.hp-gewaehlt) .hp-karte,.hp-los.hp-zeig-v .hp-stand.hp-v:not(.hp-gewaehlt) .hp-karte{visibility:hidden}
.hp-los .hp-stand.hp-schild-weg .hp-karte{visibility:visible!important}
.hp-aus .hp-karte{background:#8e9aab}
.hp-aus .hp-karte img{opacity:.35;filter:grayscale(1) brightness(.8)}
.hp-aus .hp-rollup{background:linear-gradient(180deg,#76849a,#5a6779);box-shadow:none}
.hp-aus .hp-wandkoerper .hp-f{background:#56637a}
/* Besucherstühle vorn */
.hp-sitz{background:#cfd9e6;border-radius:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.hp-lehne{position:absolute;transform-origin:50% 100%;background:linear-gradient(180deg,#c3cfdd,#8ea0b8);border-radius:3px 3px 0 0}
.hp-aus .hp-sitz,.hp-aus .hp-lehne{background:#6b778a}
/* Besuchsreihenfolge */
.hp-besuch{transform-origin:0 0;opacity:0;transform:translateZ(var(--z,110px)) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translate(-50%,-100%);pointer-events:none;transition:opacity .3s}
.hp-besuch span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:var(--hp-gelb);color:var(--hp-dunkel);font:800 16px/1 var(--hp-titel);box-shadow:0 0 0 3px var(--hp-dunkel),0 8px 14px -6px rgba(0,0,0,.6)}
.hp-besucht .hp-besuch{opacity:1}
.hp .hp-neustart{left:clamp(14px,2.4vw,30px);bottom:clamp(70px,9vh,84px);font:700 .92rem var(--hp-text);color:var(--hp-blau);background:#fff;border:0;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}
.hp .hp-neustart[hidden]{display:none}
.hp-neustart:focus-visible{outline:3px solid var(--hp-gelb);outline-offset:3px}

/* Schilder, Männchen und Aussteller schauen immer zur Kamera */
.hp-schild{white-space:nowrap}
.hp-schild span{display:block;font:800 26px/1 var(--hp-titel);color:var(--hp-dunkel);background:var(--hp-gelb);padding:12px 18px;border-radius:14px;box-shadow:0 18px 30px -12px rgba(0,0,0,.55)}
.hp-schild.hp-flur span{font-size:16px;padding:6px 11px;background:#9fb3cc;box-shadow:none}

.hp-schild.hp-not svg{display:block;width:64px;height:32px;border-radius:4px;box-shadow:0 0 0 2px #fff,0 10px 18px -8px rgba(0,0,0,.6)}

.hp-schild.hp-ziel span{display:flex;align-items:center;gap:12px;background:#fff;font-size:24px;color:var(--hp-blau);padding:10px 16px 10px 10px}
.hp-zl{width:76px;height:48px;border-radius:10px;background:#f3f5ef;display:grid;place-items:center;padding:5px;overflow:hidden;flex:none}
.hp-zl.hp-dunkel{background:var(--hp-blau)}
.hp-zl img{max-width:100%;max-height:100%;object-fit:contain}
.hp-zl b{font:800 20px var(--hp-titel)}
.hp-schild.hp-ziel small{display:block;font:600 15px var(--hp-text);color:#4b5b70;margin-bottom:3px}
.hp-figur{left:0;top:0;transform-origin:0 0;transform:translate3d(var(--fx,0px),var(--fy,0px),2px) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translate(-50%,-100%)}
.hp-figur svg{display:block;width:40px;height:66px;overflow:visible;transform:scaleX(var(--flip,-1))}
.hp-figur .hp-koerper{fill:var(--hp-gelb);stroke:var(--hp-dunkel);stroke-width:2.5}
.hp-figur .hp-muetze{fill:var(--hp-gruen);stroke:var(--hp-dunkel);stroke-width:2.5}
.hp-kopf-f{fill:#f2c9a1;stroke:var(--hp-dunkel);stroke-width:2.5}
.hp-bein{stroke:#fff;stroke-width:5;stroke-linecap:round}
.hp-f-schatten{fill:rgba(0,0,0,.35)}
.hp-figur .hp-huepf{animation:hp-huepf 1.8s ease-in-out infinite}
@keyframes hp-huepf{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hp-figur.hp-laeuft .hp-huepf{animation:none}
.hp-figur.hp-laeuft .hp-bein-l{animation:hp-schritt .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
.hp-figur.hp-laeuft .hp-bein-r{animation:hp-schritt .3s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:50% 0}
@keyframes hp-schritt{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
/* Aussteller: zwei Figuren in Standfarbe zwischen Theke und Rückwand */
.hp-aussteller{left:0;top:0;width:30px;height:58px;transform-origin:0 0;transform:translate3d(var(--ax),var(--ay),0) rotateZ(calc(var(--rz) * -1)) rotateX(-90deg) translate(-50%,-100%)}
.hp-aussteller svg{display:block;width:30px;height:58px;overflow:visible}
/* von oben: Kopf und Schultern, genau über dem Fußpunkt */
.hp-kopf-oben{left:0;top:0;width:16px;height:16px;border-radius:50%;background:#3b2a1e;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 85%,#0b1f3b);transform:translate3d(calc(var(--ax) - 8px),calc(var(--ay) - 8px),56px);pointer-events:none;opacity:0;transition:opacity .3s}
.hp-welt:not(.hp-zeig-h):not(.hp-zeig-v) .hp-kopf-oben{opacity:0}
.hp-welt.hp-zeig-h.hp-zeig-v .hp-kopf-oben{opacity:1}
.hp-aus .hp-kopf-oben{box-shadow:0 0 0 5px #6b778a}
.hp-aussteller .hp-koerper{fill:var(--c);stroke:var(--hp-dunkel);stroke-width:2.5}
.hp-aussteller .hp-haar{fill:#3b2a1e}
.hp-aussteller .hp-arm{stroke:var(--hp-dunkel);stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 100%}
.hp-aussteller .hp-wipp{animation:hp-wipp 2.6s ease-in-out infinite;animation-delay:var(--ad,0s)}
@keyframes hp-wipp{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.hp-winkt .hp-aussteller .hp-arm{animation:hp-winken .28s ease-in-out 6 alternate}
@keyframes hp-winken{from{transform:rotate(-20deg)}to{transform:rotate(35deg)}}
.hp-aus .hp-aussteller{opacity:.4}
.hp-aus .hp-aussteller .hp-koerper{fill:#6b778a}
/* Schwebendes Logo-Schild, wenn die Rückwand gerade nicht lesbar ist (von oben, von der Seite, am Handy) */
.hp-schwebe{transform-origin:0 0;opacity:0;transition:opacity .35s;transform:translateZ(var(--z,44px)) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) scale(var(--bs,1)) translate(-50%,var(--ty,-100%))}
.hp-los.hp-zeig-h .hp-stand.hp-h .hp-schwebe,.hp-los.hp-zeig-v .hp-stand.hp-v .hp-schwebe,.hp-los .hp-schwebe.hp-immer{opacity:1}
.hp-stand.hp-gewaehlt .hp-schwebe{opacity:0!important}
.hp-stand.hp-v .hp-schwebe{--bs:.8}
.hp-sk{position:relative;width:92px;height:54px;background:#fff;border-radius:10px;display:grid;place-items:center;padding:5px 6px;box-shadow:0 10px 18px -8px rgba(0,0,0,.6),0 0 0 3px var(--c)}
.hp-sk.hp-dunkel{background:var(--hp-blau)}
.hp-sk img{max-width:100%;max-height:100%;object-fit:contain}
.hp-sk b{font:800 11px/1.05 var(--hp-titel);color:var(--hp-blau);text-align:center;overflow-wrap:anywhere}
.hp-sk.hp-leer{width:70px;height:40px;background:#dfe6ef}.hp-sk.hp-leer b{color:#7d8ea4}
.hp-sk-nr{position:absolute;left:-10px;top:-12px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--hp-dunkel);color:#fff;font:800 14px/26px var(--hp-titel);text-align:center;box-shadow:0 0 0 2px var(--c)}
.hp-sk-o.hp-frei{--c:#4a6488}.hp-sk-o.hp-rolle{--c:var(--hp-holz)}
.hp-sk-herz{position:absolute;right:-9px;top:-11px;width:24px;height:24px;border-radius:50%;background:var(--hp-gelb);display:none;place-items:center}
.hp-sk-herz svg{width:14px;height:14px}
.hp-gemerkt .hp-sk-herz{display:grid}
.hp-treffer .hp-sk{box-shadow:0 10px 18px -8px rgba(0,0,0,.6),0 0 0 4px var(--c),0 0 22px var(--c)}
.hp-aus .hp-sk{background:#8e9aab;box-shadow:0 0 0 2px #5d6a7b}.hp-aus .hp-sk img{opacity:.35;filter:grayscale(1)}.hp-aus .hp-sk b{color:#3f4a58}.hp-aus .hp-sk-nr{background:#4b5768;box-shadow:none}
/* Herz über der Rückwand gemerkter Stände */
.hp-herz{transform-origin:0 0;opacity:0;transition:opacity .3s;transform:translateZ(var(--z,96px)) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translate(-50%,-100%);pointer-events:none}
.hp-herz span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hp-gelb);box-shadow:0 8px 14px -6px rgba(0,0,0,.6)}
.hp-herz svg{width:18px;height:18px}
.hp-gemerkt .hp-herz{opacity:1}

/* Bedienung im Plan */
.hp-ui{position:absolute;z-index:5;cursor:auto}
.hp-sicht{right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.6vh,26px);display:flex;gap:6px;transition:opacity .3s}
.hp.hp-leiste-mitte .hp-sicht{right:auto;left:50%;translate:-50% 0}
.hp-sicht button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(4,12,26,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 15px;min-height:44px;font-weight:600;font-size:.92rem;color:#fff;cursor:pointer;transition:background .25s,color .25s,border-color .25s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hp-sicht button:hover{background:rgba(255,255,255,.14)}
.hp-sicht button[aria-pressed="true"]{background:#fff;color:var(--hp-blau);border-color:#fff}
.hp-sicht button:focus-visible{outline:3px solid var(--hp-gelb);outline-offset:3px}
.hp-sicht .hp-flug-knopf{border-color:rgba(250,192,10,.7)}
.hp-sicht .hp-ton-knopf,.hp-sicht .hp-zoom-knopf{padding:9px 12px;min-width:44px}
.hp-sicht .hp-ganz-knopf{border-color:rgba(255,255,255,.42)}
.hp-fokus .hp-sicht .hp-ganz-knopf{background:#fff;color:var(--hp-blau);border-color:#fff}
/* zweiter Ganze-Halle-Knopf oben rechts, am Handy über der Schublade sichtbar */
.hp .hp-ganz-oben{display:none;left:10px;top:var(--ganz-oben,10px);align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;border:0;background:#fff;color:var(--hp-blau);font:700 .86rem var(--hp-text);box-shadow:0 12px 24px -12px rgba(0,0,0,.6);cursor:pointer}
.hp .hp-ganz-oben svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hp.hp-schmal.hp-fokus .hp-ganz-oben{display:inline-flex}
.hp .hp-ganz-oben:focus-visible{outline:3px solid var(--hp-gelb);outline-offset:3px}
.hp-ton-knopf .hp-wellen{display:none}.hp-ton-knopf[aria-pressed="true"] .hp-wellen{display:inline}.hp-ton-knopf[aria-pressed="true"] .hp-stumm{display:none}
.hp-sicht svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hp-tipp{position:fixed;z-index:30;pointer-events:none;background:#fff;color:var(--hp-blau);font:700 .9rem var(--hp-text);padding:6px 10px;border-radius:10px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-140%);transition:opacity .15s;white-space:nowrap}
.hp-tipp.hp-an{opacity:1}
.hp-satz{position:absolute;z-index:4;left:clamp(14px,2.4vw,30px);bottom:clamp(76px,10vh,96px);max-width:min(520px,calc(100% - 28px));margin:0;pointer-events:none;padding:clamp(14px,1.8vw,22px) clamp(16px,2.2vw,26px);border-radius:22px;
  background:rgba(8,22,44,.84);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);color:#fff;
  font:800 clamp(1.3rem,2.6vw,2.3rem)/1 var(--hp-titel);letter-spacing:-.03em;text-wrap:balance;opacity:0;translate:0 20px;filter:blur(6px);transition:opacity .5s,translate .7s var(--hp-weich),filter .5s}
.hp-satz.hp-an{opacity:1;translate:0 0;filter:none}
.hp-satz small{display:block;font:500 clamp(.95rem,1.2vw,1.1rem)/1.4 var(--hp-text);letter-spacing:0;color:#cfdbea;margin-top:.55rem;max-width:36ch}
.hp-unterwegs{left:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.6vh,26px);margin:0;display:flex;align-items:center;gap:10px;background:var(--hp-gelb);color:var(--hp-dunkel);font:700 1rem var(--hp-text);padding:10px 16px;border-radius:999px;box-shadow:0 18px 30px -14px rgba(0,0,0,.6);opacity:0;translate:0 12px;transition:opacity .3s,translate .4s var(--hp-weich);pointer-events:none}
.hp-unterwegs.hp-an{opacity:1;translate:0 0}
.hp-unterwegs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* schmal (am Handy): Halle hochkant, größere Schilder, kleinere Aussteller, Leiste unten über die ganze Breite */
.hp.hp-schmal .hp-kamera{perspective:3200px}
.hp.hp-schmal .hp-welt,.hp.hp-schmal .hp-stand.hp-v .hp-schwebe{--bs:1.2}
.hp.hp-schmal .hp-schwebe{--ty:-50%;--z:40px!important}
.hp.hp-schmal .hp-welt{--ns:1.35}
.hp.hp-schmal .hp-aussteller{display:none}
.hp.hp-schmal .hp-sicht{left:10px;right:10px;bottom:10px;translate:none}
.hp.hp-schmal .hp-sicht button{flex:1;padding:8px 6px;font-size:.84rem;gap:4px;white-space:nowrap}
.hp.hp-schmal .hp-sicht .hp-ton-knopf,.hp.hp-schmal .hp-sicht .hp-zoom-knopf,.hp.hp-schmal .hp-sicht .hp-ganz-knopf,.hp.hp-schmal .hp-sicht .hp-flug-knopf{flex:none;min-width:44px;padding:8px 10px;font-size:0;gap:0}
.hp.hp-schmal .hp-sicht .hp-zoom-knopf{display:none}
.hp.hp-schmal .hp-satz{left:10px;right:10px;bottom:66px;max-width:none}
.hp.hp-schmal .hp-unterwegs{left:10px;bottom:66px}
.hp.hp-schmal .hp-neustart{left:10px;bottom:118px}
.hp.hp-schmal .hp-kopf-oben{display:none}
.hp.hp-schmal .hp-sitz,.hp.hp-schmal .hp-lehne{display:none}

@media (prefers-reduced-motion:reduce){
  .hp-wand,.hp-kante,.hp-aufbau,.hp-halo,.hp-welt,.hp-stand,.hp-satz,.hp-unterwegs,.hp-schild.hp-ziel,.hp-schwebe{transition:none!important}
  .hp-figur .hp-huepf,.hp-figur.hp-laeuft .hp-bein-l,.hp-figur.hp-laeuft .hp-bein-r,.hp-blink .hp-halo,.hp-blink .hp-rollup,.hp-aussteller .hp-wipp,.hp-winkt .hp-aussteller .hp-arm{animation:none!important}
  .hp-flug-knopf{display:none!important}
}

/* Logos exakt in ihrer Einfassung (Jens 21.10.2026: hohe Logos wie WERTvoll ragten aus dem Schild):
   die Rasterzelle wird auf die Innenfläche festgelegt, das Bild füllt sie und passt sich mit object-fit ein */
.hp-karte,.hp-sk,.hp-zl{box-sizing:border-box;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hp-karte img,.hp-sk img,.hp-zl img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;object-fit:contain}