#boden {
    background-image:url(img/boden.svg);
    background-position:center bottom;
    background-repeat:repeat-x;
    background-size:100vmax;
    bottom:0;
    height:20vh;
    overflow:hidden;
    pointer-events:none;
    position:sticky;
    width:100%;
    z-index:100!important
}

#footer {
    align-items:stretch;
    background-color:#3b51bc;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    text-align:center
}

#footer a {
    color:#fff!important;
    text-decoration:none
}

#footer div:first-child {
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:space-around
}

a {
    color:#000;
    text-decoration:none
}

body {
    font-family:'Roboto',sans-serif;
    margin:0
}

@media only screen
and (orientation: landscape) {
    #auto {
        display:none;
        width:15vmin
    }

    #boden {
        background-size:100vmin
    }

    #haus {
        margin-left:-10vmin;
        width:10vmin
    }

    .open {
        clip-path:circle(80vmax at 50% 50%)!important
    }

    @media screen and (max-width: 1020px) {
        #logo {
            z-index:500!important
        }

        #menu {
            padding-top:40px;
            z-index:9
        }
    }
}

@media only screen
and (orientation: Portrait) {
    #auto {
        width:15vmax
    }

    #bilder {
        align-content:center;
        flex-direction:column!important
    }

    #boden {
        background-size:101vmax
    }

    #haus {
        margin-left:-10vmax;
        width:10vmax
    }

    .open {
        clip-path:circle(60vmax at 50% 50%)!important
    }

    @media screen and (max-width: 1020px) {
        #menu {
            padding-top:180px;
            z-index:-1
        }
    }
}

#auto {
    bottom:10px;
    left:0;
    position:absolute
}

#content {
    display:flex;
    flex-direction:column;
    margin-left:auto;
    margin-right:auto;
    max-width:1000px;
    padding:5vw;
    text-align:justify
}

#dino {
    align-self:center;
    max-width:100vw;
    width:400px
}

#einhorn {
    align-self:end;
    max-width:100vw;
    width:200px
}

#gradient {
    background:linear-gradient(180deg,#fff0 0%,#ffff 100%);
    bottom:0;
    height:10vh;
    margin-bottom:-20vh;
    overflow:hidden;
    pointer-events:none;
    position:sticky;
    width:100%
}

#haus {
    bottom:10px;
    left:95vmax;
    position:absolute
}

#teamD {
    text-align:left
}

#teamD img {
    float:right
}

#zug {
    align-self:start;
    max-width:100vw;
    width:300px
}

.keywords {
    font-style:italic
}

.nowrap {
    white-space:nowrap
}

h1 {
    font-size:130%;
    text-align:left!important
}

@media screen and (min-width: 1020px) {
    #burger {
        display:none
    }

    #header {
        display:flex;
        justify-content:center
    }

    #logo {
        padding:24px;
        width:450px
    }

    #menu {
        align-items:center;
        display:flex;
        font-size:20px;
        justify-content:space-around;
        width:calc(100% - 550px)
    }
}

@media screen and (max-width: 1020px) {
    #menu {
        background:#add8e6;
        clip-path:circle(77px at 100% 0%);
        display:flex;
        flex-direction:column;
        font-size:20px;
        height:60vh;
        justify-content:flex-start;
        position:fixed;
        right:0;
        transition:clip-path 250ms ease-out;
        width:200px;
        z-index:200
    }

    @media only screen
    and (orientation: landscape) {
        #menuSun {
            height:200vh;
            width:200vh
        }
    }

    @media only screen
    and (orientation: portrait) {
        #menuSun {
            height:150vh;
            width:150vh
        }
    }

    #burger {
        display:block;
        position:fixed;
        right:5px;
        top:2px;
        transition:transform 400ms ease-out;
        width:50px;
        z-index:220
    }

    #header {
        display:flex;
        justify-content:flex-start
    }

    #headerBG {
        background-color:#ffc648;
        clip-path:circle(77px at 100% 0%);
        height:13%;
        position:fixed;
        width:100%
    }

    #logo {
        padding-bottom:24px;
        padding-left:5vw;
        padding-top:24px;
        pointer-events:none;
        width:80vw;
        width:80vw;
        z-index:500
    }

    #menu div {
        padding:20px
    }

    #menuSun {
        background-color:#ffc648;
        border-radius:50%;
        display:flex;
        flex-direction:column;
        font-size:20px;
        justify-content:flex-start;
        position:fixed;
        right:0;
        transform:translate(50%,-50%);
        z-index:-1
    }
}

#augenhoehe {
    max-width:1500px;
    width:100%
}

#b1 {
    background-color:#fff;
    height:500px;
    position:absolute;
    top:0;
    width:100%;
    z-index:6
}

#b2 {
    background-color:#fff;
    height:500px;
    position:absolute;
    top:500px;
    width:100%;
    z-index:4
}

#b3 {
    background-color:#fff;
    height:500px;
    position:absolute;
    top:1000px;
    width:100%;
    z-index:2
}

#b4 {
    background-color:#fff;
    position:absolute;
    top:1500px;
    width:100%;
    z-index:100
}

#bilder {
    align-items:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
    width:100%
}

#bilder div {
    padding:10px
}

#extender {
    height:50px;
    width:0
}

#header {
    position:fixed;
    top:0;
    width:100%;
    z-index:200!important
}

#herde {
    max-width:500px;
    width:90%
}

#herdeplaceholder {
    max-width:500px;
    opacity:.5;
    width:90%
}

#konzeptLink {
    font-size:18px;
    margin-left:auto;
    margin-right:auto;
    text-decoration:underline
}

#leitbildTextContainer {
    font-size:20px;
    left:0;
    position:absolute;
    width:100%
}

#leitbildZindexContainer {
    left:0;
    position:absolute;
    width:100%
}

#leitbildcontainer1 {
    height:2000px;
    left:calc(50% - 176.5px);
    position:absolute;
    z-index:7
}

#leitbildcontainer2 {
    height:2000px;
    left:calc(50% - 176.5px);
    position:absolute;
    z-index:5
}

#leitbildcontainer3 {
    height:2000px;
    left:calc(50% - 176.5px);
    position:absolute;
    z-index:3
}

#leitbildcontainer4 {
    height:2000px;
    left:calc(50% - 176.5px);
    position:absolute;
    z-index:2
}

#leitschaf {
    left:50%;
    margin-left:-35px;
    max-width:65px;

    position:absolute;
    width:10%;
    z-index:-5
}

#lena {
    clip-path:circle(50%);
    object-fit:contain;
    transition:width 400ms ease-out;
    width:0
}

#menu div a {
    color:#000;
    text-decoration:none
}

#menuBG {
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-2
}

#spacer {
    display:block;
    height:2100px
}

#t1 {
    position:absolute;
    text-align:center;
    top:0;
    width:100%
}

#t2 {
    backdrop-filter:blur(10px);
    position:absolute;
    text-align:center;
    top:500px;
    width:100%;
    z-index:100
}

#t3 {
    backdrop-filter:blur(10px);
    position:absolute;
    text-align:center;
    top:1000px;
    width:100%;
    z-index:100
}

#t4 {
    backdrop-filter:blur(10px);
    position:absolute;
    text-align:center;
    top:1500px;
    width:100%;
    z-index:100
}

.bspacer {
    display:block;
    height:500px
}

.collapse {
    background-color:#ffc648!important
}

.imgleitbild {
    max-width:500px;
    width:90%
}

.imgleitbildHF {
    margin-left:auto;
    margin-right:auto;
    max-width:353px;
    width:90%
}

.leitbild {
    position:absolute
}

.leitbild {
    position:sticky;
    top:calc(50% - 250px)
}

.leitbildflex {
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    width:100%;

}

.open > #menuBG {
    display:block!important
}

.rueckwaertsgang {
    transform:rotateZ(180deg)
}