/* =========================================================
   0) DESIGN TOKENS (CI / FONTS)
   ========================================================= */

/* customstyles.css – basierend auf deiner Referenz, nur mit neuer CI (rot/weiß) + Fonts */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Amatic+SC:wght@400;700&display=swap");

/* CI */
:root {
  --ss-accent: #bf4737;
  --ss-white: #ffffff;
  --ss-text: #111111;
  --ss-text-muted: rgba(17, 17, 17, 0.75);
  --ss-border: rgba(191, 71, 55, 0.35);
  --ss-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Global Fonts */
html,
body,
#viewer,
[class^="storysplat-"],
[class*=" storysplat-"] {
  font-family: "Nunito", sans-serif !important;
  color: var(--ss-text) !important;
}

/* Headings */
#viewer .storysplat-waypoint-info h2,
#viewer .storysplat-hotspot-popup-title,
#viewer .storysplat-portal-popup-title {
  font-family: "Amatic SC", cursive !important;
  letter-spacing: 0.5px !important;
}

/* =========================================================
   1) LAZYLOAD SCREEN
   ========================================================= */

#viewer .storysplat-lazy-load-container {
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
}

#viewer .storysplat-lazy-load-thumbnail {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#viewer .storysplat-lazy-load-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#viewer .storysplat-lazy-load-content {
  position: relative !important;
  z-index: 3 !important;
}

#viewer .ss-lazy-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

#viewer .storysplat-lazy-load-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

#viewer .storysplat-lazy-load-start-btn {
  color: #ffffff !important;
}

/* =========================================================
   2) TOP BAR / WAYPOINT INFO (Header)
   ========================================================= */


/* =========================================================
   🔵 DESKTOP / TABLET (Standard Layout)
   ========================================================= */

@media (min-width: 768px){

/* Button rechts innerhalb des Parents */
#viewer .storysplat-waypoint-list-toggle{
  display: block !important;
  margin-left: auto !important;
}

/* Dropdown bleibt darunter */
#viewer .storysplat-waypoint-list-dropdown{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;   /* rechts am Button ausrichten */
}

#viewer .storysplat-waypoint-info {
  background: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

#viewer .storysplat-waypoint-list-container,
  #viewer .storysplat-waypoint-list-toggle{
    pointer-events: auto !important;
    z-index: 1000 !important;
  }

}

#viewer .storysplat-waypoint-title {
  color: var(--ss-text) !important;
}

#viewer .storysplat-waypoint-description {
  color: var(--ss-text-muted) !important;
  
}

/* Desktop Typography */
#viewer .storysplat-waypoint-info h2 {
  font-size: 30px !important;
}

#viewer .storysplat-waypoint-info p {
  font-size: 16px !important;
}


/* =========================================================
   🟠 MOBILE LAYOUT (max-width: 767px)
   Dropdown + Mode Buttons in einer Zeile
   ========================================================= */

@media (max-width: 767px){

  /* Header Container */
  #viewer .storysplat-waypoint-info{
    background: rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 0px !important;              /* mehr Abstand */
    padding: 10px 14px 10px 14px !important;  /* ↑ extra Platz oben */
    text-align: center !important;
  }

  /* =============================
     Top Button Row
     ============================= */

/* FIX: Buttons wieder klickbar (Mobile) */
@media (max-width: 767px){

  /* Top-Row muss über allem liegen + Klicks erlauben */
  #viewer .ss-top-controls-row{
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* Eltern dürfen Klicks nicht blockieren */
  #viewer .storysplat-waypoint-info{
    pointer-events: auto !important;
  }

  /* Alle Controls in der Row explizit klickbar */
  #viewer .ss-top-controls-row .storysplat-waypoint-list-container,
  #viewer .ss-top-controls-row .storysplat-waypoint-list-toggle,
  #viewer .ss-top-controls-row .storysplat-mode-toggle,
  #viewer .ss-top-controls-row .storysplat-mode-btn{
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10000 !important;
  }
}


  #viewer .ss-top-controls-row{
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 8px !important;

    max-width: 100% !important;
    margin-top: 6px !important;   /* zusätzlicher Luftabstand */
  }

  /* Dropdown normal positionieren */
  #viewer .ss-top-controls-row .storysplat-waypoint-list-container.with-fullscreen,
  #viewer .ss-top-controls-row .storysplat-waypoint-list-container{
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
  }

  /* Mode Buttons */
  #viewer .ss-top-controls-row .storysplat-mode-toggle{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  

  /* =============================
     Title & Description darunter
     ============================= */

  #viewer .storysplat-waypoint-title,
  #viewer .storysplat-waypoint-description{
    width: 100% !important;
    text-align: center !important;
    padding: 10px 14px 0px 14px !important; 
    margin-bottom: 0px !important;
  }

  /* Mobile Typography */
  #viewer .storysplat-waypoint-info h2{
    font-size: 28px !important;
  }

  #viewer .storysplat-waypoint-info p{
    font-size: 14px !important;
  }
}

/* =========================================================
   3) WAYPOINT LIST (Dropdown)
   ========================================================= */

#viewer .storysplat-waypoint-list-container.with-fullscreen {
  right: 60px;
}

#viewer .storysplat-waypoint-list-dropdown {
  position: absolute !important;
  margin-top: 8px !important;
  z-index: 5 !important;

  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: var(--ss-shadow) !important;
}

#viewer .storysplat-waypoint-item {
  color: var(--ss-text) !important;
  background: transparent !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#viewer .storysplat-waypoint-item:last-child {
  border-bottom: none !important;
}

#viewer .storysplat-waypoint-item:hover {
  background: rgba(191, 71, 55, 0.1) !important;
}

#viewer .storysplat-waypoint-item.active {
  background: rgba(191, 71, 55, 0.14) !important;
  font-weight: 800 !important;
}

/* =========================================================
   4) NAVIGATION / SCROLL CONTROLS (Bottom UI)
   ========================================================= */

#viewer .storysplat-scroll-controls {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 16px !important;
  border: 0px solid var(--ss-accent) !important;
  box-shadow: var(--ss-shadow) !important;
}

#viewer .storysplat-progress-text {
  display: none !important;

}

#viewer .storysplat-progress-container {
  height: 4px !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

#viewer .storysplat-progress-bar {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    #d76557 0%,
    var(--ss-accent) 45%,
    #a93a2d 100%
  ) !important;
}

#viewer .storysplat-mode-toggle {
  color: white !important;
}

#viewer .storysplat-explore-btn.selected,
#viewer .storysplat-mode-btn.selected {
  color: white !important;
}

/* Buttons (Navigation) */
#viewer .storysplat-btn,
#viewer .storysplat-btn-play,
#viewer .storysplat-waypoint-list-toggle {
  background: var(--ss-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 4px !important;
}

#viewer .storysplat-btn:hover,
#viewer .storysplat-btn-play:hover,
#viewer .storysplat-waypoint-list-toggle:hover {
  filter: brightness(0.95) !important;
}

/* wenn Orbit/Fly nicht gebraucht wird: raus damit */
#viewer .storysplat-explore-controls.visible{
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: none !important;
}
@media (min-width: 768px){

#viewer .storysplat-mode-container {
    margin-top: 4px !important;
}

}

/* Mobile Anpassung für Navigations-Element */
@media (max-width: 767px) {
  #viewer .storysplat-scroll-controls {
    margin-bottom: 20px !important;
  }

  #viewer .storysplat-scroll-controls{
    display: none !important;
  }

  /* nur im Explore Mode */
  #viewer:not(:has(.storysplat-mode-btn[data-mode="explore"].selected))
  .storysplat-scroll-controls{
    display: block !important;
  }



#viewer .storysplat-waypoint-list-toggle{
  padding: 6px 6px 5px 5px !important;
}

  #viewer .storysplat-scroll-controls,
  #viewer .storysplat-scroll-controls button,
  #viewer .storysplat-progress-text {
    font-size: 13px !important;
  }

  #viewer .storysplat-scroll-controls{
    padding-bottom: 12px !important;
  }

  #viewer .storysplat-scroll-buttons {
    gap: 6px !important;
  }

  #viewer .storysplat-scroll-buttons button {
    padding: 6px 10px !important;
  }

  /* Abstand unter Zurück/Play/Weiter entfernen */
#viewer .storysplat-scroll-buttons{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#viewer .storysplat-scroll-content{
  padding-bottom: 0 !important;
}


/* leere Mode-Box darf keinen Platz nehmen */
#viewer .storysplat-mode-container{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

}


/* Mobile: Mode-Box breiter + Buttons in einer Zeile */
@media (max-width: 767px) {
  #viewer .storysplat-mode-toggle {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #viewer .storysplat-mode-btn {
    flex: 1 1 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

/* =========================================================
   5) FULLSCREEN BUTTON / ICONS
   ========================================================= */

#viewer .storysplat-fullscreen-btn svg {
  width: 30px;
  height: 30px;
  fill: var(--ss-text);
}

/* =========================================================
   6) HOTSPOT POPUP
   ========================================================= */

#viewer .storysplat-hotspot-popup {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid var(--ss-border) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: var(--ss-shadow) !important;

  max-height: 65vh !important;
  width: fit-content !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#viewer .storysplat-hotspot-popup-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

@media (max-width: 768px) {
  #viewer .storysplat-waypoint-info h2,
  #viewer .storysplat-hotspot-popup-title {
    font-size: 24px !important;
  }

  #viewer .storysplat-waypoint-info p {
    font-size: 14px !important;
  }
}

#viewer .storysplat-hotspot-popup-content {
  color: var(--ss-text) !important;
}

#viewer .storysplat-hotspot-popup p {
  font-size: 16px !important;
  color: var(--ss-text) !important;
}

#viewer .storysplat-hotspot-popup-close {
  background: var(--ss-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
}

#viewer .storysplat-hotspot-popup-link {
  background-color: #e9e9e9 !important;
  color: var(--ss-text) !important;
  border-radius: 12px !important;
}

/* Video-Popups: volle Breite */
#viewer .storysplat-hotspot-popup:has(iframe) {
  width: calc(100vw - 32px) !important;
  max-width: 960px !important;
}

#viewer .storysplat-hotspot-popup iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  display: block !important;
}

/* =========================================================
   7) PORTAL POPUP
   ========================================================= */

#viewer .storysplat-portal-popup {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: var(--ss-shadow) !important;
}

#viewer .storysplat-portal-popup-btn {
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-weight: 800 !important;
  border: none !important;
}

#viewer .storysplat-portal-popup-confirm {
  background: var(--ss-accent) !important;
  color: #fff !important;
}

#viewer .storysplat-portal-popup-cancel {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--ss-text) !important;
}

/* =========================================================
   8) HELP PANEL
   ========================================================= */

#viewer .storysplat-help-panel {
  color: #ffffff !important;
  z-index: 9999 !important;
}

/* =========================================================
   9) PRELOADER
   ========================================================= */

#viewer .storysplat-preloader-text {
  color: #ffffff !important;
}

/* =========================================================
   10) RESPONSIVE HOOKS (already used above)
   ========================================================= */

/* =========================================================
   11) LOADING SCREEN (externes HTML)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   12) XR BUTTONS (VR / AR)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   13) HELP BUTTON (Trigger)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   14) JOYSTICK (Mobile Walk Mode)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   15) LOOK ZONE (Mobile Look Area)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   16) WATERMARK
   ========================================================= */

   @media (max-width: 768px) {
#viewer .storysplat-watermark { 
  font-size: 8px !important;
 }
}

/* =========================================================
   17) VIEWER CANVAS
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */

/* =========================================================
   18) EXPAND / COMPRESS ICONS (Fullscreen)
   ========================================================= */
/* (keine Regeln vorhanden im aktuellen Sheet) */


/* =========================================================
   MOBILE: Navigation unter den Viewer verschieben
   ========================================================= */