@import url(normalize.css);
@import url(all.min.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);

/*Allgemeine Formatierungen /////////////////////////////////////////*/
* {
  box-sizing: border-box;
}


/*Beim Focusieren und Aktivieren von Elementen immer die unerwünschte OUTLINE für alle Elemente entfernen*/
*:active,
*:focus{
outline:0;
outline:none;
}


body {
  color: #8f8f8f;
  font-family: 'Raleway',sans-serif;
  font-size:1em;
}

a {
  text-decoration: none;
}


p {
  margin: 1.25em 0;
  line-height:1.5em;
}

ul,ol{
list-style-type:none;
padding-left:0;
margin:0;
}

figure{
  margin:0;
}

 .flex-container{
  display:flex; 
  gap:2%;
  margin:2% 0;
  }
 .flex-container .item{
    background:#fff;
    padding: 20px;
    color: #4dccb9;
    flex:1 1 auto; 

    -webkit-transition: all 500ms ease-in-out 0.2s;
    -moz-transition: all 500ms ease-in-out 0.2s;
    -ms-transition: all 500ms ease-in-out 0.2s;
    -o-transition: all 500ms ease-in-out 0.2s;
    transition: all 500ms ease-in-out 0.2s;
  }
  .flex-container .item:hover{
    background-color:#4dccb9;
    color:#fff;
    transform:rotateY(180deg);
}

/* innerbox für den Inhalt ///////////////////////*/
.innerbox{
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 2%;
  position: relative;
}

header .innerbox{
  overflow: hidden;
}

.impressum main{
  padding-top: 120px;
  padding-bottom: 80px;
}

.datenschutz main{
  padding-top: 120px;
  padding-bottom: 80px;
}

.work main{
  padding-top: 150px;
  padding-bottom: 80px;
}

section .innerbox{
  padding: 50px 2%;

}




/*header ////////////////////////////////////////////////////////*/

/*header-Zustand Nummer 1
.main_h, Anfangs-Formatierung des Headers 
*/
.main_h {
  position: relative;/*fest positioniert am Browserfenster*/
  top: 0;
  left:0;
  z-index: 999;
  width: 100%;
  max-height: 120%;
  padding-top: 17px;
  padding-bottom: 6px;
 
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}


/*header-Zustand Nummer 2
Beim scrollen des browser-fensters(window-scroll-funktion ) wird über ein js-script die scroll-Höhe überprüft. Ab einer Scroll-Höhe von größer 100px wird der bereits vorhandenen Header-Klasse .main_h die zusätzliche Klasse .sticky zugewiesen.  (addClass)
Diese überschreibt  Eigenschaften für den Sticky-Header-Zustand(bleibt am Browser-Fenster kleben)
*/
.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  top: 0px;
  border-bottom: 1px solid gainsboro;
}


/*header-Zustand Nummer 3
Bei der mobilen Ansicht wird ein toggle(Hamburger-Icon) eingeblendete. Beim Klicken auf dieses wird über das js-Script die Header-Höhe von 70px auf 400px erhöht durch die zugewiesene Klasse .open-nav.
somit wird ein Klapp-Menu generiert(Auf-zu-Funktion)
*/
.open-nav {
  background-color: rgba(255, 255, 255, 0.93);
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}



/*Bild-Logo*/
.logo {
  float: left;
  width: 200px;
  /*72x22*/
}



/*navigation ///////////////*/
nav {
  float: right;
}

nav ul {
  text-align: right;
  margin-top:5px;
}

nav ul li {
  display: inline-block;
  margin-left: 35px;
}


/*Ankerformatierung von Anfang an(Header-Zustand-1)*/
nav ul li a {
  color: #271306;
  font-weight: 700;
  text-transform: uppercase;

}

/*mit der .sticky Klasse davor, können alle Formatierungen innerhalb des headers beim scrollen ab einer Scroll-Höhe von 100px(Js-Script) verändert/angepasst werden*/
.sticky nav ul li a {
  color: #271306
}




/*
mobilen Ansicht wird das Hamburger-Icon eingeblendet für das Steuern der Navigation
*/
.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #036f76;
  display: block;
}


/*Hero-Großbild-Bereich*/

.hero {
  position: relative;
  background: url(../bilder/weltbuero/claudia-portrait-02.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  height:50vh;/*Geräte-Höhe(device-height) auslesen und zu 100% diese als Hero-Box-Höhe zuweisen*/
}


.hero h1 {
  margin:0;
  position:absolute;
  left:50%;
  top:90%;
  transform:translate(-50%,-50%);
  text-transform: uppercase;
  background:rgba(255, 255, 255, 0.5);
  padding:10px 20px;
}

.hero h1 span#name {
  font-size: 2.5rem;
  display: block;
  color: #271306;
  font-weight:900;
  letter-spacing: 3px;
}

.hero h1 span#claim {
  font-size: 1.2rem;
  font-weight: 400;
  display:block;
  color: #271306;
  letter-spacing: 5px;
  margin-top:-5px;
  text-shadow: 1px 1px 1px #969393;
}



    /*Hero-Bereiche für Unterseiten ////////////////*/
      /*hero - Großbild-Bereich*/
      .unterseite  .hero{
        height:50vh;
        }
    
        .unterseite #hero h1{
            font-size:1.5em;
        }

  /*Individuelle Hintergrundgrafiken separat pro Unterseite*/


  .about{
    box-sizing: border-box;
  }
  
  .divbox {
    background-color: #dabdb3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
    
  }
  
  
  .box {
    background-color: white;
    color: #271306;
    max-width: 980px;
    padding:20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.3);
    transform: translateX(200%);
    transition: transform 0.4s ease-in;
  }
  
  .box:nth-of-type(even) {
    transform: translateX(-200%);
  }
  
  .box.show {
    transform: translateX(0);
  }

  .about .hero {
    position: relative;
    background: url(../bilder/weltbuero/claudia-portrait-02.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    text-align: center;
    height:50vh;/*Geräte-Höhe(device-height) auslesen und zu 100% diese als Hero-Box-Höhe zuweisen*/
  }

  .contact .hero{
    position: relative;
    background: url(../bilder/weltbuero/auswahl-neue-website/weltkarte.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    text-align: center;
}

.work .hero{
  position: relative;
  background: url(../bilder/weltbuero/auswahl-neue-website/Wäscheleine-tiny.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
}

.work h3{
  color: #271306;
  }

  .work {
    color: #271306;
    }

   

    .work ul#worklist li:last-child{
          display: flex;
       }

    




.what-i-do .hero{
  position: relative;
  background: url(../bilder/weltbuero/shooting-website-weltbuero/freistellen/hero-what-i-do.jpg)no-repeat center center fixed ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
}

.what-i-do h2{
  color: #271306;
  }
  
  .what-i-do ul{
    color: #271306;
    list-style-type: disc;
    text-align: left;
    }
  
    ul.liste li{
        list-style-position: inside;/* voreingestellt: outside/ausserhalb der li's positioniert*/
        }

    .what-i-do audio{
          padding: 10px;
    }   
        
     
   
.office .hero{
  position: relative;
  background: url(../bilder/weltbuero/shooting-website-weltbuero/IMG_3202.jpg) no-repeat center center fixed ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
}



h1,
h2{
  color: #271306;
}

ol.num-1{
  padding-left:20px;
  list-style-type: decimal;
  margin-bottom:30px;
  color: #271306;
}

ol.num-1 li{
  margin-bottom:10px;
}

ul.liste{
  list-style-image: url(../bilder/icons/star.png);
  margin-bottom:30px;
  padding-left:20px;
  color: #271306;
  }

  ul.liste li{
   
    margin-bottom:10px;
    }





/*Scroll-to-explore-MOuse*/
.mouse {
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #036f76;
  position: absolute;
  bottom: 0;
  left: 50%;
/*transform: translate(-50%,0);*/
 transform: translateX(-50%);
}

.mouse span {
  display: block;
  margin: 6px auto;
  width: 4px;
  height: 2px;
  background: #036f76;

  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


/*CSS-Raster-layout ///////////*/

.row{
overflow: hidden;
}

.halbe{
width:47%;
float:left;
margin-right:6%;
}

.drittel{
  width:29.333%;
  float:left;
  margin-right:6%;
}
.zweidrittel{
    width:64.66666%;
    float:left;
    margin-right:6%;
}
  
.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
  margin-right:0;
}

/*Sektionen - Inhalt //////////////////////////////////////*/
section h1{
  color:#271306;
  text-align: center;
  text-transform: capitalize;
  font-size:1.5em;
  letter-spacing: 2px;
}

section h2{
  font-weight: 300;/*700 bold einer Überschrift*/
  color: #271306;
  text-transform: capitalize;
  font-size:1.2em;
  letter-spacing: 2px;
}

/*buttons*/
.button{
  display:inline-block;
  background:#036f76;
  color:#fff; 
  padding: 0.625em 1.8em;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.button:hover{/*10+10=20*/
  background: #4dccb9;
 }

/*Sektion-about /////////////////*/

#about h2{
  color: #271306;
}

#about{
  color: #271306;
}

/*skillbars ////////*/

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 700;
  color: #271306;
  text-transform: capitalize;
  letter-spacing: 2px;
  font-size: 0.7em;
}

.progress {
  height: 4px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.progress-bar {
  width: 0;
  height:4px;
  background-color: #036f76;
}




/*Sektion-what-i-do /////////////////*/

#flex-container{
  display:flex; 
  gap:2%;
  margin:2% 0;
  }
 #flex-container .drittel{
    background:#fff;
    padding: 20px;
    color: #4dccb9;
    flex:1 1 auto; 
  }



#what-i-do{
  background:#dabdb3;
}


#what-i-do .drittel{
  background:#fff;
  border:1px solid #eee;
  text-align: center;
  padding:2em;

}

#what-i-do .drittel .iconbox{
  background: #dabdb3;
  color:#fff; 
  width:100px;
  height:100px;
  margin:1em auto 3em;
  padding-top:30px;
  transform: rotate(45deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}


#what-i-do .drittel:hover .iconbox{
  background: #036f76;
  border-radius:50%;
}

#what-i-do .drittel .iconbox i{
font-size:2.5em;
transform: rotate(-45deg);
}



/*Sektion office////////////////////////////////////////////////////*/
#office h1{
  color: #271306;
}

ul#office{
overflow: hidden;
}

/*Kind-Selektor
ul#office li  alle verschachtelten li 
ul#office >  li  , nur die li direkt verschachtelt in der ul(Kindes-li der ul)
*/
ul#office > li{
  width:29.333%;
  float:left;
  margin-right:6%;
  }

  ul#office li:last-child{
    margin-right:0;
  }


  ul#office li img{
    width:100%;
   
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
  
    ul#office li:hover img{
      transform: scale(1.15);
      }

    ul#office li figure{
      text-align: center;
      line-height: 0;
      }
    
    ul#office li figcaption{
      line-height: 1.5em;
      margin-top:0.625em;
      }
    
    ul#office li figcaption span.name{
      display:block;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #271306;
      }

    ul#office li figcaption span.position{
      display:block;
      margin-top:-0.3em;
      color: #271306;
      }

/*overlay auf das Bild setzen/////////////////////  */



ul#office .overlay-box{
 position:relative;/*Bezugspunkt für das absolute Positionieren der .overlay*/
 overflow: hidden;
  }

  ul#office .overlay-box .overlay{
   background:#dabdb3;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }


  ul#office .overlay-box .overlay:hover{
     opacity:1;
   }



  ul#office .overlay-box .overlay .overlay-content{
    width:90%;
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
   }
 


   /*social-list ////////////////*/
 

  ul.social li{
   display:inline-block;
    }

    
  ul.social li a{
    color:#036f76;
    font-size:2em;
    margin:0 0.2em;
    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
     }


   ul.social li a:hover{
    color:#4dccb9;
     }


     /*Sektion - Schnellkontakt //////////*/

   #schnellkontakt{
      background:#dabdb3;
      color:#036f76;
      font-weight: 700;
     }

   #schnellkontakt h2{
      color:#036f76;
      font-weight: 700;
      margin-top:0;
     }

     #schnellkontakt p{
      color:#036f76;
      font-weight: 700;
      margin-top:0;
     }
     
    #schnellkontakt .button{/*110*/
      background:#271306;
      color:#dabdb3;
      margin-bottom: 3px;
    }
  
    #schnellkontakt .button:hover{/*120*/
      background:#036f76;
      color:#271306;
    }
  

    /*Work - Arbeitsproben ////////////////////////////*/

    #work h1{
      color: #271306;
    }

    #work .innerbox{
      max-width: 100%;
      padding: 50px 0 0;
    }

    ul#worklist{
      overflow: hidden;
    }

    ul#worklist li{
          line-height:0;
          width:25%;
          float:left;
    }

    ul#worklist li:last-child{
          display: none;
       }


    ul#worklist li img{
        width:100%;
        transform: scale(1);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    ul#worklist li:hover img{
      transform: scale(1.2);
    }


    /*Overlay der figcaption auf die figure*/
    ul#worklist figure{
      position:relative;/*Bezugspunkt für das Ausrichten der absoluten figcaption*/
      overflow: hidden;
    }

    ul#worklist figure figcaption{
          background:#271306;
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          -webkit-transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out;
          -ms-transition: all 0.5s ease-in-out;
          -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
          opacity:0;
    }

    ul#worklist figure figcaption:hover{
      opacity:1;
}

 
    ul#worklist figure figcaption .figcaption-box{
    line-height:1.5em;
    text-align: center;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    }

    ul#worklist figure figcaption .figcaption-box span.category{
      display:block;
      background:#fff;
      color:#271306;
      padding:0.625em 2em;
      /*transform:translate(0,-100px);*/
      transform:translateY(-60px);
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      opacity:0;
    }

    ul#worklist figure figcaption:hover .figcaption-box span.category{
      transform:translateY(0px);
      opacity:1;
    }

    ul#worklist figure figcaption .figcaption-box span.project{
      display:block;
      color:#fff;
      padding:0.625em 2em;
      transform:translateY(60px);
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      opacity:0;
    }
    ul#worklist figure figcaption:hover .figcaption-box span.project{
      transform:translateY(0px);
      opacity:1;
    }



/*Sektion Contact ///////////////////////////////*/
.contact h2{
  color: #271306;
}

.contact figcaption{
  color: #271306;
}

.contact address{
  color: #271306;
}


#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular select[type="betreff"],
#kontaktformular textarea{
background:#fafafa;
padding:0.625em 1em;
border:1px solid #f2f1f1;
font-weight: 700;
}


#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular select[type="betreff"]:focus,
#kontaktformular textarea:focus{
background:#dabdb3;
color:#271306;

}

#kontaktformular textarea{
width:100%;
height:250px;
}

#kontaktformular input[type="submit"]
{
border:0;/*voreingestellter Rahmen des Sende-buttons auf unsichtbar*/
}



/*footer /////////////////////////////////*/

footer{
  background:#dabdb3;
  color:#036f76;
}

footer .innerbox{
  padding: 2em 2%;
  overflow: hidden;
 margin-top: 10%;
}



footer .rechtliches{
float:left;
margin-top:0.625em;
}


footer .rechtliches li{
display:inline;
margin-right:1em;
  }

  footer .rechtliches li a{
    color:#036f76;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }

  footer .rechtliches li a:hover{
    color:#4dccb9;
  }

footer .social{
  float:right;
  font-size:1.3em;
}

.impressum{
  text-align: left;
}

.datenschutz{
text-align: center;
padding-left: 10px;
padding-right: 10px;
}


 /*Scrollt-to-top-CSS-Regel*/
 #scroll-to-top{
  background:#036f76;
  color:#fff;
  width:60px;
  height:60px;
  border-radius:10px;
  font-size:2.5em;
  padding-top:10px;
  text-align: center;
  position: fixed;
  z-index: 999;
  bottom:20px;
  right:20px;
  display:none;
  /*scroll-to-top von Anfang an ausblenden und mit javascript ab einer scroll-höhe von einblenden*/


}

#scroll-to-top:hover{
  background:#4dccb9;
  color:#000;
}




/* Galerie von 4-spaltig auf 3-spaltig /////////*/
@media only screen and (max-width: 1500px) {

    ul#worklist li{
      width:33.333%;
      }

      ul#worklist li:last-child{
    display:inherit;/*das ausgeblendete 9te Bild einblenden*/
        }

      /*Appla-Problematik mit Kombination von fixierter Hintergrund-Bild mit cover-Eigenschaft*/  
      .hero {
        background: url(../bilder/weltbuero/claudia-portrait-02.png) no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
      }
      

  
}/*Ende Breakpoint 1500px*/


/* Galerie von 3-spaltig auf 2-spaltig /////////*/
@media only screen and (max-width: 1000px) {


    ul#worklist li{
      width:50%;
      }

      ul#worklist li:last-child{
    display:none;
        }

}/*Ende Breakpoint 1000px*/




/*Bei Bedarf die Navigations-Schriftgröße optimieren  /////////*/
@media only screen and (max-width: 866px) {

    nav{
      font-size:0.95em;
    }

    /*Spalten-Layout anpassen ///////////*/
    .halbe,.drittel,.zweidrittel{
      float:none;
      width:100%;
      margin-right:0;
    }

    /*about ////////////*/
    #about .halbe:first-child{
      margin-bottom:3em;
    }


      /*what-i-do ////////////*/


      #what-i-do .innerbox{
        width:80%;
      }
      #what-i-do .drittel{
        margin-bottom:1em;
      }
          
    /*what-i-do///////////////////////////////*/  
       

/*Sektion office////////////////////////////////////////////////////*/

        #office .innerbox{
          width:80%;
        }
  

      ul#office > li{
        width:100%;
        float:none;
        margin-right:0;
        margin-bottom:2.5em;
        }
      
  /*overlay auf das Bild setzen/////////////////////  */
  
        ul#office .overlay-box .overlay{
          left:50%;
          opacity:1;
        }
      


   /*Schnellkontakt /////////*/ 
        #schnellkontakt{
          text-align: center;
        }

        #schnellkontakt .button{
        margin-top:2em;
        }


       
    /*Work - Arbeitsproben
    
    Änderungen vornehmen:
    
    -unsichtbare auf sichtbar;
    -absolute pos wieder auf static
    -transform:translate alles verschobene/versetzte wieder zurück auf normal  transform:translate(0,0)
    
    ////////////////////////////*/
            ul#worklist{
                width:96%;
                margin:auto;
            }

            ul#worklist li{
              border:1px solid #e8e6e9;
              padding:0.625em;
              width:49%;
              margin:0 2% 2% 0;
            }
            ul#worklist li:nth-child(2n){
              margin-right:0;
            }

          ul#worklist figure figcaption{
                background:#fff;
                position:static;
                opacity:1;
          }

          ul#worklist figure figcaption .figcaption-box{
              position:static;
              transform:translate(0,0);
          }


          ul#worklist figure figcaption .figcaption-box span.category{
                padding:0.625em 2em 0;
                transform:translateY(0);
                opacity:1;
                color:#271306;
          }

          ul#worklist figure figcaption .figcaption-box span.project{
                color:#271306;
                padding:0 2em;
                transform:translateY(0);
                opacity:1;
          }



          /*contact*/

          #contact .halbe:first-child{
            margin-bottom:1.25em;
          }


          /*scroll-to-top positionieren */
          #scroll-to-top{
            right:50%;
            transform: translateX(50%);
          }


}/*Ende Breakpoint 866px*/


/*Breakpoint / Media Queries / CSS-Weichen /////////*/
@media only screen and (max-width: 802px) {

  .hero h1 span#name {
    font-size: 1.2rem;
  }
  
  .hero h1 span#claim {
    font-size: 0.5rem;
  }

          .main_h {
            padding-top: 25px;
            max-height: 70px;
            overflow: hidden;
          }

          .logo {
            float: none;
          }

          nav {
            width: 100%;
        
          }

          nav ul {
            padding-top: 10px;
            margin-bottom: 22px;
            float: left;
            text-align: center;
            width: 100%;
          }

          nav ul li {
            width: 100%;
            padding: 7px 0;
            margin: 0;
          }

          .mobile-toggle {
            display: block;
          }
          

          
          
}/*Ende Breakpoint 766px*/



/*Breakpoint / Media Queries / CSS-Weichen /////////*/
@media only screen and (max-width: 580px) {



        /*about*/
        #about {
          text-align: center;
          font-size: smaller;
        }

      /*office*/

      ul#office .overlay-box .overlay{
        left:0;
        top:80%;
        opacity:1;
      }

      ul#office .overlay-box .overlay p{
        display:none;

      }


      /*work ///////////*/
        #work .innerbox{
          width:80%;
        }
      ul#worklist li{
        width:100%;
        float:none;
        margin:0 0 2% 0;
      }
     
    
  
}/*Ende Breakpoint 580px*/



/*Breakpoint / Media Queries / CSS-Weichen /////////*/
@media only screen and (max-width: 480px) {

    
  .hero h1 span#name {
    font-size: 1.2rem;
  }
  
  .hero h1 span#claim {
    font-size: 0.5rem;
  }
  footer{
    padding-bottom:60px !important;
    text-align: center;
  }
  footer .rechtliches,footer .social{
    float:none;
  }

  footer .rechtliches{
   margin-bottom:1.2em;
  }

}/*Ende Breakpoint 480px*/




/*Breakpoint / Media Queries / CSS-Weichen /////////*/
@media only screen and (max-width: 320px) {

    section .innerbox{
      width:100% !important;
      padding:50px 1em;
    }

    .hero h1 span#name {
      font-size: 1.6rem;
    }
    
    .hero h1 span#claim {
      font-size: 1rem;
    }
      
}/*Ende Breakpoint 320px*/


/*Datenschutz-konforme Einbindung der Google-Schrift Raleway*/
/* raleway-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/raleway-v28-latin-900.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-900.svg#Raleway') format('svg'); /* Legacy iOS */
}