/* 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)}

/* Direkt-Sprung zu einem Punkt der Karte — Idee aus einem parallel entstandenen Codex-Prototyp
   ("Ort auswählen …"-Dropdown), hier mit der bestehenden teleportTo-API der VR-Welt verknüpft
   statt als eigene Implementierung. Ergänzt das Laufen/den Joystick, ersetzt sie nicht. */
.vr-jump{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:6px;
  background:rgba(11,16,33,.72);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:6px 10px;font-size:.78rem;color:rgba(246,244,236,.75)}
.vr-jump select{background:#0b1021;color:var(--gold-soft);border:1px solid rgba(212,175,55,.35);
  border-radius:6px;padding:4px 6px;font-size:.78rem;max-width:150px}
.vr-light{top:62px}
@media (max-width:700px){
  .vr-jump{top:auto;bottom:150px;left:12px;font-size:.72rem;padding:5px 8px}
  .vr-jump select{max-width:110px;font-size:.72rem}
  .vr-light{bottom:190px}
}

.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}

/* Mitfahrt-Anzeige */
.vr-ride{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);min-width:260px;max-width:92%;
  background:rgba(11,16,33,.82);border:1px solid rgba(212,175,55,.45);border-radius:14px;padding:12px 18px;
  text-align:center;color:#f6f4ec;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vr-ride-name{font-family:'Cinzel',Georgia,serif;color:var(--gold-soft);font-size:.95rem;letter-spacing:.04em}
.vr-ride-phase{margin:4px 0 6px;font-size:.9rem}
.vr-ride-speed{font-size:.8rem;color:rgba(246,244,236,.7)}
.vr-ride-speed b{font-size:1.5rem;color:#fff;font-variant-numeric:tabular-nums}
.vr-ride button{margin:8px 0 6px;background:var(--gold);color:#0b1021;border:0;border-radius:999px;
  padding:7px 18px;font-weight:600;cursor:pointer}
.vr-ride small{display:block;font-size:.66rem;color:rgba(246,244,236,.5)}

/* hidden-Attribut muss gegen die display-Regeln der HUD-Elemente gewinnen. */
.vr-years[hidden],.vr-joystick[hidden],.vr-hint[hidden],.vr-ride[hidden]{display:none}
.vr-role button[hidden]{display:none}
.vr-tour{position:absolute;left:50%;top:70px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  background:rgba(11,16,33,.85);border:1px solid rgba(212,175,55,.45);border-radius:999px;padding:6px 8px 6px 16px;
  color:#f6f4ec;font-size:.8rem;white-space:nowrap;max-width:94%}
.vr-tour span{overflow:hidden;text-overflow:ellipsis}
.vr-tour button{background:rgba(255,255,255,.08);color:#f6f4ec;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;font:inherit;cursor:pointer}
.vr-tour button#vrTourNext{background:var(--gold);color:#0b1021;border-color:var(--gold);font-weight:600}
.vr-tour[hidden]{display:none}
@media (max-width:700px){.vr-tour{top:auto;bottom:230px;font-size:.72rem}}

/* Handy-Layout (Review 28.09.): Die Bühne passt genau unter den festen Seitenkopf, die
   Bedienelemente liegen oben in Zeilen und werden vom Info-Panel unten nicht mehr verdeckt. */
@media (max-width:700px){
  .vr-stage{height:calc(100svh - var(--nav-bottom, 110px) - 12px);min-height:420px}
  .vr-role{top:10px;left:10px;right:92px;transform:none;flex-wrap:wrap;justify-content:flex-start}
  .vr-jump{top:92px;bottom:auto;left:10px}
  .vr-jump.vr-light{top:92px;bottom:auto;left:auto;right:10px}
  .vr-years{top:134px}
  .vr-hint{top:176px}
  .vr-tour{top:176px;bottom:auto}
  .vr-panel{max-height:calc(100% - 226px)}
}

/* Ausgeblendetes Panel auch für Tastatur/Screenreader weg (opacity allein reicht nicht);
   visibility wechselt erst nach dem Ausblenden, damit die Überblendung erhalten bleibt. */
.vr-panel{visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s}
.vr-panel.show{visibility:visible;transition:transform .2s,opacity .2s,visibility 0s}

/* Info-Panel schließbar; am Handy oberhalb des Joysticks, damit dessen Fläche keine Panel-Knöpfe verdeckt. */
.vr-panel-close{position:sticky;top:0;float:right;margin:-6px -8px 0 8px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#f6f4ec;font-size:1rem;cursor:pointer;z-index:1}
@media (max-width:700px){
  .vr-panel{bottom:122px;max-height:calc(100% - 226px - 110px)}
}
/* Mittlere Desktop-Breiten: die Knopfleiste rechts ist breiter geworden — Hinweis eine Zeile tiefer. */
@media (min-width:701px) and (max-width:1500px){
  .vr-hint{top:64px}
}
/* Handy: Panel kompakt, damit die Aktionen (Mitfahren, Vorschau, Kaufen) ohne inneres Scrollen sichtbar sind. */
@media (max-width:700px){
  .vr-panel .vr-panel-image{max-height:110px;width:100%;object-fit:cover}
  #vrPanelDesc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}