html,
body {
  font-family: "League Gothic", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #444;
}

/* FONTS */
/* CSS für League Gothic */
.font-league-gothic {
  font-family: "League Gothic", sans-serif;
}

/* CSS für Dela Gothic One */
.font-dela-gothic-one {
  font-family: "Dela Gothic One", sans-serif;
}

/* CSS für NanumGothic-Bold */
.font-nanum-gothic-bold {
  font-family: "NanumGothic-Bold", sans-serif;
}

/* CSS für NanumGothic-ExtraBold */
.font-nanum-gothic-extra-bold {
  font-family: "NanumGothic-ExtraBold", sans-serif;
}

/* CSS für NanumGothic-Regular */
.font-nanum-gothic-regular {
  font-family: "NanumGothic-Regular", sans-serif;
}

/* Schriftart "League Gothic" einbinden */
@font-face {
  font-family: "League Gothic";
  src: url("/assets/fonts/LeagueGothic-Regular-VariableFont_wdth.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Schriftart "Dela Gothic One" einbinden */
@font-face {
  font-family: "Dela Gothic One";
  src: url("/assets/fonts/DelaGothicOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NanumGothic-Bold";
  src: url("/assets/fonts/NanumGothic-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "NanumGothic-ExtraBold";
  src: url("/assets/fonts/NanumGothic-ExtraBold.ttf") format("truetype");
  font-weight: 800; /* Hier die korrekte Gewichtung verwenden */
  font-style: normal;
}

@font-face {
  font-family: "NanumGothic-Regular";
  src: url("/assets/fonts/NanumGothic-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* --------------------------------------------------- */
/* ---------------- TEST FONT BEREICH ---------------- */
/* --------------------------------------------------- */

/* Kreisbutton-Styling */
.font-switcher {
  z-index: 5000;
  margin-right: 10px;
  right: 20px;
  top: 20px;
  background-color: yellow;
  color: #000000;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

/* Icon im Kreisbutton */
.font-switcher i {
  font-size: 24px;
}

.kopf {
  display: flex;
  justify-content: flex-end; /* Ändere 'center' zu 'flex-end' */
  align-items: center;
  height: 60px;
  background-color: #333;
}

#font-dropdown {
  margin-right: 20px;
  width: 200px;
  font-size: 16px;
  padding: 8px;
  background-color: white;
  border: none;
  cursor: pointer; /* Standard-Cursor verwenden */
}

/* --------------------------------------------------- */
/* --------------------------------------------------- */
/* --------------------------------------------------- */

#impressum-link {
  margin-top: 1em;
}

/* Stil für Navigationselemente */
.nav-item {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #444;
}

.nav-item a {
  text-decoration: none; /* Entfernt die Link-Unterstreichung */
  color: yellow; /* Ändert die Link-Farbe auf Gelb */
  font-weight: normal; /* Fettgedruckte Schrift für Links (optional) */
  font-size: 25px;
  flex: 1; /* Zentriert den Text horizontal */
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-item a:hover {
  color: yellow; /* Ändert die Farbe für Hover-Links */
}

/* Stil für Hauptinhalt */
#content {
  left: 130px;
  width: 75%;
  height: 80vh;
  margin: auto;
  padding: 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Stil für den Footer */
#footer {
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5; /* Setzen Sie den z-index-Wert auf 4, um den Footer über der Sidebar zu platzieren */
}

/* Hintergrund-Cover-Stil */
.background-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url("../assets/logo/logo-normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
}

.cover-art-container {
  width: 300px; /* Breite des Rahmens */
  height: 300px; /* Höhe des Rahmens */
  padding: 5px; /* Abstand zwischen Rahmen und Bild */
  background-color: #222; /* Hintergrundfarbe des Rahmens */
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* Schatten für den 3D-Effekt */
  border-radius: 15px; /* Leicht abgerundete Ecken für den Rahmen */
  display: flex; /* Zentriert das Bild innerhalb des Containers */
  justify-content: center;
  align-items: center;
  perspective: 600px; /* Perspektive für 3D-Effekt */
  animation: rotateAnimation 5s infinite alternate; /* Animation für Rotation */
}

@keyframes rotateAnimation {
  0% {
    transform: perspective(600px) rotateX(15deg) rotateY(-15deg);
  }
  100% {
    transform: perspective(600px) rotateX(15deg) rotateY(15deg);
  }
}

#cover-art-main {
  width: 100%; /* Füllt den Rahmen aus */
  height: 100%; /* Füllt den Rahmen aus */
  object-fit: cover;
  border-radius: 10px; /* Abgerundete Ecken für das Bild */
}

/* Stil für Cover-Art im Footer */
#cover-art-footer {
  margin-right: 10px;
  max-width: 50px;
  max-height: 50px;
}

/* Stil für die Player-Leiste */
#player-bar {
  background-color: #000;
  color: #ffd700;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2; /* Setzen Sie den z-index-Wert auf 2, um die Player-Leiste über dem Hauptinhalt zu platzieren */
}

#now-playing {
  display: flex;
  align-items: center;
  padding-right: 20px; /* Abstand zwischen Elementen und Text (hinzugefügt) */
}

#cover-art {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

#song-info {
  text-align: left;
}

#track-title {
  font-size: 1.2em;
}

#artist-name {
  font-size: 1em;
}

/* Stil für die Sidebar */
#sidebar {
  background-color: #222;
  color: #fff;
  width: 250px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto; /* Ermöglicht vertikales Scrollen */
}
/* Stil für das Logo oben in der Navigation */
.logo {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.logo img {
  max-width: 100%;
  height: auto;
}

/* Stil für das Logo unten in der Sidebar */
.logo-bottom {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  bottom: 30px; /* Verschiebt das Logo um 30px nach oben */
  opacity: 0.7; /* Ändere die Transparenz, um es leicht transparent zu machen */
  z-index: 1; /* Stellt sicher, dass es über dem Footer liegt */
}

.logo-bottom img {
  max-width: 60%; /* Ändere die Größe des Wasserzeichens nach Bedarf */
  height: auto;
}

/* Stil für die Player-Steuerelemente */
#player-controls {
  display: flex;
  align-items: center;
  margin-left: 20px; /* Abstand */
}

.control-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 40px; /* Größe der Buttons */
  height: 40px;
  position: relative;
  border-radius: 50%; /* Kreisform */
}

/* Stil für den Play-Button */
.control-btn.play {
  background-color: yellow;
  border-radius: 50%; /* Macht den Button rund */
  width: 4.5em; /* Breite und Höhe des Buttons */
  height: 3em;
}

.control-btn.play::before {
  content: "▶"; /* Play-Symbol (U+25B6) */
  font-size: 1.5em; /* Größe des Symbols */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* Zentriert das Symbol horizontal und vertikal */
}

/* Stil für den Pause-Button */
.control-btn.pause {
  background-color: yellow;
  border-radius: 50%; /* Macht den Button rund */
  width: 4.5em; /* Breite und Höhe des Buttons */
  height: 3em;
}

.control-btn.pause::before {
  content: "❚❚"; /* Pause-Symbol (U+275A U+275A) */
  font-size: 1.5em; /* Größe des Symbols */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* Zentriert das Symbol horizontal und vertikal */
}

/* Stil für das Volume-Control (Allgemein) */
#volume-control {
  -webkit-appearance: none; /* Für WebKit-Browser */
  appearance: none; /* Standard-Aussehen entfernen */
  width: 100%;
  background: transparent;
  margin: 0 15px;
  margin-left: 50px;
}

/* Stil für die Laufbahn (WebKit) */
#volume-control::-webkit-slider-runnable-track {
  background: yellow;
  border-radius: 10px;
  height: 5px;
}

/* Stil für den Griff (WebKit) */
#volume-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid yellow;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
  margin-top: -8px;
}

/* Stil für die Laufbahn (Firefox) */
#volume-control::-moz-range-track {
  background: yellow;
  border-radius: 10px;
  height: 5px;
}

/* Stil für den Griff (Firefox) */
#volume-control::-moz-range-thumb {
  border: 2px solid yellow;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}

/* CD Liste */
#cd-list-text.hidden {
  display: none;
}

.cd-list-box {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */

  /* Anpassung der Schriftstärke für h1 und h2 */
  h1,
  h2 {
    font-weight: normal; /* Ändert die Schriftstärke auf normal */
  }
}

#cd-list-text:target {
  display: block;
}

/* Stil für Impressum */
#impressum-text.hidden {
  display: none;
}

/* Stil für die Impressum-Box */
.impressum-box {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */

  /* Anpassung der Schriftstärke für h1 und h2 */
  h1,
  h2 {
    font-weight: normal; /* Ändert die Schriftstärke auf normal */
  }
}

/* CSS für die Anzeige des Impressum-Texts basierend auf :target */
#impressum-text:target {
  display: block;
}

/* Stil für Datenschutz */
#datenschutz-text.hidden {
  display: none;
}

/* Stil für die Datenschutz-Box */
.datenschutz-box {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */
  max-height: 400px; /* Beispielwert für maximale Höhe */
  overflow-y: auto; /* Bei Bedarf vertikalen Scrollbalken anzeigen */
}

.datenschutz-box h1,
.datenschutz-box h2 {
  font-weight: normal; /* Ändern Sie das Schriftgewicht auf normal */
}

/* CSS für die Anzeige des Datenschutz-Texts basierend auf :target */
#datenschutz-text:target {
  display: block;
}

/* Stil für die Lightbox */
.lightbox {
  display: none; /* Lightbox ist standardmäßig nicht sichtbar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparenter Hintergrund */
  z-index: 1000; /* Hoher z-index, um über allem anderen zu sein */
}

/* Stil für die Lightbox-Inhalte (angepasst an das Impressum-Design) */
.lightbox-content {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* Breite der Lightbox */
  max-width: 600px; /* Maximale Breite der Lightbox */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für einen schwebenden Effekt */
  text-align: left; /* Linksbündiger Text */
  z-index: 1001;
}

/* Stil für den Schließen-Button (angepasst an das Impressum-Design) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: yellow; /* Farbe des Schließen-Buttons */
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

/* CSS für die Anzeige der Lightbox basierend auf :target */
#impressum-popup:target {
  display: block;
}

/* CSS für die Anzeige der Lightbox basierend auf :target */
#cd-list-popup:target {
  display: block;
}

/* Stil für die Datenschutz-Box (ähnlich der Impressum-Box) */
.datenschutz-box {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */
  /* Weitere individuelle Stile für den Datenschutzbereich */
}

/* CSS für die Anzeige der Datenschutz-Lightbox basierend auf :target */
#datenschutz-popup:target {
  display: block;
}

/* Stil für band-info */
#band-info {
  background-color: #333; /* Dunkelgraue Hintergrundfarbe */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand */
  color: #fff; /* Textfarbe */
  margin-top: 20px; /* Abstand nach oben */
  max-height: 80vh; /* Maximale Höhe auf 80% der Bildschirmhöhe begrenzen */
  overflow-y: auto; /* Bei Bedarf vertikalen Scrollbalken anzeigen */
  text-align: center; /* Zentriert den Text horizontal */
}

/* Stil für das Albumcover in der band-info-Box */
#album-cover-in-band-info {
  max-width: 100%; /* Das Albumcover bleibt innerhalb der Box */
  height: auto;
  margin: 0 auto; /* Zentriert das Albumcover horizontal */
}

/* Stil für das <h1>-Element für den Sendername */
#radio-name h1 {
  font-size: 2em; /* Ändern Sie die Schriftgröße nach Bedarf */
  color: yellow; /* Weiße Textfarbe, um den Kontrast zu erhöhen */
  text-align: center; /* Zentriert den Text horizontal */
  margin: 10px; /* Entfernt den Standardabstand */
  padding: 10px; /* Innenabstand für das <h1>-Element */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für verbesserten Kontrast */
  background: rgba(0, 0, 0, 0.5); /* Hintergrundfarbe mit 50% Transparenz */
  border-radius: 15px; /* Abgerundete Ecken */
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#radio-name h1::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 25px; /* Abgerundete Ecken, größer als die Hauptbox */
  z-index: -1;
}

/* Partner */
.partner-art-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.partner-container a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.partner-art-container img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.partner-art-container img:hover {
  transform: scale(1.1);
}

.partner-container img:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.partner-container {
  overflow: hidden;
  margin-top: 20px;
  width: 200px;
  height: 100px;
  padding: 5px;
  background-color: #222;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

/* CD VERKAUF DESIGN */
/* Stil für jede CD-Zeile im Popup */
.cd-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Abstand zwischen den CD-Zeilen */
}

.cd-cover {
  width: 150px;
  height: 150px;
  object-fit: cover; /* Stellt sicher, dass das Bild das Element ausfüllt */
  margin-right: 20px; /* Abstand zwischen Cover und Text */
}

.cd-info {
  flex-grow: 1;
  margin-right: 20px; /* Abstand zwischen Text und Kauf-Button */
}

.cd-buy-button {
  background-color: yellow; /* Farbe des Kauf-Buttons */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase; /* Macht den Text des Buttons groß */
  font-weight: bold;
}

.cd-buy-button:hover {
  background-color: #ffd700; /* Farbe beim Hover */
}

/* Stil für die Lightbox-Inhalte (angepasst für die CD-Liste) */
.lightbox-content.cd-list-box {
  max-height: 80vh; /* Maximale Höhe des Popups */
  overflow-y: auto; /* Ermöglicht vertikales Scrollen, falls nötig */
  width: 60%; /* Breite des Popups */
  padding: 20px; /* Innenabstand */
}

/* Stellt sicher, dass der Inhalt innerhalb der cd-list-box scrollbar ist, falls erforderlich */
#popupContent {
  max-height: calc(
    100% - 40px
  ); /* Berechnet die maximale Höhe abzüglich des Paddings der cd-list-box */
  overflow-y: auto; /* Ermöglicht vertikales Scrollen, falls nötig */
}

/* Responsive Design */
@media (max-width: 768px) {
  .cd-row {
    flex-direction: column;
    align-items: center;
  }

  .cd-cover {
    margin-bottom: 10px; /* Abstand zwischen Cover und Informationen auf kleinen Bildschirmen */
    width: 80%; /* Breiteres Cover auf kleineren Bildschirmen */
    max-width: 200px; /* Maximale Breite des Covers */
    height: auto; /* Erhält das Seitenverhältnis */
  }

  .cd-info {
    text-align: center; /* Zentriert den Text auf kleineren Bildschirmen */
  }

  .cd-buy-button {
    width: 100%; /* Button nimmt die volle Breite ein */
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .cd-cover {
    width: 90%; /* Noch breiteres Cover auf sehr kleinen Bildschirmen */
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #sidebar {
    overflow-y: auto; /* Ermöglicht vertikales Scrollen auf mobilen Geräten */
  }
  .logo-bottom {
    display: none;
  }
}