@media (min-aspect-ratio:8/5) { /* width divided by height */

    h2 {
        font-size: 5vh;
        margin-bottom: 5vh;
        text-align: center;
        font-family: 'comic';
    }

    input {
        height: 5vh;
        resize: none;
        padding: 1vh;
        border: 0.1vh solid #000;
        font-size: 3vmin;
        color: #000000;
    }

    textarea {
        height: 17vh;
        width: 60%;
        resize: none;
        border: 0.1vh solid #000;
        padding: 1vmin;
        font-size: 3vmin;
        color: #000000;
    }

    button {
        border: none;
        padding: 1vh 1vw;
        display: inline-block;
        background-color: var(--thehovergreen);
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 3vmin;
        border-bottom-left-radius: 3vmin;
        border-top-left-radius: 3vmin;
        border-bottom-right-radius: 3vmin;
        border-top-right-radius: 3vmin;
        transition-property: background-color;
        transition-duration: 600ms;
    }
    button:hover {
        background-color: var(--thegreen);
    }

    img {
        width: 100%;
    }

    tr :first-child {
        padding-right: 0.5em;
    }

    .vertical {
        display: none;
    }

    .wrapper {
        display:grid;
        grid-column-gap: 2vmin;
        grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 15vh 10vh 75vh 100vh 100vh 100vh 100vh auto;
        grid-template-areas:
        "Logo writing writing writing writing empty"
        "navigation navigation navigation navigation navigation navigation"
        "slideshowFrame slideshowFrame slideshowFrame slideshowFrame slideshowFrame slideshowFrame"
        "TA TA TA SingleBird1 foto_treatmentroom foto_treatmentroom"
        "foto_treatment foto_treatment OEF OEF OEF SingleBird2"
        "SingleBird3 KO KO MIT MIT MIT"
        "ANFRT ANFRT ANFRT ANFRT ANFRT ANFRT"
        "Recht Recht Recht Recht Recht Recht";
    }

    .content-box {
        transition-property: transform, box-shadow;
        transition-duration: 1s, 1s;
    }
    /*
    .content-box:hover {
        transform: scale(1.03);
        box-shadow: var(--thehovergreen) 0 0 5px;
    }
    */
    .wrapper > * {
        margin-top:10vh;
        margin-bottom:10vh;
    }

    .wrapper .hamburger {
        display:none;
    }
        .wrapper .hamburger > * {
            height:100%;
            width:100%;
        }
        .wrapper .hamburger svg {
            position:absolute;
            top:0%;
            left:0%;
        }
        .wrapper .hamburger #toggler {
            position: absolute;
            top: 0%;
            left: 0%;
            opacity: 0;
            z-index: 3;
        }

    .wrapper .Logo {
        grid-area:Logo;
        margin:0;
        padding:0;
        padding-top: 2vh;
    }
    .wrapper .writing {
        grid-area: writing;
        margin:0;
        padding:0;
        text-align:center;
    }
        .wrapper .writing #EBB {
            font-family: 'comic';
            font-size: 4.0vh;
        }
        .wrapper .writing #PZRR {
            font-family: inherit;
            font-size: 3.8vh;
        }

    .wrapper nav {
        grid-area: navigation;
        z-index: 2;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        left: 0;
        margin: 0;
        border-bottom: 0.2vh solid var(--thegreen);
        border-bottom-right-radius: 3vmin;
        border-bottom-left-radius: 3vmin;
        padding: 0;
        flex-direction: row;
        align-items: center; /*vertical centralisation*/
        justify-content: center; /*horizontal centralisation*/
        color: var(--thehovergreen);
        background-color: var(--thewhite);
        transform: translateX(0); /*to ensure it is visible when swtiching from the mobile css, which hides the navbar through transform: translateX(-85vw)*/
        /*transition: transform 0.5s ease;*/
    }
        nav > a {
            height: 100%;
            padding: 2.1vh 2.5vh;
            display: block;
            color: var(--thegreen);
            text-decoration: none;
        }
            nav :nth-child(5) {
                display: none;
            }
            nav > a:hover {
                background-color: var(--thehovergreen);
                color: var(--thewhite);
                transition: background-color 0.3s ease;
                transition: color 0.3s ease;
            }

    .wrapper .slideshowFrame {
        grid-area: slideshowFrame;
        margin: 0;
        border-bottom-left-radius: 3vmin;
        border-top-left-radius: 3vmin;
        border-bottom-right-radius: 3vmin;
        border-top-right-radius: 3vmin;
        padding: 0;
        padding-left:1vw;
        padding-right:1vw;
        background-color: var(--thehovergreen);
    }
        .wrapper .slideshowFrame .Frame {
            height: 100%;
            width: 100%;
            border-bottom-left-radius: 3vmin;
            border-top-left-radius: 3vmin;
            border-bottom-right-radius: 3vmin;
            border-top-right-radius: 3vmin;
            /**/ overflow: hidden; /**/
        }
            .wrapper .slideshowFrame .Frame .Film {
                position: relative;
                top: 0%;
                left: 0%;
                /**/transition-property: left;
                transition-duration: 1s;
                width: 1300%;
                height: 100%;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: row;
            }
                .wrapper .slideshowFrame .Frame .Film > .picture {
                    height: 100%;
                    flex-basis: 100%;
                    align-content: center;
                    padding-left: 0.5vw;
                    padding-right: 0.5vw;
                    padding-bottom: 0.5vh;
                    padding-top: 0.5vh;
                    background-color: var(--thehovergreen);
                    position: relative;
                    /*overflow: hidden;*/
                }
                    .wrapper .slideshowFrame .Frame .Film > .picture > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-bottom-left-radius: 3vmin;
                        border-top-left-radius: 3vmin;
                        border-bottom-right-radius: 3vmin;
                        border-top-right-radius: 3vmin;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:first-child > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(9) > img, 
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(17) > img {
                        object-position: center center;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(2) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(10) > img{
                        object-position: center 70%;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(3) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(18) > img{
                        object-position: center 45%;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(4) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(12) > img{
                        object-position: center 30%;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(5) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(13) > img{
                        object-position: center 60%;
                    }
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(6) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(14) > img {
                        object-position: center 57%;
                    }.wrapper .slideshowFrame .Frame .Film div:nth-child(7) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(15) > img {
                        object-position: center 57%;
                    }.wrapper .slideshowFrame .Frame .Film div:nth-child(8) > img,
                    .wrapper .slideshowFrame .Frame .Film div:nth-child(16) > img {
                        object-position: center 57%;
                    }
        .wrapper .slideshowFrame .PictureLinkContainer {
            z-index: 1;
            position: absolute;
            top: 90%;
            right: 5%;
            height: 6vmin;
            width: 43vmin;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
            .wrapper .slideshowFrame .PictureLinkContainer .PictureLink {
                height: 6vmin;
                width: 6vmin;
                border-radius: 50%;
                background-color: var(--milkglass);
				transition-property: background-color, border-radius;
                transition-duration: 800ms;
                transition-timing-function: ease;
            }
            .wrapper .slideshowFrame .PictureLinkContainer .PictureLink:hover {
                border-radius: 35%;
            }
                .wrapper .slideshowFrame .PictureLinkContainer > div:first-child {
                    background-color:var(--thehovergreen);
                }

    .wrapper .Therapieangebote { 
        grid-area:TA;
        border-bottom-right-radius:3vmin;
        border-top-right-radius:3vmin;
        background:var(--thegreen);
    }
        .wrapper .Therapieangebote #lists {
            display:flex;
            flex-direction:row;
            align-items:start;
            justify-content:center;
        }
        .wrapper .Therapieangebote ul {
            padding-left: 1em;
            text-align: left;
            overflow-wrap: break-word;
        }

    .wrapper .SingleBird1 {
        grid-area:SingleBird1;
    }

    .wrapper .foto_treatmentroom {
        grid-area: foto_treatmentroom;
        border-bottom-left-radius: 3vmin;
        border-top-left-radius: 3vmin;
        background-color: var(--thehovergreen);
    }
        .wrapper .foto_treatmentroom > img {
            height: 100%;
            object-fit: cover;
            border-radius: 3vmin;
            object-position: center center;
        }

    .wrapper .foto_treatment {
        grid-area:foto_treatment;
        border-bottom-right-radius:3vmin;
        border-top-right-radius:3vmin;
        background-color:var(--thehovergreen);
    }
        .wrapper .foto_treatment > img {
            height: 100%;
            object-fit: cover;
            border-radius: 3vmin;
            object-position: center center;
        }

    .wrapper .Oeffnungszeiten { 
        grid-area:OEF;
        border-radius:3vmin;
        color:#000000;
        background:var(--thewhite);
    }
        .wrapper .Oeffnungszeiten table { 
            display:table;
            text-align:left;
        }

    .wrapper .SingleBird2 {
        grid-area:SingleBird2;
    }

    .wrapper .SingleBird3 {
        grid-area:SingleBird3;
    }

    .wrapper .Kontakt { 
        grid-area:KO;
        border-radius:3vmin;
        text-align:center;
        color:#000000;
        background:var(--thewhite);
    }
        .wrapper .Mitteilung { 
            grid-area:MIT;
            border-radius:3vmin;
            color:#000000;
            background:var(--thewhite);
        }
            .wrapper .Mitteilung form {
                width: 100%;
            }
                .wrapper .Mitteilung form > * {
                    width: 79%;
                    margin-bottom: 2%;
                }
                .wrapper .Mitteilung form input {
                    width: 39%;
                }
                    .wrapper .Mitteilung form input:last-of-type {
                        width: 79%;
                        transition-property: background-color, color;
                        transition-duration: 1s;
                        transition-timing-function: ease;
                    }

    .wrapper .Anfahrt {
        margin: 0;
        grid-area:ANFRT;
	    background:var(--thegreen);
	    color:var(--thewhite);
    }
        .wrapper .Anfahrt .order {
            height: 65%;
            width: 100%;
            display: grid;
            grid-template-columns: 3fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
            .wrapper .Anfahrt .order .map {
                grid-column: 1;
                grid-row: 1 / span 3;
                background-color: var(--milkglass);
                /*
                z-index: 1;
                */
                display: flex;
                flex-direction: column;
                justify-content: center; /*on appropriate axis to flex-direction*/
            }
                .wrapper .Anfahrt .order .map p {
                    align-self: center; /*on cross axis to flex-direction*/
                }
                .wrapper .Anfahrt .order .map > button {
                    width: 50%;
                    margin-top:5%;
                    align-self: center;
                }
            .wrapper .Anfahrt .order .address {
                grid-column: 2;
                grid-row: 2;
            }


    .wrapper .Recht { 
        grid-area: Recht;
        margin-top: 0;
        margin-bottom:0;
        text-align:center;
        background:var(--thewhite);
        color:#000000;
    }
        .wrapper .Recht > button {
            width: 100%;
        }
        .wrapper .Recht h2 {
            margin-top: 10vh;
        }
        .wrapper .Recht .Impressum {
            display: none;
            flex-direction: column;
            margin: 0;
            text-align: left;
            background: var(--thewhite);
            color: #000000;
        }
        .wrapper .Recht .Datenschutz {
            display: none;
            flex-direction: column;
            margin: 0;
            text-align: left;
            background: var(--thewhite);
            color: #000000;
        }
}