@charset "UTF-8";
/* --- Base Panel (Light default) --- */
#panoInfoPanel {
  position: fixed;
  top: 16px;
  right: 16px;
  width: min(420px, 90vw);
  max-height: 80vh;
  z-index: 100000;
  background: rgba(255, 255, 255, 0.96);
  color: #333;
  border-radius: 12px;
  padding: 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* Fade-out for Panel & Audio Player */
#panoInfoPanel.fade-out,
#bgAudioPlayer.fade-out {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ... (Existing Info Panel Styles maintained) ... */
#panoInfoPanel.minimized {
  width: auto;
  max-width: 300px;
  min-width: 200px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
}

#panoInfoPanel.minimized .body,
#panoInfoPanel.minimized .img-container,
#panoInfoPanel.minimized #readMoreBtn,
#panoInfoPanel.minimized #panoInfoClose {
  display: none !important;
}

#panoInfoPanel.minimized .row {
  margin: 0;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

#panoInfoPanel.minimized h3 {
  font-size: 15px;
  max-width: 100%;
}

#panoInfoPanel.minimized .row::after {
  content: "\25BC";
  display: block;
  font-size: 16px;
  color: #aaa;
  margin-top: 4px;
}

#panoInfoPanel .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
  flex-shrink: 0;
}

#panoInfoPanel h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

/* Künstlername unter dem Werktitel (nur bei Steinen gesetzt) */
.info-artist {
  display: none;
  margin: -6px 0 12px 0;   /* rückt dicht unter den Titel (Row hat 12px mb) */
  font-size: 14px;
  font-style: italic;
  color: #7a6a2f;          /* gedämpftes Gold, passt zum Gera-Gelb */
  line-height: 1.3;
  flex-shrink: 0;
}
body.theme-dark .info-artist { color: #cdb768; }

#panoInfoClose {
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #555;
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.img-container {
  margin: -16px -16px 12px -16px;
  width: calc(100% + 32px);
  height: 220px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: none;
  background: #000;
  flex-shrink: 0;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#panoInfoPanel .body {
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  overflow: hidden;
  white-space: pre-line;
  transition: max-height 0.4s ease;
  padding-right: 12px;
}

#panoInfoPanel .body::-webkit-scrollbar {
  width: 6px;
}

#panoInfoPanel .body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

#panoInfoPanel .body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Teaser Logic */
.teaser-content {
  font-weight: 600;
  color: #333;
  display: none;
}

.body.collapsed-text.has-teaser .teaser-content {
  display: block;
  font-style: italic;
}

.body.collapsed-text.has-teaser .main-content {
  display: none;
}

.body.expanded-text .teaser-content {
  display: none;
}

.body.expanded-text .main-content {
  display: block;
}

.collapsed-text .main-content {
  max-height: 80px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  display: block;
}

.expanded-text {
  max-height: 50vh;
  overflow-y: auto !important;
  mask-image: none;
  -webkit-mask-image: none;
}

#readMoreBtn {
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  color: #555;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: center;
  display: none;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

/* --- Custom Menu Styling --- */
.kuk-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: #fff;
  z-index: 100001;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #333;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.kuk-nav.collapsed {
  transform: translateX(-100%);
}

.kuk-nav.collapsed #kukNavToggle {
  position: absolute;
  top: 16px;
  left: 100%;
  margin-left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

#kukNavToggle {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: box-shadow 0.3s, transform 0.3s;
}

/* Pulse animation for hamburger after auto-collapse */
#kukNavToggle.pulse-hint {
  position: relative;
  overflow: hidden;
  animation: kukPulseGlow 0.8s ease-in-out 3;
}
/* Golden shimmer streak across the button */
#kukNavToggle.pulse-hint::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(200, 160, 40, 0.5) 45%,
    rgba(255, 215, 0, 0.8) 50%,
    rgba(200, 160, 40, 0.5) 55%,
    transparent 70%
  );
  animation: kukShimmer 0.8s ease-in-out 3;
  pointer-events: none;
}
@keyframes kukPulseGlow {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(200,160,40,0.6); }
  40%  { transform: scale(1.18); box-shadow: 0 0 18px 6px rgba(200,160,40,0.45); }
  70%  { transform: scale(1.05); box-shadow: 0 0 8px 2px rgba(200,160,40,0.2); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(200,160,40,0); }
}
@keyframes kukShimmer {
  0%   { left: -120%; }
  100% { left: 160%; }
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.menu-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Home button at top of menu content */
.menu-home-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #825f00;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  border-bottom: 1px solid #eee;
}
.menu-home-btn:hover {
  background: rgba(130,95,0,0.1);
  color: #5a4200;
}
.menu-home-btn svg {
  flex-shrink: 0;
}
.menu-tutorial-btn {
  font-weight: 500;
  font-size: 13px;
  color: #666;
  border-bottom: none;
  margin-top: 0;
  padding-top: 6px;
}
.menu-tutorial-btn:hover { color: #825f00; }
body.theme-dark .menu-tutorial-btn { color: #999; }
body.theme-dark .menu-tutorial-btn:hover { color: #c9a84c; }

/* FULL WIDTH LOGO (User Request) */
.menu-logo {
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  object-position: left;
  display: block;
  transition: filter 0.3s ease;
}

/* Header needs to accommodate full width logo. Maybe hide toggle or move it?
   User said "Logo im Menu soll in der Breite ausfüllend sein".
   If logo takes full width, toggle button might overlap or need new place.
   Currently flex row: [Logo] [Button].
   Let's keep button but allow logo to grow.
*/
.menu-header {
  flex-wrap: nowrap;
  gap: 12px;
}

/* L1 Styling */
.menu-section-l1 {
  border-bottom: 1px solid #f0f0f0;
}

.menu-l1-title {
  padding: 16px 20px 16px 24px;
  /* More padding */
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  color: #000;
  position: relative;
  transition: color 0.2s;
}

/* "Linie davor" - Vertical Line on Left */
.menu-l1-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background 0.2s;
}

/* Active / Open State for L1 */
/* Note: We rely on checking if content sibling is NOT collapsed.
   But CSS parent selector :has() is modern.
   Or we can use JS to toggle class on Title too?
   Currently JS toggles .collapsed on Content.

   Workaround:
   .menu-section-l1:has(.menu-l1-content:not(.collapsed)) .menu-l1-title

   Browser support for :has is good now (Chrome 105+, Safari 15.4+, FF 121+).
   If we can't use :has, we might need JS update.
   Let's try :has first.
*/
.menu-section-l1:has(.menu-l1-content:not(.collapsed)) .menu-l1-title {
  color: #825f00;
  /* User requested Color */
}

/* Accordion Logic */
.menu-l1-content {
  display: block;
  /* Default open */
  transition: all 0.3s ease;
  /* animation? height transition is hard without max-height */
}

.menu-l1-content.collapsed {
  display: none !important;
}

.menu-section-l1:has(.menu-l1-content:not(.collapsed)) .menu-l1-title::before {
  background: #825f00;
  /* Colored line when open? Or always? User said "Linie davor wie auf Gera.de" - usually means consistent line. */
  /* If consistent, maybe just always visible?
       Gera.de usually acts as an accent. Let's make it grey default, colored active.
    */
  background: #825f00;
  /* Let's assume active color line */
}


/* Arrow Button (SVG Container) */
.arrow-btn,
.arrow-btn-l2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #f8f9fa;
  /* Light grey btn background */
  border-radius: 4px;
  color: #333;
  transition: transform 0.3s, background 0.2s;
}

.menu-section-l1:has(.menu-l1-content:not(.collapsed)) .arrow-btn {
  transform: rotate(90deg);
  /* Flip up? Or just 90? User image showed chevron down? */
  /* Default is chevron down (points="6 9 12 15 18 9") */
}

/* If opened, maybe rotate 180 (point up) */
.menu-section-l1:has(.menu-l1-content:not(.collapsed)) .arrow-btn svg {
  /* transform handled on btn */
}

/* L2 Styling */
.menu-l2-title {
  padding: 12px 20px 12px 32px;
  /* Indented */
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: #fcfcfc;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  /* Clickable */
}

.menu-l2-title .arrow-btn-l2 {
  width: 24px;
  height: 24px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  /* Smaller arrow */
  transition: transform 0.3s;
}

/* L2 Collapsed State */
.menu-items {
  display: block;
  overflow: hidden;
  transition: all 0.3s ease;
  list-style: none;
  border-left: 1px solid #ccc;
  margin-left: 24px;
  padding-left: 0;
}

.menu-items.collapsed {
  display: none;
}

.menu-section-l2.expanded .arrow-btn-l2 {
  transform: rotate(90deg);
}

.menu-l2-title:hover {
  background: #f0f0f0;
}

/* Menu Items */
.menu-item {
  padding: 10px 16px;
  /* Reduced from 48px, line handles indent */
  font-size: 14px;
  color: #444;
  cursor: pointer;
  /* Ensure pointer */
}

.menu-item:hover {
  color: #825f00;
  background: rgba(130, 95, 0, 0.05);
}

.menu-item.active {
  color: #825f00;
  font-weight: 700;
  background: rgba(130, 95, 0, 0.1);
  border-left: 3px solid #825f00;
}

/* Mobile Backdrop (tap-to-close) */
.kuk-nav-drop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease;
}

.kuk-nav-drop.hidden {
  opacity: 0;
  pointer-events: none;
}

/* VR Button */
.menu-footer {
  padding: 16px;
  background: #fff;
  border-top: 1px solid #eee;
}

.vr-toggle-btn {
  background: #333;
  color: #fff;
}

/* ---------- VR Active: Hide Custom UI ---------- */
body.vr-active #kukNav,
body.vr-active #kukNavDrop,
body.vr-active #panoInfoPanel,
body.vr-active #bgAudioPlayer,
body.vr-active #galleryViewer,
body.vr-active #videoViewer,
body.vr-active #debugPanel {
  display: none !important;
}

/* ============================================================
   THEME TOGGLE SWITCH (Moon / Sun)
   ============================================================ */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 4px;
}
.theme-toggle-wrap .theme-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.theme-toggle-wrap .theme-icon.active { opacity: 1; }

.theme-switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.theme-switch input { display: none; }
.theme-switch .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.3s;
}
.theme-switch .slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.theme-switch input:checked + .slider {
  background: #555;
}
.theme-switch input:checked + .slider::before {
  transform: translateX(20px);
}

/* ============================================================
   OPTIONS PANEL (Gear Menu)
   ============================================================ */
.kuk-options-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.kuk-options-btn:hover { background: #333; }
.kuk-options-btn.active { background: #444; }

.kuk-options-panel {
  background: #222;
  color: #fff;
  padding: 14px 16px;
  border-top: 1px solid #444;
  transition: all 0.25s ease;
}
.kuk-options-panel.hidden {
  display: none;
}

.kuk-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.kuk-options-row + .kuk-options-row {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.kuk-options-label {
  font-size: 14px;
  font-weight: 500;
}

/* Options toggle switch */
.kuk-options-switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.kuk-options-switch input { display: none; }
.kuk-options-switch .kuk-options-slider {
  position: absolute;
  inset: 0;
  background: #555;
  border-radius: 24px;
  transition: background 0.3s;
}
.kuk-options-switch .kuk-options-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
}
.kuk-options-switch input:checked + .kuk-options-slider {
  background: #e74c3c;
}
.kuk-options-switch input:checked + .kuk-options-slider::before {
  transform: translateX(20px);
}
/* Variant: feature-on toggle (green when active) */
.kuk-options-switch--positive input:checked + .kuk-options-slider {
  background: #2ecc71;
}

/* Theme toggle inside options panel: override centering */
.kuk-options-panel .theme-toggle-wrap {
  justify-content: flex-start;
  padding: 0;
}
.kuk-options-panel .theme-toggle-wrap .theme-icon { color: #fff; }

.kuk-options-build {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-family: monospace;
  text-align: right;
  opacity: 0.55;
  letter-spacing: 0.3px;
}
body.theme-dark .kuk-options-build { border-top-color: rgba(0,0,0,0.08); }

/* Desktop: right-align options button in footer */
@media (min-width: 1025px) {
  .menu-footer {
    display: flex;
    justify-content: flex-end;
  }
  .kuk-options-btn {
    width: auto;
  }
}

/* ============================================================
   DARK THEME OVERRIDES (body.theme-dark)
   ============================================================ */

/* --- Menu --- */
body.theme-dark .kuk-nav {
  background: #1a1a1e;
  color: #e0e0e0;
  box-shadow: 2px 0 12px rgba(0,0,0,0.6);
}
body.theme-dark .menu-header {
  border-bottom-color: #333;
  background: #1a1a1e;
}
body.theme-dark #kukNavToggle { color: #e0e0e0; }
body.theme-dark .kuk-nav.collapsed #kukNavToggle {
  background: #1a1a1e;
  color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
body.theme-dark .menu-section-l1 { border-bottom-color: #333; }
body.theme-dark .menu-home-btn {
  color: #c9a84c;
  border-bottom-color: #333;
}
body.theme-dark .menu-home-btn:hover {
  background: rgba(201,168,76,0.15);
  color: #e0c060;
}
body.theme-dark .menu-l1-title {
  background: #1a1a1e;
  color: #e0e0e0;
}
body.theme-dark .arrow-btn,
body.theme-dark .arrow-btn-l2 {
  background: rgba(255,255,255,0.08);
  color: #ccc;
}
body.theme-dark .menu-l2-title {
  color: #bbb;
  background: #222226;
  border-top-color: #333;
}
body.theme-dark .menu-l2-title:hover { background: #2a2a2e; }
body.theme-dark .menu-items { border-left-color: #444; }
body.theme-dark .menu-item { color: #ccc; }
body.theme-dark .menu-item:hover {
  color: #fac400;
  background: rgba(250,196,0,0.06);
}
body.theme-dark .menu-item.active {
  color: #fac400;
  background: rgba(250,196,0,0.1);
  border-left-color: #fac400;
}
body.theme-dark .menu-footer {
  background: #1a1a1e;
  border-top-color: #333;
}
body.theme-dark .vr-toggle-btn { background: #444; color: #fff; }

/* Options-Button kehrt sich mit dem Theme um (hell im Dark Mode) … */
body.theme-dark .kuk-options-btn {
  background: #f0f0f0;
  color: #222;
}
body.theme-dark .kuk-options-btn:hover { background: #e0e0e0; }
body.theme-dark .kuk-options-btn.active { background: #d0d0d0; }
/* … das aufgeklappte Options-PANEL bleibt aber in beiden Themes konstant
   dunkel (#222), damit kein harter Hell/Dunkel-Wechsel entsteht.
   Deshalb hier bewusst KEIN Panel-Override mehr (früher: weiß im Dark Mode). */

/* --- PanoInfo Panel (Dark) --- */
body.theme-dark #panoInfoPanel {
  background: rgba(20, 20, 24, 0.95);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
body.theme-dark #panoInfoPanel.minimized {
  background: rgba(20, 20, 24, 0.9);
}
body.theme-dark #panoInfoClose {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
body.theme-dark #panoInfoPanel .body { color: #ddd; }
body.theme-dark #panoInfoPanel .body::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
body.theme-dark #panoInfoPanel .body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); }
body.theme-dark .teaser-content { color: #fff; }
body.theme-dark #readMoreBtn {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
body.theme-dark #panoInfoPanel.minimized .row::after { color: #aaa; }

/* --- Audio Player (Dark) --- */
body.theme-dark #bgAudioPlayer {
  background: rgba(30, 30, 35, 0.95);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
body.theme-dark #audioControlBtn {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
body.theme-dark #audioControlBtn:hover { background: rgba(255,255,255,0.2); }
body.theme-dark #audioProgressContainer { background: rgba(255,255,255,0.2); }
body.theme-dark #audioTimeBox { color: #ccc; }
body.theme-dark #audioVolumeBtn svg { fill: #ccc; }
body.theme-dark #audioVolumeBtn:hover svg { fill: #fff; }
body.theme-dark #audioVolumeSlider { background: rgba(255,255,255,0.2); }

/* --- Menu logo: no filter in dark mode, keep original colors --- */

/* --- Mobile overrides for dark menu --- */
body.theme-dark .menu-content { border-top-color: #825f00; }

/* --- Dark Theme: Gallery Overlay --- */
body.theme-dark #galleryViewer { background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); }

/* --- Dark Theme: Video Overlay --- */
body.theme-dark #videoViewer { background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); }

/* ... (Popup Styles maintained) ... */
#welcomePopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

#welcomePopup.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: #fff;
  max-width: 500px;
  width: 90%;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #333;
}

.popup-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #825f00;
}

.popup-body {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #555;
}

.popup-btn {
  background: #825f00;
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.popup-btn:hover {
  background: #684b00;
}

/* ... (Audio Styles – Light default) ... */
#bgAudioPlayer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100000;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50px;
  padding: 6px 16px 6px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  min-width: 320px;
  height: 48px;
  color: #333;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Play/Pause Button */
#audioControlBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  transition: background 0.2s, color 0.2s;
}

#audioControlBtn:hover {
  background: rgba(0, 0, 0, 0.1);
}

#audioControlBtn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: none;
}

/* Progress Bar Container */
#audioProgressContainer {
  flex-grow: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  margin: 0 10px;
}

/* The Fill */
#audioProgressBar {
  width: 0%;
  height: 100%;
  background: #fac400;
  border-radius: 2px;
  position: relative;
}

/* Playhead Thumb – hidden by default, visible on hover (YouTube-style) */
#audioProgressBar::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fac400;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 2;
  transition: transform .15s ease;
}

#audioProgressContainer:hover #audioProgressBar::after,
#bgAudioPlayer.seeking #audioProgressBar::after {
  transform: translateY(-50%) scale(1);
}

/* Progress bar grows taller on hover (YouTube-style) */
#audioProgressContainer {
  transition: height .15s ease;
}
#audioProgressContainer:hover {
  height: 6px;
}

/* Time Display */
#audioTimeBox {
  font-size: 11px;
  color: #888;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 34px;
  text-align: right;
}

/* States via Classes */
.audio-playing .icon-pause {
  display: block !important;
}

.audio-playing .icon-play {
  display: none !important;
}

.audio-paused .icon-play {
  display: block !important;
}

.audio-paused .icon-pause {
  display: none !important;
}

/* --- Volume Controls (YouTube-style: slider only on hover) --- */
#audioVolumeWrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 4px;
  position: relative;
}

#audioVolumeBtn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#audioVolumeBtn svg {
  width: 18px;
  height: 18px;
  fill: #888;
  transition: fill .15s;
}

#audioVolumeBtn:hover svg {
  fill: #333;
}

/* Show/hide volume icons based on mute state */
#audioVolumeWrap .icon-vol-off { display: none; }
#audioVolumeWrap .icon-vol-on  { display: block; }
#audioVolumeWrap.muted .icon-vol-off { display: block; }
#audioVolumeWrap.muted .icon-vol-on  { display: none; }

/* Global Mute: red crossed-out speaker */
#audioVolumeWrap.global-muted .icon-vol-on  { display: none; }
#audioVolumeWrap.global-muted .icon-vol-off { display: block; }
#audioVolumeWrap.global-muted svg {
  fill: #e74c3c !important;
  position: relative;
}
#audioVolumeWrap.global-muted #audioVolumeBtn {
  position: relative;
}
#audioVolumeWrap.global-muted #audioVolumeBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  background: #e74c3c;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

/* Global Mute: Play button also red tinted */
body.global-muted #audioControlBtn {
  color: #e74c3c;
}
body.global-muted #audioControlBtn svg {
  fill: #e74c3c;
}
/* Mobile: red border on play button when global muted */
html.is-mobile body.global-muted #audioControlBtn {
  border-color: #e74c3c;
  color: #e74c3c;
}
html.is-mobile body.global-muted #audioControlBtn.audio-playing {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}

/* Slider hidden by default, slides out on hover */
#audioVolumeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: width .2s ease, opacity .2s ease, margin .2s ease;
  margin-left: 0;
}

#audioVolumeWrap:hover #audioVolumeSlider {
  width: 60px;
  opacity: 1;
  margin-left: 6px;
}

#audioVolumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

#audioVolumeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */
#galleryViewer {
  position: fixed; inset: 0;
  z-index: 200000;
  background: transparent;
  backdrop-filter: none;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
#galleryViewer.show {
  display: flex;
  opacity: 1;
}

/* --- Inner container (not full-bleed) --- */
.gallery-inner {
  position: relative;
  width: calc(100% - 80px);
  height: calc(100% - 60px);
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- Close Button --- */
.gallery-close {
  /* Fix zur Ecke des Viewers (nicht relativ zum variabel großen Inhalt),
     damit der Abstand immer gleich ist und der Button nie ins Bild ragt. */
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.3s;
  z-index: 10;
}
.gallery-close:hover { background: rgba(0,0,0,0.55); }



/* --- Album Title (centered above image) --- */
.gallery-title {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  font-size: 18px;
  font-weight: 600;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-align: center;
  flex-shrink: 0;
}

/* --- Image wrapper with nav arrows --- */
.gallery-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.gallery-img-wrap > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery-img-wrap > img.visible {
  opacity: 1;
}

/* Nav Arrows */
.gallery-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border: none; color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.3s;
  z-index: 3;
}
.gallery-nav:hover { background: rgba(0,0,0,0.55); }
.gallery-nav.prev { left: 0; }
.gallery-nav.next { right: 0; }

/* --- Photo Label (centered below image) --- */
/* Kundenwunsch 2026-07: Dateinamen unter den Bildern nicht anzeigen.
   display:none nimmt das Element aus dem Flex-Flow (kein doppelter gap). */
.gallery-label {
  display: none;
  color: #ccc;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  font-size: 14px;
  text-align: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  flex-shrink: 0;
}

/* --- Counter (below label) --- */
.gallery-counter {
  color: #888;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
  font-size: 12px;
  text-align: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  flex-shrink: 0;
}

/* --- Mini Thumbnail Strip --- */
.gallery-thumbstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  flex-shrink: 0;
  max-width: 100%;
  justify-content: center;
  scrollbar-width: none;
}
.gallery-thumbstrip::-webkit-scrollbar { display: none; }

.gallery-thumbstrip .thumb-item {
  width: 48px; height: 36px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.gallery-thumbstrip .thumb-item:hover {
  opacity: 0.8;
}
.gallery-thumbstrip .thumb-item.active {
  opacity: 1;
  border-color: #fac400;
}

/* ============================================================
   VIDEO PLAYER OVERLAY
   ============================================================ */
#videoViewer {
  position: fixed; inset: 0;
  z-index: 200000;
  background: transparent;
  backdrop-filter: none;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
#videoViewer.show {
  display: flex;
  opacity: 1;
}

/* Inner container (matches gallery layout) */
.video-inner {
  position: relative;
  width: calc(100% - 80px);
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Close button: fix zur Viewer-Ecke (gleicher Abstand wie Galerie) */
.video-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.3s;
  z-index: 10;
}
.video-close:hover { background: rgba(0,0,0,0.55); }

/* Video-Navigationspfeile (Stil wie Galerie), nur bei Playlist > 1 */
.video-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border: none; color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.3s;
  z-index: 4;
}
.video-nav:hover { background: rgba(0,0,0,0.55); }
.video-nav.prev { left: 8px; }
.video-nav.next { right: 8px; }

/* Künstler-„i" (Wikipedia-Link) neben dem Künstlernamen */
.artist-wiki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  color: inherit;
  opacity: 0.85;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.artist-wiki:hover {
  opacity: 1;
  background: #fac400;   /* Gera-Gelb */
  border-color: #fac400;
  color: #222;
}



/* Title (centered above video, like gallery) */
/* Kundenwunsch 2026-07: Dateinamen über dem Video nicht anzeigen. */
.video-title {
  display: none;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  font-size: 18px;
  font-weight: 600;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-align: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}


/* Video element */
.video-wrapper {
  position: relative;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.3);
  border-radius: 8px;
}
.video-stage {
  position: relative;
  width: 100%;
  line-height: 0;   /* kein Spalt unter dem <video> */
}
.video-wrapper video {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: #000;
  display: block;
}

/* Schwarzblende für den Video-Wechsel in einer Sequenz (V-07) */
.video-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s ease;
  border-radius: 8px 8px 0 0;
}

/* Punkte-Indikator + Zähler unter dem Video (nur bei Playlist > 1) */
.video-dots {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.video-counter {
  color: #ddd;
  font-size: 12px;
  letter-spacing: 0.3px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.video-dots-row { display: flex; gap: 10px; }
.video-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.35);
  transition: background 0.25s, transform 0.25s;
}
.video-dot:hover { background: rgba(255,255,255,0.6); }
.video-dot.active {
  background: #fac400;   /* Gera-Gelb */
  transform: scale(1.25);
}

/* Custom Controls Bar */
.video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(20,20,24,0.85);
  backdrop-filter: blur(6px);
  border-radius: 0 0 8px 8px;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: background 0.3s, color 0.3s;
}

.video-play-btn {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.video-play-btn svg {
  width: 20px; height: 20px;
  fill: currentColor;
}

/* Progress bar (YouTube-style with #fac400) */
.video-progress-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}
.video-progress-wrap:hover { height: 6px; }

.video-progress-bar {
  width: 0%;
  height: 100%;
  background: #fac400;
  border-radius: 2px;
  position: relative;
}

/* Playhead thumb */
.video-progress-bar::after {
  content: "";
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fac400;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
  z-index: 2;
}
.video-progress-wrap:hover .video-progress-bar::after,
.video-controls.seeking .video-progress-bar::after {
  transform: translateY(-50%) scale(1);
}

.video-time {
  font-size: 12px;
  color: #ccc;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

.video-fullscreen-btn {
  background: none; border: none; color: #ccc;
  cursor: pointer; padding: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.video-fullscreen-btn svg {
  width: 18px; height: 18px;
  fill: currentColor;
}
.video-fullscreen-btn:hover { color: #fff; }

/* ============================================================
   RESPONSIVE / MOBILE
   Dual trigger: @media (max-width: 1024px) OR html.is-mobile
   The JS detection sets html.is-mobile via TDV.PlayerAPI.mobile,
   touch capability, and userAgent.  This ensures the mobile
   layout activates even when the 3DVista viewport scaling
   (data-tdv-general-scale) inflates the CSS viewport width.
   ============================================================ */

/* ---------- Menu (gera.de style: top-bar + dropdown) ---------- */
@media (max-width: 1024px) {

  /* --- Fixed top header bar --- */
  .kuk-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;                /* NOT full height */
    width: 100%;
    max-height: 100dvh;          /* never exceed viewport */
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: none;            /* no slide, we toggle content visibility */
    transform: none !important;  /* override desktop translateX */
  }

  /* Header always visible as a top-bar */
  .menu-header {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #fff;
    z-index: 2;
  }

  .menu-logo {
    max-height: 50px;
  }

  /* Hamburger sits inside the header bar, no absolute float */
  .kuk-nav.collapsed #kukNavToggle {
    position: static;
    margin-left: 0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: none;
    box-shadow: none;
  }

  /* --- Content area: hidden when collapsed, scrollable when open --- */
  .kuk-nav.collapsed .menu-content,
  .kuk-nav.collapsed .menu-footer,
  .kuk-nav.collapsed .kuk-options-panel {
    display: none;
  }

  .kuk-nav .menu-content {
    max-height: calc(100dvh - 62px);  /* minus header height */
    overflow-y: auto;
    border-top: 3px solid #825f00;     /* gera.de gold accent line */
  }

  /* --- L1 titles: full-width rows with border, gera.de style --- */
  .menu-l1-title {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    color: #333;
  }

  .menu-l1-title::before {
    display: none;               /* hide left accent bar on mobile */
  }

  /* Active L1: gold text like gera.de */
  .menu-section-l1:has(.menu-l1-content:not(.collapsed)) .menu-l1-title {
    color: #825f00;
    border-bottom-color: #825f00;
  }

  /* Arrow button: simple chevron, right-aligned */
  .arrow-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    font-size: 16px;
  }

  .menu-section-l1:has(.menu-l1-content:not(.collapsed)) .arrow-btn {
    transform: rotate(90deg);
  }

  /* --- L2 titles --- */
  .menu-l2-title {
    padding: 14px 20px 14px 28px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  /* --- Menu items: large touch targets --- */
  .menu-item {
    padding: 14px 20px;
    font-size: 15px;
    border-bottom: 1px solid #f5f5f5;
  }

  .menu-items {
    margin-left: 20px;
    border-left: 2px solid #e0e0e0;
  }

  /* --- Hide Fotoalben & Videos on mobile --- */
  .menu-section-media {
    display: none !important;
  }

  /* --- Footer: compact, inside dropdown --- */
  .menu-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
  }

  .vr-toggle-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* --- Backdrop: starts below the header bar --- */
  .kuk-nav-drop {
    display: block;
    top: 62px;               /* below menu header bar */
  }
  .kuk-nav-drop.hidden {
    display: none;
  }
}

/* Hide backdrop on desktop (non-mobile) entirely */
@media (min-width: 1025px) {
  html:not(.is-mobile) .kuk-nav-drop {
    display: none !important;
  }
}

/* ---------- is-mobile: Menu (same rules, device-flag driven) ---------- */
html.is-mobile .kuk-nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: auto;
  width: 100%; max-height: 100dvh;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: none;
  transform: none !important;
}
html.is-mobile .menu-header {
  padding: 10px 16px; border-bottom: 1px solid #eee; background: #fff; z-index: 2;
}
html.is-mobile .menu-logo { max-height: 50px; }
html.is-mobile .kuk-nav.collapsed #kukNavToggle {
  position: static; margin-left: 0; width: 40px; height: 40px;
  border-radius: 4px; background: none; box-shadow: none;
}
html.is-mobile .kuk-nav.collapsed .menu-content,
html.is-mobile .kuk-nav.collapsed .menu-footer,
html.is-mobile .kuk-nav.collapsed .kuk-options-panel { display: none; }
html.is-mobile .kuk-nav .menu-content {
  max-height: calc(100dvh - 62px); overflow-y: auto;
  border-top: 3px solid #825f00;
}
/* Flat mobile menu: no indentation, no hierarchy styling */
html.is-mobile .menu-items-flat {
  margin-left: 0; border-left: none;
  list-style: none; padding: 0;
}
html.is-mobile .menu-items-flat .menu-item {
  padding: 14px 20px; font-size: 15px;
  border-bottom: 1px solid #f0f0f0;
}
html.is-mobile .menu-items-flat .menu-item.active {
  color: #825f00; font-weight: 600;
  background: rgba(130,95,0,0.06);
}
/* Dark theme: flat mobile menu */
body.theme-dark .menu-items-flat .menu-item {
  color: #ccc;
  border-bottom-color: #2a2a2e;
}
body.theme-dark .menu-items-flat .menu-item.active {
  color: #fac400;
  background: rgba(250,196,0,0.1);
}
html.is-mobile .menu-section-media { display: none !important; }
html.is-mobile .menu-footer { padding: 12px 16px; border-top: 1px solid #eee; }
html.is-mobile .vr-toggle-btn { width: 100%; padding: 12px; font-size: 15px; border-radius: 8px; }
html.is-mobile .kuk-nav-drop { display: block; top: 62px; }
html.is-mobile .kuk-nav-drop.hidden { display: none; }

/* ---------- is-mobile: Golden Pulsating Hamburger ---------- */
html.is-mobile .kuk-nav.collapsed #kukNavToggle {
  animation: kukMobileHamburgerPulse 2.4s ease-in-out 3;
  position: relative;
  left: auto; top: auto; /* reset desktop absolute offsets */
  overflow: hidden;
}
html.is-mobile .kuk-nav.collapsed #kukNavToggle::after {
  content: "";
  position: absolute;
  top: -50%; left: -120%; width: 60%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(200,160,40,0.5) 45%, rgba(255,215,0,0.8) 50%, rgba(200,160,40,0.5) 55%, transparent 70%);
  animation: kukShimmerLoop 2.4s ease-in-out 3;
  pointer-events: none;
}
@keyframes kukMobileHamburgerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,160,40,0.5); }
  50%  { box-shadow: 0 0 14px 4px rgba(200,160,40,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(200,160,40,0); }
}
@keyframes kukShimmerLoop {
  0%   { left: -120%; }
  40%  { left: 160%; }
  100% { left: 160%; }
}

/* ---------- is-mobile: VR button hidden in menu ---------- */
html.is-mobile .vr-toggle-btn { display: none !important; }

/* ---------- is-mobile Landscape: kompakter Eck-Header ---------- */
/* Querformat am Phone hat wenig Höhe (~330 CSS-px) - der Full-Width-Header
   verdeckt zu viel Panorama. Zugeklappt deshalb nur noch ein kleines
   Logo+Burger-Chip oben links; aufgeklappt eine linksbündige Sidebar statt
   des Full-Width-Dropdowns. Greift nur bei html.is-mobile, Desktop bleibt
   unverändert. */
@media (orientation: landscape) {
  html.is-mobile .kuk-nav.collapsed {
    width: auto; right: auto;
    border-radius: 0 0 14px 0;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  html.is-mobile .kuk-nav.collapsed .menu-header {
    padding: 6px 10px;
    border-bottom: none;
    background: none;
    gap: 10px;
  }
  html.is-mobile .kuk-nav.collapsed .menu-logo {
    width: auto;
    max-height: 32px;
  }
  html.is-mobile .kuk-nav.collapsed #kukNavToggle {
    width: 36px; height: 36px;
  }
  /* Aufgeklappt: Sidebar links, Panorama bleibt rechts sichtbar */
  html.is-mobile .kuk-nav:not(.collapsed) {
    width: min(360px, 70vw); right: auto;
    border-radius: 0 0 14px 0;
    box-shadow: 2px 0 14px rgba(0,0,0,0.3);
  }
  html.is-mobile .kuk-nav-drop { top: 0; }
  /* Dark theme: Chip-Hintergrund angleichen */
  html.is-mobile body.theme-dark .kuk-nav.collapsed {
    background: rgba(30,30,34,0.92);
  }
}

/* ---------- is-mobile: Audio Player (bottom-left, matches toolbar btn size) ---------- */
html.is-mobile #bgAudioPlayer {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 12px; right: auto;
  min-width: 0; width: auto;
  height: 44px; padding: 0; border-radius: 22px;
  gap: 0;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: width 0.3s ease;
  overflow: hidden;
}
/* Hide progress bar & time on mobile */
html.is-mobile #audioProgressContainer { display: none; }
html.is-mobile #audioTimeBox { display: none; }

/* Play button: circle with black outline, same size as toolbar btns */
html.is-mobile #audioControlBtn {
  width: 36px; height: 36px;
  margin: 4px;
  background: transparent;
  border: 2px solid #222;
  border-radius: 50%;
  color: #222;
  flex-shrink: 0;
}
/* Yellow fill when audio is playing */
html.is-mobile #audioControlBtn.audio-playing {
  background: #fac400;
  border-color: #fac400;
  color: #222;
}

/* Mobile: hide volume slider entirely – user controls volume via device buttons */
html.is-mobile #audioVolumeSlider { display: none !important; }
/* Volume mute/unmute button stays visible */
html.is-mobile #audioVolumeWrap { margin-left: 0; }
html.is-mobile #audioVolumeBtn {
  width: 36px; height: 36px;
  margin-right: 4px;
  flex-shrink: 0;
}
html.is-mobile #audioVolumeBtn svg { width: 20px; height: 20px; fill: #333; }

/* ---------- is-mobile: Yellow PanoInfo Button (centered bottom, ROUND) ---------- */
#kukPanoInfoBtn {
  display: none;
}
html.is-mobile #kukPanoInfoBtn {
  display: none; /* JS sets display:flex when content exists */
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  z-index: 100000;
  width: 52px; height: 52px;
  padding: 0;
  border-radius: 50%; border: none;
  background: #fac400; color: #222;
  font-size: 28px; font-weight: 700;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html.is-mobile #kukPanoInfoBtn:active {
  transform: translateX(-50%) scale(0.92);
}

/* Slow continuous pulse when info is available */
@keyframes infoBtnPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,0.3); transform: translateX(-50%) scale(1); }
  50%      { box-shadow: 0 3px 20px rgba(250,196,0,0.5); transform: translateX(-50%) scale(1.08); }
}
html.is-mobile #kukPanoInfoBtn.info-pulse {
  animation: infoBtnPulse 2.5s ease-in-out infinite;
}
html.is-mobile #kukPanoInfoBtn.info-pulse:active {
  animation: none;
  transform: translateX(-50%) scale(0.92);
}

/* ---------- is-mobile: Right Bottom Buttons (Help, VR, Fullscreen) ---------- */
html.is-mobile .kuk-fullscreen-btn {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: auto; right: 12px;
  width: 44px; height: 44px;
}
html.is-mobile .kuk-toolbar-btn {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: auto;
  width: 44px; height: 44px;
}
html.is-mobile #kukVrBtn   { right: 64px; left: auto; }
html.is-mobile #kukInfoBtn { right: 116px; left: auto; }
/* Scale up SVGs & text in mobile toolbar buttons */
html.is-mobile .kuk-fullscreen-btn svg,
html.is-mobile .kuk-toolbar-btn svg { width: 24px; height: 24px; }
html.is-mobile .kuk-toolbar-btn span { font-size: 22px; }
/* Scale up audio player SVGs on mobile */
html.is-mobile #audioControlBtn svg { width: 22px; height: 22px; }

/* ---------- is-mobile: Split-View Info Panel ---------- */

/* When split-view is active, body becomes a flex column and scrolls */
html.is-mobile body.split-view {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* Viewer shrinks to top portion */
html.is-mobile body.split-view #viewer {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  height: 45vh !important;
  height: 45dvh !important;
  flex-shrink: 0 !important;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* PanoInfo fills the rest below the viewer */
html.is-mobile body.split-view #panoInfoPanel {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  border-radius: 16px 16px 0 0 !important;
  transform: none !important;
  overflow-y: auto !important;
  display: flex !important;
  z-index: 10 !important;
  background: #fff !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
  margin-top: -16px !important;
  padding-top: 4px !important;
}
html.is-mobile body.split-view.theme-dark #panoInfoPanel {
  background: #1a1a1e !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}

/* Hide preloadContainer in split-view so it doesn't block */
html.is-mobile body.split-view #preloadContainer {
  display: none !important;
}

/* Viewer transition for smooth expand/collapse */
html.is-mobile #viewer {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default mobile panel styles (when NOT in split-view) */
html.is-mobile #panoInfoPanel {
  top: auto;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  max-height: 50vh;
  border-radius: 16px 16px 0 0;
  padding: 0;
  font-size: 14px;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
html.is-mobile #panoInfoPanel.sheet-open {
  transform: translateY(0);
}
/* Hide image on mobile bottom sheet */
html.is-mobile #panoInfoPanel .img-container { display: none; }
/* Title row */
html.is-mobile #panoInfoPanel .row {
  padding: 16px 16px 8px; margin: 0; flex-shrink: 0;
}
html.is-mobile #panoInfoPanel h3 { font-size: 17px; }
/* No read more on mobile */
html.is-mobile #readMoreBtn { display: none !important; }
/* Scrollable body */
html.is-mobile #panoInfoPanel .body {
  max-height: none; overflow-y: auto; padding: 0 16px 16px;
  mask-image: none; -webkit-mask-image: none;
}
html.is-mobile #panoInfoPanel .body.collapsed-text .main-content {
  max-height: none; mask-image: none; -webkit-mask-image: none;
}
/* Audio player inside the bottom sheet */
html.is-mobile #panoInfoPanel .sheet-audio-slot {
  padding: 4px 16px 8px; flex-shrink: 0;
}
html.is-mobile #panoInfoPanel .sheet-audio-slot #bgAudioPlayer {
  position: static !important;
  left: auto; right: auto; bottom: auto;
  width: 100%; height: 44px;
  border-radius: 22px;
  background: #f5f5f5;
  box-shadow: none;
}
body.theme-dark #panoInfoPanel .sheet-audio-slot #bgAudioPlayer {
  background: #2a2a2e;
}
/* Minimized state unused on mobile – completely hidden */
html.is-mobile #panoInfoPanel.minimized {
  display: none !important;
}

/* Hide bottom buttons when split-view is open */
html.is-mobile body.split-view .kuk-fullscreen-btn,
html.is-mobile body.split-view .kuk-toolbar-btn,
html.is-mobile body.split-view #kukPanoInfoBtn {
  display: none !important;
}
/* Hide audio player only when it's still on body (not moved into panel) */
html.is-mobile body.split-view > #bgAudioPlayer {
  display: none !important;
}
/* Audio player inside the panel must stay visible */
html.is-mobile body.split-view .sheet-audio-slot #bgAudioPlayer {
  display: flex !important;
}
/* Fade buttons out */
body.split-view .kuk-fullscreen-btn,
body.split-view .kuk-toolbar-btn,
body.split-view #kukPanoInfoBtn {
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ---------- is-mobile: Gallery ---------- */
html.is-mobile .gallery-inner { width: calc(100% - 16px); height: calc(100% - 24px); }
html.is-mobile .gallery-close { width: 36px; height: 36px; font-size: 18px; }
html.is-mobile .gallery-nav { width: 36px; height: 36px; font-size: 18px; }
html.is-mobile .gallery-title { font-size: 15px; }
html.is-mobile .gallery-label { font-size: 12px; }
html.is-mobile .gallery-thumbstrip .thumb-item { width: 40px; height: 30px; }

/* ---------- is-mobile: Video Player ---------- */
html.is-mobile .video-inner { width: calc(100% - 16px); }
html.is-mobile .video-close { top: -36px; }
html.is-mobile .video-close { width: 36px; height: 36px; font-size: 16px; }
html.is-mobile .video-title { font-size: 15px; }
html.is-mobile .video-controls { gap: 6px; padding: 6px 8px; }
html.is-mobile .video-time { font-size: 11px; min-width: 70px; }

/* ---------- is-mobile: Welcome Popup ---------- */
html.is-mobile .popup-content { width: 92%; padding: 20px 16px; }
html.is-mobile .popup-title { font-size: 20px; }
html.is-mobile .popup-body { font-size: 14px; }
html.is-mobile .popup-btn { width: 100%; padding: 14px 24px; }

/* ---------- Info Panel (media-query fallback, mirrors is-mobile) ---------- */
@media (max-width: 1024px) {
  #panoInfoPanel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-height: 50vh;
    border-radius: 16px 16px 0 0; padding: 0; font-size: 14px;
  }
}

/* ---------- Audio Player (media-query fallback) ---------- */
@media (max-width: 1024px) {
  #bgAudioPlayer {
    bottom: 16px; left: 12px; right: auto;
    min-width: 0; width: auto;
    height: 44px; padding: 4px; border-radius: 22px; gap: 0;
  }
  #audioProgressContainer { display: none; }
  #audioTimeBox { display: none; }
  #audioControlBtn { width: 36px; height: 36px; }
  #audioVolumeWrap:hover #audioVolumeSlider {
    width: 0; opacity: 0; margin-left: 0;
  }
}

/* ---------- Gallery Lightbox ---------- */
@media (max-width: 1024px) {
  .gallery-inner {
    width: calc(100% - 16px);
    height: calc(100% - 24px);
  }

  .gallery-close {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .gallery-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .gallery-title {
    font-size: 15px;
  }

  .gallery-label {
    font-size: 12px;
  }

  .gallery-thumbstrip .thumb-item {
    width: 40px;
    height: 30px;
  }
}

/* ---------- Video Player ---------- */
@media (max-width: 1024px) {
  .video-inner {
    width: calc(100% - 16px);
  }

  .video-close {
    top: -36px;
  }

  .video-close {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .video-title {
    font-size: 15px;
  }

  .video-controls {
    gap: 6px;
    padding: 6px 8px;
  }

  .video-time {
    font-size: 11px;
    min-width: 70px;
  }
}

/* ---------- Welcome Popup ---------- */
@media (max-width: 1024px) {
  .popup-content {
    width: 92%;
    padding: 20px 16px;
  }

  .popup-title {
    font-size: 20px;
  }

  .popup-body {
    font-size: 14px;
  }

  .popup-btn {
    width: 100%;
    padding: 14px 24px;
  }
}

/* ---------- Extra-small (≤ 600px, e.g. iPhone SE, Galaxy Fold) ---------- */
@media (max-width: 600px) {
  .menu-l1-title {
    padding: 14px 16px;
    font-size: 15px;
  }
  .menu-item {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ============================================================
   SPLASH / LANDING SCREEN
   ============================================================ */
.kuk-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
.kuk-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}
.kuk-splash-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(6px) brightness(0.55);
  transform: scale(1.05); /* hide blur edges */
}
.kuk-splash-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.kuk-splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.kuk-splash-logo {
  max-width: min(320px, 60vw);
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}
.kuk-splash-play {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
  animation: kukSplashPulse 2s ease-in-out infinite;
}
.kuk-splash-play:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.25);
}
.kuk-splash-play:active {
  transform: scale(0.95);
}
@keyframes kukSplashPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.kuk-splash-hint {
  color: rgba(255,255,255,0.75);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* --- Splash: Loading State --- */
.kuk-splash-play.kuk-splash-loading {
  pointer-events: none;
  animation: none;
  cursor: default;
  background: rgba(255,255,255,0.08);
}
.kuk-splash-play.kuk-splash-loading svg {
  display: none;
}
.kuk-splash-play.kuk-splash-loading::after {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kukSplashSpin 0.8s linear infinite;
}
@keyframes kukSplashSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   FULLSCREEN BUTTON (bottom-left)
   ============================================================ */
.kuk-fullscreen-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.kuk-fullscreen-btn:hover {
  background: #fff;
  color: #333;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.kuk-fullscreen-btn .icon-fs-exit { display: none; }
.kuk-fullscreen-btn.is-fullscreen .icon-fs-enter { display: none; }
.kuk-fullscreen-btn.is-fullscreen .icon-fs-exit { display: block; }

body.theme-dark .kuk-fullscreen-btn {
  background: rgba(30,30,35,0.95);
  color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body.theme-dark .kuk-fullscreen-btn:hover {
  background: rgba(50,50,55,1);
  color: #fff;
}

/* --- Toolbar buttons (VR + Info, next to fullscreen) --- */
.kuk-toolbar-btn {
  position: fixed;
  bottom: 20px;
  z-index: 100000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.kuk-toolbar-btn:hover {
  background: #fff;
  color: #333;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
#kukVrBtn   { left: 72px; }
#kukInfoBtn { left: 124px; }

body.theme-dark .kuk-toolbar-btn {
  background: rgba(30,30,35,0.95);
  color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body.theme-dark .kuk-toolbar-btn:hover {
  background: rgba(50,50,55,1);
  color: #fff;
}

/* Hide toolbar buttons on VR */
body.vr-active .kuk-fullscreen-btn,
body.vr-active .kuk-toolbar-btn { display: none !important; }

/* Hide ALL custom overlays while splash is active (before onboarding) */
body.kuk-splash-active #kukNav,
body.kuk-splash-active #kukNavDrop,
body.kuk-splash-active #panoInfoPanel,
body.kuk-splash-active #bgAudioPlayer,
body.kuk-splash-active #debugPanel,
body.kuk-splash-active #preloadContainer,
body.kuk-splash-active .kuk-fullscreen-btn,
body.kuk-splash-active .kuk-toolbar-btn {
  display: none !important;
}

/* During onboarding: UI is VISIBLE behind the backdrop so callouts make sense.
   Only hide debug & preloader. Disable pointer-events on UI so clicks go to onboarding. */
body.kuk-onboarding-active #debugPanel,
body.kuk-onboarding-active #preloadContainer,
body.kuk-onboarding-active #kukNavDrop {
  display: none !important;
}
body.kuk-onboarding-active #kukNav,
body.kuk-onboarding-active #panoInfoPanel,
body.kuk-onboarding-active #bgAudioPlayer,
body.kuk-onboarding-active .kuk-fullscreen-btn,
body.kuk-onboarding-active .kuk-toolbar-btn {
  pointer-events: none !important;
}
/* Ensure hamburger button is visually prominent during onboarding */
body.kuk-onboarding-active .kuk-nav.collapsed #kukNavToggle {
  z-index: 100002;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ============================================================
   ONBOARDING OVERLAY
   ============================================================ */
.kuk-onboarding {
  position: fixed;
  inset: 0;
  z-index: 999998;
  font-family: 'Segoe UI', Arial, sans-serif;
  animation: kukObFadeIn 0.5s ease;
}
.kuk-onboarding.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@keyframes kukObFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kuk-ob-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

/* --- Callout positioning --- */
.kuk-ob-callout {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
  animation: kukObPop 0.4s ease both;
}
.kuk-ob-callout:nth-child(2) { animation-delay: 0.1s; }
.kuk-ob-callout:nth-child(3) { animation-delay: 0.2s; }
.kuk-ob-callout:nth-child(4) { animation-delay: 0.3s; }
.kuk-ob-callout:nth-child(5) { animation-delay: 0.4s; }
.kuk-ob-callout:nth-child(6) { animation-delay: 0.5s; }

@keyframes kukObPop {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.kuk-ob-bubble {
  background: rgba(255,255,255,0.95);
  color: #333;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  max-width: 220px;
}
.kuk-ob-bubble strong {
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}

/* --- CSS triangle arrows on callout bubbles --- */
.kuk-ob-callout .kuk-ob-bubble {
  position: relative;
}
/* Left-pointing arrow – bubble sits to the right of the target */
.kuk-ob-callout[data-arrow="left"] .kuk-ob-bubble::before {
  content: "◄";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
}
/* Right-pointing arrow – bubble sits to the left of the target */
.kuk-ob-callout[data-arrow="right"] .kuk-ob-bubble::after {
  content: "►";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
}
/* Down-left arrow – bubble sits above the target */
.kuk-ob-callout[data-arrow="down-left"] .kuk-ob-bubble::after {
  content: "▼";
  position: absolute;
  bottom: -14px;
  left: 14px;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
}
/* Down-right arrow – bubble sits above the target */
.kuk-ob-callout[data-arrow="down-right"] .kuk-ob-bubble::after {
  content: "▼";
  position: absolute;
  bottom: -14px;
  right: 14px;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
}

/* --- Callout positions (Desktop, menu collapsed) --- */
.kuk-ob-menu      { top: 12px;  left: 80px; }
.kuk-ob-info      { top: 12px;  right: calc(min(420px, 90vw) + 50px); }
.kuk-ob-fullscreen{ bottom: 80px; left: 80px; flex-direction: column; }
.kuk-ob-audio     { bottom: 120px; right: 20px; flex-direction: column; align-items: flex-end; }
/* VR is inside collapsed menu – hide during onboarding */
.kuk-ob-vr        { display: none; }

/* --- Center guide card --- */
.kuk-ob-center {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  z-index: 3;
  background: rgba(255,255,255,0.97);
  border-radius: 16px;
  padding: 28px 32px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  text-align: center;
  max-width: 420px;
  width: calc(100% - 40px);
  animation: kukObPop 0.5s ease 0.2s both;
}
.kuk-ob-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
.kuk-ob-nav-guide {
  text-align: left;
  margin-bottom: 20px;
}
.kuk-ob-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}
.kuk-ob-nav-item:last-child { border-bottom: none; }
.kuk-ob-nav-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.kuk-ob-start-btn {
  display: inline-block;
  padding: 12px 36px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #825f00, #b8860b);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(130,95,0,0.35);
}
.kuk-ob-start-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(130,95,0,0.45);
}

/* --- Mobile: hide callouts, arrows, tooltips – only center card --- */
@media (max-width: 1024px) {
  .kuk-ob-callout { display: none; }
  .kuk-ob-center {
    padding: 22px 18px 20px;
    max-width: 340px;
  }
  .kuk-ob-title { font-size: 18px; }
  .kuk-ob-nav-item { font-size: 13px; }
}
html.is-mobile .kuk-ob-callout { display: none; }
html.is-mobile .kuk-ob-center { padding: 22px 18px 20px; max-width: 340px; }
html.is-mobile .kuk-ob-title { font-size: 18px; }
html.is-mobile .kuk-ob-nav-item { font-size: 13px; }

/* ---------- Dark Theme: Mobile overrides ---------- */
body.theme-dark.is-mobile .menu-header,
body.theme-dark html.is-mobile .menu-header {
  background: #1a1a1e;
  border-bottom-color: #333;
}
@media (max-width: 1024px) {
  body.theme-dark .menu-header {
    background: #1a1a1e;
    border-bottom-color: #333;
  }
  body.theme-dark .menu-l1-title {
    border-bottom-color: #333;
    color: #e0e0e0;
  }
  body.theme-dark .menu-item {
    border-bottom-color: #2a2a2e;
  }
  body.theme-dark .menu-l2-title {
    border-bottom-color: #333;
  }
  body.theme-dark .menu-items {
    border-left-color: #444;
  }
}

/* ---------- Dark Theme: Mobile Audio Player ---------- */
html.is-mobile body.theme-dark #bgAudioPlayer {
  background: rgba(30,30,35,0.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
html.is-mobile body.theme-dark #audioControlBtn {
  border-color: #ccc;
  color: #ccc;
  background: transparent;
}
html.is-mobile body.theme-dark #audioControlBtn.audio-playing {
  background: #fac400;
  border-color: #fac400;
  color: #222;
}
html.is-mobile body.theme-dark #audioVolumeBtn svg {
  fill: #ccc;
}
/* Volume slider is hidden on mobile – no dark-mode slider rules needed */