/*-----------------------------------------------*/


/*Grundlegende Styles*/


/*-----------------------------------------------*/




/* * = all elements*/

* {
    margin: 0;
    padding: 0;
/*  scroll-behavior: smooth;*/


  
}
:root {
      --font-color:  #2f2f38;
    --bg-color:  #ffffff;
/*    --hover-color:  #f43a4f;*/
        --hover-color:  #fdd890;
/*        --hover-color:  #3f3588;*/
    
}

/*@font-face {
 font-family: PxGrotesk;
 src: url(PxGrotesk-Regular.otf);
}*/

@font-face {
    font-family: NewParisSkyline;
    src: url(NewParisSkyline.woff);
}

@font-face {
    font-family: NoeDisplayMedium;
    src: url(NoeDisplayMedium.woff);
/*        src: url(NoeDisplay-Medium.otf);*/
}


/*
#navigation {
    grid-area: navigation;
}
*/
html{
background-color: #ffffff;
}

body {

 background-color: $color-main;

    /*no background color weil sonst flickert*/
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    font-weight: normal !important;
    /* Enable common ligatures */
    font-variant-ligatures: common-ligatures;
    /* Enable discretionary ligatures */
    font-variant-ligatures: discretionary-ligatures;
}

img {
    width: 100%;
}

video {
    width: 100%;

}
h1 {
    color: var(--font-color);
    font-size: 16vw;
    font-family: NoeDisplayMedium;
    line-height: 0.95;
    font-weight: normal !important;
    transition: 0.3s ease-in-out;

}


#welcome h1 {
    font-size: 8vw;

}

h2 {
    color: var(--font-color);
    font-size: 2rem;
    line-height: 1;
    font-weight: normal !important;
    font-family: NoeDisplayMedium;
    transition: 0.3s ease-in-out;
}

h3 {
    color: var(--font-color);
    font-size: 0.9rem;
    /* font-family: QuestaItalic;*/
    font-family: NewParisSkyline;
    font-weight: normal !important;
    margin-top: 50px;
    transition: 0.3s ease-in-out;
}

.nav-untertitel a h3{
 color: var(--hover-color);
    font-size: 0.9rem;
    /* font-family: QuestaItalic;*/
    font-family: NewParisSkyline;
    font-weight: normal !important;
    margin-top: 50px;
    transition: 0.3s ease-in-out;
}


h4 {
    color: var(--font-color);
     font-family: NoeDisplayMedium;
    font-size: 3rem;
    line-height: 0.95;
    font-weight: normal !important;
    transition: 0.3s ease-in-out;
}

h5 {
    color: var(--font-color);
    font-size: 1rem;
    font-weight: normal !important;
    transition: 0.3s ease-in-out;
}

p {
    color: var(--font-color);
     font-family: NewParisSkyline;
    font-size: 1.2rem;
    font-weight: normal !important;
    line-height: 1.2;

  
}

a {
transition: 0.3s ease-in-out;
color: var(--font-color);
    text-decoration: none;
    font-weight: normal !important;
     text-decoration: none;

/*    transform: scale(1);*/
}


a:active {

color: var(--font-color);
}

a:visited {

color: var(--font-color);
     text-decoration:none;
}


a.linkextern {

    text-decoration: underline;
}



iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video16_9{

     position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}



/*-----------------------------------------------*/

/*für mobile*/

/*-----------------------------------------------*/


/*-----------------------Main Navigaton------------------------*/

#hauptnav-wrapper{
         font-family: NewParisSkyline;
    font-size: 1rem;
   height: 3rem;
   width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: none;
}

/*
#hauptnav-wrapper .hauptnav-indexseite{
background-color: none;
}

#hauptnav-wrapper .hauptnav-unterseite{
          background-color: #ffffff;
}
*/

#hauptnav-wrapper ul{

       width: 92%;
     margin: 1rem 4% 0 4%;
position: absolute;
    padding: 0;

}
#hauptnav-wrapper li{

    text-decoration: none;
    list-style: none;
     color: #ffffff;

    margin: 0 0 0 2rem;
    padding: 0;

}  
#Marlen{

float: right;
display: inline-block;

    
}

#Arbeiten{
float: right;
 display: inline-block;

    
}

.hauptmenu-aktiv{
 text-decoration: underline;
    
}


/*-----------------------Projektnummern Navigation------------------------*/

#menu{
        font-family: NewParisSkyline;
    position: fixed;
    bottom: 5vh;
      font-size: 1rem;
    z-index: 99999;
    margin: 0 0 0 8.33%;
}

#menu ul{
    height: 100%;
    } 

#menu li {
float: left;
margin-left: 10px;
   text-decoration: none;
    list-style: none;

}
#menu li.active{
	text-decoration: underline;
}
#menu li a{
	text-decoration:none;
}

#menu li:hover{
	text-decoration: underline;
}


/*-----------------------Projekte Indexseite------------------------*/


			.project {
/*                height: 150vh; für pinning*/

                 display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 10vh);
                
/*
                    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(20, 10vh);
*/
    grid-column-gap: 10px;
                
/*    starting position before animated*/
/*    opacity: 0;*/
/*z-index: -1;*/
			}

#project0{
    
/*    background-color: aquamarine;*/
/*       height: 100vh!important; für pinning*/
}

/*
#project1{
    
    background-color: #5f897b;
}

#project2{
    
    background-color: aquamarine;
}
#project3{
    
    background-color: #5f897b;
}
*/

.nav-titel {
    
    grid-column: 2 /12;
    grid-row: 7;
/*
        grid-column: 4/24;
    grid-row: 14;
*/
    z-index: 2;
     transform: scale(1);
    opacity: 0;
    transform: translateX(0);
   transition: 0.3s ease-in-out;

}


.nav-titel.index-fade-in{
    opacity: 1;
    transform: translateX(20px);
}

.nav-titel h3 {
    margin-top:0.5rem;
        transform: scale(1);
    
}

#sketch-holder {

     grid-column: 1/13;
    grid-row: 3/7;
    z-index: 1;
    overflow: hidden;
 
}

.projektgif {
    grid-column: 2/12;
    grid-row: 3/11;
    z-index: 1;
    overflow: hidden;
      opacity: 0;
    transform: translateX(20px);
   transition: 0.3s ease-in-out;
    transition-delay: 0.2s;
  
}


.projektgif.index-fade-in{
    opacity: 1;
        transform: translateX(0);

}


.projektlink {
    text-decoration: none;
}

.project-background{
    
    grid-column: 2 /12;
    grid-row: 5/10;
/*    opacity: 0;*/
/*       transition: 0.3s ease-in-out;*/
/*    transition: 0.1s;*/
}
/*

.project-background.index-fade-in{
opacity: 1;
}
*/

/*

#project-background-0{
        background-color: #efe0ce;
}

#project-background-1{
        background-color: #ced1ef;
}

#project-background-2{
        background-color: #fe7471;
}
*/





/*
.projektgif img{
    transform: scale(1);
       transition: 0.3s ease-in-out;
}
*/

/*.projektgif:hover .projektgif img*/
/*.projektgif:hover .nav-titel,*/
/*
.nav-titel:hover .projektgif img,
*/
/*.project:hover .projektgif img*/
/*.nav-titel:hover .nav-titel h3,*/

/*
{
    transform: scale(0.95);
}
*/


/* ==========================================================================
   ScrollMagic Styles
   ========================================================================== */

/*ending state after animation*/
/*.project.z-index{*/
/*    opacity: 1;*/
/*
     z-index: 1;
        opacity: 1;
*/
/*    z-index: 1;*/
/*    visibility: visible;*/
/*    transform: translateY(0);*/

/*}*/
/*

.project.index-fade-in{
    opacity: 1;
}
*/

/* ==========================================================================
   SWUP Styles Mobile
   ========================================================================== */
.swup-transition-opacity{
    opacity: 1;
 transition: 0.4s;

}

html.is-animating .swup-transition-opacity{
    opacity: 0;
}

.swup-transition-opacity-navbar{
    opacity: 1;
 transition: 0.2s;
transition-delay: 0.6s;
}

html.is-animating .swup-transition-opacity-navbar{
    opacity: 0;
    
}
/*

.swup-transition-getBigger{
    transform: scale(1);
         transition: 0.1s ease-in-out;
}

html.is-animating .swup-transition-getBigger{
    
    transform: scale(1.1);
}
*/
.swup-transition-getSmaller{


    margin: 5rem 4% 0 4%;
    width: 92%;

   transition: 1s cubic-bezier(1,.01,.15,.99);
    /* delay so lange wie opacity oder leicht kürzer*/

 /*transition-delay: 0.3s;*/
}

html.is-animating .swup-transition-getSmaller{

    margin: 0 0 0 0;
    padding: 0 0 0 0;

        width: 100%;
}

/* Nur bei h, p, img etc, nicht bei Divs, sonst Porlbeme mit ScrollMagic*/
/*
.swup-transition-fadeLeft{
   transform: translateX(0);
     transition: 0.4s;
}

html.is-animating .swup-transition-fadeLeft{
       transform: translateX(-20px);
}
*/

.swup-transition-fadeUp{
   transform: translateY(0);
	     transition: 0.3s;
}

html.is-animating .swup-transition-fadeUp{
       transform: translateY(10vh);
}

/*_______einzelseiten Projekte_________*/

/*
#content {
    grid-area: main;
}
*/

/*
#footer {
    grid-area: footer;
}
*/


#main-grid {
    display: grid;
/*    grid-template-columns: 1fr 60fr 1fr;*/
grid-template-columns: 2% 96% 2%;
    grid-auto-rows: minmax(50px, auto);
    grid-column-gap: 0px;
    grid-row-gap: 10px;
/*
    grid-template-areas: 
  " .main. " " .footer. ";
*/
}



#content {
    grid-row: 3;
    grid-column: 2/3;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 10px;
    grid-row-gap: 40px;
}
#footer {
   grid-row: 6/9;
   grid-column: 2 /3;
/*    z-index: 1;*/
}

#info-footer{
   grid-row: 6/7;
   grid-column: 2 /3;
/*    z-index: 1;*/
}

#projekt-titel {
     grid-column: 2 /12;
   
}

#projekt-titel h3 {
 margin-top: 1rem;
	font-size:1.2rem;
   
}
#projekt-hauptbild {
/*   width: 96vw;*/
/*
    margin: 0;
    padding: 0;
    overflow: hidden;
*/
}

.projekt-text {
    grid-column: 2 /12;
     /*    starting position before animated*/
/*
    opacity: 0;
    transform: translateY(20%);
    transition: all 0.8s ease-out;
*/
/*ending state after animation*/

}


/*

.projekt-text.fade-in{
    opacity: 1;
    transform: translateY(0);
}

*/
   
.inhalt-animiert{
    
        opacity: 0;
    transform: translateY(20%);
    transition: all 0.8s ease-out;
}

.inhalt-animiert.fade-in{
     opacity: 1;
    transform: translateY(0);   
    
}


.projekt-bild-gross {
    grid-column: 1 /13;
     /*    starting position before animated*/
/*
    opacity: 0;
    transform: translateY(20%);
    transition: all 0.8s ease-out;
*/
/*ending state after animation*/

}

/*
.projekt-bild-gross.fade-in{
    opacity: 1;
    transform: translateY(0);
}
*/


.projekt-bild-mittel {
    grid-column: 1 /13;
}
.projekt-bild-klein {
/*    grid-column: 1 /13;*/
}

.projekt-bild-wrapper-kleine {
    grid-column: 1/13;

}    
.projekt-bild-klein {
/*  grid-column: span 3;*/
    width: 60%;
    margin: 5% 20% 0 20%;
    float: left;
/* align-items: center;*/
}

      .projekt-bild-halb-links {
    grid-column:1/13;
}
            .projekt-bild-halb-rechts {
    grid-column:1/13;
}


#naechstes-projekt {
  text-align: center;
}
  

.naechstes-projekt-background{
    

/*
   grid-column: 1 /4;
    grid-row: 6/9;
    grid-row: 7/9;
*/
    z-index: 0;
/*    transform: translateY(25px);*/
}

#goTo-Burgdorf{
        background-color: #fe7471;
    
}


/*_______SLIDESHOW_______*/

/* Next & previous buttons */
/*
.prev, .next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: red;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
/*
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
/*
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
*/

/* Fading animation */
/*
.slidesfade {
  -webkit-animation-name: slidesfade;
  -webkit-animation-duration: 1.5s;
  animation-name: slidesfade;
  animation-duration: 1.5s;
}

@-webkit-keyframes slidesfade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes slidesfade {
  from {opacity: .4} 
  to {opacity: 1}
}
*/


/*_______über mich_________*/

#kurzinfo {
    grid-column: 2 /12;
    grid-row: 2;
}
#kurzinfo h3 {
    font-size:  1.5rem;
     font-family: NoeDisplayMedium;
}
#bild-marlen {
    /*    opacity: 0.8;*/ 
    grid-row: 1;
    grid-column: 2 /12;
}
.info-text-links {
    grid-column: 2 /12;
}
.info-text-links h3 {
     font-family: NoeDisplayMedium;
    font-size: 2.5rem;
}

.info-text-rechts {
    grid-column: 2 /12;
}

.info-text-rechts h3 {
         font-family: NoeDisplayMedium;
     font-size:  2.5rem;
}
.skills {
    height: 0.5em;
}

/*-----------------------------------------------*/

/*für Desktop*/

/*-----------------------------------------------*/
@media screen and (min-width: 700px) {
    
 /*------------Custom Cursor---------*/

    
    

 /*------------Grundlegende Styles---------*/

h1 {
    font-size: 7vw;
            transform: translateX(0);
        transform: scale(1);

}
	#welcome h1{
	    font-size: 4vw;
}
	
h2 {
    font-size: 4rem;
            line-height: 0.95;
}

h3 {
    font-size: 2.5rem;
      transform: scale(1);
            transform: translateX(0);
}

h4 {

    font-size: 4rem;

}

h5 {
    font-size: 1rem;

}

     
    p {
    font-size: 1.3rem;
    }

	
#projekt-titel h3
	
{  font-size: 1.3rem;}
        .pfeil {
            /*   height: 5vh;
                                width: 5vw;
                                margin-left: 70%;
                                top: 60%;*/
        }
    

        /* styles alte seite start*/   
        #hauptnav-wrapper{
  height: 5rem;
   font-size: 1.5rem;
}
     #hauptnav-wrapper ul{
/*
          width: 92%;
 margin: 1rem 4% 0 4%;
*/
         
/*
                width: 88%;
     margin: 1.5rem 8% 0 4%;
*/
             margin: 1.5rem 4% 0 4%;
         
    }
    
    #hauptnav-wrapper li{
    text-decoration: none;
    list-style: none;
  
} 

    #menu{
        margin-top: 0;
        bottom: 10%;
         font-size: 1.5rem;
    }
    #menu li {
 width: 100%;
    }
        
        /* styles alte seite fertig*/
    #main-grid {

    grid-template-columns: 4% 92% 4%;
    }
        
 /*_______Hover Styles_________*/
    

a:hover {

color: var(--hover-color);

/*    transform: scale(1.1);*/


}


a h1:hover{

color: var(--hover-color);
/*       transform: scale(0.95);*/
/*     transform: translateX(0.5rem);*/
    /*

        transform: scale(0.8);
        transform: translateX(0.5rem);
*/
/*    transform-origin:left;*/
/*      transition: 0.3s;*/
}
a h2:hover{

color: var(--hover-color);
/*      transition: 0.3s;*/
}

a h3:hover{

color: var(--hover-color);
/*      transition: 0.3s;*/
}


.nav-untertitel a h3:hover{

color: var(--hover-color);
/*
        transform: scale(1.05);
        transform: translateX(0.5rem);
*/
}

a h4:hover{

/*color: var(--hover-color);*/
/*      transition: 0.3s;*/
}
a p:hover{
 
color: var(--hover-color);
/*      transition: 0.3s;*/
}
    
    
    
    .nav-titel:hover h1,
    .nav-titel:hover .nav-untertitel h3 
    {
        color: var(--hover-color);
/*        transform: translateX(0.5rem);*/
/*        transform: scale(1.02);*/
   transform: scale(0.99);
        transform-origin: right;
/*        transform-origin: left;*/
    }
    
/*
    
    #naechstes-projekt:hover a p,
    #naechstes-projekt:hover a h4{
              color: var(--hover-color);
        
    }
*/
    
    
#naechstes-projekt a h4:hover{
              color: var(--hover-color);
        
    }    
    
        /*_______Startseite_________*/
    

    
    .project-nr{
        grid-column: 1/2;
    grid-row: 10;
           z-index: 2;
    }
     
     .project-nr ul {
/*    align-content: center;*/
    }
 .project-nr li {
/*
float: left;
margin-left: 10px;
*/
     text-align: center;
   text-decoration: none;
    list-style: none;

}
 .project-nr li.active{
     color: var(--font-color);
}
 .project-nr li a{
     color: var(--font-color);
}

 .project-nr li a:hover{
     color: var(--hover-color);
}
    
    
.nav-titel {
    grid-column: 3 /8;
    grid-row: 5;
    z-index: 2;
  
}
    
    .nav-titel h3 {
    margin-top:50px;
}



#sketch-holder {

     grid-column: 3/12;
    grid-row: 2/11;

   z-index: 1;
    overflow: hidden;
}
    
    
  .homevideo  {
    grid-column: 6/11;
    grid-row: 2/11;
    z-index: 1;
    overflow: hidden;
  
}
.projektgif {
	    transform: translateX(50px);
    grid-column: 6/11;
    grid-row: 2/11;
    z-index: 1;
    overflow: hidden;
  
}   /*  width: 100%;*/
	


        /*_______Index Fade In_________*/
    
    .nav-titel.index-fade-in{
    opacity: 1;
    transform: translateX(50px);
}
     
        /*_______einzelseiten Projekte_________*/
    
    #content {
    grid-row: 3;
    grid-column: 2 /3;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 10px;
    grid-row-gap: 80px;
}
 


    #projekt-hauptbild {
/*
    grid-row:2;
     grid-column: 2/4;    
   
*/
/*
            grid-row:2;
    grid-column: 2/3;
*/
/*        width: 92vw;*/
}
    
    #projekt-titel {
    grid-column: 1 /7;
   
} 
        
  .projekt-text {
    grid-column: 2/8;
    grid-row: span 1;

}
    

.projekt-bild-gross {
    grid-column: 1/13;

}

    .projekt-bild-mittel {
    grid-column: span 6;
}
.projekt-bild-wrapper-kleine {
    grid-column: 1/13;

}    
.projekt-bild-klein {
/*  grid-column: span 3;*/
    width: 23.33%;
    margin: 0 5% 0 5%;
    float: left;
/* align-items: center;*/
}

        /*_______über mich_________*/
    
      
      
#kurzinfo {
    grid-column: 2 /6;
     grid-row: 1;
}
#kurzinfo h3 {

    font-size: 3vw;
}
#bild-marlen {
    /*    opacity: 0.8;*/ 
     grid-row: 1;
    grid-column: 8 /11;
}
.info-text-links {
    grid-column: 2 /6;
}
.info-text-rechts {
    grid-column: 8 /12;
}
       }


/* ==========================================================================
   ScrollMagic Styles Desktop
   ========================================================================== */
/*
html.is-animating .swup-transition-fadeLeft{
       transform: translateX(-100px);
}*/
/*-----------------------------------------------*/

/*für Grosse Bildschirme*/

/*-----------------------------------------------*/
@media screen and (min-width: 1540px) {
	    p {
    font-size: 1.6rem;
    }
	
	#projekt-titel h3{
	 font-size: 1.6rem;
	}
}

/*-----------------------------------------------*/

/*für Riesen Bildschirme*/

/*-----------------------------------------------*/
@media screen and (min-width:2000px) {
#main-grid {
    padding: 0 10% 0 10%;
    }
    
    .startseite-wrapper{
          padding: 0 10% 0 10%;
    }