/*CSS untergliedert in allgemein gültiges für alle Seiten und individuelle Stylings für einzelne Seiten*/

    /*Globale Styling für alle Seiten*/
        body{
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            margin: 0;
            margin-top: auto;
            font-size: 17px;
            line-height: 170%;
            background-color: #f7f7f7;
            color: #2b2b2b;
        }


        main{
            padding: 10px 40px 10px 40px;
        }

        header {
          color: #444343;
          background-color: #fafaf9;
          padding-left: 2vw;
          padding-right: 2vw;
        }

        header .topbar{
          color: #fafaf9;
          background-color: #545454;
        }

        header nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #444343;
        }

        header nav .MeinLogo a{
            font-size: 200%;
            line-height: 80px;
            margin-right: 80px;
            color: #444343;
            text-decoration: none;
            font-weight: 100;
        }

        header nav .MeinLogo a:hover{
            text-decoration: none;
        }

        header nav ul{
          margin: 0;
          padding: 0;
          display: flex;
        }

        header nav li{
          list-style: none;
          font-size: 150%;
        }

        header nav ul li a{
          text-decoration: none;
          color: #444343;
          padding-right: 1rem;
          margin-right:1rem;
          display: block;
          border-right: 1px solid #444343;
        }

        header nav li a:hover,header nav li a.active{
          text-decoration: underline;
          text-underline-position: under;
          color: #df9537;
          transition: .5s;
        }

        #burgerbutton{
          position: absolute;
          top: 2.5rem;
          right: 1.5rem;
          display: none;
          flex-direction: column;
          justify-content: space-between;
          width: 30px;
          height: 21px;
        }

        #burgerbutton .linie{
          height: 3px;
          width: 100%;
          background-color: #444343;
          border-radius: 10px;
        }


        h2.Pageüberschrift,h3.Pageüberschrift{
            text-align: center;
            color: #df9537;
            font-size: 150%;
            padding-bottom: 1%;
            border-bottom: 2px solid #df9537;
        }

        /* hero images und sections */

        .herohintergrund{
            background-position: 0 20%;
            background-size: cover;
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6rem 0;
            text-align: center;
        }

        #herohome {
            background-image: url('Bilder/Home.jpeg');
            background-position: 0 40%;
            width: 100%;
        }

        #herolebenslauf {
            background-image: url('Bilder/Lebenslauf.jpeg');
        }

        #heroprojekte {
            background-image: url('Bilder/Projekte.jpeg');
            background-position: 0 60%;
        }

        #herostudium {
            background-image: url('Bilder/Studium.jpeg');
        }

        #herokontakt {
            background-image: url('Bilder/Kontakt.jpeg');
            background-position: 0 40%;
        }

        /*Back to the top - Button */

        #BackToTheTop {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 30px;
          z-index: 99;
          border: 1px solid #df9537;
          outline: none;
          background-color: #2b2b2b;
          color: white;
          cursor: pointer;
          padding: 15px;
          border-radius: 10px;
          font-size: 18px;
        }


        #BackToTheTop > .fas{
          margin: 0;
        }


        .lastbutton{
          margin-top: 5%;
          margin-bottom: 5%;
          text-align: center;
        }

        .NaviButton{
          font-size: 20px;
          color: #df9537;
          border: 2px solid #a8a8a8;
          border-radius: 20px;
          padding: 15px;
          padding-left: 10px;
          margin-bottom: 15px;
          background-color: #f7f7f7;
          cursor: pointer;
          align-content: center;
        }

        /*Footer Styling*/


        .subfooter{
            color: #fafaf9;
            background-color: #545454;
            text-align: left;
            height: 350px;
            margin-top: 2%;
            display: grid;
        }

        .subfooter .schnellnavi{
            padding-left: 20%;
            margin: 1%;
            justify-content: center;

            grid-row: 1;
            grid-column: 1 / 2;
        }

        .subfooter .schnellnavi ul{
            justify-content: center;
            list-style: none;
            padding-left: 0;
        }

        .subfooter .schnellnavi ul li{
            background-color: #525252;
            padding-top: 1%;
            padding-bottom: 1%;
            padding-left: 1%;
            border-bottom: 1px solid #fafaf9;
        }


        .subfooter .fhstandort{
            padding-left: 20%;
            width: 100%;

            grid-row: 1;
            grid-column: 2 / 2;
        }

        .subfooter .fhstandort iframe{
          width: 90%;
          height: 70%;
        }

        .mainfooter{
            color: #a8a8a8;
            background-color: #2b2b2b;
            text-align: center;
            height: 200px;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .mainfooter ul{
            list-style-type: none;
            color: grey;
        }

        footer .footertext{
            text-align: center;
            text-decoration: none;
        }

        a {
            color: #df9537;
            text-decoration: none;
        }

        a:hover{
            text-decoration: underline;
            text-underline-position: under;
        }

        .fab {
          margin: 1rem;
          color: #a8a8a8;
        }

        .fab:hover {
          color: #df9537;
        }

        .fas {
          margin: 1rem;
          color: #df9537;
        }




 /*Styles für die Homepage*/

        h1.heroüberschrift,h2.heroüberschrift {
            color: #fafafa;
            line-height: 150%;
            font-size: 200%;
            margin: 0 0 1.5rem 1rem;
            width: 100%;
        }

        span {
            padding: 0.2rem 0;
            background-color: #df9537;
            display: inline;
            box-shadow: 10px 0 0 #df9537, -10px 0 0 #df9537;
        }

        #herobutton {
            font-family: "Raleway", sans-serif;;
            font-size: 18px;
            background-color: #fafafa;
            color: #df9537;
            padding: 1rem;
            border: 1px solid transparent;
            border-radius: 10px;
            cursor: pointer;
        }

        .aboutme{
            display: grid;
            text-align: left;
        }

        .sociallinksundich{
            grid-row: 1;
            grid-column: 1 / 2;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .sociallinksundich .selfie{
            border-radius: 50%;
            max-width: 50%;
            height: auto;
            margin: 15% 15% 5% 15%;
        }

        .sociallinksundich .sociallinks{
            display: flex;
        }

        .sociallinksundich .sociallinks a:not(:last-child){
            margin-right: 10px;
        }

        .sociallinksundich .selfiesocial{
            margin: 1% 1% 1% 1%;
            fill: #a8a8a8;
            width: 30px;
            height: 30px;
        }

        .sociallinksundich .selfiesocial:hover{
            fill: #df9537;
        }

        .textuebermich{
            grid-row: 1;
            grid-column: 2 / 2;
        }

        .textuebermichtablet{
          display: none;
        }

        .textuebermichmobile{
          display: none;
        }

        .fa-envelope{
          color: #a8a8a8;
        }

        .fa-envelope:hover{
          color: #df9537;
        }

/*Lebenslauf timeline*/
        hr{
          width: 100%;
          height: 3px;
          border: none;
          margin-top: 2%;
          background-color: #df9537;
        }

        #timelinepraktisch{
          margin-top: 2%;
        }

        #ueberschriftpraktisch{
          margin-top: 3%;
        }

        h3.Lebenslaufüberschrift {
            text-align: center;
            margin-top: 2%;
            font-size: 150%;
        }

        .timeline {
          position: relative;
          max-width: 1200px;
          margin: 0 auto;
        }

        /*Die eigentliche Timeline*/
        .timeline::after {
          content: '';
          position: absolute;
          width: 6px;
          background-color: #2b2b2b;
          top: 0;
          bottom: 0;
          left: 50%;
          margin-left: -3px;
        }

        /*Box um den eigentlichen Inhalt*/
        .container {
          padding: 10px 40px;
          position: relative;
          width: 50%;
        }

        /*Die Kreise auf der Timeline */
        .container::after {
          content: '';
          position: absolute;
          width: 25px;
          height: 25px;
          right: -17px;
          background-color: #fff;
          border: 4px solid #df9537;
          top: 15px;
          border-radius: 50%;
          z-index: 1;
        }

        /*Die Box links platzieren*/
        .left {
          left: 0;
        }

        /* Die Box rechts platzieren */
        .right {
          left: 50%;
        }

        /* Die kleinen Pfeile an der Box */
        .left::before {
          content: " ";
          height: 0;
          position: absolute;
          top: 22px;
          width: 0;
          z-index: 1;
          right: 30px;
          border: medium solid #2b2b2b;
          border-width: 10px 0 10px 10px;
          border-color: transparent transparent transparent #2b2b2b;
        }

        /*Pfeile an der Box*/
        .right::before {
          content: " ";
          height: 0;
          position: absolute;
          top: 22px;
          width: 0;
          z-index: 1;
          left: 30px;
          border: medium solid #2b2b2b;
          border-width: 10px 10px 10px 0;
          border-color: transparent #2b2b2b transparent transparent;
        }

        /*Die Kreise für die rechten Boxen in der Mitte platzieren*/
        .right::after {
          left: -16px;
        }

        /*Der Boxinhalt*/
        .content {
          padding: 20px 30px;
          background-color: #2b2b2b;
          color: #fafaf9;
          position: relative;
          border-radius: 6px;
          text-align: left;
        }

        .content > h4{
            text-align: left;
            font-size: 140%;
        }






/*Style Studium*/

       .studium{
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: stretch;
        }

        .studium h3{
            text-align: center;
            color: #2b2b2b;
        }

        .studium > p{
            text-align: left;
            width: 95%;
        }

        .gridfürstudium{
          display: flex;
          flex-wrap: wrap;
        }

        .gridfürstudium-left{
            width: 50%;
        }

        .gridfürstudium-right{
          margin-top: 4%;
          width: 50%;
        }

        .accordion{
          width: 95%;
          max-width: 1600px;
          margin: 1rem auto;
        }

        .accordion-item{
          background-color: #2b2b2b;
          color: #fafaf9;
          margin: 1rem 0;
          border-radius: 0.5rem;
          box-shadow: 0 2px 5px 0 rga(0,0,0,0.75);
        }

        .accordion-item-header{
          padding: 0.5rem 3rem 0.5rem 1rem;
          min-height: 3.5rem;
          line-height: 1.25rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          position: relative;
          cursor: pointer;
        }

        .accordion-item-header::after{
          content: "\25BE";
          font-size: 2rem;
          position: absolute;
          right: 1rem;
          transition: transform 0.4s ease-in-out;
        }
        .accordion-item-header.active::after{
          transform: rotate(180deg);
          color: #df9537;
       }

       .accordion-item-body{
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.4s ease-out;
       }

       .accordion-item-body-content{
         padding: 1rem;
         line-height: 1.5rem;
         border-top: 2px solid;
         border-image: linear-gradient(to right, transparent, #df9537, transparent) 1;
         text-align: left;
       }

       .accordion-item-header.active + .accordion-item-body{
         max-height: 1600px;
       }


        .studium > a {
            align-self: center;
            min-width: 20%;
        }

        .StudiumInfo{
            text-align: center;
        }

        .ButtonStudium{
            font-size: 20px;
            color: #fafaf9;
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border: none;
            background-color: #df9537;
            cursor: pointer;

        }

        .ButtonStudium > .fas{
          color: #fafaf9;
        }


 /*Styles für meine Projekte*/

        .websiteprojekte{
            margin: 0 auto;
            width: 95%;
        }

        .websiteprojekte > div{
            display: flex;
            flex-wrap: wrap;
            margin-top: 5%;
            padding-bottom: 2%;
            border-bottom: 2px solid #df9537;
        }

        .websiteprojekte > div > h3{
            width: 100%;
            text-align: center;
            color: #444343;;
        }

        .websiteprojekte > div > a{
          width: 50%;
        }

        .websiteprojekte > div > a > img{
            margin-top: 5%;
            width: 100%;
            height: auto;
        }

        .websiteprojekte > div > a > img:hover{
            box-shadow: 10px 10px 10px 10px #888888;
        }

        .websiteprojekte > div > p{
            width: 50%;
            align-self: center;
            padding-left: 5%;
            text-align: left;
            line-height: 170%;
        }

        .zertifikate {
            margin: 0 auto;
            width: 90%;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            text-align:left;
        }

        .zertifikate > h3 {
            width: 100%;
            text-align: center;
        }

        .zertifikate > img{
            width: 23%;
            height: auto;
            padding: 1%;
            margin: 1%;
            border: 1px solid #df9537;
        }







/*Sytles für Kontakt*/

        .kontaktaufnahme > p{
            text-align: left;
        }

        * {
          box-sizing: border-box;
        }

        input[type=text], input[type=email], select, textarea {
          width: 100%;
          padding: 12px;
          border-radius: 4px;
          resize: vertical;
        }

        label {
          padding: 15px 15px 15px 0;
          display: inline-block;
        }

        input[type=submit] {
          background-color: #df9537;
          color: #fafaf9;
          padding: 15px 50px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          float: right;
        }

        input[type=submit]:hover {
          background-color: #2b2b2b;
          color: #df9537;
        }

        .kontaktformular {
          border-radius: 5px;
          background-color: #f2f2f2;
          padding: 20px;
        }

        .linkeseite {
          float: left;
          width: 25%;
          margin-top: 6px;
        }

        .rechteseite {
          float: left;
          width: 75%;
          margin-top: 6px;
        }

        #pflichtfeld{
            font-size: 80%;
        }

        .row:after {
          content: "";
          display: table;
          clear: both;
        }


    /*Styles für die 404 Seite*/

        .fehlertext{
          margin: 0 auto;
          width: 40%;
        }





/* Media queries - Tablet Styles */

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

    /*Globale Styles*/

        .lastbutton{
          margin-top: 20%;
          margin-bottom: 20%;
        }

        header nav li{
          font-size: 110%;
        }

        section.herohintergrund{
            background-size: cover;
            width: 100%;
            height: 400px;
        }

        .aboutme{
            display:block;
            text-align: left;
        }

        .textuebermich{
          display: none;
        }

        .textuebermichtablet{
          display: block;
          text-align: left;
        }

        .textuebermichmobile{
          display: none;
        }

        .subfooter{
            text-align: left;
            height: auto;
            margin-top: 2%;
            padding-top: 2%;
            display: block;
        }

        .subfooter .schnellnavi{
            width: 80%;
        }

        .subfooter .fhstandort{
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            position: relative;
        }

        .subfooter .fhstandort iframe{
          position: absolute;
          width: 70%;
          height: 70%;
        }

        footer a .social{
            margin-left: 1%;
        }

    /*Projekt*/

        .websiteprojekte{
              display: block;
        }

        .websiteprojekte > div > a{
          width: 100%;
        }

        .websiteprojekte > div > a > img{
            margin-top: 1%;
            width: 100%;
            height: auto;
        }

        .websiteprojekte > div > p{
            padding-left: 0;
            width: 100%;
        }


        .zertifikate{
            display: block;
        }

        .zertifikate > img{
            width: 100%;
            height: auto;
            padding: 1%;
            border: 2px solid #df9537;
        }



            /*Kontakt*/
        .linkeseite, .rechteseite, input[type=submit] {
            width: 100%;
            margin-top: 0;
          }

        label {
            padding: 10px 10px 1px 0;
          }

          /*Styles für die 404 Seite*/

              .fehlertext{
                margin: 0 auto;
                width: 75%;
              }
    }





/* Media queries - Mobile Styles */
        @media screen and (max-width: 860px) {

          /*Globale Styles*/

          header nav li{
            font-size: 100%;
          }

          header nav ul li a{
            border: none;
            padding-right: 0;
            margin-right: 0;
          }

          .herohintergrund{
            background-size: cover;
            width: 100%;
            height: 300px;
        }

          #burgerbutton{
            display: flex;
            margin-top: 25%;
          }

          header nav .MeinLogo{
            display: flex;
            align-self: flex-start;
          }

          #navbarlinks {
            display: none;
            width: 100%;
            flex-direction: column;
          }

          nav {
            display: inline;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            padding: 0;
          }

          header nav ul{
            flex-direction: column;
          }

          #navbarlinks li{
            text-align: center;
            background-color: #2b2b2b;
            padding: 1rem;
          }

          #navbarlinks li a{
            color: #fafaf9;
          }

          #navbarlinks.aktiv{
            display: flex;
          }

          #navbarlinks li a.active{
            color: #df9537;
          }

          .NaviButton{
            font-size: 13px;
            padding: 20px;
          }

          .fab {
            margin: 2px;
          }

          .fas {
            margin: 2px;
          }

        /*Homepage*/


        #herohome {
            background-position: 35% 40%;
            width: 100%;
        }

        h1.heroüberschrift{
          margin: 0.5rem 0.1rem;
          line-height: 110%;
          font-size: 100%;
        }

        h2.heroüberschrift {
          margin: 0.5rem 0.1rem;
          line-height: 120%;
          font-size: 100%;
        }

        span{
          margin: 0.2rem;
        }

        .aboutme{
          display:block;
          text-align: left;
        }

        .textuebermich{
          display: none;
        }

        .textuebermichtablet{
          display: none;
        }

        .textuebermichmobile{
          display: block;
          text-align: left;
        }



          /*Lebenslauf*/

          hr{
            margin-top: 10%;
          }

          #ueberschriftpraktisch{
            margin-top: 10%;
          }

          .timeline::after {
            left: 31px;
            }

            .container {
            width: 100%;
            padding-left: 70px;
            padding-right: 25px;
            }

            .container::before {
            left: 60px;
            border: medium solid #2b2b2b;
            border-width: 10px 10px 10px 0;
            border-color: transparent #2b2b2b transparent transparent;
            }

            .left::after, .right::after {
            left: 15px;
            }

            .right {
            left: 0%;
            }


    /*Studium*/

            .studium{
            margin: 0 auto;
            width: 100%;
            }

            .gridfürstudium{
              display: block;
              flex-wrap: wrap;
            }

            .gridfürstudium-left{
                width: 100%;
            }

            .gridfürstudium-right{
              width: 100%;
            }


    /*Projekte*/

          .websiteprojekte{
            width: 100%;
          }

          .websiteprojekte > div > a{
            width: 100%;
          }

          .websiteprojekte > div > a > img{
              margin-top: 1%;
              width: 100%;
              height: auto;
          }

          .websiteprojekte > div > p{
              padding-left: 0;
          }

          .zertifikate{
            width: 100%;
          }

    /*Kontakt*/

    .kontaktaufnahme{
      text-align: left;
    }

    input[type=text], input[type=email], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #df9537;
      border-radius: 4px;
    }

    input[type=submit] {
      padding: 15px 50px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    /*Styles für die 404 Seite*/

    .fehlertext{
      margin: 0 auto;
      width: 95%;
    }
}