/*Body design des body für media size >850*/
body {
    background-image: url("../images/flower_CV_1250.png");
    background-size: cover;
    background-repeat: repeat;
    padding:0em;
}

/*Loading Page*/
    /*Style des div der den loader enthält*/
    #loader{
        display:flex;
        height: 40em;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-family: "helvetica";
    }

    /*Style des Quadranten, der sich in einen Kreis verwandelt*/
    #cubeToCircle{
        width: 100px;
        height: 100px;
        position: relative;
        background-color:rgba(0, 0, 255, 1);
        animation-name: ToCircle;
        animation-duration: 20s;
    }

    @keyframes ToCircle {
        0%   {background-color: rgba(1, 240, 255, 1);border-radius: 0em; left: -100px; top: 0px;}
        100% {background-color: rgba(1, 240, 255, 0.01);border-radius: 4em; left: 100px; top:0px;}
    }

    /*Style Schriftzug, der mit dem Quadranten langsam verschwindet*/
    #fading{
        animation-name: Fading;
        animation-duration: 20s;
    }

    @keyframes Fading {
        0% {opacity: 1;}
        100% {opacity: 0.01;}
    }

/*Style des div, der alles enthält (wie ein body)*/
#bodyDiv{
        font-family: "helvetica";
        display:none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1em 2em;
        margin: 0em;
    }

/*Style des Header >850px*/

header {
    background-color:rgba(206, 243, 255, 0.80);
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin:0.5em;
    padding: 1em;
    border-radius: 1em 1em 0em 0em;
    z-index:0;
}
    /*Style H1 für Bildschirmgrösse >850px*/
    h1.title932 {
        text-align:left;
    }

    /*Style H1 für Bildschirmgrösse <660px*/
    h1.title660{
        display:none;
        position: absolute;
        text-align: center;
        z-index:-1;
    }
    
    h2 {
        margin: 0em;
    }
    
    

    .BoxHeaderContainer {
        display:flex;
        flex-direction:row;
        justify-content: space-around;
    }

    /*Style der Boxen im Header 3 Stk. bei >932px*/

    .BoxHeader {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:relative;
        flex-basis: 17em;
        width: 10em;
        height: 20em;
        margin: 0.5em;
        padding: 0.5em;
        box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
        z-index: 0;
        overflow-y:auto;
    }

    .BoxHeader_portrait {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:relative;
        flex-basis: 17em;
        width: 10em;
        height: 20em;
        margin: 0.5em;
        padding: 0.5em;
        z-index: 0;
        overflow-y:auto;
    }

    .BoxHeader_portrait_visible {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:relative;
        flex-basis: 17em;
        width: 10em;
        height: 20em;
        margin: 0.5em;
        padding: 0.5em;
        z-index: 0;
        overflow-y:auto;
    }

    /*Menü Button für Bildschirmgrösse <660px in Bildschirmen >660px*/

        .menu660{
            display:none;
            z-index: -1;
            position: absolute;
        }

    /* Menü für Bildschirmgrösse unter 850px*/

        #BoxHeaderMenu850{
            display:none;
            position: absolute;
            z-index: -2;
        }

        /*Style des menü im Header d.h. Kurzprofil, Sprachen und Skills >992px*/
        /*Style des div, der den Button enthält*/
        .button_ol {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            border-top:2px solid rgba(1, 240, 255, 1);
            padding: 0.1em;
            width: 90%;
            text-align: center;
        }

        .button_ol_last {
            display: flex;
            flex-wrap: wrap;
            border-top:2px solid rgba(1, 240, 255, 1);
            border-bottom:2px solid rgba(1, 240, 255, 1);
            padding: 0.1em;
            width: 90%;
            text-align: center;
        }

            /*Style des button innerhalb des div, der den button enthält*/

            button{
                width: 35%;
                border:0px;
                border-radius:5px;
                padding: 0.25em;
                background-color:transparent;
                font-family: "helvetica";
                font-weight: bold;
                color: black;
                transition: background-color 0.5s ease-in;
            }

            button:hover{
                background-color: rgba(206, 243, 255, 1);
                border-top: 2px solid rgba(1, 240, 255, 1);
                border-bottom: 2px solid rgba(1, 240, 255, 1);
            }

            .nav_li_kp {
                border-top:2px solid transparent;
                border-bottom:2px solid transparent;
                font-size: larger;
                font-weight: bold;
                color: black;
                margin: auto;
                padding: 0.5em;
                width: 100%;
                border-radius: 0.25em;
                word-break: break-all;
                transition: background-color 0.5s;
            }

            a.Skillstyle {
                text-decoration:none;
                color: black;
            }
        
            .nav_li_kp:hover {
                border-top:2px solid rgba(1, 240, 255, 1);
                border-bottom:2px solid rgba(1, 240, 255, 1);
                background-color: rgba(206, 243, 255, 1);
            }
        
            .nav_li_kp:active {
                border-top:2px solid rgba(1, 240, 255, 1);
                border-bottom:2px solid rgba(1, 240, 255, 1);
                background-color: rgba(206, 243, 255, 1);
            }

            /*spezifischer Style der Boxen im Header: Boxen für Kurzprofil, Sprachen und Skills >932px*/

            .boxBgsl {
                display: inline-block;
                position:relative;
                margin:0em;
                padding: 0em;
                width: 100%;
                height: 100%;
                z-index: 0;
                overflow-y:auto;
            
            }

                /*Verstecken der unsichtbaren Boxen im Heder >850px>*/
                .boxBgsl1 {
                    visibility:hidden;
                    display:none;
                    position: absolute;
                    z-index: -1;
                }
            
            /*spezifischer Style der Boxen im Header: Kurzprofil >850px*/

            #Kurzprofil {
                text-align:left;
            }

            /*spezifischer Style der Boxen im Header: Portrait >850px*/

            #portrait{
                display: flex;
                width:100%;
                justify-content: center;
                object-fit: contain;
                margin: auto;
                overflow: hidden;
            }

            #portrait_style{
                width:100%;
                height: auto;
                justify-content: center;
                object-fit: contain;
                margin: auto;
                border-radius: 10px 0px 10px;
            }

            /*spezifischer Style der Boxen im Header: Sprachen & Skills >932px*/


            table, tr, th, td {
                width:100%;
                text-align: center;
                height: 2em;
                padding:0px;
            }

            table{
                border-collapse: collapse;

            }

            th{
                font-size: 20px;
            }
            .background {
                background-image: linear-gradient(180deg, rgba(206, 243, 255, 1),rgba(206, 243, 255, 0.80));
            }

            .titelzelle{
                position: -webkit-sticky;
                position: sticky;
                top: 0;
            }


            td {
                border-top:2px solid rgba(1, 240, 255, 1);
            }

            p.languages {
                font-size: 16px;
                padding:1em;
                margin: 0.2em;
                border-top: 2px solid transparent;
                border-bottom: 2px solid transparent;
                border-radius: 0.25em;
                transition: background-color 0.5s ease-in;
            }


            p.languages:hover {
                padding:1em;
                margin: 0.2em;
                border-top: 2px solid rgba(1, 240, 255, 1);
                border-bottom: 2px solid rgba(1, 240, 255, 1);
                background-color: rgba(206, 243, 255, 1);
                border-radius: 0.25em;
            }
            
            .text_kurzprofil {
               text-align:left;
            }
/*Design des nav für den Hautpteil*/


nav {
    display:flex;
    text-align:center;
    justify-content: center;
    margin:  1em auto 0em auto;
    padding: 0em;
    border-radius: 10px 10px 0px 0px;
    background-color:rgba(206, 243, 255, 0.80);
}

    .button_nav{
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
        margin: auto 0.5em 0em 0.5em;
        width: 30%;
        min-width: 8em;
        height:100%;
        padding: 0.1em 0.1em 0em 0.1em;
    }

        .nav_li {
            display: flex;
            flex-direction: row;;
            list-style-type:none;
            border-top:2px solid transparent;
            border-radius: 5px 5px 0px 0px;
            width: 100%;
            height: 100%;
            justify-content: center;
            font-size: 100%;
            font-weight: bold;
            margin: auto;
            padding: 0.5em;
            transition: background-color 0.5s ease-in;
        }

        .nav_li:hover {
            border-top:2px solid rgba(1, 240, 255, 1);
            background-color: rgba(206, 243, 255, 1);
        }

        .nav_li_active{
            border-top:2px solid rgba(1, 240, 255, 1);
            background-color: rgba(206, 243, 255, 1);
            display: flex;
            flex-direction: row;;
            list-style-type:none;
            border-radius: 5px 5px 0px 0px;
            width: 100%;
            height: 100%;
            justify-content: center;
            font-size: 100%;
            font-weight: bold;
            margin: auto;
            padding: 0.5em;
        }

/*Design des Teils mit Arbeitserfahrung, Ausbildung und Weiterbildung >932px*/

.Hauptteil {
    background-color:rgba(206, 243, 255, 0.80);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
    width: 100%;
    margin: 0em 0.5em 0.5 em 0.5em;
    padding: 1em;
    z-index:0;
}

.content660{
    display: flex;
    flex-direction: column;
    background-color:rgba(206, 243, 255, 0.80);
    position:relative;
    justify-content: center;
    text-align:center;
    align-items:center;
    width: 100%;
    margin:0em 1em 0.5em 1em;
    padding: 1em;
    z-index: 0;
}


.content_kss_660{
    display: none;
    position:absolute;
    z-index: -1;
}

    /*Spezifische Styles um Styling für Bildschirmgrösse <660px in Bildschirmgrösse zu vermeiden >660px*/

        .content660_portrait{
            display:none;
            position:absolute;
            z-index:-2;
        }

        .InfoBox660{
            display:none;
            position:absolute;
            z-index:-2;
        }

        .hidden{
            display:none;
            position:absolute;
            z-index:-2;
        }

    /*Design der einzelnen Erfahrungen >850px */
    .Erfahrung{
        background-color: rgba(206, 243, 255, 1);
        border-top: 2px solid rgba(1, 240, 255, 1);
        border-bottom: 2px solid rgba(1, 240, 255, 1);
        box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        position: relative;
        margin: 1em;
        padding: 1em;
        width: 80%;
        height: auto;
        z-index:0;
        overflow-y:auto;
    }

    .Erfahrung_hidden {
        position: absolute;
        display:none;
        visibility: hidden;
        z-index: -1;
    
    }

        /*Style der Details >850px*/

        .detailsStyle{
            display:flex;
            flex-direction: column;
            background-color: rgba(206, 243, 255, 1);
            border-top: 2px solid rgba(1, 240, 255, 1);
            border-bottom: 2px solid rgba(1, 240, 255, 1);
            box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            text-align:center;
            justify-content: center;
            align-items: center;
            margin:1em;
            padding: 1em;
            position:relative;
            width: 80%;
            height:100%;
            z-index: 0;
        }

        #DetailsArbeit31{
            text-decoration: underline;
            margin-bottom: 0.5em;
            text-align:left;
        }

        #DetailsArbeit51{
            text-decoration: underline;
            margin-bottom: 0.1em;
        }
        #DetailsWeiterbildung41{
            margin-bottom: 0.5em;
        }
        
        #DetailsWeiterbildung51{
            margin-bottom: 0.5em;
        }

        /*Style des Buttons um mehr Details über die Erfahrung sichtbar zu machen >850px*/

        .myBtnShown{
            display:inline-block;
            position:relative;
            border: 2px solid transparent;
            margin-top:1em;
            width: 1em;
            height:1em;
            z-index:0;
        }

        .myBtnShown:hover{
            display:inline-block;
            border: 2px solid rgba(1, 240, 255, 1);
            border-radius: 20px;
            color:rgba(1, 240, 255, 1);
        }

        .myBtnHidden {
            display:none;
            position: absolute;
            z-index:-1;
        }

        /*Style für Details*/
        .detailsHidden{
            display:none;
            position: absolute;
            z-index:-1;
        }
        
        .detailsShown{
            display:inline-block;
            position:relative;
            font-size:100%;
            text-align: left;
            justify-content: left;
            align-items: left;
        }


/* Style des Footer*/

footer {
    background-color:rgba(206, 243, 255, 0.80);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin:0.5em;
    padding: 1em;
    border-radius:0em 0em 1em 1em;
    z-index:0;
}

/*Style H2 im Footer*/

h2.contact{
    margin-bottom:1em;
}

/* Style der Icons*/

a.icon {
    color: black;
}
a.icon:hover {
    color:rgba(1, 240, 255, 1);
}

a.icon:active {
    color:black;
}

/*Design für 660px oder weniger*/
@media (max-width: 660px){

    /*Design des body für media size <660px*/
    
    body{
        align-items: center;
        margin: 0em;
        padding: 1em;
    }


    /*Style des Header für Bildschirmgrösse <660px*/

    header{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        word-break: break-all;
        margin: 1em;
    }

    .BoxHeaderContainer {
        display:none;
        position:absolute;
        z-index:-1;
    }

        /*Style der Titel für media size <660px*/

        h1.title932{
            display:none;
            position: absolute;
            z-index:-2;
        }
        
        h1.title660{
            display:block;
            position: relative;
            text-align: center;
            font-size: normal;
            z-index:0;
        }
        
    #Kurzprofil {
                text-align:left;
            }
    
    /*Style der Ausgangsseite mit Portrait*/
    .Hauptteil {
        display: none;
        position: absolute;
        z-index:-1;
    }
    
    #portrait_style660 {
        display: block;
        width:100%;
        justify-content: center;
        object-fit: contain;
        margin: auto;
    }


    /*menu button*/
    .menu660{
        display:inline-block;
        margin-bottom: 1em;
        position: relative;
        z-index:0;
    }

    .menu660:hover {
        color:rgba(1, 240, 255, 1);
    }

    /*content*/

    .content660{
        display: flex;
        flex-direction: column;
        background-color:rgba(206, 243, 255, 0.80);
        position:relative;
        justify-content: center;
        text-align:center;
        align-items:center;
        width: 100%;
        margin:0.5em 1em;
        padding: 1em;
        z-index: 0;
    }

    .content_kss_660{
        display: flex;
        flex-direction: column;
        background-color:rgba(206, 243, 255, 0.80);
        position:relative;
        justify-content: center;
        text-align:center;
        align-items:center;
        width: 100%;
        margin:0.5em 1em;
        padding: 1em;
        z-index: 0;
    }

    .content660_portrait{
        display: inline-block;
        position:relative;
        text-align:center;
        width: 100%;
        margin: 0.5em 1em;
        padding: 0.5em 1em;
        z-index: 0;
        overflow-y: scroll;
    }

    .infoBox660{
        display: inline-block;
        position: relative;
        text-align: center;
        background-color: rgba(206, 243, 255, 1);
        border-top: 2px solid rgba(1, 240, 255, 1);
        border-bottom: 2px solid rgba(1, 240, 255, 1);
        border-radius: 10px;
        box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
        width: 80%;
        margin: 1em auto;
        padding: 1em 0.5em;
        word-break: normal; 
        z-index: 0;
    }

    .detailsShown{
        width:100%;
        margin:0em;
        padding:0em;
        font-size: smaller;
        word-break: normal; 
        position: relative;
    }

    #portrait_style {
        display: block;
        justify-content: center;
        object-fit: contain;
        margin:auto;
    }

    .boxBgsl {
        display:inline-block;
        width: 100%;
        margin: 0.5em auto 0.5em auto;
        padding: 5em 1em;
        z-index: 0;
    }

    .hidden {
        position:absolute;
        display:none;
        z-index:-2;
    }

    .bgsl{
        position: absolute;
        display:none;
        z-index:-2;
    }

    nav{
        position:absolute;
        display:none;
        z-index:-2;
    }

    .Erfahrung_hidden{
        z-index:-1;
        position:absolute;
    }

    /*footer für 660 oder kleiner*/

    footer{
        display:inline-block;
        text-align: center;
        padding: 1em;
        border-radius: 0px 0px 10px 10px;
        width: 100%;
        margin: 1em;
    }

}

/*Design für 850px oder weniger*/
@media (max-width: 850px){
    
    #BoxHeaderMenu{
        display: none;
        position: absolute;
        z-index:-2;
    }     

    #BoxHeaderMenu850{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-basis: 17em;
        width: 10em;
        height: 20em;
        margin: 0.5em;
        padding: 0.5em;
        box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
        z-index: 0;
        overflow-y:auto;
    }

    .BoxHeader_portrait{
        display:none;
        position: absolute;
        z-index:-1;
    }
}