.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;
}

body {
  padding-left: 150px;
  padding-right: 150px;
}

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

  .grid-container{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .item-1{
    background-color: rgb(51, 23, 128);
    grid-row: 1/4;
    grid-column: 1/2;
    text-align: left;
    height: 350px;
  }
  
  .item-2{
  background-color:rgb(208, 214, 218);
  grid-row:1/4;
  grid-column:2/4;
  text-align:right;
  height: 350px;
  }

  footer{
background-color:   #5386A6;
font-family:sans-serif;
font-size: large;
color: white;
text-align: center;
}
h2{
  text-align: center;
}

h1{
color:  #19207c;
font-family:"Tangerine";
text-align: center;
}


.navigation { 

display: flex; 
background-color:   #5386A6;
} 


.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; 
} 

Farben{
#5386A6
#C4E1F2
#A6845B
#8C7C68
#593825
}

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

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