body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f8ff; /* Light Blue */
  position: relative; /* Body wird relativ positioniert */
}

.container {
  margin: 0 auto;
  padding: 5px 50px; /* Anpassung des Seitenabstands */
  background: linear-gradient(to right, #ffffff, #f0f8ff); /* Farbverlauf für Seiten */
  min-height: 5vh; /* Container nimmt ca. 10% des Viewports ein */
  box-sizing: border-box; /* Padding wird innerhalb der Gesamtgröße des Containers berücksichtigt */
  display: flex; /* Anwendung von Flexbox */
  align-items: center; /* Zentrieren der Elemente vertikal */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten für Container */
  border-radius: 10px; /* Abgerundete Ecken für Container */
  position: fixed; /* Container wird fixiert */
  top: 0; /* Container wird oben auf der Seite platziert */
  width: 100%; /* Breite des Containers */
  z-index: 1000; /* Z-Index, um sicherzustellen, dass der Container über dem Inhalt liegt */
}

header {
  background-color: #f0f8ff; /* Blue */
  padding: 10px 0;
  flex: 1; /* Verteilt den verfügbaren Platz zwischen Logo und Menü */
}

.logo {
  text-align: left;
  margin-right: 10px; /* Verschiebung des Logos vom rechten Rand */
}

.logo img {
  max-width: 100px;
}

nav {
  text-align: right;
  height: 100px; /* Höhe des Menüs auf Höhe des Logos festlegen */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%; /* Menü soll die gesamte Höhe des Containers einnehmen */
  display: flex; /* Anwendung von Flexbox für vertikale Ausrichtung */
  align-items: center; /* Zentrieren der Menüpunkte vertikal */
}

nav ul li {
  display: inline;
  margin-left: 20px;
}

nav ul li:first-child {
  margin-left: 0;
}

nav ul li a {
  color: #000000; /* Black */
  text-decoration: none;
  transition: color 0.3s ease; /* Übergangseffekt für Farbänderungen */
}

nav ul li a:hover {
  color: #555555; /* Dunkleres Schwarz beim Hovern */
}


/* Neue Klasse für Inhaltsseiten */
.content {
  padding: 20px; /* Abstand zum Header */
  margin-top: 100px; /* Abstand zum Container */
  width: calc(100% - 100px); /* Gleiche Breite wie Container abzüglich des Logo-Margin */
  margin-left: auto; /* Zentrieren des Inhalts horizontal */
  margin-right: auto; /* Zentrieren des Inhalts horizontal */
  min-height: calc(80vh); /* Mindesthöhe, sodass der Container ca. 10% einnimmt */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten für Inhaltsseiten */
  background-color: #ffffff; /* Weißer Hintergrund für Inhaltsseiten */
  border-radius: 10px; /* Abgerundete Ecken für Inhaltsseiten */
}