/*
 * Global base styles
 * Reset margins and paddings to eliminate unwanted gaps between elements.
 * Set box-sizing to border-box so that width and height calculations
 * include padding and borders.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*-------------------------------------------------------------------------------------------------------------------------*/
/*WEBPLAYER*/
/*-------------------------------------------------------------------------------------------------------------------------*/

.volume-dropdown {
  position: relative;
}

#volumeToggle {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #ffffff;
}

#volumeToggle:hover {
  color: #1a1a1a;
}

#volumeContainer {
  position: absolute;
  bottom: -20px;
  left: 470px;
  background: #1a1a1a;
  padding: 0px;
  border-radius: 0px;
  z-index: 100;
}

.hidden {
  display: none;
}

.stream-cover {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0px;   /* RUNDUNGEN WEG */
  margin: 0;            /* KEIN ABSTAND */
  padding: 0;
  border: none;         /* KEIN RAHMEN */
  box-shadow: none;     /* KEIN SHADOW */
  display: block;       /* Sicherstellen, dass’s bündig ist */
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 20px;

  transform: scale(1.0);         /* 👈 skaliert alles auf 80 % */
  transform-origin: bottom right; /* 👈 Skalierung erfolgt ab der Ecke! */

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 0px;
  padding: 0px 0px;
  background-color: #333;
  border-radius: 0;

  width: fit-content;
  max-width: 100%;

  height: 80px;
}





.play-button {
  width: 90px;
  height: 90px;
    padding: 0 0px 0 0; /* 👈 20px Abstand nach links innen */
  background-color: #1c3c63; /* 👈 dunkles Blau */
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="35,25 75,50 35,75" fill="white"/></svg>') no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="35,25 75,50 35,75" fill="white"/></svg>') no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}


.play-button:hover {
  background-color: #ebb400;
}

.info-wrapper {
  position: relative;
  width: fit-content;     /* 👈 skaliert nach Inhalt */
  height: 80px;
  margin-left: 3px;      /* 👈 Abstand vom Rand */
}

.info-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2f3640;
  z-index: 0;
  border-radius: 0;
}

.info-content {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/*-------------------------------------------------------------------------------------------------------------------------*/
/* Standard: Button ist unsichtbar, Menü sichtbar */
/*-------------------------------------------------------------------------------------------------------------------------*/

.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #f5f5f5;
  padding: 1rem;
  cursor: pointer;
}


html, body {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #111;
  color: #eee;
  line-height: 1.5;
  /* Prevent horizontal scrolling caused by wide content */
  overflow-x: hidden;
}

/* Topbar layout */
.topbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background-color: #1a1a1a;
  border-bottom: 2px solid #333;
}

.topbar .logo {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f5f5f5;
  background-color: #222;
  border-right: 2px solid #333;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.navigation {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.navigation a {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #f5f5f5;
  background-color: #222;
  padding: 1rem;
  border-right: 2px solid #333;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
}

.navigation a:last-child {
  border-right: none;
}

.navigation a:hover {
  background-color: #2e2e2e;
}

/* Slideshow banner */
.banner {
  width: 100%;
  background-color: #101010;
}

.slides {
  width: 100%;
  position: relative;
}

.slide {
  width: 100%;
  display: none;
  /* ensure each slide takes up space so there is no gap */
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background-color: #111;
}

.site-banner {
  width: 100%;
  font-weight: bold;
  background-color: #1a1a1a;
  color: #ccc;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.1rem;
  padding: 0.5rem 1rem;
  text-align: center;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  letter-spacing: 1px;
  /* On wider screens keep the text on a single line.  The responsive section
     below will override this on narrow viewports. */
  white-space: nowrap;
  overflow: hidden;
}

.banner-text {
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* Responsive adjustments specifically for the site banner and banner text on
   small screens.  When the viewport is narrow, allow the banner text to
   wrap and reduce the font size so long strings do not overflow the
   layout. */
@media (max-width: 800px) {
  .site-banner {
    font-size: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 0.5rem;
  }
  .banner-text {
    display: block;
    width: 100%;
  }
}


/* Content section */
.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #181818;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.column {
  flex: 1 1 50%;
  min-width: 300px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.left-column {
  background-color: #1f1f1f;
  border-right: 2px solid #333;
}

.right-column {
  background-color: #1f1f1f;
}

.text-box {
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.text-box h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #fff;
}

.text-box p {
  margin-bottom: 1.5rem;
  color: #ddd;
}

.cta-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background-color 0.2s ease-in-out;
}

.cta-button:hover {
  background-color: #444;
}

/* Placeholder for right column image */
.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #2a2a2a;
}



/* Footer styles */
.footer {
  width: 100%;
  background-color: #1a1a1a;
  color: #888;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 2px solid #333;
}

.footer-links {
  display: flex;
  align-items: center;
}

.footer-links a {
  color: #888;
  text-decoration: none;
  padding: 0 0.5rem;
  text-transform: uppercase;
}

.footer-links span {
  color: #555;
}

.footer-links a:hover {
  color: #fff;
}

/* Debugged responsive burger menu styles */

@media (max-width: 800px) {
  .topbar {
    position: relative; /* <-- ensures .navigation can position absolute inside */
    z-index: 100;
  }

  .menu-toggle {
    display: block;
  }

  .navigation {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #222;
    z-index: 9999; /* <-- force to front */
  }

  .navigation.active {
    display: flex;
  }

  .navigation a {
    padding: 1rem;
    border-bottom: 1px solid #333;
    color: white;
    text-decoration: none;
  }

  .navigation a:last-child {
    border-bottom: none;
  }
}


@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .footer-links a,
  .footer-links span {
    padding: 0.25rem 0;
  }
}