*{
    margin: 0px;
}
html{
    scroll-behavior: smooth;
}

@font-face{
    font-family: 'Fredericka the Great';
    src: url(../../Designelemente/Schriften/FrederickatheGreat-Regular.ttf);
}
@font-face{
    font-family: 'Special Elite';
    src: url(../../Designelemente/Schriften/SpecialElite-Regular.ttf);
}
@font-face{
    font-family: 'Raleway';
    src: url(../../Designelemente/Schriften/Raleway-VariableFont_wght.ttf);
}
@font-face{
    font-family: 'Youtube-ueberschrift';
    src: url(../../Designelemente/Schriften/Roboto-Medium.ttf);
}
@font-face{
    font-family: 'Youtube-Text';
    src: url(../../Designelemente/Schriften/Roboto-Regular.ttf);
}


h1{
    font-family: 'Raleway';
    font-size: 6em;
    line-height: 1.3;
    font-weight: 300;
    margin: 0;
}

.Headline{
    grid-column: 2/8;
    text-align: center;
    font-size: 5vw;
    margin-top: 2vw;
}
@media (min-width: 1500px){
    .Headline{
    font-size: 4vw;
    margin-top: 3vw;
}
}


h2{ 
    font-family: 'Raleway';
    font-weight: 350;
    font-size: 3em;
    line-height: 1.3;
    margin: 0px;
}

h3{ 
    font-family: 'Raleway';
    font-weight: 380;
    line-height: 1.3;
    margin: 0px;
}

h4{ 
    font-family: 'Raleway';
    font-weight: 500;
    line-height: 1.3;
    margin: 0px;
}

p{
    font-family: 'Raleway';
    font-weight: 300;
    font-size: 1em;
    line-height: 1.3;
    margin: 0px;
}

a{
    text-decoration: none;
}
.link-in-fliesstext{
    color: #046bd3;
}
.fliesstext-link-icon{
    width: 1.7em;
}

.Seitentitel-container{
    grid-column: 1/9;
    margin-top: 4.3vw;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    background: #353f4a;
}
.Seitentitel{
    color: white;
    text-align: center;
    font-size: 5vw;
}
@media (max-width:800px){
    .Seitentitel-container{
    margin-top: 0vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
}
    .Seitentitel{
    font-size: 7.5vw;
}
}

.privatsphaereschutz-nummer{
    width: 100%;
}




.aside-links{
    grid-column: 1/3;
}

/* Head-nav */

header{
    grid-column: 1/9;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    background: #a7b1b4;
    height: 5vw ;
    z-index: 4;
    visibility: visible;
}

.head-nav{
    grid-column: 1/9;
    grid-row: 1/2;
    height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementar-navigation{
    display: flex;
    margin: 1vw;
    justify-self: center;
    max-width: 50px;
}
.icon{
    width: 3.5vw;
}


/* Burger-nav */

.burger-nav{
    visibility: hidden;
}
.menu-toggle{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #F05542;
    z-index: 2;
    position: fixed;
    top: 2vw;
    left: 2vw;
    display: block;
    user-select: none;
}
.check-headnav{
    height: 60px;
    width: 60px;
    opacity: 0%;
    z-index: 3;
    cursor: pointer;
    position: absolute;
}
.pushblock-burgernav{
    height: 19px;
    width: 60px;
}
.menu-toggle span{
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 5px;
    margin-left: 13px;
    position: relative;
    background: white;
    border-radius: 3px;
    z-index: 2;
    
    transform-origin: 4px 0px;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    
}
.menu-toggle span:first-child{
    transform-origin: 0% 0%;
}
.menu-toggle span:nth-last-child(2){
    transform-origin: 0% 100%;
}
.check-headnav:checked ~ span{
    opacity: 1;
    transform: rotate(45deg) translate(5px, -4px);
}
.check-headnav:checked ~ span:nth-last-child(3){
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
.check-headnav:checked ~ span:nth-last-child(2){
    transform: rotate(-45deg) translate(3px, 7px);
}

.menue-in-burger{
    position: fixed;
    margin-top: 20px;
    width: 60px;
    background: #F05542;
    border-radius: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    
    transform-origin: 0% 0%;
    transform: translate(-130%, 0);
    transition-duration: 0.5s;
    transition-timing-function: ease;
}
.burger-menu-icons{
    width: 40px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.check-headnav:checked ~ .menue-in-burger{
    transform: none;
}
.trennline-burgermenu{
    width: 46px;
    height: 3px;
    margin-top: 1px;
    margin-bottom: 1px;
    border-radius: 2px;
    background: #ac2b1c;
    margin-left: 7px;
}



/* Wann ist Burger oder Headnav sichtbar */

@media(max-width: 800px){
    header{
        visibility:hidden;
    }
    .burger-nav{
        visibility: visible;
    }
}




body{
    background-color: #ebebeb;
    font-family: 'Raleway';
    font-weight: 300;
    font-size: 1em;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: hidden;
}

footer{
    grid-column: 1/9;
    height: 15vw;
    background: #454545;
}

video{
    border: none;
}

@media (max-width: 850px ){
    .aside-links{
    grid-column: 1/4;
    }
}
@media (max-width: 570px){
    header{
        height: 7vw;
    }
    .head-nav{
        height: 7vw;
    }
    .icon{
    width: 5vw;
    }
    .elementar-navigation{
        margin:2vw;
    }
}


#Grid-Homepage{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    grid-template-rows: 4.9vw 0vw 0vw 10vw 48vw 12vw 5.5vw 4vw 70.5vw;
    grid-column-gap: 1vw ;
    grid-row-gap: 0px;
}
@media (max-width: 850px ){
#Grid-Homepage{
    grid-template-columns:4.6% 14% 14% 14% 14% 14% 14% 4.6%;
    grid-template-rows: 4.9vw 0vw 0vw 12vw 48vw 12vw 130vw 15vw 55vw;
    }
}
@media (max-width: 800px ){
#Grid-Homepage{
    grid-template-columns:4.6% 14% 14% 14% 14% 14% 14% 4.6%;
    grid-template-rows: 0vw 0vw 0vw 20vw 48vw 12vw 130vw 15vw 55vw;
    }
}
@media (max-width: 570px){
    #Grid-Homepage{
    grid-template-columns:4.6% 14% 14% 14% 14% 14% 14% 4.6%;
    grid-template-rows: 0vw 0vw 0vw 20vw 47vw 12vw 130vw 15vw 55vw;
    }
}
@media (min-width:1500px){
   #Grid-Homepage{
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    grid-template-rows: 4.9vw 0vw 0vw 9vw 34vw 11vw 5.5vw 4vw 70.5vw;
} 
}

#Grid-Kontakt{
    width: 100%;
    display: grid;
    grid-template-columns:4.5vw 14vw 14vw 14vw 14vw 14vw 14vw 4.5vw;
    background-color: #dae7ea;
    grid-column-gap: 1vw;
}
#Grid-Zeichnugen{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    grid-template-rows: vw vw vw;
    background-color: white;
    grid-column-gap: 1vw ;
}
#Grid-Produktdesign{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    background-color: #d3d3d3;
    grid-column-gap: 1vw;
}
#Grid-Graphikdesign{
    width: 100%;
    display: grid;
    grid-template-columns:4.6% 14% 14% 14% 14% 14% 14% 4.6%;
    background-color: white;
    grid-column-gap: 1vw;
}
#Grid-Photographie{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    background-color: white;
    grid-column-gap: 1vw ;
}
#Grid-Videographie{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    background-color: #d3d3d3;
    grid-column-gap: 1vw ;
    background: white;
}
#Grid-Wahlborschuere{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    background-color: #d3d3d3;
    grid-column-gap: 1vw;
    background: white;
}
#Grid-Naeharena{
    width: 100%;
    display: grid;
    grid-template-columns:4.5% 14% 14% 14% 14% 14% 14% 4.5%;
    background-color: #d3d3d3;
    grid-column-gap: 1vw;
}



/* Scroll Navigation */

.scroll-nav{
    background: #dae7ea;
    padding-top: 3vw;
    padding-bottom: 3vw;
    grid-column: 1/9;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-nav-flex{
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.link-scrollnav{
    color: white;
    font-weight: 500;
    font-size: 1.3em;
    background-color: #F05542;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 30px;
    border-radius: 100px;
}
.pfeil-scorllnav{
    width: 25px;
    align-self: center;
    padding-right: 10px;
}
.Scroll-nav-Ueberschrift{
    font-size: 3em;
    font-weight: 350;
}
.scrolle-nach-unten-text{
    text-align: center;
    padding-left: 4vw;
    padding-right: 4vw;
}
.go-to-top-button{
    z-index: 2;
    background: #F05542;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    position:fixed;
    bottom: 3vw;
    right: 3vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.go-to-top-button:active{
    height: 65px;
    width: 65px;
}
.pfeil-go-to-top{
    width: 60%;
    padding-top: 17px;
}

@media (max-width: 900px){
    .scroll-nav{
    padding-top: 4vw;
    padding-bottom: 6vw;

}
    .scroll-nav-flex{
    flex-direction: column;
    margin-top: 20px;
}
    .link-scrollnav{
    margin: 10px;
}
    .Scroll-nav-Ueberschrift{
    font-size: 2em;
    font-weight: 420;
}
    .go-to-top-button{
    bottom: 9vw;
}
}



/* Landingpage */

#body-landingpage{
    width: 100vw;
    height: 100vh;
    background: #353f4a;
        
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.landing-oben-und-unten{
    width: 100vw;
    height: 17vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#umbau-sticker{
    height: 90px;
    z-index: 2;
    position:fixed;
    top: 78vh;
    left: 12vw;
    transform: rotate(0deg);
    filter: drop-shadow(-15px 15px 15px #222);
}
#mels-postfolio{
    color: white;
    font-size: 2.5em;
    font-weight: 200;
    text-align: center;
}
#landing-subhead{
    color: white;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
}
#landingpage-fliesstext{
    color: white;
    text-align: center;
    font-weight: 300;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
}

.landing-bild-kreise{
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
#landing-bild{
    background-image: url(../../Bilder/Landing-page/Profilbild.png);
    background-size: cover;
    border: solid 6px;
    border-color: #353f4a;
    transform: translate(-108px, -108px);
    z-index: 1;
}
#landing-bild-blau{
    background: #53bedf;
    transform: translate(-118px, -118px)
}
#landing-bild-rot{
    background: #f05542;
    transform: translate(-86px, -86px);
}

.landing-buttons{
    height: 64px;
    width: 64px;
    position: absolute;
    z-index: 1;
    
}
.lading-links{
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #f05542;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.landing-button-schatten{
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #ac2b1c;
    transform: translate(4px, 4px);
}
.landing-link-icon{
    width: 64%;
}
#landing-button-kontakt{
    transform: translate(-144px, -180px)
}
#landing-button-zeichnen{
    transform: translate(-32px, -211px)
}
#landing-button-graphikdesign{
    transform: translate(80px, -180px)
}
#landing-button-broschuere{
    transform: translate(-144px, 116px);
}
#landing-button-photographie{
    transform: translate(-32px, 147px);
}
#landing-button-videographie{
    transform: translate(80px, 116px)
}
#landing-link-home{
    width: 35px;
    margin-bottom: 2vh;
}


@media (min-width:600px){
.landing-oben-und-unten{
    height: 20vh;
}
#umbau-sticker{
    height: 150px;
    z-index: 2;
    position:fixed;
    top: 69vh;
    left: 10vw;
    transform: rotate(-15deg);
    filter: drop-shadow(-10px 10px 10px #222);
    }
 #mels-postfolio{
    color: white;
    font-size: 3em;
    font-weight: 200;
    text-align: center;
}
#landing-subhead{
    color: white;
    text-align: center;
    font-size: 1.35em;
    font-weight: 600;
    margin-top: 15px;
}
}
@media (min-width: 1200px){
.landing-oben-und-unten{
    height: 25vh;
}
    #umbau-sticker{
    height: 200px;
    z-index: 2;
    position:fixed;
    top: 62vh;
    left: 30vw;
    transform: rotate(-15deg);
    filter: drop-shadow(-15px 15px 15px #222);
}
#mels-postfolio{
    font-size: 3.4em;
    font-weight: 200;
}
#landing-subhead{
    font-size: 1.6em;
    margin-top: 2vh;
}
#landingpage-fliesstext{
    margin-top: 35px;
}

.landing-bild-kreise{
    height: 260px;
    width: 260px;
}
#landing-bild{
    transform: translate(-138px, -138px);
}
#landing-bild-blau{
    transform: translate(-158px, -158px)
}
#landing-bild-rot{
    transform: translate(-106px, -106px);
}

.landing-buttons{
    height: 76px;
    width: 76px;
    
}
.lading-links{
    height: 70px;
    width: 70px;
}
.landing-button-schatten{
    height: 70px;
    width: 70px;
    transform: translate(5px, 5px);
}

#landing-button-kontakt{
    transform: translate(-535px, -38px)
}
#landing-button-zeichnen{
    transform: translate(-410px, -38px)
}
#landing-button-graphikdesign{
    transform: translate(-285px, -38px)
}
#landing-button-broschuere{
    transform: translate(209px, -38px);
}
#landing-button-photographie{
    transform: translate(334px, -38px);
}
#landing-button-videographie{
    transform: translate(459px, -38px)
}
#landing-link-home{
    width: 40px;
    margin-bottom: 0;
}
}






/* Home - Anfangsfilm */

.Anfangsfilm{
    grid-column: 1/9;
    grid-row: 2/3;
}

.youtube-layout{
    grid-column: 1/9;
    grid-row: 3/4;
    background-color: white;
    padding: 1vw;
}

.Youtube-title{
    font-family: 'Youtube-ueberschrift';
    font-size: 2.2vw;
    margin-bottom: 1.1vw;
}

#YT-Profil{
    display: inline-grid;
    grid-template-columns: 7vw 15vw 20vw 23vw 20vw;
    grid-template-rows: 3.5vw 3.5vw;
    grid-column-gap: 2vw;
    grid-row-gap: 0;
}

#Profilbild-youtube{
    height: 7vw;
    grid-column: 1/2;
    grid-row: 1/3;
}
#Profilname{
    grid-column: 2/3;
    grid-row: 1/2;
    font-family: 'Youtube-ueberschrift';
    font-size: 2vw;
    color: black;
    text-decoration: none; 
}
#Abozahl-startseite{
    grid-column: 2/3;
    grid-row: 2/3;
    font-family: 'Youtube-Text';
    color: grey;
    font-size: 1.5vw;
}

.Abobutton{
    grid-column: 3/4;
    grid-row: 1/2;
    height: 100%;
    width: 100%;
    background-color: #ea2e16;
    border: none;
    border-radius: 2.5vh;
    
    font-family: 'Youtube-ueberschrift';
    font-size: 1.4vw;
    color: white;
}

.originalqualitaet-button{
    grid-column: 5/6;
    grid-row: 1/2;
    height: 100%;
    width: 100%;
    background-color: #116ea7;
    border: none;
    border-radius: 2.5vh;
    
    font-family: 'Youtube-ueberschrift';
    font-size: 1.4vw;
    color: white;
}




/* Home - Main-Nav */

#Home-Ueberblick{
    grid-column: 1/9;
    grid-row: 4/5;
    background: #dae7ea;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#Mainnav-headline{
    color: #2B4255;
    font-size: 5vw;
}

#Mainnav-headline-klick{
    color: #f45444;
}

.main-nav-icon{
    align-self: center;
    justify-self: center;
    width: 70%;
}
.main-nav-icon:hover{
    width: 80%;
}
.main-nav-Iconbeschriftung{
    font-size: 1.7vw;
    color: black;
    text-align: center;
}
@keyframes blinkpfeil{
    0%      {width: 5vw;}
    66%     {width: 5vw;}
    83%     {width: 9vw;}
    100%    {width: 5vw;}
}

.blink-pfeil-runter{
    width: 4vw;
    animation-name: blinkpfeil;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    visibility: visible;
}

.main-nav{
    grid-column: 1/9;
    grid-row: 5/6;
    display: inline-grid;
    background: #dae7ea;
    grid-template-columns: 30.5% 13% 13% 13% 30.5%;
    grid-template-rows: 2.5vw 10vw 2.1vw 2vw 10vw 2.1vw 9vw 4vw;
}
@media ( min-width: 1500px){
    .main-nav-Iconbeschriftung{
    font-size: 1em;
}
    .main-nav{
        grid-template-columns: 38% 8% 8% 8% 38%;
        grid-template-rows: 2vw 7vw 1.2vw 1vw 7vw 1.2vw 6vw 4vw;
    } 
    @keyframes blinkpfeil{
    0%      {width: 4;}
    66%     {width: 4vw;}
    83%     {width: 7vw;}
    100%    {width: 4vw;}
}
    #Mainnav-headline{
    font-size: 4vw;
}

}
@media (max-width:570px){
    .main-nav{
    grid-template-columns: 23% 18% 18% 18% 23%;
    grid-template-rows: 3vw 14vw 2.6vw 2vw 14vw 2.6vw 1vw 2vw;
}
    .blink-pfeil-runter{
    visibility: hidden;
}
    .main-nav-Iconbeschriftung{
    font-size: 2.3vw;
}
    #Mainnav-headline{
    font-size: 6.5vw;
}
}




#main-nav-Kontakt{
    grid-column: 2/3;
    grid-row: 2/3;
}
#main-nav-Photographie{
    grid-column: 3/4;
    grid-row: 5/6;
}
#main-nav-Videographie{
    grid-column: 4/5;
    grid-row: 5/6;
}
#main-nav-Zeichnen{
    grid-column: 3/4;
    grid-row: 2/3;
}
#main-nav-Wahlbroschuere{
    grid-column: 2/3;
    grid-row: 5/6;
}
#main-nav-Graphikdesign{
    grid-column: 4/5;
    grid-row: 2/3;
}

#main-nav-text-Kontakt{
    grid-column: 2/3;
    grid-row: 3/4;
}
#main-nav-text-Photographie{
    grid-column: 3/4;
    grid-row: 6/7;
}
#main-nav-text-Videographie{
    grid-column: 4/5;
    grid-row: 6/7;
}
#main-nav-text-Zeichnungen{
    grid-column: 3/4;
    grid-row: 3/4;
}
#main-nav-text-Broschüre{
    grid-column: 2/3;
    grid-row: 6/7;
}
#main-nav-text-Graphikdesign{
    grid-column: 4/5;
    grid-row: 3/4;
}

#blinkpfeil-mainnav{
    grid-column: 3/4;
    grid-row: 8/9;
    justify-self: center;
}

/* Home - Zwischenbalken 1 */

#Home-zwischenbalken{
    grid-column: 1/9;
    grid-row: 6/7;
    background-color: #353f4a;
}

#Ein-kurzer-Lebenslauf{
    color: white;
}



/* Home - Lebenslauf Aside */

#Lebenslauf-aside{
    grid-row: 7/10;
    background-image:url(../../Bilder/Startseite/Feder-schwarzweis.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center; 
    
    display: inline-grid;
    grid-template-columns: 10% 8% 32% 40% 10%;
    grid-template-rows: 2vw 16vw 5% 5% 1% 2% 2% 2% 2% 1% 2% 2% 2% 2% 1% 2% 2% 2% 2% 2% 2% 2% 2% ;
    grid-row-gap: 1vw;
    color: white;
}

.Lebenslauf-aside-content{
    font-size: 1vw;
    font-weight: 450;
    padding-top: 0.1vw;
}

.Lebenslauf-aside-slider{
    width: 100%;
    align-self: center;
}

#Profilbild-Lebenslauf{
    grid-column: 2/5;
    grid-row: 2/3;
    width: 100%; 
}
#Lebenslauf-Name{
    grid-column: 1/6;
    grid-row: 3/4;
    text-align: center;
    font-size: 2.5vw;
}
#Container-lebenslauf{
    grid-column: 2/5;
    grid-row: 4/5;
    text-align: center;
    padding: 0.4vw;
    border-top-style: solid;
    border-bottom: solid;
    border-color: white;
    font-size: 1.5vw
}
#Lebenslauf-Kontakt{
    grid-column: 2/5;
    grid-row: 6/7;
    font-size: 1.6vw;
    
    color: white;
    text-align: center;
}
#Lebenslauf-tel-icon{
    grid-column: 2/3;
    grid-row: 8/9;
}
#Lebenslauf-tel{
    grid-column: 3/5;
    grid-row: 8/9;
    padding-left: 0.5vw;
}
#Lebenslauf-mail-icon{
    grid-column: 2/3;
    grid-row: 9/10;
}
#Lebenslauf-mail{
    grid-column: 3/5;
    grid-row: 9/10;
    padding-left: 0.5vw;
}
#Lebenslauf-ort-icon{
    grid-column: 2/3;
    grid-row: 9/10;
}
#Lebenslauf-ort{
    grid-column: 3/5;
    grid-row: 9/10;
    padding-left: 0.5vw;
}
#Lebenslauf-Sprachen{
    grid-column: 2/5;
    grid-row: 11/12;
    font-size: 1.6vw;
}
#Lebenslauf-Deutsch{
    grid-column: 2/5;
    grid-row: 12/13;
}
#Lebenslauf-Englisch{
    grid-column: 2/5;
    grid-row: 13/14;
}
#Lebenslauf-Latein{
    grid-column: 2/5;
    grid-row: 14/15;
}
#Lebenslauf-Skills{
    grid-column: 2/5;
    grid-row: 16/17;
    font-size: 1.6vw;
}
#Lebenslauf-Videoschnitt{
    grid-column: 2/4;
    grid-row: 17/18;
}
#Lebenslauf-Bildbearbeitung{
    grid-column: 2/4;
    grid-row: 18/19;
}
#Lebenslauf-Photograp{
    grid-column: 2/4;
    grid-row: 19/20;
}
#Lebenslauf-Screend{
    grid-column: 2/4;
    grid-row: 20/21;
}
#Lebenslauf-Layout-text{
    grid-column: 2/4;
    grid-row: 21/22;
}
#Lebenslauf-HTML-text{
    grid-column: 2/4;
    grid-row: 22/23;
}
#Lebenslauf-CSS-text{
    grid-column: 2/4;
    grid-row: 23/24;
}
#Lebenslauf-slider-Videoschnitt{
    grid-column: 4/5;
    grid-row: 17/18;
}
#Lebenslauf-slider-Bildbearbeitung{
    grid-column: 4/5;
    grid-row: 18/19;
}
#Lebenslauf-slider-Photographie{
    grid-column: 4/5;
    grid-row: 19/20;
}
#Lebenslauf-slider-Screendesign{
    grid-column: 4/5;
    grid-row: 20/21;
}
#Lebenslauf-slider-Layout{
    grid-column: 4/5;
    grid-row: 21/22;
}
#Lebenslauf-slider-HTML{
    grid-column: 4/5;
    grid-row: 22/23;
}
#Lebenslauf-slider-CSS{
    grid-column: 4/5;
    grid-row: 23/24;
}




/* Home - Lebenslauf Main */

.main-Lebenslauf{
    grid-column: 3/6;
    grid-row: 7/10;
    
    display: inline-grid;
    grid-template-columns: 5% 5% 5% 85%;
    grid-template-rows: 7% 5% 2.5% 22.5% 21.5% 5% 2.5% 11% 11% 11%;
}

.Ueberschrift-Lebenslauf{
    height: 3vw ;
    border-radius: 1.75vw;
    
    padding-left: 2.25vw;
    padding-top: 0.5vw;
    background-color: #cecece;
}

.Ueberschrift-lebenslauf-text{
    font-size: 1.9vw;
    font-weight: 400;
    color: #5f5f5f;
}

.Lebenslauf-date{
    font-size: 1.7vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-bottom: 1vw;
}

.Lebenslauf-date-Bildung{
    font-size: 1.8vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-bottom: 0.5vw;
}

.Lebenslauf-Subhead{
    font-size: 1.6vw;
    font-weight: 500;
    color: black;
}

.Lebenslauf-Sub-subhead{
    font-size: 1.4vw;
    font-weight: 350;
    color: #1f1f1f;
}

.Lebenslauf-content-list{
    padding-left: 2.5vw;
    margin-top: 0.7vw;
    margin-bottom: 0.7vw;
}

.Lebenslauf-listenelement{
    font-size: 1.2vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1vw; 
}

.Lebenslauf-link{
    width: 2.2vw;
}

#Lebenslauf-Berufserfahrung{
    grid-column: 2/5;
    grid-row: 2/3;
    width: 29.2vw;
}
#Lebenslauf-Beruf-Nahearena{
    grid-column: 4/5;
    grid-row: 4/5;
}
#Lebenslauf-Beruf-Broschuere{
    grid-column: 4/5;
    grid-row: 5/6;
}
#Lebenslauf-Bildungsweg{
    grid-column: 2/5;
    grid-row: 6/7;
    width: 21.5vw;
}
#Lebenslauf-LLS{
    grid-column: 4/5;
    grid-row: 8/9;
}
#Lebenslauf-Windeck{
    grid-column: 4/5;
    grid-row: 9/10;
}
#Lebenslauf-Schartenbergschule{
    grid-column: 4/5;
    grid-row: 10/11;
}

#Home-zwischenbalken2{
    grid-column: 6/9;
    grid-row: 8/9;
    
    height: 3vw ;
    width: 20vw;
    border-radius: 1.75vw;
    
    margin-left: 7vw;
    padding-top: 0.5vw;
    background-color: #cecece;
    visibility: hidden;
}

#Meine-Kenntnisse{
    font-family: 'Raleway';
    line-height: 1.3;
    font-size: 1.9vw;
    font-weight: 400;
    color: #5f5f5f;
    margin: 0;
    text-align: center;
}
    
.Startseite-Kentnisse{
    grid-column: 6/9;
    grid-row: 7/10;
    background: #ffffff; 
    
    display: inline-grid;
    grid-template-columns: 3% 88.6% 2.2% ;
    grid-template-rows: 25vw 1vw 29.5vw 1vw 23.5vw;
    grid-column-gap: 1vw ;
}

.Ueberschrift-Kentnntnisse{
    font-size: 2.6vw;
    font-weight: 400;
    text-align: center;
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
} 

.Subhead-Kentnisse{
    font-size: 1.5vw;
    font-weight: 600;
    color: black;
    margin-left: 2vw;
    margin-top: 1vw;
}

.Content-Kentnisse{
    font-size: 1.4vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-left: 2vw;
    margin-top: 0.5vw;
}

.Kenntnisse-listenelement{
    font-size: 1.2vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.7vw;
}

#container-Besondere-Leistungen{
    grid-column: 2/3;
    grid-row: 1/2;
    background: #dae7ea;
}
#container-PC-Kenntnisse{
    grid-column: 2/3;
    grid-row: 3/4;
    background: #dae7ea;
}
#container-sonstige-Kenntnisse{
    grid-column: 2/3;
    grid-row: 5/6;
    background: #dae7ea;
}



/* Home - Lebenslauf schmal */
@media (max-width: 850px ){

#Lebenslauf-aside{
    grid-row: 7/8;
    background-image:url(../../Bilder/Startseite/Feder-schwarzweis.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center; 
    
    display: inline-grid;
    grid-template-columns: 10% 8% 32% 40% 10%;
    grid-template-rows: 2vw 27vw 5% 5% 1% 2% 2% 2% 2% 1% 2% 2% 2% 2% 1% 2% 2% 2% 2% 2% 2% 2% 2% ;
    grid-row-gap: 1.8vw;
    color: white;
}

.Lebenslauf-aside-content{
    font-size: 1.7vw;
    font-weight: 450;
    padding-top: 0.2vw;
}

#Profilbild-Lebenslauf{
    grid-column: 2/5;
    grid-row: 2/3;
    width: 100%; 
}
#Lebenslauf-Name{
    grid-column: 1/6;
    grid-row: 3/4;
    text-align: center;
    font-size: 4.5vw;
}
#Container-lebenslauf{
    grid-column: 2/5;
    grid-row: 4/5;
    text-align: center;
    padding: 1.1vw;
    border-top: solid 2px;
    border-bottom: solid 2px;
    border-color: white;
    font-size: 2.5vw
}
#Lebenslauf-Kontakt{
    grid-column: 2/5;
    grid-row: 6/7;
    font-size: 2.1vw;
}
#Lebenslauf-tel-icon{
    grid-column: 2/3;
    grid-row: 7/8;
}
#Lebenslauf-tel{
    grid-column: 3/5;
    grid-row: 7/8;
    padding-left: 1vw;
}
#Lebenslauf-mail-icon{
    grid-column: 2/3;
    grid-row: 8/9;
}
#Lebenslauf-mail{
    grid-column: 3/5;
    grid-row: 8/9;
    padding-left: 1vw;
}
#Lebenslauf-ort-icon{
    grid-column: 2/3;
    grid-row: 9/10;
}
#Lebenslauf-ort{
    grid-column: 3/5;
    grid-row: 9/10;
    padding-left: 1vw;
}
#Lebenslauf-Sprachen{
    grid-column: 2/5;
    grid-row: 11/12;
    font-size: 2.1vw;
}
#Lebenslauf-Deutsch{
    grid-column: 2/5;
    grid-row: 12/13;
}
#Lebenslauf-Englisch{
    grid-column: 2/5;
    grid-row: 13/14;
}
#Lebenslauf-Latein{
    grid-column: 2/5;
    grid-row: 14/15;
}
#Lebenslauf-Skills{
    grid-column: 2/5;
    grid-row: 16/17;
    font-size: 2.1vw;
}
#Lebenslauf-Videoschnitt{
    grid-column: 2/4;
    grid-row: 17/18;
}
#Lebenslauf-Bildbearbeitung{
    grid-column: 2/4;
    grid-row: 18/19;
}
#Lebenslauf-Photograp{
    grid-column: 2/4;
    grid-row: 19/20;
}
#Lebenslauf-Screend{
    grid-column: 2/4;
    grid-row: 20/21;
}
#Lebenslauf-Layout-text{
    grid-column: 2/4;
    grid-row: 21/22;
}
#Lebenslauf-HTML-text{
    grid-column: 2/4;
    grid-row: 22/23;
}
#Lebenslauf-CSS-text{
    grid-column: 2/4;
    grid-row: 23/24;
}


/* Startseite - Lebenslauf Main */

.main-Lebenslauf{
    grid-column: 4/9;
    grid-row: 7/8;
    
    display: inline-grid;
    grid-template-columns: 5% 5% 5% 85%;
    grid-template-rows: 7% 5% 2.5% 22.5% 21.5% 5% 2.5% 11% 11% 11%;
}

.Ueberschrift-Lebenslauf{
    height: 5vw ;
    border-radius: 3.25vw;
    
    padding-left: 3.5vw;
    padding-top: 1vw;
    background-color: #cecece;
}

.Ueberschrift-lebenslauf-text{
    font-size: 2.8vw;
    font-weight: 400;
    color: #5f5f5f;
}

.Lebenslauf-date{
    font-size: 2.5vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-bottom: 2vw;
}

.Lebenslauf-date-Bildung{
    font-size: 2.5vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-bottom: 0.7vw;
}

.Lebenslauf-Subhead{
    font-size: 2.2vw;
    font-weight: 500;
    color: black;
}

.Lebenslauf-Sub-subhead{
    font-size: 2vw;
    font-weight: 350;
    color: #1f1f1f;
}

.Lebenslauf-content-list{
    padding-left: 4vw;
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
}

.Lebenslauf-listenelement{
    font-size: 1.9vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1vw; 
}

#Lebenslauf-Berufserfahrung{
    grid-column: 2/5;
    grid-row: 2/3;
    width: 42.5vw;
}
#Lebenslauf-Beruf-Nahearena{
    grid-column: 4/5;
    grid-row: 4/5;
}
#Lebenslauf-Beruf-Broschuere{
    grid-column: 4/5;
    grid-row: 5/6;
}
#Lebenslauf-Bildungsweg{
    grid-column: 2/5;
    grid-row: 6/7;
    width: 32vw;
}
#Lebenslauf-LLS{
    grid-column: 4/5;
    grid-row: 8/9;
}
#Lebenslauf-Windeck{
    grid-column: 4/5;
    grid-row: 9/10;
}
#Lebenslauf-Schartenbergschule{
    grid-column: 4/5;
    grid-row: 10/11;
}



#Home-zwischenbalken2{
    grid-column: 1/9;
    grid-row: 8/9;
    background: #454545;
    border-radius: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    visibility: visible;
}

#Meine-Kenntnisse{
        font-family: 'Fredericka the Great';
    font-weight: 100;

    grid-column: 2/8;
    text-align: center;
    margin-top: 3vw;
    font-size: 7vw;
    color: white;
}
    
    
.Startseite-Kentnisse{
    grid-column: 1/9;
    grid-row: 9/10;
    background: #ffffff; 
    
    display: inline-grid;
    grid-template-columns:4.6% 14% 14% 14% 14% 14% 14% 4.6%;
    grid-template-rows: 3vh 48vw;
    grid-column-gap: 1vw ;
}
    
.Ueberschrift-Kentnntnisse{
    font-size: 3.5vw;
    font-weight: 400;
    text-align: center;
    margin: 2vw;
} 

#container-Besondere-Leistungen{
    grid-column: 2/4;
    grid-row: 2/3;
    background: #dae7ea;
    padding-right: 1vw;
}
#container-PC-Kenntnisse{
    grid-column: 4/6;
    grid-row: 2/3;
    background: #dae7ea;
    padding-right: 1vw;
}
#container-sonstige-Kenntnisse{
    grid-column: 6/8;
    grid-row: 2/3;
    background: #dae7ea;
    padding-right: 1vw;
    
}

.Subhead-Kentnisse{
    font-size: 1.8vw;
    font-weight: 600;
    color: black;
    margin-left: 2vw;
    margin-top: 2.5vw;
}

.Content-Kentnisse{
    font-size: 1.7vw;
    font-weight: 350;
    color: #1f1f1f;
    margin-left: 2vw;
    margin-top: 1vw;
}

.Kenntnisse-listenelement{
    font-size: 1.5vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.7vw;
}
}







/* Photographie und Zeichungen */

.main-photographie-und-Zeichnungen{
    grid-column: 2/8;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media (min-width: 1750px){
    .main-photographie-und-Zeichnungen{
    grid-column: 3/7;
    }
}





/* Photographie only */

#seitentitel-Photographie{
    margin-bottom: 3vw;
}

.bildaufloesung_disclaimer{
    margin-left: 15vw;
    margin-right: 15vw;;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 500;
}
@media (max-width: 542px){
    .bildaufloesung_disclaimer{
        margin-left: 0vw;
        margin-right: 0vw;
    }
}
@media (max-width: 424px){
    .bildaufloesung_disclaimer{
        font-size: 0.8em;
        margin-left: 0vw;
        margin-right: 0vw;
    }
}
    
.bilder-links{
    display: inherit;
    align-items: center;
}

.bilder-photographie{
    width: 500px;
    margin: 10px;
}

.eyecatch-bilder-photographie{
    width: 1020px;
    margin: 10px;
}

@media (max-width:1184px){
    .eyecatch-bilder-photographie{
    width: 500px;
    }
}

@media (max-width: 550px){
    .bilder-photographie{
    width: 90vw;
    }
    .eyecatch-bilder-photographie{
    width: 90vw;
    }
}

#footer-photo{
    grid-row: 8/9;
}





/* Zeichnungen only */



#Doodles-flex{
    grid-column: 1/9;
    display: flex;
    justify-content: center;
    background: #DAE7EA;
    padding-top: 5vw;
    padding-bottom: 10vw;
}
#skizzen-flex{
    grid-column: 1/9;
    display: flex;
    align-items: center;
    background: #DAE7EA;
    flex-direction: column;
    padding-top: 5vw;
    padding-bottom: 10vw;
}
.zettel-grid{
    width: 80vw;
    height: 50vw;
    max-width: 1300px;
    max-height: 812px;
    
    display: inline-grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}
#Fenchel-flexbox{
    width: 80vw;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

#Doodles-Ueberschrift{
    font-family: 'Special Elite';
    font-size: 3.5vw;
    text-align: center;
    grid-column: 5/8;
    grid-row: 5/7;
    align-self: center;
}
#Wie_Du_Zettel{
    grid-column: 2/5;
    grid-row: 1/5;
    height: 100%;
    transform: rotate(-10deg);
}
#Breathing_No_1_Zettel{
    grid-column: 6/8;
    grid-row: 1/4;
    height: 100%;
    transform: rotate(15deg);
}
#Happy_Birthday_Zettel{
    grid-column: 9/11;
    grid-row: 1/4;
    width: 100%;
}
#Hab_Dich_Lieb_Zettel{
    grid-column: 3/5;
    grid-row: 5/8;
    width: 100%;
    transform: rotate(10deg);
}
#Adventure_Zettel{
    grid-column: 8/11;
    grid-row: 5/10;
    height: 100%;
}
#sometimes_surviving_Zettel{
    grid-column: 1/3;
    grid-row: 8/11;
    height: 100%;
    transform: rotate(5deg);
}
#Flower_Crone_Zettel{
    grid-column: 5/7;
    grid-row: 8/11;
    width: 100%;
}


#Wendeltreppe_Zettel{
    grid-column: 6/10;
    grid-row: 1/7;
    justify-self: center;
    height: 95%;
}
#Uhr_Schlachthof_Zettel{
    grid-column: 1/5;
    grid-row: 1/8;
    align-self: center;
    justify-self: center;
    transform: rotate(10deg);
    width: 95%;
}
#Skizzen-Ueberschrift{
    font-family: 'Special Elite';
    font-size: 3.6vw;
    text-align: center;
    grid-column: 5/7;
    grid-row: 6/8;
    align-self: center;
}
#Maeppchen_Zettel{
    grid-column: 7/11;
    grid-row: 7/11;
    width: 100%;
}
#Messer_Skizze{
    grid-column: 3/7;
    grid-row: 8/11;
    height: 100%;
    visibility: visible;
}
#rom-bruecke{
    width: 70vw;
    max-width: 900px;
    padding-top: 2vw;
}
.fenchel-zettel{
    width: 37vw;
    max-width: 500px;
}

@media (max-width: 800px){
    .zettel-grid{
    width: 90vw;
    height: 56.25vw;
}
    #Doodles-Ueberschrift{
    font-size: 4vw;
}
    #Skizzen-Ueberschrift{
        font-size: 4vw;
    }
    #rom-bruecke{
        width: 80vw;
    }
}
@media(max-width: 600px){
    .zettel-grid{
    width: 90vw;
    height: 150vw;
    
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    }
    #Fenchel-flexbox{
    width: 90vw;
    align-items: center;
    flex-direction: column;
}
    
    #Wie_Du_Zettel{
        grid-column: 1/6;
        grid-row: 1/7;
        transform: rotate(15deg);
        height: 100%;
    }
    #sometimes_surviving_Zettel{
        grid-column: 6/11;
        grid-row: 1/5;
        transform: rotate(-15deg);
        height: 80%;
        justify-self: center;
    }
    #Doodles-Ueberschrift{
        grid-column: 6/10;
        grid-row: 6/7;
        font-size: 7.5vw;
        text-align: end;
    }
    #Hab_Dich_Lieb_Zettel{
        grid-column: 2/5;
        grid-row: 7/11;
        transform: rotate(8deg);
        height: 100%;
        width: 100%;
        justify-self: center;
    }
    #Breathing_No_1_Zettel{
        grid-column: 6/10;
        grid-row: 8/13;
        transform: rotate(18deg);
        height: 100%;
    }
    #Happy_Birthday_Zettel{
        grid-column: 2/6;
        grid-row: 11/17;
        transform: rotate(-18deg);
        height: 80%;
        width: 90%;
        justify-self: center;
        align-self: center;
    }
    #Adventure_Zettel{
        grid-column: 6/11;
        grid-row: 13/20;
        transform: rotate(-7deg);
        height: 90%;
        justify-self: end;
        align-self: center;
    }
    #Flower_Crone_Zettel{
        grid-column: 1/6;
        grid-row: 16/21;
        height: 100%;
        width: 90%;
        justify-self: center;
    }
    
    #Wendeltreppe_Zettel{
    grid-column: 5/11;
    grid-row: 1/8;
    height: 100%;
    justify-self: end;
}
    #Skizzen-Ueberschrift{
    font-size: 7.5vw;
    grid-column: 1/6;
    grid-row: 4/6;
}
    #Uhr_Schlachthof_Zettel{
    grid-column: 1/8;
    grid-row: 7/15;
    transform: rotate(10deg);
    width: 90%;
    justify-self: start;
}
    #Messer_Skizze{
    grid-column: 6/11;
    grid-row: 12/16;
    justify-self: end;
    align-self: flex-end;
    width: 90%;
    height: 90%;
    visibility: hidden;
}
    #Maeppchen_Zettel{
    grid-column: 3/11;
    grid-row: 15/21;
        transform: rotate(-5deg);
    align-self: center;
    width: 100%;
}
    #rom-bruecke{
        width: 95vw;
        padding-top: 0vw;
    }
    .fenchel-zettel{
    width: 80vw;
    max-width: 500px;
}
}







.bilder-zeichnungen{
    width: 600px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}
@media (max-width: 670px){
    .bilder-zeichnungen{
    width: 90vw;
    margin-left: 10px;
    margin-right: 10px;
    }
}






/* Videographie - Layout */


.Video-layout{
    grid-column: 1/9;
    
    display: inline-grid;
    grid-template-columns: 10% 26% 26% 26% 3.9% ;
    grid-column-gap: 2%;
    
    background: white;
}


.Seitenbeschriftung{
   writing-mode: vertical-rl;
    text-align: center;
    font-size: 3.3em;
    
    grid-column: 1/2;
}
@media (max-width: 900px){
    .Seitenbeschriftung{
    font-size: 6vw;
    }
}

#Titelanimation-text{
    font-size: 3.6vw;
}

.video-title{
    text-align: center;
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 1.5vw;
    
    grid-column: 2/5;
}

.video-erklaerung{
    text-align:justify;
    font-size: 1em;
    font-weight: 400;
    color: #4d4d4d;
    columns: 3;
    column-gap: 2vw;
    padding-bottom: 2vw;
    margin-bottom:  6vw;
    
    grid-column: 2/5;
    grid-row: 3/4;
}
@media (max-width: 800px){
    .video-erklaerung{
    columns: 2;
    }
}
@media (max-width: 580px){
    .video-erklaerung{
    columns: 1;
    }
}

.Video-container{
    display: flex;
    justify-content:center;
    align-items: center;
    margin-top: 4vw;
    
    grid-column: 2/5;
}

.video-gross{
    height: 34vw;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 1vw;
}

.video-gross-vertical-line{
    height: 35vw;
    margin-top: 3vw;
    margin-bottom: 2vw;
}

#SRS-Video-Layout{
    grid-auto-columns: 1/9;
}
#horizontale-trennlinie-video1{
    grid-column: 2/8;
}
#Lens-Distortion-Video{
    grid-column: 1/9;
}
#horizontale-trennlinie-video2{
    grid-column: 2/8;
}
#Friseur-Video-Layout{
    grid-column: 1/9;
}
#horizontale-trennlinie-video3{
    grid-column: 2/8;
}
#Mio-Video-Layout{
    grid-auto-columns: 1/9;
}


#Video-zwischenbalken{
    width: 100%;
    grid-column: 1/9;
    background-color: #dae7ea;
    padding-bottom: 2vw;
    
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
#Ankuendigung-Video-Seminarkurs{
    color: black;
    font-size: 3em;
    padding-left: 4vw;
    padding-right: 4vw;
}
@media (min-width: 1470px){
   #Ankuendigung-Video-Seminarkurs{
    font-size: 4em;
}
}
@media (max-width: 630px){
   #Ankuendigung-Video-Seminarkurs{
    font-size: 2.4em;
    }
}

#contrainer-teaser-Seminarkurs{
    display: inline-flex;
    align-items:center;
    padding-left: 4vw;
    padding-right: 4vw;
}
#Teaser-Video-Seminarkurs{
    font-size: 1.7em;
    font-family: 'Special Elite';
    text-align: center;
    padding-left: 4vw;
    padding-right: 4vw;
}
.qoute{
    width: 8vw;
    opacity: 50%;
}
.unqoute{
    width: 8vw;
    opacity: 50%;
    transform: rotate(180deg)
}
@media (max-width: 630px){

    #Teaser-Video-Seminarkurs{
    font-size: 1.4em;
    }

    .qoute{
    width: 11vw;
    }

    .unqoute{
    width: 11vw;
    }
}


#Layout-Seminarkurs-Video{
    grid-column: 1/9;
    
    display: inline-grid;
    grid-template-columns: 6.5% 26% 26% 26% 6.5% ;
    grid-column-gap: 2%;
    background: #dae7ea;
}
#text-Seminarkurs{
    font-weight: 430;
}
#video-Seminarkurs{
        margin-top: 2vw;
    margin-bottom: 2vw;
}










/* Kontakt - Headbar */

#layout-headbar-kontakt{
    grid-column: 1/9;
    grid-row: 1/2;
    display: flex;
    justify-content: center;
}

#Headbar-Kontakt{
    width: 700px;
    margin-top: 6vw;
    margin-bottom: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: white;
    border-radius: 8px;
}

#PB-contakt{
    width: 223px;
    height: 223px;
    background-image: url(../../Bilder/Kontakt/Profilbild-original.jpg);
    background-size: cover;
    border-radius: 50%;
}

#Seitentitel-Kontakt{
    font-size: 4em;
    font-weight: 180;
}



@media (max-width: 703px ){
   
    #Headbar-Kontakt{
    width: 95vw;
    }
    #Seitentitel-Kontakt{
        font-family: 'Raleway';
        margin-left: 0vw;
        font-size: 9vw;
        
    }
    #PB-contakt{
    width: 32vw;
    height: 32vw;
}
}








/* Kontakt - Main */

#main-kontakt{
    grid-column: 1/9;
    grid-row: 2/3;
    
    width: 100%;
    display: flex;
    justify-content: center;
}


#flexbox-kontakt{
    width: 90vw;
    background: #dae7ea;
    
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90vw;
    max-width: 90rem;
    margin-bottom: 5vw;
}
    
.kontakt-content-boxen{
    width: 17rem;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    
    background: white;
    border-radius: 8px;
    padding: 8px;    
}
@media (max-width: 300px){
    .kontakt-content-boxen{
        width: 90%;
    }
}

.grid-content-kontakt{
    width: 100%;
    
    display: inline-grid;
    grid-template-columns: 40% 60%;
    grid-row-gap: 5px;
}

.Ueberschrift-Kontakt-content{
    font-weight: 500;
    font-size: 1.35em;
    text-align: center;
}

.subhead-kontakt{
    font-size: 1em;
}

.Text-Kontakt-content{
    font-size: 1em;
}

.vertical-line-contact-boxen{
  margin-bottom: 8px;

}

.erleuterung-text-kontakt{
    grid-column: 1/3;
    text-align: center; 
    font-size: 1em;
}



#verschoben-text-kontakt{
    padding-top: 0.5rem;
}
#verschoben-ul-kontakt{
    margin-top: 0.5rem;
    padding-left: 0.8rem;
    color: #505050;
}
.fliesstext-link-icon-kontakt{
    width: 1.5em;
}


@media (max-width: 360px){
    .Ueberschrift-Kontakt-content{
    font-size: 6vw;
    }
    
    .subhead-kontakt{
    font-size: 4.3vw;
    }
    
    .Text-Kontakt-content{
    font-size: 4.3vw;
    }
    
    .erleuterung-text-kontakt{
    font-size: 4.3vw;
    }
}









/* Graphikdesign und Produktdesign Seite */

.section-ProduGraph-grey{
    grid-column: 1/9;
    width: 100%;
    background: #dae7ea;
    padding-top: 5vw;
    padding-bottom: 6vw;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-ProduGraph-white{
    grid-column: 1/9;
    width: 100%;
    background: white;
    padding-top: 5vw;
    padding-bottom: 6vw;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.layout-ProduGraph{
    width: 90vw;
    max-width: 1100px;
    
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.Themenueberschrift-ProduGraph{
    font-size: 2.7em;
    text-align: center;
}

.ProduGraph-Subhead{
    font-size: 1.17em;
    font-weight: 400;
}

.ProduGraph-text-container{
    width: 30vw;
    min-width: 275px;
    max-width: 500px;
    text-align:justify;
}

@media (max-width: 900px){
    .section-ProduGraph-grey{
    padding-bottom: 10vw;
    }
    .section-ProduGraph-white{
    padding-bottom: 10vw;
    }
    .layout-ProduGraph{
    flex-direction: column;
    align-items: center;
    }
    .Themenueberschrift-ProduGraph{
    font-size: 2.2em;
        font-weight: 400;
    }
    .ProduGraph-Subhead{
    font-size: 1em;
    font-weight: 420;
}
    .ProduGraph-text-container{
    width: 80vw;
    min-width: none;
    margin-top: 12px;
    margin-bottom: 10px;
    }
}




/* Graphikdesign only */

.Logo-groesse{
    width: 30vw;
    max-width: 340px;
}
@media (max-width:900px){
    .Logo-groesse{
    width: 40vw;
    margin-bottom: 4vw;
}
}
@media (max-width:430px){
    .Logo-groesse{
    width: 60vw;
}
}

#MoJu-Abkuerzungserklaerung{
    text-align: center;
    font-size: 1.1em;
}

#layout-Moju-flex{
    margin-bottom: 8vw;
}

#layout-IGM-F-flex{
    margin-bottom: 8vw;
}

#layout-swt-flex{
    margin-bottom: 2vw;
}

#section-MoJu-Graustufen{
    width: 90vw;
    max-width: 900px;
    grid-column: 2/8;
}

#container-graustufen-bilder{
    display: flex;
    justify-content: space-around;
}

.Versionen_ueberschrift{
    text-align: center;
    font-size: 3vw;
    font-weight: 300;
    padding-bottom: 3vw;
}

.bilder-graustufen{
    width: 20vw;
    max-width: 220px;
}


#pfeil-swt-logo{
    width: 5vw;
    max-width: 100px;
    height: 5vw;
    max-height: 100px;
    background-image: url(../../Designelemente/Icons/pfeil-rechts-red.svg);
    background-repeat: no-repeat;
    background-position: center;
}

#swt-logo-text{
    width: 50vw;
    text-align: center;
}

#button-zur-Onlineansicht{
    height: 3vw;
    padding-left: 1vw;
    padding-right: 1vw;
    background-color: #116ea7;
    border: none;
    border-radius: 1.5vw;
    
    margin-top: 1vw;
    
    font-family: 'Raleway';
    font-size: 1.4vw;
    color: white;
}

.postkarte-bild{
    width: 30vw;
    height: 30vw;
    background-size: cover;
}
@media(max-width: 1500px){
    .postkarte-bild{
    width: 550px;
    height:550px;
}
}


.umdrehen-check{
    width: 70px;
    height: 70px;
    opacity: 0%;
    z-index: 2;
    transform: translate(73px ,0);
}
.post-umdrehen-button{
    background: #FFA00B;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: dreh-button-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
.umdrehen-icon{
    width: 50px;
}
    @keyframes dreh-button-animation{
    0%      {transform: scale(1) translate(0,0)}
    66%     {transform: scale(1) translate(0,0)}
    83%     {transform: scale(1.15) translate(0,-1px)}
    100%    {transform: scale(1) translate(0,0)}
}





#layout-wichtel-postkarte{
        justify-content: center;
    }
#swt-postkarte{
    animation-name: swt-pk-animation-rw;
    animation-duration: 0.7s;
    animation-fill-mode:forwards;
    filter: drop-shadow(20px 20px 20px #222);
}
#SWT-Postkarten-check:checked ~ #swt-postkarte{
    animation-name: swt-pk-animation;
    animation-direction: normal;
}
@keyframes swt-pk-animation {
    0%  {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F1.png);}
    25%  {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F2-50.png);}
    50% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F3-50.png);}
    75% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F4-50.png);}
    100% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F5.png);}
}
@keyframes swt-pk-animation-rw {
    0%  {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F5.png);}
    25%  {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F4-50.png);}
    50% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F3-50.png);}
    75% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F2-50.png);}
    100% {background-image: url(../../Bilder/Graphikdesign/SWT-Postkarten-Animation/SWT-PK-F1.png);}
}







#Flyer-Bundestagswahl{
    width: 30vw;
    max-width: 340px;
    filter: drop-shadow(20px 20px 20px #222)
}



@media (max-width: 1150px){
    #wichtel-PK-Text{
    width: 55vw;
    max-width: none;
} 
    .umdrehen-check{
    transform: translate(70px ,0);
}
}
@media (max-width: 1100px){
    #MoJu-text-container{
    width: 40vw;
    }

@media (max-width: 900px){
    .section-ProduGraph-grey{
    padding-top: 15vw;
    padding-bottom: 15vw;
}
    .section-ProduGraph-white{
    padding-top: 15vw;
    padding-bottom: 15vw;
}
    #MoJu-text-container{
    width: 80vw;
    margin-top: 12px;
    margin-bottom: 30px;
    }
    #MoJu-Logo{
    width: 60vw;
    }
    .bilder-graustufen{
    width: 25vw;
    max-width: 220px;
    }
    #Plakat-Bild{
    width: 80vw;
    }
    #button-zur-Onlineansicht{
    height: 7vw;
    border-radius: 3.5vw;
    font-size: 4vw;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-top: 2vw;
}
    #Flyer-Bundestagswahl{
    width: 80vw;
    max-width: 340px;
}
    #pfeil-swt-logo{
    width: 10vw;
    height: 10vw;
    background-image: url(../../Designelemente/Icons/pfeil-runter-red.svg);
}
    #swt-logo-text{
    width: 80vw;
    text-align: center;
}
    .umdrehen-check{
    transform: translate(0, 49px);
}
    @keyframes dreh-button-animation{
    0%      {transform: scale(1) translate(0, -21px)}
    66%     {transform: scale(1) translate(0, -21px)}
    83%     {transform: scale(1.15) translate(0, -19px)}
    100%    {transform: scale(1) translate(0, -21px)}
}
}
}
@media(max-width: 630px){
    .postkarte-bild{
    width: 85vw;;
    height:85vw;;
}
    #Flyer-Bundestagswahl{
    width: 53vw;
    margin-bottom: 10vw;
}
}
@media (min-width: 1350px){
    .Versionen_ueberschrift{
    font-size: 2vw;
    padding-bottom: 2vw;
}

}




.Broschuere-layout{
    grid-column: 1/9;
    
    display: inline-grid;
    grid-template-columns: 10% 26% 26% 26% 3.9% ;
    grid-column-gap: 2%;
    background: white;
}

.Broschuere-container{
    display: flex;
    justify-content:center;
    align-items: center;
    margin-top: 4vw;
    
    grid-column: 2/5;
    grid-row: 1/2;
}

.broschuere-vertical-line{
    height: 500px;
    margin-top: 3vw;
    margin-bottom: 2vw;
}

.broschuere-bild{
    height: 500px;
    width: 666px;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 1vw;
    background-size: cover;
}

@media (max-width:1000px){
    .Broschuere-layout{
        padding-top: 5vw;
        padding-bottom: 5vw;
    }
    .broschuere-bild{
    height: 333px;
    width: 444px;
}
    .broschuere-vertical-line{
    height: 333px;
}
}
@media (max-width:650px){
    .broschuere-bild{
    height: 51vw;
    width: 68vw;
}
    .broschuere-vertical-line{
    height: 51vw;
}
}


#swt-broschuere{
    background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F1.png);
    filter: drop-shadow(20px 20px 20px #222);
}

#swt-broschuere:hover{
    animation-name: swt-animation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes swt-animation {
    0%  {background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F1.png);}
    25%  {background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F2.png);}
    50% {background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F3.png);}
    75% {background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F4.png);}
    100% {background-image: url(../../Bilder/Broschuere/SWT-Animation/SWT-F5.png);}
}

.trennlinie-broschueren{
    grid-column: 2/8;
}

#IGM_Broschuere{
    background-image: url(../../Bilder/Broschuere/IGM-Animation/IGM-F1.png);
    filter: drop-shadow(20px 20px 20px #222);
}

#IGM_Broschuere:hover{
    animation-name: IGM-animation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes IGM-animation {
    0%  {background-image: url(../../Bilder/Broschuere/IGM-Animation/IGM-F1.png);}
    33%  {background-image: url(../../Bilder/Broschuere/IGM-Animation/IGM-F2.png);}
    66% {background-image: url(../../Bilder/Broschuere/IGM-Animation/IGM-F3.png);}
    100% {background-image: url(../../Bilder/Broschuere/IGM-Animation/IGM-F4.png);}
}





/* Produktdesign only */

#Ueberschrift-Cuttermesser{
    text-align: center;
    margin-bottom: 2vw;
}

.Uberschrift-section-thema{
    font-family: 'Fredericka the Great';
    font-size: 8vw;
    color: #262626;
    font-weight: 100;
}

.subhead-section-thema{
    font-size: 2.6vw;
    font-weight: 450;
}

#margin-messer{
    margin-top: 2.5vw;
}

.bilder-messer{
    width: 40vw;
    max-width: 430px; 
}

#Bild-Raummodell-gross{
    width: 40vw;
    max-width: 430px;
}

#Raummodell-text{
    width: 40vw;
    min-width: 275px;
    max-width: 500px;
    text-align:justify;
}

#layout-Raummodell-Bilder{
    width: 90vw;
    
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90vw;
    max-width: 90rem;
    margin-top: 7vw;
}

.Raummodell-bilder{
    width: 288px;
    
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 14px;
    margin-right: 14px;
}

@media (max-width: 730px){
    .Uberschrift-section-thema{
    font-size: 13.7vw;
    }
    .subhead-section-thema{
    font-size: 4.3vw;
    font-weight: 450;
    }
    #margin-messer{
    margin-top: 8vw;
    }
    .bilder-messer{
    width: 80vw;
    }
    #Bild-Raummodell-gross{
    width: 80vw;
    max-width: none;
    margin-top: 4vw;
    }
    #Raummodell-text{
    width: 80vw;
    max-width: none;
    min-width: none; 
    }
    .Raummodell-bilder{
    width: 60vw;
    }
}

@media (min-width: 1100px){
    #Text-Cuttermesser{
    font-size: 100px;
    }
    #Text-Einblick{
    font-size: 32px;
    }
}