/* questrial-regular - latin */
        
        @font-face {
            font-family: 'Questrial';
            font-style: normal;
            font-weight: 400;
            src: url('fonts/questrial-v9-latin-regular.eot');
            /* IE9 Compat Modes */
            src: local('Questrial'), local('Questrial-Regular'), url('fonts/questrial-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('fonts/questrial-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
            url('fonts/questrial-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
            url('fonts/questrial-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
            url('fonts/questrial-v9-latin-regular.svg#Questrial') format('svg');
            /* Legacy iOS */
        }

        /* Archivo-italic */
    @font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 400;
        src: url('fonts/Archivo-Italic-VariableFont_wdth_wght.eot');
        /* IE9 Compat Modes */
        src: local('Questrial'), local('Questrial-Regular'), url('fonts/Archivo-Italic-VariableFont_wdth_wght.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/Archivo-Italic-VariableFont_wdth_wght.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/Archivo-Italic-VariableFont_wdth_wght.woff') format('woff'), /* Modern Browsers */
        url('fonts/Archivo-Italic-VariableFont_wdth_wght.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/Archivo-Italic-VariableFont_wdth_wght.svg#Archivo') format('svg');
    }

        /*Oswald-regular*/
    @font-face {
        font-family: 'Oswald';
        font-style: normal;
        font-weight: 400;
        src: url('fonts/Oswald-VariableFont_wght.eot');
        /* IE9 Compat Modes */
        src: local('Questrial'), local('Questrial-Regular'), url('fonts/Oswald-VariableFont_wght.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/Oswald-VariableFont_wght.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/Oswald-VariableFont_wght.woff') format('woff'), /* Modern Browsers */
        url('fonts/Oswald-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/ArOswald-VariableFont_wght.svg#Oswqald') format('svg');
    }
        /* Allgemeines */
        html {
            scroll-behavior: smooth;
            user-select: none;
            -moz-user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Questrial", sans-serif;
        }
        
        body {
            color: rgba(255, 255, 255, .7);
        }

        .link {
            text-decoration: underline;
            color: rgba(255, 255, 255, .7);
        }
        
        .link:hover {
            font-weight: bold;
            color: rgba(5, 104, 27, 0.7);
        }
        
        @media only screen and (orientation: landscape) {
            /*---------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Sections */
            #fullpage {
                height: 100vh;
            }

            .section {
                position: relative;
                height: 100%;
                width: 100%;
                background-image: url(img/background1.gif);
                background-size: 100%;
            }

            #mobile {
                display: none;
            }
            /*---------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Logos */
            #logo {
                width: 60%;
                height: auto;
                position: absolute;
                top: 15%;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }
            /*---------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Nav-Bar */
            #nav1 {
                position: absolute;
                padding: 0%;
                margin: 0;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                top: 70%;
                width: auto;
                padding: 15px 40px 15px 40px;
                border-radius: .4em;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgba(97, 97, 97, .5);
            }
            #nav2 {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                width: auto;
                padding: 10px;
                border-radius: .4em;
                display: flex;
                align-items: center;
                justify-content: space-around;
                background-color: rgba(97, 97, 97, .5);
            }
            .nav>a {
                margin: 0;
                color: rgba(255, 255, 255, .7);
                font-size: 2vw;
                text-align: center;
                text-decoration: none;
                font-weight: bold;
                padding: 15px 50px 15px 50px;
                border-radius: 4px;
            }
            .nav>a:hover {
                color: rgba(5, 104, 27, 0.7);
                background: rgba(255, 255, 255, .7);
                font-weight: bold;
            }
            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* View 1 */
            .site {
                position: relative;
                width: 85%;
                height: 80%;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }
            #welcome {
                position: absolute;
                width: 29.5%;
                height: 30%;
                top: 15%;
                background-color: rgba(97, 97, 97, .4);
                border-radius: .4em;
                text-align: left;
                grid-area: text;
                font-size: .8vw;
                padding: 10px;
                line-height: 1.3vw;
                display: flex;
                flex-direction: column;
                vertical-align: middle;
                justify-content: space-evenly;
            }

            #welcometext {
                font-size: 1.25vw;
                text-decoration: underline;
            }

            #subtext {
                font-size: 1vw;
            }

            #bye {
                font-size: 1.2vw;
            }
            #news {
                position: absolute;
                width: 69%;
                height: 65%;
                right: 0;
                top: 15%;
                background-color: rgba(97, 97, 97, .4);
                border-radius: .4em;
                font-size: 1vw;
                justify-content: center;
            }

            .splide {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }

            .splide__track {
                height: 98%;
                width: 100%;
                margin-left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }

            .splide__list {
                height: 100%;
                
            }

            .splide__slide {
                height: 100%;
                border-radius: .4em;
            }

            .slidepics {
                height: 100%;
                margin-left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                border-radius: 1.5%;
            }

            .splide__progress {
                width: 98%;
                margin-left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
            }

            #suqm {
                position: absolute;
                width: 25%;
                top: 64.5%;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .suqm {
                padding: 2%;
                text-align: center;
                width: 50%;
                background-color: white;
                border-radius: .4em;
            }
            /* #qmf {} */
            #suemo {
                margin-left: 10px;
            }
            #fill {
                position: absolute;
                width: 100%;
                height: 15%;
                top: 82.9%;
                padding: .5vw 1vw .5vw 1vw;
                /* padding: .5% 1.5% .5% 1.5%; */
                background-color: rgba(97, 97, 97, .4);
                border-radius: .4em;
                display: flex;
                align-items: center;
                justify-content: space-around;
                color: rgba(255, 255, 255, .7);
                font-size: 2vw;
            }
            .fillcon {
                width: 33%;
            }
            .fillcon:nth-child(2) {
                border-left: 2px solid lightgray;
                border-right: 2px solid lightgray;
            }
            /* #fillcontact {} */
            #fillcontact {
                display: flex;
                align-items: left;
                justify-content: justify;
                flex-direction: column;
                padding: 10px;
            }
            #fillcontact>p:nth-child(1) {
                font-size: 1.75vw;
                font-weight: bold;
                text-decoration: underline;
            }
            #fillcontact>p:nth-child(2) {
                margin-top: .8vh;
            }
            #fillcontact>p:nth-child(2),
            #fillcontact>p:nth-child(3) {
                display: flex;
                align-items: flex-start;
                justify-content: justify;
            }
            #fillcontact>p>a {
                display: flex;
                align-items: center;
                justify-content: justify;
            }
            #fillcontact>p>a {
                font-size: 1vw;
            }
            #fillsocial {
                height: 100%;
                width: 28%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-direction: row;
            }
            .icon {
                max-height: 5.5vw;
                max-width: 50%;
                opacity: 0;
            }
            #fillopen>h1 {
                font-size: 1.75vw;
                text-decoration: underline;
                margin-left: 7%;
            }
            #fillopen>p {
                font-size: 1vw;
                margin-top: 1.25%;
                margin-left: 9%;
                line-height: 1.5em;
            }
            #fillopen>span {
                font-size: 1.1em;
                font-family: "Questrial", sans-serif;
                text-decoration: underline;
            }
            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* View 3 , View 4 & View 5 */
            .show {
                position: relative;
                top: 0;
                left: 7.5%;
                width: 85%;
                height: 80%;
                border-radius: .7em;
                background-color: rgba(255, 255, 255, .4);
                box-shadow: 0 0 25px rgb(255, 255, 255);
            }
            .showimg {
                position: absolute;
                height: 100%;
                width: 30%;
                overflow: hidden;
                border-radius: .7em;
                clip-path: polygon(0 0, 95% 0, 80% 100%, 0% 100%);
            }
            .showimg>img {
                height: 100%;
            }
            .showtext {
                position: absolute;
                width: 100%;
                top: 50%;
                transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                margin-left: -7.5%;
                padding: 10px;
                font-size: 4vw;
                text-align: center;
                color: #616161;
                text-decoration: underline;
                background-color: rgba(255, 255, 255, .85);
                border: none;
            }
            .objectcon {
                margin: 0;
                display: grid;
                grid-template-columns: repeat(2, 48.5%);
                grid-auto-rows: minmax(31%, 31%);
                grid-gap: 2.5%;
                position: absolute;
                right: 0;
                width: 70%;
                height: 100%;
                padding-top: .5%;
                padding-right: .5%;
            }
            .objectcon>div {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                border-radius: 1em;
            }
            .object1 {
                grid-column: 1;
                grid-row: 1;
            }
            .object2 {
                grid-column: 2;
                grid-row: 1;
            }
            .object3 {
                grid-column: 1;
                grid-row: 2;
            }
            .object4 {
                grid-column: 2;
                grid-row: 2;
            }
            .object5 {
                grid-column: 1;
                grid-row: 3;
            }
            .objectcon>div>img {
                width: 50%;
                border-radius: 1rem 0 0 1rem;
                left: 0;
                object-fit: cover;
            }
            .objectcon>div>p {
                width: 50%;
                padding: 1%;
                display: flex;
                align-items: center;
                justify-content: justify;
                flex-direction: column;
                font-size: 1vw;
                background-color: rgba(97, 97, 97, .5);
                border-radius: 0 1rem 1rem 0;
            }
            .objectheading {
                font-size: 1.5em;
                font-weight: bold;
                text-align: center;
                word-break: break-word;
                text-decoration: underline;
                font-family: 'Archivo', sans-serif;
            }
            .objectdetail {
                margin-top: 5%;
            }
            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Last site 'Akku' */
            .v6main {
                position: absolute;
                width: 85%;
                height: 65vh;
                top: 1.1%;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                background-color: rgba(255, 255, 255, .5);
                border-radius: 15px;
            }
            .akkuhead {
                color: rgb(97, 97, 97, .8);
                padding: 15px 0 0 30px;
                font-size: 3vh;
                text-decoration: underline;
            }
            .akku {
                width: 100%;
                height: 91%;
                margin: 0;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(3, 31%);
                grid-template-rows: repeat(2, 47%);
                justify-content: space-evenly;
                align-content: space-evenly;
            }
            .akku>div {
                max-height: 97%;
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                border-radius: 1em;
                background-color: rgba(97, 97, 97, .4);
            }
            .akku>div>img {
                width: 50%;
                border-radius: 1rem 0 0 1rem;
                left: 0;
                object-fit: cover;
            }
            .akku>div>p {
                width: 50%;
                padding: 1%;
                text-align: center;
                font-size: 1vw;
                border-radius: 0 1rem 1rem 0;
            }
            .obtext {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .obtext>br{
                display: none;
            }
            .objectheading {
                font-size: 1.5em;
                font-weight: bold;
                text-align: center;
                text-decoration: underline;
            }
            .objectdetail {
                margin-top: 5%;
                display: none;
            }
            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Last site 'Footer' */
            .sitefooter {
                position: absolute;
                width: 100%;
                height: 33vh;
                top: 67%;
                left: 50%;
                transform: translateX(-50%);
                -moz-transform: (-50%);
                -webkit-transform: translateX(-50%);
                background-color: rgba(97, 97, 97, .75);
                display: flex;
                justify-content: space-between;
            }
            .sitefooter>div {
                position: relative;
                color: rgba(255, 255, 255, .7);
                padding: 30px;
            }
            .contact {
                display: flex;
                flex-direction: column;
                align-items: left;
                justify-content: space-around;
            }
            .contact>p,
            .contact>p>a,
            .icons2 {
                display: flex;
                align-items: center;
            }
            .contact>p>a {
                color: rgba(255, 255, 255, .7);
            }
            .contact>p:nth-child(1) {
                font-size: 1.75vw;
                text-decoration: underline;
            }
            .contact>p:nth-child(2) {
                margin-top: 1.9vh;
                font-size: 1.3vw;
            }
            .contact>p:nth-child(3) {
                margin-top: 2.2vh;
                font-size: 1.3vw;
            }
            .contact>p:nth-child(4) {
                margin-top: 1.5vh;
                font-size: 1.3vw;
            }
            .contact>p:nth-child(5) {
                margin-top: 3.5vh;
                font-size: 1.4vw;
                letter-spacing: 2.6px;
                font-weight: bold;
                text-align: center;
            }
            .contact>p:nth-child(5)>a {
                font-weight: bold;
            }
            .icons {
                height: 3vh;
                padding: 0 10px 0 0;
                align-items: center;
            }
            .route {
                width: 20vw;
            }
            .route>iframe {
                width: 100%;
                height: 100%;
                border-radius: 5px;
                box-shadow: 0 0 10px rgb(255, 255, 255);
            }
            .brands {
                display: flex;
                align-items: left;
                justify-content: space-around;
                flex-direction: column;
            }
            .brands>p {
                display: flex;
                align-items: left;
                justify-content: justify;
                font-size: 1.75vw;
                text-decoration: underline;
                letter-spacing: 2px;
                font-weight: bold;
            }
            .brands>a {
                margin-top: 1vh;
                margin-left: 6px;
                font-size: 1vw;
                color: rgba(255, 255, 255, 0.7);
            }
            .brands>:nth-child(1) {
                margin-top: 5px;
            }
            .badge {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-direction: column;
                width: 20%;
            }
            .badge>img {
                height: 50%;
            }
            .impressum {
                width: 100%;
                margin-top: 3.5vh;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
            }
            .impressum>p,
            .impressum>a {
                color: rgba(255, 255, 255, .7);
                font-size: .9vw;
            }
            .iconlinks {
                margin-top: 20px;
                text-align: center;
                font-size: .5vw;
            }
            .iconlinks>p>a {
                color: rgba(255, 255, 255, .7);
            }
        }
        
        /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Tablets */

        @media only screen and (min-width:421px) and (max-width:1024px) {
            
            #fullpage {
                position: relative;
                height: auto;  
                width: auto;
                background-image: url(img/background1.gif);
                
            }

            .section {
                position: relative;
                background-size: 100%;
            }

            #logo {
                width: 25vw;
                margin-left: 0;
            }
        }

        /*--------------------------------------------------------------------------------------------------------------------------------------------*/
        /* Mobile */

        @media only screen and (max-width: 420px) {

            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
        /* Mobile */

        @media only screen and (max-width: 420px) {

            #fullpage {
                display: none;
            }

            #mobile {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100vh;  
                width: auto;
                background-image: url(img/background1.gif);
            }

            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* Action Button Menü */

            .button {
                position: fixed;
                bottom: 22px;
                right: 19px;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                background: rgba(5, 104, 27, 0.7);
                box-shadow: 1px 2px 4px grey;
                z-index: 3;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            
            .button:hover{
                cursor: pointer;
            }
            
            .button img {
                width: 45%;
                transform: rotate(0deg);
                transition: 0.4s;
            }
            
            a img {
                width: 45%;
            }
            
            .popup {
                position: fixed;
                bottom: 25px;
                right: 19px;
                height: 0px;
                width: 50px;
                transition-delay: 0.3s;
                transition: 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
                justify-content: center;
            }
            
            .icon {
                overflow: hidden;
                border-radius: 50%;
                transition: 0.4s ease-in;
                width: 39px;
                height: 39px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-shadow: 1px 1px 3px gray;
            }
            
            #link1 {
                transition-delay: 0.2s;
                background:rgba(97, 97, 97, .7);
                margin-bottom: 69px;
            }
            
            #link2 {
                transition-delay: 0.2s;
                background:rgba(97, 97, 97, .7);
                margin-bottom: 5px;
            }
            
            #link3 {
                transition-delay: 0.2s;
                background:rgba(97, 97, 97, .7);
                margin-bottom: 5px;
            }
            
            #link4 {
                transition-delay: 0.2s;
                background:rgba(97, 97, 97, .7);
                margin-bottom: 5px;
            }
            
            #link5 {
                transition-delay: 0.2s;
                background:rgba(97, 97, 97, .7);
                margin-bottom: 5px;                
            }
            
            .links:hover {
                cursor: pointer;
            }
            
            .links:hover img {
                transform: rotate(360deg);
                transition: all 0.5s;
            }
            
            .show {
                height: 290px;
            }
            
            .active img {
                transform: rotate(225deg);
                width: 40%;
            }

            /*--------------------------------------------------------------------------------------------------------------------------------------------*/
            /* site1 */
            
            .site1 {
                width: 100vw;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
             }

            #m-block1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 90%;
                height: 75px;
                margin-top:0;
                padding: 7px;
                background-color: rgba(255, 255, 255, .5);
                border-radius: .75rem;
            }

            #mobilelogo {
                width: 35%;
            }

            #m-top {
                position: relative;
                width: 90%;
                margin-top:0;
                box-shadow: 0 0 12px rgb(255, 255, 255);
                border-radius: .75rem;
              
            }

            #m-top img {
                width: 100%;
                border-radius: .75rem;
                opacity: .8;
            }

            .m-welcome {
                width: 100%;
                height: 35%;
                background-color: rgba(97, 97, 97, .7);
                position: absolute;
                bottom: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: .75rem;
            }
 
            #m-block2 {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-evenly;
                width: 90%;
                margin-top:0;
                padding: 5px;
                border-radius: .75rem;
                background-color: rgba(97, 97, 97, .5);
            }

            .m-open {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: justify;
                width: 47.5%;
            }

            .m-open h1 {
                font-size: 17px;
                text-decoration: underline;
            }

            .m-open p {
                margin-top: 6px;
                font-size: 8px;
                line-height: 1.5em;
            }

            .m-contact {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: justify;
                width: 47.5%;
                padding-left: 2px;
                border-left: 1px solid rgba(255, 255, 255, .7);
            }

            .m-contact h1 {
                font-size: 17px;
                text-decoration: underline;
            }

            .m-contact span {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }

            .mspan1 {
                margin-top: 6px;
            }

            .m-contact a {
                margin-left: 5px;
                padding: 0;
                font-size: 8px;
                line-height: 1.5em;
            }

            .m-contact .icons {
                width: 9px;
                height: 9px;
            }

            #m-block3 {
                width: 90%;
                margin-top:0;
                overflow: hidden;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .m-swiper-container {
                position: relative;
                border-radius: .75rem;
                width: 100%;
                display: flex;
                flex-direction: row;
                visibility: visible;
            }

            .m-slidepics {
                border-radius: .75rem;
            }

            #m-block4 {
                width: 90%;
                padding: 1.5%;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;
                border-radius: .75rem;
                background-color: rgba(97, 97, 97, .5);
            }

            .m-impressum {
                width: 40%;
                height: 90%;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;
                font-size: 60%;
                border-right: .5px solid rgba(5, 104, 27, 0.7);
            }

            .m-iconlinks {
                width: 57.5%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: .5vh;
                color: rgba(255, 255, 255, .7);
            }

            .m-iconlinks p a {
                color: rgba(5, 104, 27, 0.7);
            }

















        }
        /*--------------------------------------------------------------------------------------------------------------------------------------------*/
        /* Impressum und Datenschutz*/

        #impressum {
                position: fixed;
                display: none;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                cursor: pointer;
        }