@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:#3b3c3a;
  font-family: 'Barlow', sans-serif;
  font-size:1em;
}


a {
  text-decoration: none;
}


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

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

figure{
  margin:0;
}


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

header .innerbox{
overflow: hidden;
}

section .innerbox{
  padding: 50px 2%;
}



/*

h1 x2
h2 x1.5
*/



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

/*header-Zustand Nummer 1
.main_h, Anfangs-Formatierung es Headers 
*/
.main_h {
  position: fixed;/*fest positioniert am Browserfenster*/
  top:0;
  left:0;
  z-index: 999;
  width: 100%;
  max-height: 70px;
  padding-top: 13px;
  padding-bottom: 13px;
  overflow: hidden;/*wichtig für den mobilen toggle, welcher den auf-zu-klapp-effekt der mobilen navigatin steuert*/
  -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, 1);
  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;
  /*72x22*/
}




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

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

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


/*Ankerformatierung von Anfang an(Header-Zustand-1)*/
nav ul li a {
  color: #3b3c3a;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight:500;
}

/*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: #3b3c3a;
}


/*Aktiv-Schaltung des Start-Ankers */
nav ul li a.active {
  color:#3b3c3a;
  font-weight:700;
  text-transform: uppercase;

}

/*Aktiv-Schaltung der lokaler Anker beim Scrollen*/
.sticky nav ul a.active {
  color:#3b3c3a;
  font-weight:700;
}



/*
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: #3b3c3a;
  display: block;
}


/*Hero-Großbild-Bereich*/

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


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


.hero h1 span#name {
font-size: 2.7rem;
  display:block;
  color: #3b3c3a;
  font-weight:500;
  letter-spacing: 3px;
  line-height:1.6em;
}

.hero h1 span#claim {
 font-size: 0.9rem;
  font-weight:500;
  display:block;
  color: #3b3c3a;
  letter-spacing: 2px;
  margin-top:-5px;  
  /*text-shadow: 1px 1px 1px #969393;*/
}


/*Scroll-to-explore-Mouse*/
.mouse {
  /*display:none; mouse ausblenden*/
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #3b3c3a;
  position: absolute;
  bottom: 40px;
  left: 50%;
/*transform: translate(-50%,0);*/
 transform: translateX(-50%);
}

.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  background: #3b3c3a;

  -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;
}


/*allgemeine sektions-formatierungen*/

section h1{
  font-weight: 400;
  text-align: center;
  color:#3b3c3a;
  text-transform: uppercase;
  letter-spacing:2px;
  font-size:1.8em;
  }

section h2{
font-weight: 400;
text-align: center;
color:#3b3c3a;
text-transform: uppercase;
letter-spacing:2px;
font-size:1.8em;
}

section h3{
font-weight: 600;
color:#3b3c3a;
font-size:1.1em;

  }
  

/*button ////////////////////////////////////////////////////////*/
.button{
  background:#fff;
  display:inline-block;
  padding:10px 30px;
  color:#3b3c3a;
  border: 1px solid #3b3c3a;
  text-transform: uppercase;
  letter-spacing: 1px;
  -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;
  border-radius: 0px;

}
.button:hover{
  background:#3b3c3a  !important;
  color:#fff !important;
}

#about .button{
  margin-top: 7px;
}



/*about ////////////////////////////////////////////////////////*/
/*skill bar*/
      label {
        display: inline-block;
        margin-bottom: 5px;
        font-weight: 600;
        color: #3b3c3a;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.7em;
      }

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

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

      .abstand-oben{
        margin-top: 16px;
        display: block;
      }


/*timeline ////////////////////////////////////////////////////////*/
   
    #timeline{
      background-color: #f5f5f5;
    }

    /* The actual timeline (the vertical ruler) */
    .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }

    /*sektions h2 */
    h2.headline{
      font-weight: 400;
      text-align: center;
      color:#3b3c3a;
      text-transform: uppercase;
      letter-spacing:2px;
      font-size:1.8em;


    }
    /*h2 verschachtelt in der timeline in des div-container   */
    .timeline h2{
        font-weight: 400;
        text-align:left;
        color:#3b3c3a;
        text-transform: uppercase;
        letter-spacing:2px;
        font-size:1.5em; 
      }

      .timeline a{
        color:#3b3c3a;
      }



    /* The actual timeline (the vertical ruler) */
    .timeline::after {
      content: '';
      position: absolute;
      width: 1px;
      background-color: #3b3c3a;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -1px;
    }

    /* Container around content */
    .container {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
    }

    /* The circles on the timeline */
    .container::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      right: -13px;
      background-color: white;
      border: 1px solid #3b3c3a;
      top: 15px;
      border-radius: 50%;
      z-index: 1;

    }

    /* Place the container to the left */
    .left {
      left: 0px;
    }

    /* Place the container to the right */
    .right {
      left: 50%;
    }

    /* Add arrows to the left container (pointing right) */
    .left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid white;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent white;
    }

    /* Add arrows to the right container (pointing left) */
    .right::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }

    /* Fix the circle for containers on the right side */
    .right::after {
      left: -14px;
    }

    /* The actual content */
    .content {
      padding: 20px 30px;
      background-color: white;
      position: relative;
      border-radius: 6px;
    }

    /* Media queries - Responsive timeline on screens less than 980px wide */
    @media screen and (max-width: 980px) {
      /* Place the timelime to the left */
      .timeline::after {
      left: 31px;
      }
      
      /* Full-width containers */
      .container {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
      }
      
      /* Make sure that all arrows are pointing leftwards */
      .container::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
      }

      /* Make sure all circles are at the same spot */
      .left::after, .right::after {
      left: 15px;
      }
      
      /* Make all right containers behave like the left ones */
      .right {
      left: 0%;
      }
    }



/*what i do ////////////////////////////////////////////////////////*/
      #what-i-do{
        background:#F9F9F9;
      }

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

      .abstand-30{
        margin-top: 25px;
      }

      .iconbox{
        border:1px solid #3b3c3a;
        width:70px;
        height:70px;
        padding-top:18px;
        display:inline-block;
        /*transform: rotate(45deg);*/
        margin:5px;
        border-radius:50%;
        -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;
      }

      .drittel:hover .iconbox{
        background:#3b3c3a;
        transform: rotate(0deg);
        border-radius:50%;
      }

      .iconbox i{
        color:#3b3c3a;
        font-size:2em;
        /*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;
      }

      .drittel:hover .iconbox i{
        color:#fff;
        /*transform: rotate(0deg);*/
      }


      /*social navigation*/
 
      ul.social li{
        display:inline-block;
      }
      ul.social li a{
        font-size:1.8em;
        margin:0 6px;
        color:rgba(255, 255, 255, 0.6);
        -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:rgba(255, 255, 255,1);
      }


/*work ////////////////////////////////////////////////////////*/

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

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

    #work2 ul#workliste :nth-child(5){
      display:none;
      }



    ul#workliste{
      overflow: hidden;
    }

    ul#workliste li{
      width:25%;
      float:left;
      overflow: hidden;
    }

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

    #work ul#workliste :nth-child(13),
    #work ul#workliste :nth-child(14){
       display:none;
      }

    ul#workliste 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#workliste li:hover img{
   transform: scale(1.2);
    }


    /*figcaption als overlay auf der Grafik in der figure*/
    ul#workliste figure{
        line-height:0;
        position:relative;
    }
    ul#workliste figcaption{
      background:rgba(0, 0, 0, 0.8);
        line-height:1.5em;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom: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#workliste figcaption:hover{
        opacity:1;
    }

    .figcaption-content{
  
       position: absolute;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
       text-align: center;
       width:60%;
    }


    .figcaption-content span.category{
      display:block;
      border:1px solid #fff;
      color:#fff;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding:8px 10px;
      transform: translateY(-50px);
      -webkit-transition: all 0.2s ease-in-out 0.3s;
      -moz-transition: all 0.2s ease-in-out 0.3s;
      -ms-transition: all 0.2s ease-in-out 0.3s;
      -o-transition: all 0.2s ease-in-out 0.3s;
      transition: all 0.2s ease-in-out 0.3s;
      opacity:0;
    }


    figure:hover .figcaption-content span.category{
      transform: translateY(0);
      opacity:1;
    }

    .figcaption-content span.project{
      display:block;
      color:#fff;
      
      letter-spacing: 1px;
      padding:8px 10px;
      transform: translateY(50px);
      -webkit-transition: all 0.2s ease-in-out 0.3s;
      -moz-transition: all 0.2s ease-in-out 0.3s;
      -ms-transition: all 0.2s ease-in-out 0.3s;
      -o-transition: all 0.2s ease-in-out 0.3s;
      transition: all 0.2s ease-in-out 0.3s;
      opacity:0;
    }

    figure:hover .figcaption-content span.project{
      transform: translateY(0);
      opacity:1;
    }

    #work .testimonial{
      background:#3b3c3a;
    }


    /*testimonial ////////////////////////////////////////////////////////*/

    #testimonial{
      background: #fff;
      margin-top: 20px;
      margin-bottom: -40px;
    }

    #testimonial .innerbox.row{
      text-align: center;
    }

    #testimonial q{
      color:#3b3c3a;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size:1.4em;
      line-height:1.6em;
    }

      #testimonial p{
        color:#3b3c3a;
        font-style: italic;
        font-weight: 400;
        font-size:0.9em;
        letter-spacing: 1px;
        margin-bottom: 0; 
    }


/*video-einbindung responsive ///////////////////////////*/

/*responsive iframe*/
.embed-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /*16:9 Aspect Ratio (divide 9 by 16 = 0.5625)*/
  
        /*Videoformat festlegen*/
        /*padding-top: 75%;  4:3 Aspect Ratio */
        /*padding-top: 66.66%;  3:2 Aspect Ratio */
        /*padding-top: 62.5%;  8:5 Aspect Ratio */
        /*padding-top: 100%;  1:1 Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border:0;
}


 /* Responsive html5-video-tag*/
 video {
  width: 100%;
  height: auto;
}

/* contact formular ////////////////////////////////////////////////////////*/

    #contact{
      background:#F9F9F9;
    }

      #kontaktformular input[type="text"],
      #kontaktformular input[type="email"],
      #kontaktformular textarea
      {
        background:#fff;
        padding:0.625em 1em;
        border:0px solid #3b3c3a;
      }
      
      #kontaktformular input[type="text"]:focus,
      #kontaktformular input[type="email"]:focus,
      #kontaktformular textarea:focus
      {
        background:#fff;
      }
      
      #kontaktformular textarea{
        width:100%;
        height:250px;
        resize: none;
      }
      
      #kontaktformular input[placeholder="Name"],
      #kontaktformular input[placeholder="E-Mail"],
      #kontaktformular textarea[placeholder="Nachricht"]
      {
        color:#000000;
      }


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



/*footer ////////////////////////////////////////////////////////*/
    footer{
      background:#3b3c3a;
      color:#fff;
    }

    footer .innerbox{
      padding: 2em 2%;
      overflow: hidden;
    }

    footer ul.rechtliches{
      float:left;
      margin-top:10px;
    }
    footer ul.rechtliches li{
     display:inline-block;
     margin-right:18px;
    }

    footer ul.rechtliches li a{
      color:rgba(255, 255, 255, 0.6);
      -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 ul.rechtliches li a:hover{
      color:rgba(255, 255, 255,1);
     }
     
    footer ul.social{
      float:right;
      font-size:1.1em;
      }

    footer ul.social li a{
      padding:0 3px;
      }

  

 /*Scrollt-to-top-CSS-Regel*/
 #scroll-to-top{
  background:#fff;
  color:#3b3c3a;
  border:1px solid #3b3c3a;
  width:50px;
  height:50px;
  border-radius:50%;
  font-size:2em;
  padding-top:5px;
  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:#cdc8ce;
  color:#3b3c3a;
}


/*Breakpoint / Media Queries / CSS-Weichen ///////// /////////////////////   */

/*Problematik bei apple-touchscreen-geräte (Fixierte Hintergrundgrafik welche gecovert wird)
Kombination zwischen
             background:  fixed;
              background-size: cover;

              wird nicht sauber ausgeführt
*/


@media only screen and (max-width: 1620px)  {

            .hero {
       
              background: url(../bilder/higru/nadine5.jpg) no-repeat center center scroll;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              background-size: cover;

            }

}/*Ende Breakpoint 1620*/


@media only screen and (max-width: 1234px)  {

        /*work*/
        ul#workliste li{
          width:33.333%;
        }

        ul#workliste li:last-child{
          display:inherit;
         }

        #work ul#workliste :nth-child(13),
        #work ul#workliste :nth-child(14){
           display:inherit;
          }


  
}/*Ende Breakpoint 1234px*/

@media only screen and (max-width: 1150px)  {

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

}/*Ende Breakpoint 1150px*/

@media only screen and (max-width: 980px)  {


      .halbe, .drittel, .zweidrittel{
        width:100%;
        float:none;
        margin-right:0;
      }


      /*Inhaltliche Anpassung der Innerbox*/
      section .innerbox{
        width:80%;
        
      }

        /*about //////////////////////////////*/
      #about .halbe:first-child{
        margin-bottom:50px;
      }


      /* sektion what-i-do ////////////////////////*/
      #what-i-do .drittel{
        margin-bottom:20px;
        padding:30px 60px;
      }


      /*work ////////////////////////*/
      
        #work .innerbox{
        width:100%;
        }  
        
        #work2 .innerbox{
          width:100%;
          } 

        ul#workliste{
         width:96%;
         margin:auto;
        }

        ul#workliste li{
          width:49%;
          margin:0 2% 2% 0;
          border:1px solid #f0f0f0;
          padding:10px;
        }
        ul#workliste li:nth-child(2n){
          margin-right:0;
        }

        ul#workliste li:last-child{
          display:none;
        }
        
        ul#workliste li:hover img{
              transform: scale(1);
        }




        /*overlay wieder zurücksetzen auf klassische Darstellung Bild oben und figcaption sichtbar unten. Aktuell wird die figcaption beim Drüber-Fahren mit der mouse sichtbar */


    /*figcaption als overlay auf der Grafik in der figure*/
    /*
    -Alles absolut-positionierte auf static zurück-setzen
    (positionierungs-werte dadurch überflüssig/Löschen)
    -Verschobene / Versetzte Elemente translateY wieder zurück-setzen auf 0
    */



      ul#workliste figcaption{
          background:rgba(0, 0, 0, 0);      
          position:static;
          opacity:1;
      }

      .figcaption-content{
        position: static;
        transform: translate(0,0);
        width:100%;
      }

      .figcaption-content span.category{
          transform: translateY(0);
          color:#3b3c3a;
          opacity:1;
          padding:10px 0 0;
      }

      .figcaption-content span.project{
          color:#3b3c3a;
          padding:0;
          transform: translateY(0);
          opacity:1;
      }

      /*kontaktformular ////////////*/
        #kontaktformular .halbe:first-child{
          margin-bottom:20px;
        }

       

      

}/*Ende Breakpoint 980px*/

@media only screen and (max-width: 766px)  {
 

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

          .logo {
            float: none;
            padding-top: -5px;
          }

          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;
            margin-top: 8px;
          }
          
       

          
          
}/*Ende Breakpoint 766px*/


@media only screen and (max-width: 550px)  {

    footer{
      padding-bottom:70px;
    }

    /*footer*/
    footer ul.rechtliches{
      float:none;
      text-align: center;
      margin-bottom:30px;
    }

    footer ul.social{
      float:none;
      text-align: center;
      }


      footer ul.rechtliches li{
        margin:0 10px;

      }
      footer ul.social li a{
        padding:0 10px;
      }

}/*Ende Breakpoint 550px*/


@media only screen and (max-width: 480px)  {

  
      section .innerbox{
        width:100%;
      }

      .hero h1 {
        width:100%;
      }

      .hero h1 span#name {
        font-size: 2.6rem;
        }
        
      .hero h1 span#claim {
          margin-top:-5px;
          font-size: 0.9rem;
        }
      

      /*work ////////*/
      
      ul#workliste {
        width:90%;
    
      }

      ul#workliste li{
        width:100%;
        margin:0 0 2% 0;
    
      }

}/*Ende Breakpoint 480px*/


@media only screen and (max-width: 380px)  {

      /* sektion about*/
      .mouse {
        display:none;
      }

      /* sektion what-i-do*/
      #what-i-do .drittel{
          padding:30px 10px;
        }

}/*Ende Breakpoint 380px*/




/*Datenschutz-konforme Einbindung der Google-Schrift Barlow-semi-condensed*/

/* barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-semi-condensed-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-semi-condensed-italic - 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: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/barlow-semi-condensed-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-semi-condensed-500 - 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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-semi-condensed-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* barlow-semi-condensed-600 - 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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-semi-condensed-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-semi-condensed-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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-semi-condensed-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-italic - 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: 'Barlow';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/barlow-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-600 - 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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}