/* --- Base Panel --- */
#panoInfoPanel {
  position: fixed;
  top: 16px;
  right: 16px;
  width: min(420px, 90vw);
  max-height: 80vh;
  z-index: 100000;
  background: rgba(246, 246, 246, 0.95);
  /* Light Theme for clearer look based on hints? Reverting to Dark if preferred, but user shared white menu images. */
  /* Actually existing style was dark. User requested menu styles, not info panel. Keeping info panel dark for now or matching? */
  background: rgba(20, 20, 24, 0.95);
  color: #fff;
  border-radius: 12px;
  padding: 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

/* ... (Existing Info Panel Styles maintained) ... */
#panoInfoPanel.minimized {
  width: auto;
  max-width: 300px;
  min-width: 200px;
  padding: 12px 16px;
  background: rgba(20, 20, 24, 0.9);
  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: "▼";
  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;
}

#panoInfoClose {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 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: #ddd;
  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(255, 255, 255, 0.05);
}

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

/* Teaser Logic */
.teaser-content {
  font-weight: 600;
  color: #fff;
  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(255, 255, 255, 0.08);
  border: 0;
  color: #fff;
  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;
}

/* --- Custom Menu Styling --- */
.custom-menu {
  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;
}

.custom-menu.collapsed {
  transform: translateX(-100%);
}

.custom-menu.collapsed #menuToggleBtn {
  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;
}

#menuToggleBtn {
  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;
}

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

/* FULL WIDTH LOGO (User Request) */
.menu-logo {
  width: 100%;
  height: auto;
  max-height: 60px;
  /* Cap height reasonable */
  object-fit: contain;
  object-position: left;
  /* Align left if it doesn't fill */
  display: block;
}

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

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

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

/* ... (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 maintained) ... */
#bgAudioPlayer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100000;
  background: rgba(30, 30, 35, 0.95);
  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.5);
  min-width: 200px;
  height: 48px;
  color: #fff;
}

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

#audioControlBtn:hover {
  background: rgba(255, 255, 255, 0.2);
}

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

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

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

/* Playhead Thumb */
#audioProgressBar::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 2;
}

/* Time Display */
#audioTimeBox {
  font-size: 11px;
  color: #ccc;
  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;
}