/* CSS Styling 

/* aussenabstand zwischen logo und dem nachfolgendem absatz anpassen*/
header h1 {
    margin-bottom: 0;
}

/* Aussenabstand von Absatz und Bild nach oben*/
header h1 + p { 
    text-align: center;
    font-style: italic;
}

body {
  padding-top: 100px; /* Entspricht height der .navbar */
}

.navbar {
  position: fixed;
  top: 0;
  width: 98.5%;
  height: 80px; /* Höhe festlegen */
  background-color: rgb(247, 10, 10);
  z-index: 1000; /* Stellt sicher, dass die Navi oben bleibt */
}

.navbar ul {
  list-style-type: none; /* Entfernt Listenpunkte */
  margin: 0;
  padding: 0;
  display: flex; /* Richtet Listenelemente horizontal aus [11] */
  justify-content: center; /* Zentriert die Links, alternativ: flex-start oder space-around */
  height: 100%;
  align-items: center; /* Zentriert Links vertikal */
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0 20px;
  text-decoration: none;
  font-family: Arial, sans-serif;
}

.navbar li a:hover {
  background-color: #105210; /* Hover-Effekt */
  border-radius: 18px;
}

.site-footer {
    background-color: black; /*hintergrund schwarz*/
    color: #333; /* schriftfarbe weiss*/
    text-align: right; /* textausrichtung rechts*/
    padding: 0.5rem; /* rundum etwas platz*/
}

footer a { /* footer link*/
    color: white; /* footer link werden weiss*/
    text-decoration: none; /* Unterstreichung entfernen */
}

img {
    display: left; /* bild von uns 3 in über-uns links ausrichten*/
    margin: auto;
    /*width: 50%;*/
    }

.gallery {
       display: flex;
       flex-wrap: wrap; 
       text-align: center;
       
      }
    
.gallery img {
        width: 300px;
        height: 400px;
        margin: 10px;
          
      }
  
/* Grundlegende Gestaltung für den Abschnitt mit den Infoboxen*/

.infoboxen {
    background-color: #eee;
    padding: 1rem; /*rundum etwas platz*/
    margin-bottom: 1rem; /* einen Abstand nach unten*/
}

.infobox {
    text-align: center; /* Text zentriert*/
    background-color: white;
    padding: 1rem; /*rundum etwas platz*/
    margin: 1rem;
}

/*Border Box aktivieren*/
*, *::before, ::after {box-sizing: border-box;}

html {
    background-color: bisque;
    
    }


    .site-header {
        padding: 1rem 1rem 0 1rem;
    
        
    }

    .site-header-ueberuns img {
        display: block;
        padding: 1rem;
        width: 242px;
        height:auto;

    }

    .site-header-Startseite img {
        display: block;
        padding: 1rem;

    }

    .site-header-Bilder img {
        display: block;
        padding: 1rem;
        
    }


    .audio {
    display: flex; /* Stellt sicher, dass das Text-Element eine eigene Zeile einnimmt */
    flex-direction: column;
    margin-top: 10px; /* Fügt etwas Abstand zwischen Audio-Player und Text hinzu */
}
@media (max-width: 1080px) {
    .navbar {
  display: flex;
  flex-direction: column; /* Elemente untereinander anordnen */
  width: 96.2%; /* Volle Breite */
  background-color: red;
  height: 210px; /* Höhe festlegen */
}
}
@media (max-width: 1080px) {
    .startseite {
    margin-top: 100px; /* Verschiebt den Body um 50px nach unten */
}
}

@media (max-width: 1080px) {
    .seite-news{
    margin-top: 100px; /* Verschiebt den Body um 50px nach unten */
}
}

@media (max-width: 1080px) {
    .seite-ueber-uns{
    margin-top: 150px; /* Verschiebt den Body um 50px nach unten */
}




    /* Einzelne Navigationslinks */
.navbar ul {
  display: block; /* Links füllen die volle Breite aus */
  padding: 15px; /* Klickfläche vergrößern */
  text-decoration: none;
  color: white;
  border-bottom: 1px solid #444; /* Trennlinie */
  text-align: center;
}

/* Hover-Effekt */
.navbar:hover {
  background-color: #555;
}


}

.contactBtn {
    color: white;
    background-color: #FEB62F;
    padding: 8px 80px;
    display: inline-block;
    border-radius: 8px;
    margin-top: 16px;
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contactBtn:hover {
    text-decoration: none;
    background-color: #fbc051;
}

.button-icon {
    height: 16px;
    margin-right: 4px;
}

/* Gästebuch Container - Unter der Navbar */
.main-container {
    margin-top: 200px; /* Muss mind. so hoch sein wie die Navbar */
    padding: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Styling für das Gästebuch-Formular */
.guestbook-form {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}