/* CSS für die Kopfzeile */
.header {
  background-color: #fff; /* Weiße Hintergrundfarbe der Kopfzeile */
  color: #333; /* Schriftfarbe der Kopfzeile */
  padding: 20px; /* Innenabstand der Kopfzeile */
  position: fixed; /* Fixierung am oberen Bildschirmrand */
  top: 0; /* Oben am Bildschirm */
  width: 100%; /* Vollständige Breite des Bildschirms */
  z-index: 5000; /* Über dem Rest der Seite, aber unter dem Popup-Menü */
  border-bottom: 1px solid #ccc; /* Horizontale Linie unter der Kopfzeile */
}

/* Hier deine CSS-Stile einfügen */
.logo img {
    height: 80px;
  }
  .menu-btn {
    height: 50px;
}
 
/* CSS für das Logo */
.logo {
  float: left; /* Logo links ausrichten */
}

/* CSS für den Menüpunkt "Menü öffnen" */
.menu-open {
  float: right; /* Menüpunkt rechts ausrichten */
  width: 5px; 
  height: 5px;
  margin-top: 20px; /* Oberer Abstand */
  margin-right: 20px; /* 100px Abstand zum rechten Rand */;
  z-index: 7000;
}
.menu-lang {
  float: right; /*Menüpunkt rechts ausrichten */
  width: 5px; 
  height: 5px;
  margin-top: 30px; /* Oberer Abstand */
  margin-right: 162px; /* 100px Abstand zum rechten Rand */;
  z-index: 7000;
}
/* CSS für die Button-Icons "Menü öffnen" */
.btn-open {
  width: 35px; 
  height: 35px;
  border: 2px solid  #838383ee; 
  border-radius: 5px; /* Abgerundete Ecken, optional */
}
.btn-en-de {
  width: 35px; 
  height: 35px;
  border: 2px solid  #838383ee;
  border-radius: 5px; /* Abgerundete Ecken, optional */
}
/* CSS für die Button-Icons "Menü öffnen" */
.btn-close {
  width: 35px; 
  height: 35px;
  max-width: 35px;
  color: #838383ee;
  border: 2px solid  #838383ee; 
  border-radius: 5px; /* Abgerundete Ecken, optional */
  list-style: none;
}

button {
  position: fixed;
  top: 40px;
  right: 20px;
  padding: 10px 20px;
  background-color: white;
  border: 5px;
  border-radius: 5px;
  cursor: pointer;
}
/* CSS für das Popup-Menü */
.popup {
  position: fixed; /* Fixierung am Bildschirm */
  top: -100%; /* Startposition oben außerhalb des sichtbaren Bereichs */
  /*  top: 0; Oben am Bildschirm */
  right: 0; /* Rechts am Bildschirm */
  width: 100%; /* Breite des Menüs */
  height: 100%; /* Vollständige Höhe des Bildschirms */
  background-color: #fffffff4; /* Halbtransparenter schwarzer Hintergrund */
  color: #838383ee; 
  font-weight: bold;
  text-align: right; /* Rechtsbuendige Ausrichtung des Textes */
  z-index: 9999; /* Über dem Rest der Seite */
  padding: 34px; /* Innenabstand des Menüs */
  box-sizing: border-box; /* Berücksichtigt Padding und Border in der Breite und Höhe */
  transition: top 0.5s ease; /* Animiere die top-Eigenschaft */
}
.popup.open {
  top: 0; /* Positionierung des Menüs, um es einzublenden */
}

.popup-content a {
  color: #838383f8;
  text-decoration: none;
  display: block;
  font-size: 20px; /* Größe der Schrift im Menü */
  margin-top: 15px; /* Abstand zwischen den Menüpunkten */
  margin-right: 5px;
  display: block; /* Popup anzeigen */
}

.popup-content a:hover {
  color: blue; /* Hintergrundfarbe beim Überfahren */
   font: bold;
}
.popup-close a {
  color: #838383ee;
  text-decoration: none;
  display: block;
  font-size: 20px; /* Größe der Schrift im Menü */
  margin-top: 15px; /* Abstand zwischen den Menüpunkten */
  margin-right: 5px;
  display: block; /* Popup anzeigen */
}

/* CSS für den Inhalt der Seite */
.content {
  margin-left: 5px; 
  margin-top: 90px; /* Platz lassen für die fixierte Kopfzeile */
  width: 95%;
  color: #838383ee;
  padding: 20px; /* Innenabstand des Inhalts */
  font-family: Arial, Helvetica, sans-serif; /* Schriftart für den Inhalt */
}

#csBild {
  position: absolute;
  transition: filter 1s ease-in-out; /* Übergangseffekt für die Opazität */
}

/* CSS für den Kontakt der Seite */
.contact {
  margin-left: 18px; 
  color: #838383ee;
  font-family: Arial, Helvetica, sans-serif; /* Schriftart für den Inhalt */
  font-size: medium;
}