/* Globale Einstellungen */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  border: none !important; /* Entferne jegliche Ränder */
  box-shadow: none !important; /* Entferne jegliche Box-Schatten */
}

/* Variablen */
:root {
  --color-black: #161616;
  --color-white: #fff;
  --desktop: 1200px;
  --laptop: 1024px;
  --tablet: 768px;
  --phone: 480px;
}

body, html {
  height: 100%;
  background: var(--color-black);
  color: #b3aca7;
}

/* Styling für Dropdown-Inhalte */
.w3-dropdown-content a {
  color: #b3aca7;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: var(--color-black);
}

/* Styling für den Dropdown-Button */
.w3-dropdown-hover button {
  background-color: var(--color-black);
  color: #b3aca7;
  padding: 12px 16px;
  font-size: 16px;
  outline: none;
}

/* Menüleiste (w3-top) */
.w3-top {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--color-black);
  z-index: 9999; /* Hoher Z-Index, damit die Menüleiste über anderen Inhalten bleibt */
  padding: 0 !important;  /* Entferne Padding von der Leiste */
  margin: 0 !important;   /* Entferne jegliche Margin */
}

/* Allgemeines Styling für Menüleiste */
.w3-wide {
  letter-spacing: 1px;
}

.w3-bar {
  padding: 10px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Buttons in der Menüleiste */
.w3-bar .w3-button {
  padding: 10px 20px;
}

@media (max-width: var(--tablet)) {
  .w3-bar .w3-button {
    padding: 8px 16px;
  }
}

@media (max-width: var(--phone)) {
  .w3-bar {
    flex-direction: column;
    align-items: center;
  }

  .w3-bar .w3-button {
    padding: 6px 12px;
    width: 100%; /* Vollständige Breite für jedes Menüelement */
    text-align: center;
  }
}

@media (max-width: 480px) {
  .w3-top .w3-bar .w3-button {
    font-size: 0.875em; /* Verkleinere die Schriftgröße der Menüpunkte */
    padding: 6px 12px;
    margin: 0.1em;
    margin-top: 0.5em;
  }
}

/* Entferne Padding und Margins von den Dropdown-Buttons */
.w3-dropdown-hover button,
.w3-bar .w3-button {
  padding: 0 !important;
  margin: 0 !important;
}



/* Footer Styles */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #161616;
  padding: 10px 20px;
  text-align: center;
  color: #b3aca7;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

.footer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.footer-text h4, .footer-text p {
  margin: 0;
  color: #fff;
  font-size: 0.9em;
}

.footer-about {
  margin-top: 10px;
  max-width: 500px;
  margin: 0 auto;
  color: #b3aca7;
  font-size: 0.8em;
}

.footer-about h5 {
  color: #fff;
  margin-bottom: 5px;
  font-size: 1em;
}

.footer-about p {
  margin: 0;
  font-size: 0.85em;
}

@media (max-width: 600px) {
  .footer-avatar {
      width: 40px;
      height: 40px;
  }
  
  .footer-text h4, .footer-text p, .footer-about p {
      font-size: 0.8em;
  }

  .footer-about {
      font-size: 0.7em;
  }
}