h1{
  color:  #D1B7A1;
  font-family:"Tangerine";
  text-align: center;
  font-size: 5em;
  }
  

  h2{
    text-align: center;
    color:#D1B7A1;
    font-family:"Tangerine";
    font-size:3em ;
  }
  
  
  h3{
    color:  #D1B7A1;
  font-family:"Tangerine";
  text-align: left;
  font-size: 3.5em;
  }

  h4{
   font-size: 1em ;
   background-color: #F2E5D9;
  }

  h5{
    text-align: center;
    color: black;
    font-size: 1em;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color:#F2E5D9;
   
  }
  
  
body {
  padding-left: 150px;
  padding-right: 150px;
}


.Titelbild{
  width: 100%;
}


.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
  }
  

  .tangerine-bold {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
  }


  .navigation { 

    display: flex; 
    background-color:#F2E5D9;
    justify-content: center;
    } 
    
    
    .navigation li { 
    list-style-type: none; 
    } 
    
    
    .navigation a { 
    padding: 15px; 
    display: inline-block; 
    color: white; 
    text-decoration: none; 
    } 
    
    
    .navigation a:hover, #akt_tab { 
    background-color: #B3B3B3; 
    } 


    .navigation {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      background-color: #D8C2AD;
    }
    
    .navigation li {
      margin: 0 20px;
    }
    
    .navigation a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 15px 10px;
      display: block;
      transition: background-color 0.3s;
    }
    
    .navigation a:hover {
      background-color: #F2E5D9; 
      border-radius: 4px;
    }



  .bild-container img {
  width: 300px; /* Bildgröße */
  filter: grayscale(100%); /* Bild ist grau */
  transition: filter 0.5s ease; /* Übergangseffekt */
  border-radius: 8px;
  margin: 10px;
}

.bild-container img:hover {
  filter: grayscale(0%); /* Beim Hover farbig */
}

img {
  width: 400px;      /* Bildbreite */
  height: auto;      /* Automatische Höhe im Verhältnis zur Breite */
  border: 2px solid #ccc;
  border-radius: 8px;
}



.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.left {
  text-align: left;
  flex: 1;
}
.center {
  text-align: center;
  flex: 2;
}
.right {
  text-align: right;
  flex: 1;
}




.grid-container{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.item-1{
  background-color: rgb(255, 255, 255);
  grid-row: 1/4;
  grid-column: 1/2;
  text-align: left;
  height: 1fr;
}

.item-2{
background-color:#F2E5D9;
font-size:1.5em;
grid-row:1/4;
grid-column:2/4;
text-align:center;
padding-top: 5em;
padding-left: 5em;
padding-right: 5em;
height: 1fr;
color: black;
}




.grid-container2{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.item-4 {
  grid-row: 1/5;
  grid-column:5/10;
  height:7em;
}

.item-5 {
  grid-row:6/11;
  grid-column:5/10;
}

.item-6{
  grid-row:12/17;
  grid-column:5/10
}





.bild {
  width: 500px;
  height: auto;
  transition: transform 0.3s ease; /* Animation */
  text-align: center;
  max-width: 170%; /* passt Bilder an die Bildschirmgröße an */
      height: auto;
      align-items: center
}

.bild:hover {
  transform: scale(1.8); /* Vergrößert das Bild auf 120 % */
}
.bild-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* zentriert die Bilder horizontal */
  gap: 20px; /* Abstand zwischen den Bildern */
  margin-top: 50px;}

  .grid-container3{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr ;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  }

  /*.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    grid-template-rows: 1fr 1fr 1fr 1fr ;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#F2E5D9 ;
    color: white;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }*/

  .querformat {
    width: 100%;
 
  }

  .hochformat {
    width: 60%;
  }




  .bild-box {
    margin-bottom: 0cm; /* Abstand von 2 cm zwischen den Bildern */
    text-align: center;
    text-decoration: none;
    color: white;
    display: block;
  }

  .bild-box img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px white;
    -webkit-user-drag: none;
    pointer-events: none; /* Bild selbst nicht klickbar, Link bleibt klickbar */
  }

  .bild-text {
    font-size: 1.3em;
    font-weight: bold;
    margin:  0;
  }

  .bild-box:hover .bild-text {
    color: white;
  }

  footer{
    background-color: #ffffff;
    font-family:sans-serif;
    font-size: large;
    color:#D8C2AD;
    text-align: center;
    }

.foto {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 20px auto;
    }


    .foto2 {
      width: 700px;        /* gleiche Breite für alle Bilder */
      height: 600px;       /* gleiche Höhe für alle Bilder */
      object-fit: cover;   /* füllt den Rahmen, ohne zu verzerren */
      border-radius: 10px;
      display: block;
    }
/*Farben
#5386A6
#C4E1F2
#A6845B
#8C7C68
#593825
*/