body {
  background-color: var(--bs-body-tertiary);
}
.container-fluid {
  max-width: 1400px;
}
.card {
  margin-bottom: 20px;
  box-shadow: var(--bs-box-shadow-sm);
  cursor: pointer;
}
.card-img-top {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--bs-border-color);
}
.section-header {
  border-bottom: 2px solid var(--bs-border-color-translucent);
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.modal-content-img {
  max-width: 100%;
  height: auto;
}
.sidebar {
  position: sticky;
  top: 20px;
  height: 100vh;
  overflow-y: auto;
  padding-top: 20px;
  border-right: 1px solid var(--bs-border-color);
}
.sidebar .nav-link {
  font-size: 1.1rem;
  color: var(--bs-nav-link-color);
}
.sidebar .nav-link.active {
  font-weight: bold;
  color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  border-radius: 0.25rem;
}
main {
  padding-top: 20px;
}

.audio-controls-image-container {
  display: inline-block;
}

/* Universelles Hotspot-Styling */
.image-container-with-hotspots {
    display: inline-block;
}

.hotspot {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
    transition: background-color 0.3s ease;
}

.hotspot:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.hotspot::after {
    content: '?';
    font-size: 24px;
    font-weight: bold;
    color: #000;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* --- Positionierung für die "Verlauf" Sektion --- */
#verlauf .hotspot-tab.hotspot-verlauf { top: 12%; left: 7%; }
#verlauf .hotspot-tab.hotspot-details { top: 12%; left: 20%; }
#verlauf .hotspot-tab.hotspot-theme { top: 12%; left: 33%; }
#verlauf .hotspot-tab.hotspot-info { top: 12%; left: 43%; }
#verlauf .hotspot-tab.hotspot-datenschutz { top: 12%; left: 59%; }
.hotspot-song-list { top: 55%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 60%; border-radius: 15px; }
.hotspot-social.hotspot-social-whatsapp { bottom: 4%; left: 3%; }
.hotspot-social.hotspot-social-x { bottom: 4%; left: 9%; }
.hotspot-social.hotspot-social-facebook { bottom: 4%; left: 15%; }

/* --- Positionierung für die "Details" Sektion --- */
#details .hotspot-tab.hotspot-verlauf { top: 13%; left: 7%; }
#details .hotspot-tab.hotspot-details { top: 13%; left: 20%; }
#details .hotspot-tab.hotspot-theme { top: 13%; left: 33%; }
#details .hotspot-tab.hotspot-info { top: 13%; left: 43%; }
#details .hotspot-tab.hotspot-datenschutz { top: 13%; left: 59%; }
.hotspot-details-field { left: 3%; height: 18px; width: 60%; border-radius: 5px; }
.hotspot-details-field.hotspot-sender { top: 35%; }
.hotspot-details-field.hotspot-beschreibung { top: 41%; }
.hotspot-details-field.hotspot-format { top: 46%; }
.hotspot-details-field.hotspot-genres { top: 57%; }
.hotspot-details-field.hotspot-webseite { top: 63%; }

/* --- Positionierung für die "Theme" Sektion --- */
#theme .hotspot-tab.hotspot-verlauf { top: 16%; left: 7%; }
#theme .hotspot-tab.hotspot-details { top: 16%; left: 20%; }
#theme .hotspot-tab.hotspot-theme { top: 16%; left: 33%; }
#theme .hotspot-tab.hotspot-info { top: 16%; left: 43%; }
#theme .hotspot-tab.hotspot-datenschutz { top: 16%; left: 59%; }
.hotspot-theme-dropdown { top: 50%; left: 50%; transform: translateX(-50%); width: 95%; height: 40px; border-radius: 5px; }
.hotspot-theme-toggle { top: 63%; left: 12%; transform: translateX(-50%); width: 150px; height: 40px; border-radius: 5px; }

/* --- Positionierung für die "Infos" Sektion --- */
.hotspot-tab.hotspot-verlauf { top: 10%; left: 7%; }
.hotspot-tab.hotspot-details { top: 10%; left: 20%; }
.hotspot-tab.hotspot-theme { top: 10%; left: 33%; }
.hotspot-tab.hotspot-info { top: 10%; left: 43%; }
.hotspot-tab.hotspot-datenschutz { top: 10%; left: 59%; }
.hotspot-info-bereich { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; border-radius: 5px; }
.hotspot-info-bereich.hotspot-frameworks { top: 29%; height: 160px;}
.hotspot-info-bereich.hotspot-stream { top: 51%; height: 180px;}
.hotspot-info-bereich.hotspot-script { top: 75%; height: 180px;}

/* --- Positionierung für die "Datenschutz" Sektion --- */
.hotspot-tab.hotspot-verlauf { top: 10%; left: 7%; }
.hotspot-tab.hotspot-details { top: 10%; left: 20%; }
.hotspot-tab.hotspot-theme { top: 10%; left: 33%; }
.hotspot-tab.hotspot-info { top: 10%; left: 43%; }
.hotspot-tab.hotspot-datenschutz { top: 10%; left: 59%; }
.hotspot-datenschutz-button { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 50px; border-radius: 5px; }

/* --- Positionierung für die "Audiosteuerung" Sektion --- */
#audio-controls .hotspot-audio.hotspot-volume { top: 75%; left: 25%; transform: translate(-50%, -50%); width: 150px; border-radius: 20px; }
#audio-controls .hotspot-audio.hotspot-play-pause { top: 25%; left: 40%; transform: translate(-50%, -50%); }
#audio-controls .hotspot-audio.hotspot-reload { top: 25%; left: 60%; transform: translate(-50%, -50%); }
#audio-controls .hotspot-audio.hotspot-menu { top: 50%; right: 5%; transform: translate(50%, -50%); }

/* --- Ergänzung für Sprachwähler --- */
.sidebar .dropdown-toggle {
  text-align: left;
}
.sidebar .dropdown-menu {
  font-size: 0.9rem;
}
.sidebar .dropdown-item.active {
  background-color: var(--bs-tertiary-bg); 
  color: var(--bs-primary); 
  font-weight: bold;
}

/* --- Ergänzung für Theme Switcher --- */
.theme-switcher-container .btn {
  text-align: left;
}
.theme-switcher-container .bi {
  vertical-align: -0.125em;
  fill: currentColor;
}
[data-bs-theme="light"] .theme-icon-dark {
  display: none;
}
[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}