html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: #000 !important;
      width: 100% !important;
      max-width: none !important;
    }

    #pano {
      width: 100%;
      height: 100%;
      margin: 0;
      background: #000 !important;
      position: relative;
      overflow: hidden;
    }

    #pano canvas {
      display: block;
      background: #000 !important;
    }

    #ui {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1000;
      pointer-events: none;
    }

    #ui button,
    #navArrows button {
      pointer-events: auto;
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 14px;
      background: rgba(103,115,131,0.55);
      color: #fff;
      font: 600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      cursor: pointer;
      transition: transform .08s ease,
                  background .18s ease,
                  box-shadow .18s ease;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }

    #ui button:hover,
    #navArrows button:hover {
      background: rgba(30,144,255,0.2);
      box-shadow: 0 10px 28px rgba(30,144,255,0.15);
    }

    #ui button:active,
    #navArrows button:active {
      transform: translateY(1px);
    }

    #ui button i,
    #navArrows button i {
      font-size: 16px;
      line-height: 1;
    }

    /* Links/Rechts-Steuerung unten mittig – standardmäßig AUS */
    #navArrows {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: none;              /* wird per JS nur auf Nicht-Touch aktiviert */
      gap: 14px;
      z-index: 1000;
      pointer-events: none;
    }

    #navArrows button {
      pointer-events: auto;
      width: 52px;
      height: 52px;
    }

    #topnote {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,.55);
      color: #fff;
      padding: 10px 14px;
      border-radius: 12px;
      font: 600 14px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      text-align: center;
      box-shadow: 0 6px 18px rgba(0,0,0,.22);
      z-index: 10;
    }

    #topnote .line1 { font-size: 16px; font-weight:700; }
    #topnote .line2 { font-size: 12px; font-weight:500; opacity:.9; }

    #status {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    #loader {
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      background:#000;
      color:#fff;
      z-index:999;
      transition:opacity .35s ease;
    }
    #loader.hide {
      opacity:0;
      pointer-events:none;
    }
    .spinner {
      width:36px;
      height:36px;
      border:3px solid rgba(255,255,255,0.25);
      border-top-color:#fff;
      border-radius:50%;
      animation:spin .9s linear infinite;
      margin-bottom:10px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .loader-box {
      display:grid;
      justify-items:center;
      gap:10px;
      padding:14px 16px;
      background:rgba(20,22,28,0.6);
      border-radius:14px;
      box-shadow:0 8px 24px rgba(0,0,0,.3);
      font:600 13px/1.2 system-ui, -apple-system,"Segoe UI",Roboto,Arial;
    }

    #pano:fullscreen #ui,
    #pano:-webkit-full-screen #ui {
      top: 16px;
      right: 20px;
      transform: none;
    }

    #pano:fullscreen #navArrows,
    #pano:-webkit-full-screen #navArrows {
      bottom: 20px;
    }

    /* Handy-Tooltip (Dreh das Gerät) */
    .figure {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1100;
      display: grid;
      justify-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(20,22,28,0.55);
      backdrop-filter: saturate(130%) blur(4px);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease, transform .35s ease;
    }

    .figure.show {
      opacity: 1;
      pointer-events: auto;
    }

    .figure.hide {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 6px));
      pointer-events: none;
    }

    .phone {
      width: 26px;
      height: 48px;
      border: 2px solid rgba(255,255,255,.9);
      border-radius: 6px;
      position: relative;
      transform-origin: 50% 50%;
      animation: tiltY 2.6s ease-in-out infinite;
      backface-visibility: hidden;
    }

    .phone::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 6px;
      width: 8px;
      height: 2px;
      transform: translateX(-50%);
      background: rgba(255,255,255,.9);
      border-radius: 2px;
    }

    .tooltip {
      color: #fff;
      font: 600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
      opacity: .95;
      text-transform: none;
      white-space: nowrap;
    }

    @keyframes tiltY {
      0% { transform: rotateY(-80deg); }
      50% { transform: rotateY(80deg); }
      100% { transform: rotateY(-80deg); }
    }