@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');


:root{
    --text-color: black;
    --anthra: #262626;
    --background-color: white;
    --highlight: #8e2121;
    --highlighttrans: #8e2121;
    --bordertrans: #595959ae;
    --border: rgba(87, 87, 87, 0.24);
    --schriftkontrast: #2d0202;
    --sprungmarke: #ad1f24;
    --trans: rgba(0, 0, 0, 0.492);
    --nav-height: 9vh;
    --nav-height-top: 3vh;
    --einsprung: 1.5vw;
}
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
html{
    background-color: var(--anthra);
    width: 100%;
    scroll-behavior: smooth;
}
body{
    background-color: white;
    font-family: 'Quicksand';
    font-size: 1.2em;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.02em;
    line-height: 1.5em;
    width: 100%;
}
h1, h2, h3, h4, h5{
    font-family: 'Quicksand';
    letter-spacing: 0,05em;
    font-size: 2.5em;
    font-weight: 400;
    line-height: 1.3em;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}



/* Header */
header{
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    height: 80vh;
    background-image: url(medien/Bilder/kompri/092.webp);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    box-shadow: -5em -5em 5em -5em black inset;
}
#headerbackground{
    width: 45%;
    height: 100vh;
    position: relative;
}
#headerlogo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 55%;
    padding-left: 2%;
    height: 100%;
    margin-top: 5vh;
    border-radius: 0.2em;
    background-color: #ffffff;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0);
}
#headerlogo img{
    width: 55%;
    height: auto;
}
#headerslogan{
    width: 90%;
    color: var(--highlighttrans);
    border-top-style: solid;
    border-color: var(--highlighttrans);
    border-width: 0.05em;
    padding-top: 1em;
    margin-top: 0.5em;
    letter-spacing: 0.1em;
    font-size: 1.8em;
}
/*Ende Header */




/* Navigationsleiste Groß */
#navigation{
    position: fixed; 
    width: 100%;
    height: var(--nav-height);
    top: 0;
    left: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    top: 0px; 
    box-shadow: 0px 7px 50px 33px rgba(0, 0, 0, 0.24);
    background: rgb(38,38,38);
    background: radial-gradient(circle, rgba(38,38,38,1) 17%, rgba(21,21,21,1) 83%, rgba(16,16,16,1) 93%, rgba(12,12,12,1) 97%, rgba(0,0,0,1) 100%);
    font-size: 1em;
    z-index: 5;
}
#menu{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-width: 0.05em;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    height: var(--nav-height);
    list-style: none;
}
#menu li{
    display: flex;
    width: 100%;
    height: var(--nav-height);
    position: relative;
}

#menu li a{
    color: white;
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

#drop_kant li{
    height: calc(var(--nav-height) * 0.8);
    border-top-style: solid;
    border-top-width: 0.05em;
    border-top-color: var(--border);
}

#drop_kant li a{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: left;
    padding-left: var(--einsprung);
    width: 100%;
    color: white;
}
#drop_shk li{
    height: calc(var(--nav-height) * 0.8);
    border-top-style: solid;
    border-top-width: 0.05em;
    border-top-color: var(--border);
}

#drop_shk li:first-child {
    border-top-style: none;
}
#drop_kant li:first-child {
    border-top-style: none;
}

#drop_shk li a{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: left;
    padding-left: var(--einsprung);
    width: 100%;
    color: white;
}

.hover1:hover{
    background: var(--highlight);
    color: white;
}
.hover2:hover{
    background: var(--bordertrans);
}
.hover3:hover{
    background: var(--highlight);
}
.hover4:hover{
    background: var(--anthra);
}



#navigation img{
    position: relative;
    left: 2vw;
    height: 5vh;
    width: auto;
    overflow: hidden;
}
#navigation .fa-solid{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#navigation .fa-house{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
}
#navigation .fa-house:hover{
    cursor: pointer;
}


.aktiv3:hover{
    color: white;
}


.hover1{
    height: var(--nav-height);
}
nav .fa-chevron-down{
    font-size: 0.8em;
    padding-left: 0.7vw;
}
.dropdown{
    height: fit-content;
    width: 100%;
    background-color: var(--anthra);

    display: none;
    flex-direction: column;

    position: absolute;
    left: 0;
    top: var(--nav-height);
    list-style: none;
}

#menu li:hover .dropdown{
    display: flex;
}


nav button{
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    list-style: none;
    height: var(--nav-height);
    background-color: transparent;
    font-size: 1em;
    border: none;
    cursor: pointer;
    position: absolute;
}


#toggle{
    display: none;
    position: absolute;
    right: 2vw;
    top: calc((var(--nav-height) - var(--nav-height-top)) *0.5 );
    height: var(--nav-height-top);
    width: 8vw;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.bar{
    height: 0.2vh;
    width: 100%;
    background: white;
    border-radius: 0.1vh;
}



.aktiv{
    justify-content: center;
    text-align: center;
    align-items: center;
    cursor: default;
}

.aktiv2{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding-left: var(--einsprung);
    color: var(--highlight);
    cursor: default;
}




/* Ende Navigationsleiste Groß */


/* Überschrift */
.titel1{
    display: flex;
    font-weight: 100%;
    width: 90%;
    font-size: 1.5em;
    color: whitesmoke;
    padding: 1em;
    padding-top: 2vh;
    padding-bottom: 2vh;
    background: transparent;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.0);
    position: absolute;
    top: 35%;
    right: 0vh;
    border-left-style: solid;
    border-left-color: var(--highlight);
    border-left-width: 0.1em;
}
.titel1wort{
    letter-spacing: 0.2em;
    text-align: left;
    text-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;
    padding-left: 3vw;
    padding-bottom: 3vh;
    line-height: 2.5em;
}
/* Ende Überschrift */


/*Einleitung */
.leistungen{
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    margin-left: 0%;
    margin-bottom: 0vh;
    margin-top: 20vh;
}
.einleitung{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;
    line-height: 2em;
}
.akzent{
    display: flex;
    justify-content: right;
    width: 30%;
    margin-right: 10%;
    margin-left: 60%;
    font-size: 0.8em;
    color: var(--sprungmarke);
    padding: 1vh;
    border-bottom-style: solid;
    border-bottom-color: var(--sprungmarke);
    border-bottom-width: 0.05em;
}
.titelspruch{
    justify-content: center;
    align-items: center;
    height: auto;
    text-align: right;
    width: 60%;
    margin-right: 15%;
    margin-left: 25%;
    padding-top: 8vh;
    padding-bottom: 8vh;
    color: var(--schriftkontrast);
    font-size: 1.2em;
    line-height: 1.8em;
}
.leistungsangebot{
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-around;
    width: 40%;
    margin-left: 10%;
    margin-bottom: 20vh;
    background-color: var(--anthra);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 2em;
    text-align: center;
    color: white;
}
.leistungsangebot .fa-solid{
    display: flex;
    align-items: baseline;
    justify-content: baseline;
    height: available;
    width: auto;
}
.leistungsangebot .fa-chevron-down{
    font-size: 1em;
    color: whitesmoke;
    align-items: baseline;
    justify-content: center;
}
/* Ende Einleitung*/



/* Bereichsauswahl Buttons */
#auswahl{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 80%;
    width: 100%;
    margin-left: 0%;
    height: auto;
    background-color: transparent;
}
.auswahl{
    font-size: 1em;
    text-align: center;
    letter-spacing: 0.15em;
    padding: 0.4em 3em 0.4em 3em;
    margin: 0.5em;
    margin-left: 2em;
    margin-right: 2em;
    border-radius: 2em;
    color: whitesmoke;
    border-width: 0.05em;
    background-color: var(--anthratrans);
    box-shadow: 0px 0px 0.1em 0.1em var(--bordertrans);
}
.auswahl:hover{
    cursor: pointer;
    box-shadow: 0px 0px 0.1em 0.1em var(--border);
    color: whitesmoke;
}
/* Ende Bereichsauswahl Buttons */


/*Sprungmarke*/
.sprungmarke{
    display: flex;
    position: fixed;
    top: 85vh;
    right: 3vw;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: var(--sprungmarke);
    z-index: 5;
}
.sprungmarke:hover{
    cursor: pointer;
}
.fa-chevron-up{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: whitesmoke;
    padding: 1em;
    position: center center;
}
/*Ende Sprungmarke*/



/* Footer */
footer{
    background: var(--anthra);
    color: rgb(155, 155, 155);
    padding-bottom: 4em;
    margin-top: 20vh;
}
.rechtliches{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    padding: 0.5em;
    padding-top: 2em;
    align-items: center;
}
.rechtliches a{
    color: rgb(155, 155, 155);
}
.text{
    font-size: 1em;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-width: 0.05em;
    padding: 0.1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 1.2em;
    transition: all ease-in-out 0.05s;
}
.text:hover{
    border-style: solid;
    border-color: transparent;
    border-width: 0.05em;
    background-color: rgba(255, 255, 255, 0.493);
    border-radius: 1.2em;
    color: black;
}
footer p{
    font-size: 0.7em;
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    padding-top: 2.5em;
    padding-bottom: 0.5em;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0);
}
.iconz{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: fit-content;
    align-items: center;
}
.Insta{
    display: flex;
    margin-right: 2em;
}
.Insta a{
    padding: 0.3em;
    border-radius: 50%;
    border-width: 0.05;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    height: 2em;
    width: 2em;
    text-align: center;
    text-decoration: none;
    color: black;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out 0.01s;
}
.Insta a .fa-brands{
    font-size: 1.4em;
    position: relative;
    color: rgb(155, 155, 155);
}
.Insta a:hover{
    top: 0;
    background: linear-gradient( -45deg, #ed1c94, #ffec17);
    border-color: white;
}
.Insta a:hover .fa-brands{
    color: white;
}
.facebook{
    display: flex;
    margin-left: 2em;
}
.facebook a{
    padding: 0.3em;
    border-radius: 50%;
    border-width: 0.05em;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    height: 2em;
    width: 2em;
    text-align: center;
    text-decoration: none;
    color: black;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out 0.01s;
}
.facebook a .fa-brands{
    font-size: 1.4em;
    position: relative;
    color: rgb(155, 155, 155);
}
.facebook a:hover{
    top: 0;
    background: linear-gradient( -45deg, #0f2f6e, #3d69c0);
    border-color: white;
}
.facebook a:hover .fa-brands{
    color: white;
}
.footersmall{
    display: none;
}
/* Ende Footer */



@media (max-width: 1200px) and (min-width:993px) and (orientation: landscape){


    /* Navigationsleiste Groß */
    #navigation{
    height: 10vh;
    font-size: 0.9em;
    }
    #menu{
    height: 10vh;
    }
    #navigation img{
        height: 6vh;
        margin-top: 1.5vh;
    }
    /* Ende Navigationsleiste Groß */

    /* Bereichsauswahl Buttons */
        .auswahl{
        padding: 0.4em 2em 0.4em 2em;
        }
    /* Bereichsauswahl Buttons */

    /*Einleitung */
        .titel1{
            font-size: 1.3em;
        }
    /* Ende Einleitung*/

    
    
    
    /* Footer */
        .text{
            font-size: 0.9em;
            border-radius: 1.1em;
        }
        .text:hover{
            border-radius: 1.1em;
        }
    /* Ende Footer */
}
    
@media (max-width: 1200px) and (min-width:601px) and (orientation: portrait){

     :root{
        --nav-height: 8vh;
        --nav-height-top: 5vh;
        --einsprung: 10vw;
    }

    /* Header */
    header{
        justify-content: center;
        position: relative;
        width: 100%;
        height: 80vh;
        margin-top: 7vh;
        }
        #headerbackground{
            display: none;
        }
        #headerlogo{
            position: absolute;
            top: 13%;
            padding: 4%;
            padding-top: 15vh;
            padding-bottom: 15vh;
            width: 70%;
            height: fit-content;
            margin-left: 15%;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.899);
            border-radius: 0.01em;
        }
        #headerslogan{
            width: 70%;
            text-align: center;
            color: var(--highlighttrans);
            border-top-style: solid;
            border-color: var(--highlighttrans);
            border-width: 0.05em;
            padding-top: 0.5em;
            padding-left: 0;
            margin-top: 0.5em;
            font-size: 1.5em;
            align-items: center;
            width: 100%;
            margin-top: 5vh;
            border-radius: 0em;
            height: fit-content;
            background-color: transparent;
        }
        #headerlogo img{
            width: 70%;
            height: auto;
        }
    /* Ende Header */


    /* Navigation */

    #navigation{
    justify-content: left;
    }
    #toggle{
        display: flex;
    }

    #menu{
        display: none;
        position: absolute;
        left: 0;
        top: var(--nav-height);
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        height: fit-content;
        background-color: var(--anthra);
    }

    #menu li{
        min-height: var(--nav-height);
        height: fit-content;
        border-top-style: solid;
        border-top-width: 0.05em;
        border-top-color: var(--border);
    }

    #menu li a{
        font-size: 1em;
        justify-content: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    #menu li:first-child {
        border-top-style: none;
    }
    #menu li:hover .dropdown{
        display: none;
    }

    .hover1:hover{
        background-color: var(--anthra);
    }


 

    .dropdown{
        background-color: var(--border);
        position: static;

    }

    .ausklappbar{
        position: relative;
        height: fit-content;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }


    nav button{
        position:  static;
        width: 100%;
    }   
    #dropbtnshk{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #dropbtnkant{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #drop_shk{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }
    #drop_kant{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }

    #drop_shk li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding-left: 0;
        width: 100%;
    }

    #drop_shk li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding: 0;
        width: 100%;
    }


    .aktiv2{
        justify-content: left;
        text-align: left;
        margin-left: calc(var(--einsprung) * 2);
    }
    .aktiv{
        justify-content: left;
        text-align: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    /* Ende Navigation */










    
    /* Leistungsbeschreibung */
    .leistungsangebot{
        margin-left: 5%;
        width: 80%;
    }
    /* Ende Leistungsbeschreibung */



    /* Bereichsauswahl Buttons */
    #auswahl{
        flex-direction: column;
        height: 45%;
        top: 55%;
        width: 46%;
        margin-left: 28%;
    }
    .auswahl{
        font-size: 1em;
        padding: 0.6em 1.5em 0.6em 1.5em;
        width: 100%;
        text-align: center;
        margin-top: 0.7em;
        margin-bottom: 0.7em;
    }
    /* Ende Bereichsauswahl Buttons */

    /*Einleitung */
    .akzent{
            width: 40%;
            margin-right: 5%;
            margin-left: 60%;
            text-align: right;
    }
    .titelspruch{
            width: 85%;
            margin-right: 5%;
            margin-left: 10%;
            padding-top: 8vh;
            padding-bottom: 8vh;
    }
    .titel1wort{
           right: 0vh;
           border-left-width: 0.1em;
    }
    .titel1{
            font-size: 1em;
    }
    /* Ende Einleitung*/

     
    /* Footer */
    footer{
            margin-top: 20vh;
    }
    .rechtliches{
            flex-direction: column;
            padding-bottom: 2em;
    }
    .rechtliches li{
            margin-top: 1vh;
            margin-bottom: 1vh;
    }
    footer p{
            padding-top: 0.5em;
    }
    .Insta{
            margin-right: 1em;
            margin-top: 2vh;
    }
    .facebook{
            margin-left: 1em;
            margin-top: 2vh;
    }
    /* Ende Footer */




}
    


@media (max-width: 992px) and (orientation: landscape){

     :root{
        --nav-height: 10vh;
        --nav-height-top: 6vh;
        --einsprung: 8vw;
    }

    /* Header */
    header{
        height: 90vh;
    }
    #headerbackground{
        width: 45%;
    }
    #headerlogo{
        width: 55%;
        padding-left: 0%;
    }
    #headerlogo img{
        width: 45%;
    }
    #headerslogan{
        width: 80%;
        font-size: 1.2em;
    }
    /* Ende Header */

  














    /* Navigation */

    #navigation{
    justify-content: left;
    }
    #toggle{
        display: flex;
        width: 4vw;
    }
    .bar{
        height: 0.4vh;
        border-radius: 0.2vh;
    }

    #menu{
        display: none;
        position: absolute;
        left: 0;
        top: var(--nav-height);
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        height: fit-content;
        background-color: var(--anthra);
    }

    #menu li{
        min-height: var(--nav-height);
        height: fit-content;
        border-top-style: solid;
        border-top-width: 0.05em;
        border-top-color: var(--border);
    }

    #menu li a{
        font-size: 1em;
        justify-content: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    #menu li:first-child {
        border-top-style: none;
    }
    #menu li:hover .dropdown{
        display: none;
    }

    .hover1:hover{
        background-color: var(--anthra);
    }


 

    .dropdown{
        background-color: var(--border);
        position: static;

    }

    .ausklappbar{
        position: relative;
        height: fit-content;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }


    nav button{
        position:  static;
        width: 100%;
    }   
    #dropbtnshk{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #dropbtnkant{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #drop_shk{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }
    #drop_kant{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }

    #drop_shk li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding-left: 0;
        width: 100%;
    }

    #drop_shk li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding: 0;
        width: 100%;
    }


    .aktiv2{
        justify-content: left;
        text-align: left;
        margin-left: calc(var(--einsprung) * 2);
    }
    .aktiv{
        justify-content: left;
        text-align: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    /* Ende Navigation */

















    
    /* Leistungsbeschreibung */
       .leistungsangebot{
        margin-left: 5%;
        width: 60%;
        font-size: 0.9em;
        padding: 0.4em;
       }
    /* Ende Leistungsbeschreibung */

    /*Sprungmarke*/
       .sprungmarke{
        top: 80vh;
        }
    /*Ende Sprungmarke*/


        /* Bereichsauswahl Buttons */
        #auswahl{
            justify-content: center;
            top: 80%;
            width: 90%;
            margin-left: 5%;
            margin-right: 5%;
        }
        .auswahl{
            font-size: 0.8em;
            padding: 0.4em 1.5em 0.4em 1.5em;
            margin-left: 2vw;
            margin-right: 2vw;
            width: available;
            text-align: center;
        }
    /* Ende Bereichsauswahl Buttons */


    /*Einleitung */
        .akzent{
            width: 40%;
            margin-right: 5%;
            margin-left: 60%;
            text-align: right;
        }
        .titelspruch{
            width: 85%;
            margin-right: 5%;
            margin-left: 10%;
            padding-top: 8vh;
            padding-bottom: 8vh;
        }
        .titel1wort{
           right: 0vh;
           border-left-width: 0.1em;
        }
        .titel1{
            font-size: 0.9em;
        }
    /* Ende Einleitung*/

     
    /* Footer */
        footer{
            margin-top: 40vh;
        }
        .rechtliches{
            flex-direction: column;
            padding-bottom: 2em;
        }
        .rechtliches li{
            margin-top: 1vh;
            margin-bottom: 1vh;
        }
        footer p{
            padding-top: 0.5em;
        }
        .Insta{
            margin-right: 1em;
            margin-top: 4vh;
        }
        .facebook{
            margin-left: 1em;
            margin-top: 4vh;
        }
    /* Ende Footer */

}

    
@media (max-width: 600px) and (orientation: portrait){


    :root{
        --nav-height: 8vh;
        --nav-height-top: 3vh;
        --einsprung: 10vw;
    }
    
    body{
    font-size: 1em;
    letter-spacing: 0.015em;
    line-height: 1.3em;
    }

    
    /* Header */
        header{
        justify-content: center;
        position: relative;
        width: 100%;
        height: 80vh;
        margin-top: var(--nav-height);
        }
        #headerbackground{
            display: none;
        }
        #headerlogo{
            position: absolute;
            top: 15%;
            padding: 4%;
            padding-top: 13vh;
            padding-bottom: 13vh;
            width: 80%;
            height: fit-content;
            margin-left: 10%;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.899);
            border-radius: 0.01em;
        }
        #headerslogan{
            width: 70%;
            text-align: center;
            color: var(--highlighttrans);
            border-top-style: solid;
            border-color: var(--highlighttrans);
            border-width: 0.05em;
            padding-top: 0.5em;
            padding-left: 0;
            margin-top: 0.5em;
            font-size: 1em;
            align-items: center;
            width: 100%;
            margin-top: 5vh;
            border-radius: 0em;
            height: fit-content;
            background-color: transparent;
        }
        #headerlogo img{
            width: 80%;
            height: auto;
        }
    /* Ende Header */

    /* Navigation */


    #toggle{
        display: flex;
    }

    #menu{
        display: none;
        position: absolute;
        left: 0;
        top: var(--nav-height);
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        height: fit-content;
        background-color: var(--anthra);
    }

    #menu li{
        min-height: var(--nav-height);
        height: fit-content;
        border-top-style: solid;
        border-top-width: 0.05em;
        border-top-color: var(--border);
    }

    #menu li a{
        font-size: 1em;
        justify-content: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    #menu li:first-child {
        border-top-style: none;
    }
    #menu li:hover .dropdown{
        display: none;
    }

    .hover1:hover{
        background-color: var(--anthra);
    }

    #navigation .fa-house{
        justify-content: center;
    }

 

    .dropdown{
        background-color: var(--border);
        position: static;

    }

    .ausklappbar{
        position: relative;
        height: fit-content;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }


    nav button{
        position:  static;
        width: 100%;
    }   
    #dropbtnshk{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #dropbtnkant{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--einsprung);
        padding-right: var(--einsprung);
    }

    #drop_shk{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }
    #drop_kant{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(var(--einsprung) * 0.5);
    }

    #drop_shk li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li a{
        padding-left: calc(var(--einsprung) * 1);
        font-size: 0.9em;
        width: 100%;
    }

    #drop_kant li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding-left: 0;
        width: 100%;
    }

    #drop_shk li{
        height: calc(var(--nav-height) * 0.8);
        min-height: calc(var(--nav-height) * 0.8);
        padding: 0;
        width: 100%;
    }


    .aktiv2{
        justify-content: left;
        text-align: left;
        margin-left: calc(var(--einsprung) * 2);
    }
    .aktiv{
        justify-content: left;
        text-align: left;
        padding-left: var(--einsprung);
        width: calc(100% - var(--einsprung));
    }

    /* Ende Navigation */











    
    /* Leistungsbeschreibung */
       .leistungsangebot{
        margin-left: 5%;
        width: 80%;
       }
    /* Ende Leistungsbeschreibung */

    /*Sprungmarke*/
       .sprungmarke{
        top: 77vh;
        }
    /*Ende Sprungmarke*/




    /*Einleitung */
        .akzent{
            width: 40%;
            margin-right: 5%;
            margin-left: 60%;
            text-align: right;
        }
        .titelspruch{
            width: 85%;
            margin-right: 5%;
            margin-left: 10%;
            padding-top: 8vh;
            padding-bottom: 8vh;
            font-size: 1em;
        }
        .titel1wort{
           right: 0vh;
        }
        .titel1{
            font-size: 0.6em;
            border-left-width: 0.2em;
        }
    /* Ende Einleitung*/

     
    /* Footer */
        footer{
            margin-top: 20vh;
        }
        .rechtliches{
            flex-direction: column;
            padding-bottom: 2em;
        }
        .rechtliches li{
            margin-top: 1vh;
            margin-bottom: 1vh;
        }
        footer p{
            padding-top: 0.5em;
        }
        .Insta{
            margin-right: 1em;
            margin-top: 2vh;
        }
        .facebook{
            margin-left: 1em;
            margin-top: 2vh;
        }
    /* Ende Footer */
    
}