:root{
    --videotext: 'pf-videotext', sans-serif;
    --intercom: 'intercom', sans-serif;
    --dark: #162521;
    --blue: #C0E0DE;
    --yellow: #FAFF70;
    --gradient: linear-gradient(80deg, #FAFF70, #C0E0DE);
}


/*MAIN*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    background-color: var(--dark);
    /*height: 7vh;*/
    width:100%;
    position:fixed;
    z-index:5;
}
.content{
    width:90vw;
    margin: 0 auto;
}
ul{
    display: flex;
    justify-content: flex-end;
}
li{
    list-style: none;
    font-family: var(--intercom);
    font-size: 1.8rem;
}

a{
    text-decoration: none;
}
header a, footer a{
    color: white;
}

a.active {
    color: var(--yellow);
}

header ul li a{
color:#ffffff;
transition: all 0.5s ease-in-out;
display: inline-block;
position: relative;
padding:1rem;
}

header ul li a:hover{
    color: var(--yellow);
}

header ul li a:after{
    content:'';
    height:4px;
    width: calc(100% - 2rem);
    background-color: var(--yellow);
    position: absolute;
    bottom: 10px;
    left:1rem;
    transform: scaleX(0);
    transition: transform 0.25s ease-out;
    transform-origin: bottom right;
    margin-top: 3px;
}

header ul li a:hover:after{
    color: var(--yellow);
    transform: scaleX(1);
    transform-origin: bottom left;
}

span.decorative {
    font-family: var(--videotext);
    color: var(--dark);
}


h1{
    font-size: 8rem;
    padding-top: 9vh;
    font-family: var(--videotext);
    font-weight: 400;
    font-style: normal;
    text-shadow: 0.4rem 0.4rem var(--yellow);
}


p, h2, h3, h4, h5, h6 {
    font-family: var(--intercom);
    font-size: 2rem;
    line-height: 2.4rem;
    font-style: normal;
}

h3 {
    margin-bottom: 1.5rem;
}
h4{
    margin: 1rem 0;
}
p{
    font-weight: 300;
}

#titel p{
    width: 45vw;
    position: absolute;
    bottom: -5vh;
    right: 3vw;
    text-align: right;
    background-color: var(--yellow);
    padding: 3rem;
}

#titel p:before{
    content: '';
    background-image: url('../bilder/SVG/kontur.svg');
    position: absolute;
    background-repeat: repeat-x;
    background-size: 100%;
    width: 100%;
    height: 20px;
    top: -17px;
    left: 0;
}



.hell p, .hell h2, .hell h3, .hell h4, .hell h5, .hell h6 {
    color:var(--dark)
}

.dunkel p, .dunkel h2, .dunkel h3, .dunkel h4, .dunkel h5, .dunkel h6 {
    color:white;
}
footer{
    border-top: 4px solid var(--blue);
}
h2{
    font-size: 3rem;
    font-weight: 400;
    line-height: 10rem;
}
h5{
    font-size: 2rem;
}
.columns-50-50 p{
    font-size: 1.8rem;
    font-family: intercom, sans-serif;
    font-weight: 300;
    font-style: normal;
    /*font-display: fallback;*/
    
}

img {
    width:100%;
    height: auto;
}

/*Section Titel*/


#titel{
    height: 87vh;
    position: relative;
    background-image: url("../bilder/titelbild.jpg");
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
#titel img{
    display:none;
}




/*Section About me*/


#about-me{
    background-color: var(--dark);
}
.columns-50-50{
    display: flex;
    justify-content: space-between;
    padding: 8vh 0;
}
#about-me .columns-50-50{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 12vw;
}
#about-me .columns-50-50 div{
    text-align: right;
}
.columns-50-50 div{
    width: 40%;
}
#about-me .columns-50-50 div:last-child{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6vw;
}
#about-me .columns-50-50 div:last-child{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
#about-me .columns-50-50 div:last-child img{
    width: 15vw;
    height: 15vw;
}
/*#about-me .columns-50-50 div:last-child img:nth-child(even){
    padding-right: 0;
}*/

#about-me h2 {
    line-height: initial;
    margin-bottom: 3vw;
}


/*Section Skills*/


#skills{
    background-color: var(--blue);
}
#skills .columns-50-50{
  display: flex;
  justify-content: space-between;
  padding-top:4vh;
}
#skills .columns-50-50>div div{
    width: 100%;
    position: relative;
    font-family: var(--videotext);
}
#skills .columns-50-50 div:first-child{
    display: flex;
    flex-direction: column;
}

#skills .columns-50-50>div:last-child{
    display: flex;
    flex-direction: column;
}


#skills h2{
    color: var(--dark);
}

.align-right {
    text-align: right;
}
#photoshop, #illustrator, #indesign, #html, #css, #javascript{
    height: 6vh;
    margin: 0 0 10vh;
}

#photoshop:after, #illustrator:after, #indesign:after, #html:after, #css:after, #javascript:after{
    position: absolute;
    bottom:-130%;
    left: 0;
    font-family: var(--videotext);
    font-size: 2rem;
    color: var(--dark);
}
#photoshop:after{
    content: 'Photoshop';
}
#illustrator:after{
    content: 'Illustrator';
}
#indesign:after{
    content: 'InDesign';
}
#html:after{
    content: 'HTML';
}
#css:after{
    content: 'CSS';
}
#javascript:after{
    content: 'javascript';
}

/*Button*/


.button{
    border: 3px solid var(--blue);
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin: auto 0;
    width: 12rem;
    height: 3.8rem;
    outline: none;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: all 0.3s ease-in-out;
    user-select: none;
    text-wrap: nowrap
}
#skills .align-right{
    padding-bottom: 8vh;
}
.button::before{
    background: var(--dark);
}
.button .text{
    color: var(--dark);
}
.contact-button::before {
    content: " ";
    width: 1.5625rem;
    height: 2px;
    background: white;
    top: 50%;
    left: 2.8em;
    position: absolute;
    transform: translateY(-50%);
    transform-origin: center;
    transition: background 0.3s linear, width 0.3s linear;
}
.button:hover{
    border: 3px solid var(--dark);
    text-wrap: nowrap;
}
.button .top-key, .button .bottom-key-1, .button .bottom-key-2{
    background: var(--blue);
}



/*Footer*/

footer{
    background-color: var(--dark);
    height: 22vh;
}
footer .content{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}
footer ul{
    display: flex;
    flex-direction: column;
    padding: 0;
}
footer li{
    font-size: 1.5rem;
    line-height: 3rem;
}
footer ul li a{
    color: #ffffff;
    transition: all 0.5s ease-in-out;
    display: inline-block;
    position: relative;
}
footer ul li a:hover{
    color: var(--yellow);
}
footer ul li a:after{
    content: '';
    height: 4px;
    width: 100%;
    background-color: var(--yellow);
    position: absolute;
    bottom: -0.5px;
    left: 0;
    transform: scaleX(0);
    transition: transform 0.25s ease-out;
    transform-origin: bottom right;
    margin-top: 3px;
}
footer ul li a:hover:after{
    color: var(--yellow);
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Button*/


.contact-button, button{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin: auto 0;
    width: 13rem;
    height: 4rem;
    outline: none;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: all 0.3s ease-in-out;
    user-select: none;
    text-wrap: nowrap;
   }
   
.contact-button::before, .button::before {
    content: " ";
    width: 1.5625rem;
    height: 2px;
    top: 50%;
    left: 2.8em;
    position: absolute;
    transform: translateY(-50%);
    transform-origin: center;
    transition: width 0.3s ease-out, right 0.3s ease-out;
   }
.contact-button::before{
    background: white;
}
.contact-button .text{
    color: white;
}
   
.contact-button .text, .button .text {
    line-height: 1.33333em;
    padding-left: 5rem;
    display: block;
    text-align: left;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    line-height: 4rem;
    font-size: 1.6rem;
    font-family: var(--intercom);
   }
.contact-button .top-key, .contact-button .bottom-key-1, .contact-button .bottom-key-2{
    background: var(--dark);
}
.contact-button .top-key, .button .top-key{
    height: 2px;
    width: 1.5625rem;
    top: -2px;
    left: 0.625rem;
    position: absolute;
    
    transition: width 0.3s ease-out, left 0.3s ease-out;
   }
   
.contact-button .bottom-key-1, .button .bottom-key-1 {
    height: 2px;
    width: 1.5rem;
    right: 2rem;
    bottom: -2px;
    position: absolute;
    transition: width 0.3s ease-out, right 0.3s ease-out;
   }
   
.contact-button .bottom-key-2, .button .bottom-key-2 {
    height: 2px;
    width: 0.8rem;
    right: 0.8rem;
    bottom: -2px;
    position: absolute;
    transition: width 0.3s ease-out, right 0.3s ease-out;
   }
   
.contact-button:hover {
    color: white;
    background: linear-gradient(80deg, #FAFF70, #C0E0DE);
    border: 2px solid var(--dark);
   }
   
.contact-button:hover::before, .button:hover::before {
    display: none;
   }
   
.contact-button:hover .text, .button:hover .text {
    color: var(--dark);
    padding-left: 3rem;
   }
   
.contact-button:hover .top-key, .button:hover .top-key {
    left: -2px;
    width: 0px;
   }
   
.contact-button:hover .bottom-key-1,
.contact-button:hover .bottom-key-2, .button:hover .bottom-key-1,
.button:hover .bottom-key-2 {
    right: 0;
    width: 0;
}



/*Lebenslauf*/

#scroll-section{
    display: flex;
    flex-direction: column;
    background-color: var(--dark);
}
#scroll-section section{
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
    align-items: center;
}
#scroll-section img{
    width: 250px;
    height: 250px;
}


#scroll-section section:nth-child(even) div{
    text-align: right;
}

#scroll-section section > div {
    display: flex;
    width:100%;
}

#scroll-section section:nth-child(odd) > div div {
    width:50%;
    border-right: 2px solid white;
}

#scroll-section section:nth-child(odd) > div:after {
    width:50%;
    content: ''
    ;
}

#scroll-section section:nth-child(even) > div div {
    width:50%;
    border-left: 2px solid white;
}
#scroll-section section:nth-child(even) > div:before {
    width:50%;
    content: '';
}
.lebenslauf main .content {
    width:75vw;
}
.lebenslauf main{
    padding-bottom: 4rem;
}
section span{
    color: var(--blue);
}


/*Arbeitsproben*/

main .projekt{
    display: flex;
    justify-content: space-between;
    padding-top: 14vh;
}
.projekt p{
    font-weight: 300;
}
.projekt>a:first-child{
    width: 16rem;
    height: 100%;
}
#projekt1>a>img{
    border: 20px solid var(--dark);
}
#projekt1, #projekt2{
    width: 75vw;
}
#projekt1{
    margin-bottom: 6vh;
    text-align: right;
}
#projekt2{
    padding-bottom: 6vh;
}
#projekt2>a:first-child{
    width: 22rem;
    border: none;
    order: 2;
}
#arbeitsproben>div{
    background-color: var(--dark);
}
.projekt>div{
    width: 50%;
}
.programm-icons{
    margin: 6vh 0;
    display: flex;
    justify-content: flex-end;
}
.programm-icons img{
    width: 6rem;
    height: auto;
    padding-left: 2rem;
}
#arbeitsproben #projekt2>div{
    text-align: left;
}
#projekt2 .programm-icons{
    justify-content: flex-start;
}
#projekt2 .programm-icons img{
    justify-content: flex-start;
    padding-right: 2rem;
    padding-left: 0;
}

/*BUTTON NEU*/



/* a.learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
   }
   
   a.learn-more {
    width: 12rem;
    height: auto;
   }
   
   a.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: var(--dark);
    ;
   }
   
   a.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: var(--blue);
   }
   
   a.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
   }
   
   a.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid var(--blue);
    border-right: 0.125rem solid var(--blue);
    transform: rotate(45deg);
   }
   
   a.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 2rem;
    color: var(--dark);
    font-family: var(--intercom);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.8rem;
    text-align: center;
   }
   
   a:hover .circle {
    width: 100%;
   }
   
   a:hover .circle .icon.arrow {
    background: var(--blue);
    transform: translate(1rem, 0);
   }
   
   a:hover .button-text {
    color: var(--blue);
   }



a.left .circle {
    transform: rotate(180deg);
    left: 18vh;
   }
a.left:hover .circle .icon.arrow{
    transform: translate(8rem, 0);
}
a.left:hover .circle{
    transform-origin: left;
}


.dunkel a.learn-more .circle{
    background: var(--blue);
}
.dunkel a.learn-more .circle .icon{
    background: var(--dark)
}
.dunkel a.learn-more .circle .icon.arrow::before{
    border-top: 0.125rem solid var(--dark);
    border-right: 0.125rem solid var(--dark);
}
.dunkel  a.learn-more .button-text{
    color: var(--blue);
}
.dunkel a:hover .circle .icon.arrow{
    background: var(--dunkel);
}
.dunkel a:hover .button-text{
    color: var(--dark)
}



#arbeitsproben a{
    cursor: pointer;
} */


.buton-more{
    display: flex;
    margin: 0 auto;
    padding-top:10rem;
    background-color:transparent;
    justify-content: space-between;
}

a.learn-more {
    background-color: transparent;
    margin: 0;
    display: inline-flex;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}
a.blue .button-text{
    color: var(--dark);
}
a.dark .button-text{
    color: var(--blue);
}


span.arrow {
    width: 3rem;
    position: relative;
    padding:1rem;
    box-sizing: border-box;
    z-index: 0;
}
.blue span.arrow{
    background-color: var(--dark);
}
.dark span.arrow{
    background-color: var(--blue);
}
span.arrow:before {
    width: 0.65rem;
    height: 0.65rem;
    content:'';
    position: absolute;    
    top: 1.2rem;
    transition: all .3s ease-in-out;
    border-top: 3px var(--blue) solid;
}

.dark span.arrow:before{
    border-top: 3px var(--dark) solid;
}

.left span.arrow:before {
    transform: rotate(45deg);
     border-right:3px var(--blue) solid;
     left: 1rem;
 }
.dark.left span.arrow:before {
     border-right:3px var(--dark) solid;
}
 .right span.arrow:before {
    transform: rotate(-45deg);
    border-left:3px var(--blue) solid;
    right: 1rem;
}
.dark.right span.arrow:before {
    border-left:3px var(--dark) solid;
}

a.learn-more.left:hover  > span.arrow:before {
   left: 1.5rem;
}

a.learn-more.right:hover  > span.arrow:before {
    right: 1.5rem;
 }

span.button-text {
    padding: 1rem;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    position: relative;

    font-size: 1.2rem;
    font-weight: 400;
    z-index: 1;
}
.blue.button-text{
    color: var(--dark);
    font-family: var(--intercom);
}
.dark.button-text{
    color: var(--blue);
    font-family: var(--intercom);
}

span.button-text:before {
    content: '';
    width:0;
    position: absolute;
    top:0;
    height:100%;
    transition:all .3s ease-in-out;
    z-index: -1;
}
.blue span.button-text:before{
    background-color:var(--dark);
}
.dark span.button-text:before{
    background-color:var(--blue);
}
.left span.button-text:before {
    left:0; 
}
.right span.button-text:before {
    right:0;  
}

a.learn-more:hover  > span.button-text:before{
    width:100%;
 }

 a.blue:hover  > span.button-text{
    color:var(--blue);
 }
 a.dark:hover  > span.button-text{
    color:var(--dark);
 }




/*Projekt Elbflorenz*/


.slider{
    display: flex;
    justify-content: space-between;
}
.slider img{
    height: 40rem;
    width: auto;
}
#projekt-elbflorenz section:first-child div:nth-child(2), #projekt-argenti-luna section:first-child div:nth-child(2){
    width: 40%;
    text-align: right;
}
#projekt-elbflorenz section:first-child, #projekt-argenti-luna section:first-child{
    background-color: var(--dark);
    padding-bottom: 6vh;
}
.projekt-details div:first-child{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    order: 2;
}
.projekt-details div:first-child img{
    width: 30rem;
    height: auto;
}
.projekt-details div:first-child img:first-child{
    padding-bottom: 4vh;
}
.button-container{
    display: flex;
    justify-content: space-between;
    padding: 4vh 0;
}


/*Projekt Argenti Luna*/


#projekt-argenti-luna .projekt-details{
    display: flex;
    flex-direction: row;
}
#projekt-argenti-luna .projekt-details img{
    width: 40%;
    height: auto;
    order: 2;
}
.content-75{
    width: 75vw;
    margin: 0 auto;
}
#projekt-argenti-luna section:first-child>div div:first-child img{
    width: 60%;
}
#projekt-argenti-luna .projekt-details img:first-child{
    width: 40%;
}
#projekt-argenti-luna .button-container #back{
    width: 17rem;
}


   /*Impressum*/


main{
    background-color: var(--blue);
}
.impressum-kontakt-datenschutz main .content{
    width: 75vw;
}
#daten{
    display: flex;
    justify-content: space-between;
    padding-top:10vh;
}
#daten img{
    width:350px;
    height: auto;
    object-fit: contain;
}
#kontakt{
    padding-top: 14vh;
}
#datenschutz{
    line-height: 2.8rem;
    margin-top: 18vh;
    padding-bottom: 10vh;
}
#datenschutz h5, #datenschutz h6{
    line-height: 8rem;
}

#photoshop, #illustrator, #indesign, #html, #css, #javascript {
    width: 400px;
    height: 30px;
    position: relative;
    border:3px black solid;
    font-family: courier, sans-serif;
    line-height: 30px;
    margin-bottom:4.5rem;
}

.progressbar-text {
    text-align: right;
    line-height:1.6rem;
    font-size: 1.3rem;
    color: var(--dark);
}

/* SLICKSLIDER */

#projekt-elbflorenz section:first-child div:nth-child(2) {
    width:100%;
}
.slick-initialized .slick-slide {
    display:flex;
    justify-content: center;
}

/*GLIGHTBOX*/
.glightbox:hover{
    cursor: pointer;
}


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


    p, h2, h3, h4, h5, h6{
        font-size: 2rem;
        line-height: 2.5rem;
    }

    header ul {
        justify-content: space-between;
        padding: 0;

    }
    header li{
        font-size: 2rem;
        margin: 0;
        margin-left: 4rem;
        text-align: right;

    }


    h1{
        font-size: 4rem;
    }
    #titel{
        height: 100vh;
        background-image: url(../bilder/titelbild_390px.jpg);
        background-position: center center;
        background-repeat: no-repeat;
    }
    #titel p{
        position: absolute;
        bottom: 0;
        width: 94vw;
        padding: 2rem;
        font-size: 1.6rem;
        line-height: normal;
        left: 3vw;
        z-index: 1;
    }

    #titel p:before {
        width: 94vw;
        right: 0;
    }
    #titel h1 {
        text-shadow: 0.3rem 0.3rem var(--yellow);
        position: relative;
        z-index: 0;
    }

    #titel img {
        display:block;
        max-width: 72%;
        position: absolute;
        z-index: 0;
        right: 5vw;
        bottom: 0;
    }

    #photoshop:after, #illustrator:after, #indesign:after, #html:after, #css:after, #javascript:after {
        bottom:-150%;
    }

    #skills h2 {
        padding-top:10vw;
        line-height: initial;
        font-size: 3rem;
    }

    /*ABOUT ME*/

    #about-me .columns-50-50{
        display: flex;
        flex-direction: column;
    }
    #about-me .columns-50-50 div{
        width: 100%;
    }
    #about-me .columns-50-50 div:first-child{
        text-align: left;
        
    }
    #about-me .columns-50-50 div:nth-child(2){
        justify-content: center;
        padding: 4vh 0 0 0;
    }

    #about-me .columns-50-50 div:last-child{
        gap:6vw;
    }

    #about-me .columns-50-50 div:last-child img{
        width: 40vw;
        height: 40vw;
    }
   /* #about-me .columns-50-50 div:last-child img{
        padding: 0;
    }*/

    /*SKILLS*/

    #skills .columns-50-50{
        flex-direction: column;
    }
    #skills .columns-50-50 div{
        width: 100%;
    }

    /*FOOTER*/

    

    /*LEBENSLAUF*/


    #scroll-section section>div div{
        width: 100%;
        text-align: center;
        padding-top: 10vw;
    }
    #scroll-section section:nth-child(even) div{
        text-align: center;
    }
    #scroll-section section:nth-child(odd) > div:after {
        content: none;
    }
    #scroll-section section:nth-child(even) > div:before{
        content: none;
    }
    .lebenslauf main .content{
        width: 94vw;
    }
    #scroll-section section:nth-child(odd) > div div{
        border: none;
        width: 100%;
    }
    #scroll-section section:nth-child(even) > div div{
        border: none;
        width: 100%;
    }
    #scroll-section p{
        font-size: 2rem;
        font-weight: 300;
        font-style: normal;
    }
    #scroll-section section h2{
        display: none;
    }


    /*ARBEITSPROBEN*/

    main .projekt{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
    }
    main section:first-child{
        padding-top: 14vh;
    }
    .projekt>a:first-child{
        width: 100%;
    }
    .projekt>div{
        width: 100%;
        text-align: left;
        padding-top: 4rem;
    }
    .programm-icons{
        justify-content: flex-start;
    }
    .programm-icons img{
        padding-left: 0;
        padding-right: 2rem;
        width: 7rem;
    }
    main #projekt2{
        align-items: flex-end;
    }
    #projekt2>a:first-child{
        width: 100%;
        order: unset;
    }
    #arbeitsproben #projekt2>div{
        text-align: right;
    }
    #projekt2 .programm-icons{
        justify-content: flex-end;
    }
    #projekt2 .programm-icons img{
        padding-right: 0;
        padding-left: 2rem;
    }
    #arbeitsproben p{
        font-size: 2rem;
    }
    #arbeitsproben h4{
        line-height: initial;
    }

    /*ELBFLORENZ*/

    #projekt-elbflorenz section:first-child div:nth-child(2), #projekt-argenti-luna section:first-child div:nth-child(2){
        text-align: left;
    }
    .projekt-details div:first-child{
        order: unset;
    }
    #projekt-elbflorenz section:first-child, #projekt-argenti-luna section:first-child{
        padding-bottom: 4vh;
    }
    #projekt-elbflorenz .projekt>div{
        text-align: right;
    }
    #projekt-elbflorenz .projekt-details div:first-child img{
        width: 100%;
    }
    #projekt-elbflorenz section:first-child div:nth-child(2), #projekt-argenti-luna section:first-child div:nth-child(2){
        width: auto;
    }
   

    /*ARGENTI LUNA*/

    
    #projekt-argenti-luna .projekt-details{
        flex-direction: column;
        padding-top: 4vh;
        align-items: flex-end;
    }
    #projekt-argenti-luna .projekt-details img{
        order: unset;
    }
    #projekt-argenti-luna .projekt-details img:first-child{
        width: 100%;
    }
    #projekt-argenti-luna section:first-child>div div:first-child img{
        width: 100%;
    }
    #projekt-argenti-luna .projekt>div{
        text-align: right;
    }

    /*IMPRESSUM*/

    #daten img{
        display: none;
    }
    #kontakt{
        padding-top: 4vh;
    }
    #datenschutz{
        margin-top: 10vh;
    }
}

@media all and (max-height:600px) {
    #titel img {
        max-width: 55%;
    }
}
@media all and (max-width:900px){
    #daten>img{
        display: none;
    }
}