/* Allgemeine Stile */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #333; /* Dunkelgrau für den Text */
  background-color: #fff; /* Weißer Seitenhintergrund */
  line-height: 1.6;
  text-align: left; /* Text linksbündig */
}

/* Header-Stil */
header {
  background-color: #fff; /* Weißer Header */
  color: #333; /* Dunkelgrauer Text */
  padding: 20px;
  border-bottom: 1px solid #e0e0e0; /* Sehr helle Linie */
  position: relative;
  z-index: 100; /* Sicherstellen, dass der Header über dem Hintergrund liegt */
  display: flex;
  align-items: center;
  gap: 0px; /* Abstand zwischen Logo und Text */
}

header .logo {
  height: 85px; /* Größeres Logo */
  vertical-align: middle;
}

header .header-title {
  line-height: 1.2; /* Höhere Zeilenhöhe für den Zeilenumbruch */
}

header .header-title h1 {
  font-size: 30px; /* Größerer Titel */
  margin: 0;
}

header .header-title p {
  font-size: 16px; /* Größerer Untertitel */
  margin: 0;
  color: #777; /* Sehr hellgrau für Untertitel */
  white-space: pre-line; /* Ermöglicht Zeilenumbruch */
}


/* Navigation-Leiste */
nav {
  min-height: 55px;
  background-color: #fff;
  color: #333;
  padding: 20px 0px;
  padding-left: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  z-index: 100;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  margin-left: 10px;
}

.nav-links a {
  color: #333; /* Dunkelgrauer Text */
  text-decoration: none;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}

.language-switch {
  margin-right: 0px; /* Optionaler Abstand zum rechten Rand */
}

.language-switch button {
  background: none;
  border: none;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 10px;
}

.language-switch button.active {
  text-decoration: underline;
}

/* Hauptinhalt */
main {
  padding: 0;
  background-color: #fff; /* Weißer Hintergrund */
}

section {
  padding: 50px 20px; /* Innenabstand bleibt */
  margin: 0 auto;
  max-width: 650px; /* Begrenzte Breite für Lesbarkeit */
  border-bottom: 1px solid #e0e0e0; /* Sehr helle Linie am unteren Rand */
}

section:last-of-type {
  border-bottom: none; /* Keine Linie unter dem letzten Abschnitt */
}

section h1 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333; /* Dunkelgrauer Text */
}

/* Kontaktformular */
.form-container {
  max-width: 575px; /* Breite des Formulars, etwas kleiner als die des Abschnitts */
  margin: 0 auto;    /* Zentriert den Container innerhalb des Abschnitts */
}

form {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Formularelemente linksbündig */
  width: 100%;
}

form label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333; /* Dunkelgrauer Text */
  width: 100%;
}

form input, form textarea, form button {
  font-size: 16px;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e0e0e0; /* Sehr helle Umrandung */
  border-radius: 5px;
  box-sizing: border-box;
}

form button {
  font-size: 16px;
  background-color: #fff; /* Weißer Hintergrund für den Button */
  color: #333; /* Dunkelgrauer Text */
  border: 1px solid #e0e0e0; /* Sehr helle Umrandung */
  cursor: pointer;
  padding: 10px 15px;
  font-weight: bold;
}

form button:hover {
  background-color: #f4f4f4; /* Sehr hellgraues Hover */
}

/* Footer */
footer {
  background-color: #fff; /* Weißer Footer */
  color: #333; /* Dunkelgrauer Text */
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0; /* Abtrennung nach oben */
}

footer a {
  color: #333; /* Dunkelgrauer Text */
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Responsivität */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    gap: 10px;
  }

  .language-switch {
    margin-top: 10px;
  }
}