* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

header nav ul {
  list-style: none;
  padding: 0;
}

header nav ul li {
  display: inline;
  margin-right: 15px;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
}

header nav ul li a:hover {
  color: #ff6f61;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.hero {
  position: relative;
  height: 500px; /* Höhe des Hero-Bereichs */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden; /* Verhindert, dass das Bild über den Bereich hinausgeht */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Halbtransparentes Schwarz */
  z-index: 0; /* Unter dem Text */
}

.hero-content {
  position: relative;
  z-index: 1; /* Stellt sicher, dass der Inhalt über dem Bild liegt */
  color: #fff; /* Weißer Text */
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild so skalieren, dass es den gesamten Bereich abdeckt */
  z-index: -1; /* Bild hinter den Inhalt legen */
}

.hero-content h2 {
  font-size: 2rem;
  margin-top: 0; /* Optional: Verhindert Abstand nach oben */
  color: #fff; /* Weißer Text */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Schwarzer Schatten mit leichten Unschärfe-Effekt */
}

.hero-content p {
  font-size: 1.2rem;
  color: #fff; /* Weißer Text */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Schwarzer Schatten für besseren Kontrast */
}

.cta {
  background-color: #ff6f61;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
  display: inline-block;
}

.section {
  padding: 60px 20px; /* Erhöht das Padding für mehr Platz */
  text-align: center;
  background-color: #f4f4f4; /* Heller Hintergrund für besseren Kontrast */
}

.section h2 {
  font-size: 2.5rem; /* Größere Schriftgröße für die Überschrift */
  margin-bottom: 20px;
  color: #333; /* Dunkle Farbe für bessere Lesbarkeit */
}

.section p {
  font-size: 1.2rem; /* Größere Schriftgröße für den Text */
  color: #555; /* Etwas hellere Farbe für besseren Kontrast */
  line-height: 1.8; /* Mehr Zeilenhöhe für bessere Lesbarkeit */
  max-width: 800px; /* Maximale Breite für besseren Textfluss */
  margin: 0 auto; /* Zentriert den Text innerhalb der Sektion */
  padding: 0 20px; /* Fügt etwas Innenabstand hinzu */
  text-align: justify; /* Erzeugt eine blockartige Textausrichtung */
}

.services {
  display: flex;
  justify-content: space-around;
}

.service-item {
  flex: 1;
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.gallery-section .gallery {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.gallery-section .gallery-item {
  flex: 1;
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.gallery-section .gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.contact-info {
  display: flex;
  flex-wrap: wrap; /* Erlaubt das Umbrechen der Kontaktpersonen in die nächste Zeile bei Bedarf */
  gap: 20px; /* Abstand zwischen den Kontaktpersonen */
  justify-content: center; /* Zentriert die Kontaktpersonen innerhalb des Containers */
  margin-top: 20px;
  padding: 0 20px; /* Innenabstand für bessere Darstellung */
}

.contact-person {
  flex: 1 1 200px; /* Stellt sicher, dass die Kontaktpersonen ausreichend Platz haben und sich bei Bedarf anpassen */
  display: flex;
  flex-direction: column; /* Stellt sicher, dass der Inhalt vertikal angeordnet ist */
  align-items: center; /* Zentriert den Inhalt horizontal */
  text-align: center; /* Zentriert den Text innerhalb der Kontaktperson */
  padding: 20px; /* Innenabstand */
  background-color: transparent; /* Entfernt den Hintergrund */
  border: none; /* Entfernt die Umrandung */
}

.contact-person h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.contact-person p {
  font-size: 1rem;
  margin: 0; /* Entfernt den unteren Abstand */
  color: #666;
}

/* Optional: Anpassungen für sehr kleine Bildschirme */
@media (max-width: 600px) {
  .contact-info {
    flex-direction: column; /* Stellt sicher, dass die Kontaktpersonen untereinander angezeigt werden */
    align-items: center; /* Zentriert die Kontaktpersonen auf kleinen Bildschirmen */
  }

  .contact-person {
    flex: 1 1 100%; /* Vollbreite für kleinere Bildschirme */
    margin-bottom: 20px; /* Abstand zwischen den Kontaktpersonen */
  }
}

/* Optional: Anpassungen für sehr kleine Bildschirme */
@media (max-width: 600px) {
  .contact-info {
    flex-direction: column; /* Stellt sicher, dass die Kontaktpersonen untereinander angezeigt werden */
  }

  .contact-person {
    flex: 1 1 100%; /* Vollbreite für kleinere Bildschirme */
    margin-bottom: 20px; /* Abstand zwischen den Kontaktpersonen */
  }
}

.map {
  margin-top: 20px;
  text-align: center;
}

.map iframe {
  width: 50%; /* Vollbreite */
  height: 300px; /* Höhe anpassen */
  border: none;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

footer nav ul {
  list-style: none;
  padding: 0;
}

footer nav ul li {
  display: inline;
  margin-right: 15px;
}

footer nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Leistungen Section */
/* Leistungen Section */
.services {
  display: flex;
  flex-wrap: wrap; /* Ermöglicht Umbruch bei kleineren Bildschirmen */
  gap: 20px; /* Abstand zwischen den Boxen */
  justify-content: center; /* Zentriert die Boxen im Container */
  padding: 40px 20px;
  background-color: #f4f4f4; /* Heller Hintergrund für die gesamte Sektion */
}

.service-item {
  flex: 1 1 300px; /* Flexibles Layout für eine bestimmte Breite, kann angepasst werden */
  padding: 20px;
  margin: 10px;
  background-color: transparent; /* Kein Hintergrund für die Boxen */
  border: none; /* Kein Rahmen um die Boxen */
  box-shadow: none; /* Kein Schatten für die Boxen */
  text-align: center; /* Zentriert den Text innerhalb der Box */
}

.service-item img {
  width: 100%; /* Bild auf die Breite des Containers anpassen */
  max-width: 350px; /* Maximale Breite des Bildes */
  height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu erhalten */
  margin-bottom: 10px; /* Abstand zwischen Bild und Text */
}

.service-item h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #333; /* Dunkle Farbe für die Überschrift */
}

.service-item p {
  font-size: 1rem;
  color: #666; /* Etwas hellere Farbe für den Beschreibungstext */
  line-height: 1.6; /* Mehr Zeilenhöhe für bessere Lesbarkeit */
}

/* Impressum Section Styles */
.impressum-section {
  display: flex;
  justify-content: center; /* Zentriere horizontal */
  align-items: center; /* Zentriere vertikal */
  height: 80vh; /* Höhe der Section auf 80% der Viewport-Höhe setzen */
  text-align: center; /* Zentriere den Text */
  padding: 20px; /* Füge Polsterung hinzu */
}

/* Highlight Style (optional für Textbereich) */
.highlight {
  max-width: 800px; /* Begrenze die Breite, um den Text lesbarer zu machen */
  margin: auto; /* Zentriere das Div innerhalb der Section */
}