/* Entfernt Standardabstände und sorgt für konsistente Box-Größen */
* {
  margin: 0; 							/* Standard-Außenabstände */
  padding: 0;							/* Standard-Innenabstände */
  box-sizing: border-box; 				
}

/* Body-Styling */
body {
  background-color: #f5f5f5; 						
  font-family: "Segoe UI", Times, serif;
  padding-top: 10px; 								
}

/* Überschriften von unseren Seiten*/
h1 {
  color: #80367C;
  font-family: "Segoe UI", Times, serif;
  padding-left: 40px;
}

h2 {
  color: #80367C;
  font-family: "Segoe UI", Times, serif;
  padding-left: 50px;
}

h3 {
  color: #80367C;
font-family: "Segoe UI", Times, serif;
  padding-left: 50px;
}
								

/* Styling für unsere Absätze */
p {
  color: black;
  font-family: "Segoe UI", Times, serif;
  padding-left: 40px; 				
}

/* Flexbox-Container */
.green-house {
  display: flex; 						/* Aktiviert Flexbox */
  justify-content: space-between; 		/* Gleicher Platz zwischen Boxen */
  align-items: stretch; 				/* Gleiche Höhe für beide Boxen */
  padding: 40px; 						/* Innenabstand */
  gap: 20px; 							/* Abstand zwischen den Boxen */
}

/* Linke Box im Flex-Container */
.left-box {
  flex: 1; 								
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column; 				
  justify-content: space-between; 		
}

/* Zentrierte Überschriften in der linken Box */
.left-box h1, .left-box h2, .left-box h3 {
  text-align: center; /* Zentriert den Text horizontal */
}
/* Linke Box überschrift 1 - grün, schriftgröße*/
.left-box h1 {
  color: #80367C;
  font-size: 30px;
  margin-bottom: 20px;				/* Abstand unterhalb der Überschrift */
}

/* Linke Box- Absatz Abstand */
.left-box p {
  margin-bottom: 15px;				/* Abstand unter jedem Absatz */
  line-height: 1.6; 				/* Zeilenhöhe für bessere Lesbarkeit */
  color: #555;						/* Grau für Textfarbe */
}

/* Konfigurator - bereich */
.configurator {
  display: flex; 					/* Flexbox wird aktiviert */
  flex-direction: column; 			/* Elemente untereinander */
  align-items: center; 				/* Zentriert die Buttons */
  margin-top: 20px;					/* Abstand nach oben */
}

/* Buttons im Konfigurator */
.configurator button {
  margin: 10px 5px;				
  padding: 10px 20px;			
  border: none;					
  background-color: #ff69b4;		/* Grüner Hintergrund */
  color: #fff;						/* Weißer Text */
  font-size: 16px; 					/*schriftgröße button*/
  border-radius: 5px;				/* Abgerundete Ecken */
  cursor: pointer;					/* Cursor wechselt zu Zeigefinger beim Hover */
}

/* Zentrierte Überschriften in der linken Box */
.left-box h2, .left-box h3 {
  text-align: center; 
  margin: 0 auto;     
  padding: 0;         
}

/* Rechte Box */
.right-box {
  flex: 1; 								
  padding: 20px;
  background-color: #fff; 				
  border-radius: 10px;
  display: flex; 						
  align-items: center; 					
  justify-content: center; 				
}

/* Bild in der rechten Box */
.right-box img {
  max-width: 100%; 					
  max-height: 100%; 					
  object-fit: cover; 					
  border-radius: 10px; 				
}

/* Navigationsleiste */
.navbar {
  border-bottom: 2px solid #A9A9A9; /* Schwarze Linie unter der Navigation */
	padding-bottom: 10px;  
}

.navbar ul {
  list-style-type: none;                
  text-align: center;                   
}

/* Listen-Elemente der Navbar */
.navbar ul li {
  display: inline;						
  margin: 0 60px;						
}

/* Links in der Navigationsleiste */
.navbar ul li a {
  color: black;  
  text-decoration: none;  
  padding: 0 10px;  
  display: inline-block;  
  border-radius: 5px;  
  transition: background-color 0.3s ease;  
}

/* Hover-Effekt für Links in der Navbar */
.navbar ul li a:hover {
  color: white;  /* Textfarbe wechselt zu Weiß */
}

/* Spezifische Hover-Regeln für einzelne Links */

/* Ratgeber - Hintergrundfarbe beim Hover auf Blau */
.navbar ul li a[href="unterseiten/ratgeber.html"]:hover {
  background-color: #007bff;  /* Blau */
}

/* Kontakt - Hintergrundfarbe beim Hover auf Grün */
.navbar ul li a[href="unterseiten/kontakt.html"]:hover {
  background-color: #28a745;  /* Gruen */
}

/* Impressum - Hintergrundfarbe beim Hover auf orange */
.navbar ul li a[href="unterseiten/impressumdatenschutz.html"]:hover {
  background-color: #FF8C00;  /* orange */
}



/* Spezifische Regel für das Logo */
.navbar ul li a img.logo {
  width: 40px; 
  height: auto; 
  display: inline-block; 
  transition: transform 0.3s ease; 
  background-color: transparent; 
}

/* Verhindert den Hintergrund beim Hover über das Logo */
.navbar ul li a:hover img.logo {
  background-color: transparent; 
  transform: scale(1.1); 
}

/* Zusätzliche Regel, um das Bild beim Hover zu ändern */
.navbar ul li a img.logo:hover {
  content: url("bilder/logolila.png"); /* Ändert das Bild beim Hover */
}


/* Dropdown Button */
.dropbtn {
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-top: 10px; 
}

/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
  margin-top: 10px; /* Abstand nach oben zum Dropdown-Button hin */
}

/* Dropdown Content (die versteckten Links) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease; 
}

/* Styling der Links innerhalb des Dropdown-Inhalts */
.dropdown-content a {
  color: black;
  padding: 12px 20px;  /* Mehr Abstand zwischen den Links */
  text-decoration: none;
  display: block;  /* Links als Block-Elemente darstellen */
  transition: background-color 0.3s ease;
  border-radius: 5px;  /* Abgerundete Ecken für den Hover-Effekt */
  margin-bottom: 10px;  /* Abstand zwischen den Dropdown-Links */
}

/* Hover-Effekt für Links im Dropdown */
.dropdown-content a:hover {
  background-color: #ff69b4;  /* Lila Hintergrund für Hover */
  color: white;  /* Weißer Text für Hover */
}

/* Wenn das Dropdown-Element gehovt wird, wird der Dropdown-Inhalt angezeigt */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1; /* Dropdown-Inhalt wird sichtbar */
}
/* Hover-Effekt für den Dropdown-Button */
.dropdown:hover .dropbtn {
  color: white;  /* Textfarbe auf Weiß ändern */
  background-color: #ff69b4; 
}