/* HUD für die begehbare VR-Welt (site/vr/). Bewusst leichtgewichtig: kein Framework, reines CSS. */
.vr-stage{position:relative;width:100%;height:min(78vh,760px);min-height:420px;border-radius:16px;
  overflow:hidden;background:#0b1021;border:1px solid rgba(255,255,255,.08);touch-action:none}
.vr-stage canvas{display:block;width:100%;height:100%}

.vr-hud{position:absolute;inset:0;pointer-events:none;font-family:inherit}
.vr-hud > *{pointer-events:auto}

.vr-crosshair{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px;
  border-radius:50%;background:rgba(246,244,236,.85);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}

.vr-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);
  background:rgba(11,16,33,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:8px 16px;font-size:.82rem;color:rgba(246,244,236,.85);text-align:center;max-width:88%}
.vr-hint b{color:var(--gold-soft)}

.vr-role{position:absolute;top:18px;right:18px;display:flex;gap:6px;
  background:rgba(11,16,33,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:4px}
.vr-role button{background:none;border:0;color:rgba(246,244,236,.7);font-size:.78rem;
  padding:6px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.vr-role button.active{background:var(--gold);color:#1a1200;font-weight:600}

.vr-task{position:absolute;top:70px;right:18px;max-width:240px;
  background:rgba(11,16,33,.72);border:1px solid rgba(212,175,55,.35);border-radius:10px;
  padding:10px 14px;font-size:.78rem;color:rgba(246,244,236,.85);display:none}
.vr-task.show{display:block}
.vr-task b{color:var(--gold-soft);display:block;margin-bottom:3px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* Höhe begrenzt und innen scrollbar: mit den zehn Tarifen am Haupteingang füllte das Panel
   sonst die komplette Bühne — Überschrift oben abgeschnitten, Joystick und Jahresregler
   darunter verschwunden. Wächst der Katalog weiter, bleibt es dadurch beherrschbar. */
.vr-panel{position:absolute;left:18px;bottom:18px;right:18px;max-width:420px;
  max-height:calc(100% - 130px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(11,16,33,.88);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:16px 18px;color:#f6f4ec;transform:translateY(12px);opacity:0;transition:transform .2s,opacity .2s;pointer-events:none}
.vr-panel.show{transform:translateY(0);opacity:1;pointer-events:auto}
.vr-panel h3{font-size:1.05rem;margin-bottom:4px}
.vr-panel .vr-panel-kind{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.vr-panel p{font-size:.86rem;color:rgba(246,244,236,.78);margin-bottom:10px}
.vr-panel-shop:not(:empty){margin:0 0 12px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
.vr-shop-head{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(246,244,236,.5);margin-bottom:7px}
.vr-shop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.84rem;color:rgba(246,244,236,.88);padding:4px 0}
.vr-buy{border:1px solid rgba(212,175,55,.5);background:rgba(212,175,55,.14);
  color:var(--gold-soft);border-radius:8px;padding:5px 11px;font-size:.78rem;
  font-family:inherit;cursor:pointer;white-space:nowrap}
.vr-buy:hover{background:rgba(212,175,55,.26)}

.vr-panel .vr-panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.vr-panel .vr-panel-actions a,.vr-panel .vr-panel-actions button{
  font-size:.78rem;padding:7px 12px;border-radius:8px;border:1px solid rgba(212,175,55,.5);
  background:rgba(212,175,55,.12);color:var(--gold-soft);cursor:pointer;text-decoration:none}

.vr-flythrough-tag{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.5);border-radius:10px;
  padding:8px 16px;font-size:.8rem;color:var(--gold-soft);display:none;text-align:center}
.vr-flythrough-tag.show{display:block}
.vr-flythrough-tag button{margin-left:10px;background:none;border:1px solid rgba(212,175,55,.5);
  color:var(--gold-soft);border-radius:6px;padding:3px 9px;font-size:.74rem;cursor:pointer}

.vr-joystick{position:absolute;left:22px;bottom:22px;width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:none}
.vr-joystick.active-touch{display:block}
.vr-joystick-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;
  border-radius:50%;background:rgba(212,175,55,.35);border:1px solid rgba(212,175,55,.7)}

/* ID-Selektor statt Klasse: ".vr-stage canvas{width:100%;height:100%}" (Spezifität 0,1,1)
   ist sonst stärker als eine einzelne Klasse (0,1,0) und würde die Minimap auf Bühnengröße
   aufziehen, egal was hier steht. */
#vrMinimap.vr-minimap{position:absolute;right:18px;bottom:18px;width:110px !important;height:110px !important;
  border-radius:50%;background:rgba(11,16,33,.72);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 16px rgba(0,0,0,.35)}

.vr-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:rgba(246,244,236,.75);font-size:.9rem;background:#0b1021}
.vr-loading.hide{display:none}
.vr-loading-spin{display:inline-block;font-size:1.6rem;animation:vr-compass-spin 1.8s linear infinite}
@media (prefers-reduced-motion: reduce){.vr-loading-spin{animation:none}}
@keyframes vr-compass-spin{to{transform:rotate(360deg)}}

/* Schmale Bildschirme: Rollenumschaltung und Hinweis übereinander statt nebeneinander —
   nebeneinander überlappen sie sich ab ca. 700px Breite. */
@media (max-width:700px){
  .vr-role{top:12px;right:auto;left:50%;transform:translateX(-50%)}
  .vr-role button{font-size:.72rem;padding:5px 8px}
  .vr-hint{top:62px;font-size:.72rem;padding:6px 12px;max-width:94%}
  /* Auf Mobil zusätzlich begrenzt: oben liegen Rollenumschaltung, Hinweis und Jahresregler,
     unten links der Joystick — dazwischen bleibt gut die Hälfte der Bühne. */
  .vr-panel{left:12px;right:12px;bottom:12px;padding:13px 15px;max-height:52%}
  .vr-task{top:auto;bottom:150px;right:12px;max-width:180px;font-size:.72rem}
  .vr-joystick{width:96px;height:96px;left:14px;bottom:14px}
  /* Unten rechts ist auf Mobil der Joystick-Bereich bzw. das aufklappende Panel — die
     Minimap wandert nach oben rechts, wo sonst nichts steht. */
  #vrMinimap.vr-minimap{top:12px;right:12px;bottom:auto;width:72px !important;height:72px !important}
}

.vr-intro-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0 8px}
@media (min-width:720px){.vr-intro-grid{grid-template-columns:repeat(3,1fr)}}
.vr-intro-card{background:rgba(29,43,83,.32);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:16px 18px}
.vr-intro-card h3{font-size:.95rem;color:var(--gold-soft);margin-bottom:6px}
.vr-intro-card p{font-size:.85rem;color:rgba(246,244,236,.75);line-height:1.5}

/* Zeitreise-Regler im HUD. Sitzt oben links, weil rechts die Rollenumschaltung und die
   Minimap liegen und unten der Joystick bzw. das Detailpanel. */
/* Unten mittig: oben liegen Hinweis, Rollenumschaltung und Minimap, links unten das
   Detailpanel (max. 420px) — dazwischen bleibt hier Platz. */
.vr-years{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  background:rgba(11,16,33,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:8px 14px;font-size:.78rem;color:rgba(246,244,236,.85)}
.vr-years b{color:var(--gold-soft)}
.vr-years input[type=range]{width:110px;accent-color:var(--gold)}
.vr-years span{color:rgba(246,244,236,.55);white-space:nowrap}

@media (max-width:700px){
  /* Unter den Steuerungshinweis: unten sitzen Joystick, Detailpanel und der Hinweis zur
     Kamerafahrt, oben rechts die Minimap und oben mittig die Rollenumschaltung. */
  /* 140px = unterhalb des Hinweises (der bei ~63px beginnt und je nach Breite zwei bis
     drei Zeilen hoch wird), weit oberhalb des Joysticks. */
  .vr-years{top:140px;bottom:auto;padding:6px 12px;font-size:.72rem}
  .vr-years input[type=range]{width:90px}
  .vr-years span{display:none}
}

/* Konzeptbild im VR-Detailpanel, gleiche Rolle wie .poi-image auf der Karte. */
.vr-panel-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;
  display:block;margin-bottom:10px;background:#0d1530}
.vr-panel-image[hidden]{display:none}