@import url(navbar.css);

.navbar {
  background-color: #f2f2f2;
  padding: 30px 0;
  text-align: center;

}

.nav-links {
  list-style: none;
  margin: 0;
  padding-left: 250px;
}
.nav-links li {
  display: inline;
  margin-right: 20px;
}
.nav-links li:last-child {
  margin-right: 0;
}
.nav-links li a {
  text-decoration: none;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  transition: color 0.3s;
}
.nav-links li a:hover {
  color: #000;
}/*# sourceMappingURL=navbar.css.map */




.container1 {
  display: flex;
  justify-content: flex-start; /* Um das Bild nach links zu schieben */
  align-items: flex-start;
}

.bild1 {
  max-width: 1500px;
  position: relative;
  margin-left: 100px; /* Bild ganz nach links */
}

.bildhauptseite {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  margin-top: 20px;
  border-radius: 2%;
}


.tag {
  font-size: 10px;
  
  
}

.bildhauptseite.active {
  opacity: 1; /* Sichtbar, wenn aktiv */
}

.icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 150px;
  margin-top:20px;
}

.icon-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Abstand zwischen den Icon-Gruppen */

}

.icon-container img {
  margin-right: 15px; /* Abstand zwischen Icon und Text */
  width: 100px;
}

.icon-text {
  
  font-size: 24px;
  color: #000000;
  
}

#wlan-icon, #bett-icon, #marker-icon, #familie-icon, #garten-icon {
  width: 40px;
}

#haus-icon {
  width: 40px;
}

.panobild {
  position: relative;
  height: 350px;
}

.panobild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
  padding: 20px;
  box-sizing: border-box;
}

.text-overlay h1 {
  margin: 0;
  font-family: Trebuchet MS, sans-serif;
  font-size: 30px;
}

.text-overlay h3 {
  margin: 10px 0 0 0;
  font-family: Trebuchet MS, sans-serif;
  font-size: 22px;
  line-height: 1.1;
}

/* Footer-Styling */
/* Footer-Styling */
/* Grundlegendes Footer-Styling */
html, body {
  height: 100%; /* Die Höhe des gesamten Bildschirms */
  margin: 0; /* Entferne Standardabstände */
}

body {
  display: flex; /* Flexbox-Layout */
  flex-direction: column; /* Elemente vertikal anordnen */
}



/* Footer-Styling */
.sticky-footer {
  width: 100%; /* Ganze Breite */
  background-color: #333; /* Dunkelgrauer Hintergrund */
  color: #fff; /* Weißer Text */
  text-align: center; /* Zentrierter Text */
  padding: 10px 0; /* Abstand nach oben und unten */
  position: relative; /* Position relative für Footer */
  margin-top: 80px;
}

.footer-container {
  max-width: 1200px; /* Maximalbreite des Inhalts */
  margin: 0 auto; /* Zentrieren des Footers */
}

.footer-links {
  list-style-type: none; /* Keine Aufzählungszeichen */
  padding: 0; /* Keine Polsterung */
  margin: 0 0 10px; /* Abstand nach unten */
  display: flex; /* Flexbox für die Links */
  justify-content: center; /* Zentriere die Links */
}

.footer-links li {
  margin: 0 15px; /* Abstand zwischen den Links */
}

.footer-links a {
  color: #fff; /* Weißer Linktext */
  text-decoration: none; /* Unterstreichung entfernen */
}

.footer-links a:hover {
  text-decoration: underline; /* Unterstreichung beim Hover */
}

footer p {
  margin: 0; /* Kein Margin für den Paragraphen */
  font-size: 14px; /* Schriftgröße */
  font-weight: normal; /* Normalgewicht */
}


/* Anpassungen für Bildschirme ab 3000 Pixel Breite */

@media (max-width: 1600px) {
  .menu-icon {
    cursor: pointer;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1500;
    font-size: 24px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    right: 0;
    width: 200px;
    background-color: #f2f2f2;
    padding: 10px 0;
    z-index: 1000;
  }

  .nav-links li {
    display: block;
    margin: 0;
  }

  .nav-links li a {
    display: block;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    color: #333;
    text-decoration: none;
  }

  .nav-links.show {
    display: block;
  }

  h1 {
    font-size: 20px;
    padding-right: 20px;
    padding-left: 30px;
  }

  .Haus {
    width: 30px;
  }

  .container {
    flex-direction: column;
    align-items: center;
  }

  .bild1 {
    margin-top: 20px;
  }

  

  .container1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}

.bild1 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative; /* Position relativ für eine stabile Anzeige */
  margin: 0;
}

.bildhauptseite {
    width: 100%;
    height:auto;
    position: absolute;
}

.panobild {
  width: 100%;
  height: auto;
  margin-top: 60px;
}

.panobild img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-overlay h1 {
  font-size: 20px; /* Kleinere Überschrift */
}

.text-overlay h3 {
  font-size: 18px; /* Kleinere Unterüberschrift */
}

  /* Icons direkt unter den Bildern */
  .icons {
    display: flex;
    flex-direction: column; /* Vertikal anordnen */
    align-items: flex-start;
    margin-left: 0; /* Ganz an den linken Rand */
    margin-top: 20px;
}

.icon-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Abstand zwischen den Icons */
    margin-top: 10px;
}

.icon-container img {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
    width: 40px; /* Größe des Icons */
}

.icon-text {
  font-family: Palatino; 
    font-size: 16px;
    color: #000000;
}

  /* Footer-Anpassung für mobile Geräte */
  .sticky-footer {
    font-size: 12px;
  }

  
}


.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 1200px) {
  .text-overlay h1 {
    font-size: 14px; /* Kleinere Überschrift */
  }
  
  .text-overlay h3 {
    font-size: 12px; /* Kleinere Unterüberschrift */
  }
}