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

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

/* 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 {
  background-color: #181818;
  border-top: 2px solid #333;
  color: #ccc;
  padding: 2rem 1.5rem;
}

.footer-section {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #333;
  padding-bottom: 1rem;
  gap: 2rem;
  justify-content: space-between;
}

.footer-column {
  flex: 1 1 220px;
  min-width: 200px;
}

.footer-column h3 {
  color: #c4950a;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-bottom: 1px solid #333;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  letter-spacing: 0.5px;
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column li {
  margin: 0.3rem 0;
}

.footer-column a {
  color: #eee;
  text-decoration: none;
}

.footer-column a:hover {
  color: #c4950a;
  text-decoration: underline;
}

.footer-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8rem;
  font-size: 0.85rem;
  color: #aaa;
}

.status-online {
  color: #4cff69;
  font-weight: bold;
}

.status-count {
  color: #c4950a;
}


@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 800px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}

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