.bilderseite{
    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;
    z-index: 1;
    }
.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;
            }
.hideimg{
                display: none;
            }
.Zeile img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            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){
                .bilderseite{
                    display: grid;
                    grid-template-columns: 1fr 1fr; 
                    max-height: none; 
                    transition-property: all;
                transition-duration: 300ms;
                transition-timing-function: ease;
                }
                .hideimg{
                    display: grid;
                }
                .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: 512px){
                    .bilderseite{
                        display: grid;
                        grid-template-columns: 1fr;
                    }
                #backbutton{
                    width: 50px;
                    height: 50px;
                }
                }