/* ====================================================================
   360°-Panorama-Viewer · Agentur am Meer
   --------------------------------------------------------------------
   Design: modern, minimalistisch, maritim
   Farben und Größen lassen sich zentral über die Variablen in :root
   anpassen.
   ==================================================================== */

:root {
  /* --- Farbwelt (maritim) ------------------------------------------ */
  --navy:        #16324f;   /* dunkles Marineblau – Text & aktive Elemente */
  --navy-soft:   #2a4a6b;
  --sand:        #e8dcc8;   /* sandfarbener Akzent */
  --white:       #ffffff;
  --glass:       rgba(255, 255, 255, 0.82);  /* halbtransparente Flächen */
  --glass-hover: rgba(255, 255, 255, 0.95);

  /* --- Wirkung ------------------------------------------------------ */
  --radius: 14px;                                /* Rundung der Buttons  */
  --shadow: 0 2px 14px rgba(22, 50, 79, 0.18);   /* dezenter Schatten    */
  --font: "Helvetica Neue", Arial, "Segoe UI", Roboto, -apple-system,
          BlinkMacSystemFont, sans-serif;        /* serifenlose Schrift  */

  /* --- Logo-Größe --------------------------------------------------- */
  --logo-size-desktop: 80px;   /* Vorgabe: 70–90 px auf Desktop  */
  --logo-size-mobile:  56px;   /* Vorgabe: 50–65 px auf Mobil    */
}

/* --------------------------------------------------------------------
   Grundlayout: keine Außenabstände, Panorama füllt den gesamten
   Viewport – funktioniert eigenständig, im neuen Tab und im iFrame.
   -------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

/* Bildschirmfüllender Panorama-Bereich.
   100dvh berücksichtigt die dynamische Adressleiste auf Smartphones. */
#panorama {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--navy);
}

/* Pannellums eingebaute Bedienelemente sind deaktiviert (showControls:false),
   das "about"-Info und der Lade-Screen der Bibliothek werden ausgeblendet,
   da wir eine eigene, dezente Ladeanzeige verwenden. */
.pnlm-load-box, .pnlm-about-msg { display: none !important; }
.pnlm-container { background: var(--navy) !important; }
/* Greifender Cursor signalisiert Bewegbarkeit auf Desktop */
.pnlm-grab  { cursor: grab; }
.pnlm-grabbing { cursor: grabbing; }

/* --------------------------------------------------------------------
   Logo (oben rechts) – dezent, leicht transparenter weißer Hintergrund
   -------------------------------------------------------------------- */
.logo {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 30;
  display: block;
  padding: 6px;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: var(--shadow);
  line-height: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.logo:hover, .logo:focus-visible { background: var(--glass-hover); transform: scale(1.04); }
.logo img {
  width: var(--logo-size-desktop);
  height: var(--logo-size-desktop);
  display: block;
}

/* --------------------------------------------------------------------
   Ladeanzeige
   -------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.loader[hidden] { display: none; }
.loader-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--sand);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------
   Bedienhinweis (erscheint kurz beim Start)
   -------------------------------------------------------------------- */
.hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(22, 50, 79, 0.72);
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;           /* verdeckt keine Interaktion */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hint.visible { opacity: 1; }
.hint-icon { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------
   Zoom- und Vollbild-Schaltflächen (unten rechts)
   -------------------------------------------------------------------- */
.controls {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); /* über der Auswahlleiste */
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctrl-btn {
  width: 44px;                    /* ausreichend große Touch-Fläche */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  background: var(--glass);
  color: var(--navy);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ctrl-btn svg { width: 20px; height: 20px; }
.ctrl-btn:hover, .ctrl-btn:focus-visible { background: var(--glass-hover); }
.ctrl-btn:active { transform: scale(0.94); }
.ctrl-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* Autoplay-Schaltfläche im aktiven Zustand dezent hervorheben */
.ctrl-btn.active {
  background: var(--navy);
  color: var(--white);
}

/* --------------------------------------------------------------------
   Panorama-Auswahl (unten mittig) – auf Mobilgeräten horizontal
   scrollbar, aktive Ansicht dezent markiert.
   -------------------------------------------------------------------- */
.scene-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;           /* nur die Leiste selbst fängt Klicks */
}
.scene-list {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 8px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-x: auto;               /* horizontal scrollbar auf Mobil */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scene-list::-webkit-scrollbar { display: none; }

/* Einzelne Auswahl-Schaltfläche: Vorschaubild + Raumname */
.scene-btn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 7px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.scene-btn img {
  width: 84px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.scene-btn:hover, .scene-btn:focus-visible { background: rgba(22, 50, 79, 0.08); }
.scene-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* Aktive Ansicht: deutlich, aber zurückhaltend markiert */
.scene-btn.active {
  border-color: var(--navy);
  background: rgba(232, 220, 200, 0.55);   /* sandfarbene Fläche */
}

/* --------------------------------------------------------------------
   Responsive Anpassungen (Smartphone, kleine Tablets)
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
  .logo { padding: 5px; }
  .logo img { width: var(--logo-size-mobile); height: var(--logo-size-mobile); }

  .controls { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); }
  .ctrl-btn { width: 42px; height: 42px; }

  .scene-list { max-width: calc(100% - 20px); }
  .scene-btn img { width: 72px; height: 44px; }
  .scene-btn { font-size: 0.72rem; }

  .hint { font-size: 0.88rem; padding: 10px 16px; max-width: 84%; text-align: center; }
}

/* Querformat auf flachen Bildschirmen (z. B. Smartphone quer):
   Auswahlleiste kompakter, damit mehr Panorama sichtbar bleibt. */
@media (max-height: 460px) {
  .scene-btn img { display: none; }         /* nur Raumnamen zeigen */
  .scene-btn { padding: 9px 14px; font-size: 0.8rem; }
  .controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); flex-direction: row; }
}

/* Nutzer mit reduzierter Bewegung: Übergänge minimieren */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}