*{
    margin: 0;
    padding: 0;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100vh;
width: 100vw;
max-height: 100vh;
max-width: 100vw;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}
.Spaltelinks{
display:grid;
grid-template-rows: 2fr 1fr 3fr 1fr 2fr 1fr;
max-height: 100vh;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}
.Spaltemitte{
    display: grid;
    grid-template-rows: 1fr 3fr 1fr 2fr 1fr 1fr;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
    max-height: 100vh;
}
.Spalterechts{
    display: grid;
    grid-template-rows: 1fr 1fr 3fr 2fr 1fr 4fr;
    max-height: 100vh;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
}   
.Zeile{
border: 2px solid black;
overflow: hidden;
}
.hide{
    display: none;
}
.Zeile img{
width: 100%;
height: auto;
object-fit: fill;
filter: brightness(75%);
transition: all 200ms ease-in-out;
}
.Zeile img:hover{
    filter: brightness(100%);
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}
.Spaltelinks:has(.Zeile.first:hover),
.Spaltemitte:has(.Zeile.first:hover),
.Spalterechts:has(.Zeile.first:hover){
    grid-template-rows: 9fr 1fr 1fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.second:hover),
.Spaltemitte:has(.Zeile.second:hover),
.Spalterechts:has(.Zeile.second:hover){
    grid-template-rows: 1fr 9fr 1fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.third:hover),
.Spaltemitte:has(.Zeile.third:hover),
.Spalterechts:has(.Zeile.third:hover){
    grid-template-rows: 1fr 1fr 9fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.fourth:hover),
.Spaltemitte:has(.Zeile.fourth:hover),
.Spalterechts:has(.Zeile.fourth:hover){
    grid-template-rows: 1fr 1fr 1fr 9fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.fifth:hover),
.Spaltemitte:has(.Zeile.fifth:hover),
.Spalterechts:has(.Zeile.fifth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 9fr 1fr;
}
.Spaltelinks:has(.Zeile.sixth:hover),
.Spaltemitte:has(.Zeile.sixth:hover),
.Spalterechts:has(.Zeile.sixth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 9fr;
}
@media screen and (max-width: 1180px){
    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr; 
        max-height: none; 
        transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
    }
    .hide{
        display: block;
    }
    .Spalterechts{
        display: none;
    }
    .Spaltelinks,
    .Spaltemitte{
    grid-template-rows: repeat(9, 1fr);
    max-height: 150vh;
    }

   
    .Spaltelinks:has(.Zeile.first:hover),
    .Spaltemitte:has(.Zeile.first:hover){
        grid-template-rows: 6.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.second:hover),
    .Spaltemitte:has(.Zeile.second:hover){
        grid-template-rows: 1fr 6.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    } 
    .Spaltelinks:has(.Zeile.third:hover),
    .Spaltemitte:has(.Zeile.third:hover){
        grid-template-rows: 1fr 1fr 6.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.fourth:hover),
    .Spaltemitte:has(.Zeile.fourth:hover){
        grid-template-rows: 1fr 1fr 1fr 6.5fr 1fr 1fr 1fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.fifth:hover),
    .Spaltemitte:has(.Zeile.fifth:hover){
        grid-template-rows: 1fr 1fr 1fr 1fr 6.5fr 1fr 1fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.sixth:hover),
    .Spaltemitte:has(.Zeile.sixth:hover){
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 6.5fr 1fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.seventh:hover),
    .Spaltemitte:has(.Zeile.seventh:hover){
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 6.5fr 1fr 1fr;
    }
    .Spaltelinks:has(.Zeile.eigth:hover),
    .Spaltemitte:has(.Zeile.eigth:hover){
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 6.5fr 1fr;
    }
    .Spaltelinks:has(.Zeile.nineth:hover),
    .Spaltemitte:has(.Zeile.nineth:hover){
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 6.5fr;
    }
    }

@media screen and (max-width: 750px) {
    
}

@media screen and (max-width: 512px){
    .grid{
        display: grid;
        grid-template-columns: 1fr;
    }

}