/* Grundlegende Stile für Body und HTML */
body, html {
  margin: 0;
  padding: 0%;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Verhindert horizontalen Scrollbalken */
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 1.05em;
}

/* Stile für Überschriften und Text */
h1, h2, h3, ul, p {

  letter-spacing: 1px;
  color: #882800;
}

h1, h2, h3 {
  color: #f39400;
}

h1 {
	padding-top: 50px;
}

ul {
  line-height: 1.8;
}

p {
  padding-bottom: 3%;
  line-height: 1.6;
}

a {
  text-decoration: underline;
	  color: #882800;

}

/* Navigation */

.menu-icon {
  display: none;
  font-size: 30px;
  cursor: pointer;
  color: dimgrey;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 100;
  background-color: white; /* Weißer Hintergrund für das Hamburger-Symbol */
  padding: 10px;
  border-radius: 5px; /* Optional: Abgerundete Ecken für das Symbol */
}

.menu-toggle {
  display: none;
}

.topnav a.logo {
  padding: 0;
}

.topnav a.logo img {
  height: 30px; /* Anpassung der Höhe des Logos nach Bedarf */
  padding: 7px 16px; /* Gleiche vertikale Padding wie bei den Links */
}

.topnav {
  overflow: hidden;
  background-color: #333;
  width: 100%;
  margin: auto;
  transition: max-height 0.3s;
  position: fixed; /* Fixiert die Navigation */
  top: 0; /* Oben auf der Seite */
  left: 0; /* Links ausgerichtet */
  right: 0; /* Rechts ausgerichtet */
  z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #892804;
  color: white;
}

 .close-btn {
    display: none;
  }

/* Parallax-Sektionen */
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh; /* 100% der Ansichtsfensterhöhe */
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Hinzufügen, um sicherzustellen, dass Padding berücksichtigt wird */
}

.parallax1 { background-image: url('bilder/bg1.jpg'); }
.parallax2 { background-image: url('bilder/bg2.jpg'); }
.parallax3 { background-image: url('bilder/bg3.jpg'); }
.parallax4 { background-image: url('bilder/bg4.jpg'); }
.parallax5 { background-image: url('bilder/bg5.jpg'); }
.parallax6 {
  background-image: url('bilder/bg6.jpg');
  height: 300px;
}
.parallax7 {
  background-image: url('bilder/bg7.jpg');
  height: 600px;
  background-position: top;
}
.parallax8 {
  background-image: url('bilder/bg8.jpg');
  background-position: top;
}

/* Footer */
.footer {
  display: flex; /* Flexbox hinzufügen */
  align-items: flex-end; /* Elemente am unteren Rand ausrichten */
  justify-content: center; /* Elemente zentrieren */
  background-image: url(bilder/footer_bg.png);
  background-position: center;
  background-size: cover;
  color: #f7f7f7;
  font-size: 15px;
  text-align: center;
  width: 100%;
  height: 50px;
  padding-bottom: 15px;
  box-sizing: border-box;
  position: fixed; /* Position fixieren */
  bottom: 0; /* Am unteren Rand des Bildschirms anzeigen */
  left: 0; /* Am linken Rand des Bildschirms ausrichten */
  right: 0; /* Am rechten Rand des Bildschirms ausrichten */
  z-index: 101;
}

.footer a {
  text-decoration: underline;
  color: #f7f7f7;
  font-size: 15px;
}



/* Layouts */
.three-column-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  box-sizing: border-box; /* Hinzufügen, um sicherzustellen, dass Padding berücksichtigt wird */
}

.two-column-layout {
  display: grid;
  grid-template-columns: 66% 34%;
  gap: 20px;
  box-sizing: border-box; /* Hinzufügen, um sicherzustellen, dass Padding berücksichtigt wird */
  padding-left: 7%;
  padding-right: 7%;
}

.one-column-layout {
  box-sizing: border-box; /* Hinzufügen, um sicherzustellen, dass Padding berücksichtigt wird */
  padding-left: 7%;
  padding-right: 7%;
}

.two-column-layout.contact-costs-section {
  grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
  box-sizing: border-box; /* Hinzufügen, um sicherzustellen, dass Padding berücksichtigt wird */
}

.welcome-section {
  position: relative; /* Notwendig für das Pseudo-Element */
  background-color: white; /* Weißer Hintergrund für den Content-Bereich */
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: space-between; /* Abstand zwischen den Spalten */
}

.welcome-section::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px; /* Höhe des Pseudo-Elements nach Bedarf anpassen */
  background-image: url('bilder/header.png');
  background-repeat: no-repeat;
  background-size: cover; /* Stellt sicher, dass das Bild die gesamte Breite abdeckt */
  background-position: top center; /* Zentriert das Bild an der Oberkante */
  z-index: 1; /* Höherer z-index als der Content-Bereich */
}

.welcome-section .column {
  position: relative;
  z-index: 2; /* Höherer z-index als das Pseudo-Element */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Zentriert den Inhalt vertikal */
}

.welcome-section .column img {
  max-width: 100%;
  height: auto;
  align-self: center; /* Bild horizontal zentrieren */
  border-radius: 15px; /* Abgerundete Ecken hinzufügen */
}

.column img, .logo img {
  max-width: 100%;
  height: auto;
  align-self: center; /* Bilder vertikal zentrieren */
}

.logo-row {
  padding-top: 10%;
  padding-bottom: 10%;
  display: flex;
  justify-content: space-between; /* Logos gleichmäßig verteilen */
  align-items: center; /* Logos vertikal zentrieren */
  gap: 50px; /* Abstand zwischen den Logos */
}

.logo-row .logo {
  flex: 1;
  padding: 0 40px; /* Größeren Abstand zwischen den Logos */
}

.logo-row .logo img {
  max-width: 100%;
  height: auto;
}