/* header.css */

/* Grundlegende Link-Stile */
a, a:visited, a:hover, a:active {
  text-decoration: none; /* Keine Unterstreichung */
  transition: opacity 0.3s ease; /* Fügt einen sanften Übergang für die Opazität hinzu */
  cursor: pointer;
  color: black;
  font-weight: bold;
}

/* Reset von Margins und Padding, um Konsistenz über verschiedene Browser hinweg zu gewährleisten */
body, h1, p, nav, ul, li, a, .social-media {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Box-Modell für die Breitenberechnung von Elementen */
}

/* Grundlegende Stile für den Body */
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: black;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Stil für den Header-Bereich */
.header {
  display: flex;
  align-items: flex-end; /* Elemente am unteren Rand ausrichten */
  justify-content: space-between; /* Elemente im Header verteilen */
  padding: 0 20px;
}

.logo {
  max-height: 130px; /* Begrenzt die Höhe des Logos */
}

/* Hover-Effekt für alle Links - Halbtransparenz */
header a:hover, footer a:hover {
  opacity: 0.5; /* Setzt die Opazität auf 50% beim Hovern */
}

/* Stile für das Menü */
.menu {
  display: flex;
  justify-content: center; /* Richtet das Menu zentriert aus */
  flex-grow: 1; /* Erlaubt dem Menü, verfügbaren Platz zu nutzen */
  font-size: 20px;
}

.menu-container {
  flex-grow: 1; /* Menü wächst wenn es Platz hat */
  text-align: center;
}

/* Stile für Menü-Liste */
.menu ul {
  list-style-type: none; /* Entfernt Listenaufzählungszeichen */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stile für Menü-Listenelemente */
.menu li {
  padding: 10px 20px;
}

/* Stile für Social-Media-Bereich */
.social-media {
  margin-left: auto; /* Positioniert rechts */
  margin-bottom: 10px; /* Abstand nach unten */
  display: flex;
  align-items: center;
}

/* Stile für Social-Media-Bilder */
.social-media img {
  width: 24px; /* Größe der Icons */
  height: auto; /* Automatische Höhe beibehalten */
  margin: 0 5px; /* Horizontaler Abstand zwischen Icons */
}

/* Stile für Hamburger-Menü */
.hamburger-menu {
  display: none; /* Standardmäßig versteckt */
  cursor: pointer; /* Cursor-Stil als Hinweis für Klickbarkeit */
}

/* Stile für Hamburger-Menü-Balken */
.hamburger-menu .bar {
  width: 25px; /* Breite der Balken */
  height: 3px; /* Höhe der Balken */
  background-color: black; /* Farbe der Balken */
  margin: 5px 0; /* Abstand zwischen den Balken */
  transition: 0.4s; /* Übergangseffekt für Animationen */
}

/* Stile für Sprachumschalter */
.language-switch {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

/* Stile für Sprachumschalter-Links */
.language-switch a {
  margin: 0 5px;
}

/* Media Query für schmale Bildschirme */
@media screen and (max-width: 1238px) {
  .header {
    flex-direction: column; /* Stapelt die Elemente vertikal */
    align-items: center; /* Zentriert die Elemente im Header */
  }
  .logo {
    max-height: 100px; /* Begrenzt die Höhe des Logos */
  }

  .menu, .social-media {
    flex: 1; /* Erlaubt diesen Elementen, den verfügbaren Platz zu nutzen */
  }

  .menu {
    width: 100%; /* Stellt sicher, dass das Menü den gesamten verfügbaren Platz einnimmt */
    align-items: left;
  }

  .hamburger-menu {
    display: block; /* Zeigt das Hamburger-Menü an */
    padding: 10px 0; /* Abstand oben und unten */
  }

  .menu ul {
    display: none; /* Versteckt das Menü zunächst */
    flex-direction: column; /* Vertikale Anordnung der Menüpunkte */
  }

  .menu.active ul {
    display: flex; /* Zeigt das Menü an, wenn 'active' */
    align-items: flex-start; /* Linksseitige Ausrichtung */
  }

  /* Den Hamburger in ein X verwandeln */
  .menu.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px); /* neigen */
  }
  .menu.active .bar:nth-child(2) {
    opacity: 0; /* entfernen */
  }
  .menu.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px); /* neigen */
  }
}