/*--- Hero-Area & Menu ------------------------------*/

  p.link {
    font-weight: 400;
}

.link {
  font-weight: 400;
}
  .hero-area{
      background-color: var(--color-code-accent);
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 5rem;
      position: relative;
      margin-top: -4.5rem;
      z-index: -1;
    } 
  
  .hero-text {
      color: #f1f4ff;
      text-align: left;
      font-family: "IBMPlexSans";
      font-weight: 300;
      font-size: 1.75rem;
      line-height: 135%;
    } 
  
  .hero-content {
    display:flex;
    justify-content:flex-start;
    width: 100%;
    align-content: center;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-right: 1rem;
    height: 100%;
    }

    ul {
      padding: 0rem;
    }
    
    li {
      list-style: none;
      font-family: "IBMPlexSans";
      font-size:  2rem;
      margin: 0rem;
    }

    li .cases{
      text-decoration: underline;
      -webkit-text-decoration: underline;
      text-underline-offset: 0.25rem;
      -webkit-text-underline-offset: 0.25rem;
      color: #ffffff;
  }
    

 menu {
      margin-bottom: 2rem;
    }

  .menu ul a.home{
      color: var(--color-code-accent);
      background-color: #ffffff;
      border-radius: 0.25rem 0.25rem 0 0;
      text-underline-offset: 0.5rem;
    }



.case-tile{
    text-decoration: none;
  }

  .nav-menu {
    padding: 1.5rem 1.5rem 1.5rem 1rem;
  }
  
  /* --- About --- */
  
  .about-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .about-section {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 2rem;
  }
    
  
  .text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  
  .text-block h2 {
    padding: 0 1rem 0 1rem;
    color: #0635f3;
  }
  
  
  .contact-text{
  line-height: 215%;
  }
  
  .about-text {
  padding-top: 1rem;
  }
  
  #mail {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  /*--- Responsive-Optimierung Hero Area------------------------------*/
  
  @media (min-width: 768px) {
      .hero-area{
          height: 5rem;
        } 
  
      .hero-content {
          width: 600px;
        }
  
      .portait-img {
          width: 140px;
        }
  
      .img-and-text {
        gap: 1.5rem;
      }
      
      .hero-text {
          font-size: 2rem;
      }
  
      .navbar {
        width: 600px;
      }
  }    
    
   
  /* Tablets (landscape) and small laptops */
  @media (min-width: 992px) {
      .hero-area{
          height: 5rem;
          margin-bottom: 4rem;
        } 
  
      .hero-content {
          width: 700px;
      }
  
        .portait-img {
          width: 140px;
        }
  
        .menu ul a.home{
          font-size: 1.5rem;
        }
      
        .menu ul a.about{
          font-size: 1.5rem;
        }
  
        .img-and-text {
          gap: 2rem;
        }
    }
    
    /* Large desktops */
    @media (min-width: 1200px) {
      .hero-area{
          height: 5rem;
          margin-bottom: 3rem;
        } 
  
      .hero-content {
          width: 800px;
        }
  
      .hero-text {
          font-size: 2.25rem;
        }
  
      .menu ul a.home{
          font-size: 1.5rem;
        }
      
      .menu ul a.about{
          font-size: 1.5rem;
        }
  
    }
  
  
    
    /*--- Main ------------------------------*/
    .main {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2rem;
    }
    
    .section-headline {
      font-size: 1.2rem;
      color: #4D4D4D;
      text-align: center;
      padding: 2rem 0 2rem 0;
    }
    
  
    .cases-wrapper {
      display: flex;
      gap: 2rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0rem 1rem 0rem
    }
  
    .case-wide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      padding: 3rem 0rem 3rem 0rem;
      margin: 0 1rem 0 1rem;
      border-radius: 12px;
      background: rgb(184 184 184 / 15%);
      border: 1px solid #0000001e;
    }
    
    .case-grid {
      display: grid;
      row-gap: 1.5rem;
      max-width: 1600px;
    }
  
    .case-left {
      display: grid;
      grid-column-start: 1;
      grid-column-end: 4;
      padding: 3rem 0px;
      margin: 0 1rem 0 1rem;
      background: #FBFBFE;
      border: 2px solid #f1f4ffa8;
  }
    
    .case-right {
      display: grid;
      grid-column-start: 1;
      grid-column-end: 4;
      padding: 3rem 0px;
      margin: 0 1rem 0 1rem;
      background: #FBFBFE;
      border: 2px solid #f1f4ffa8;
    }
    
    .case-content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 1rem;
    }
    
    .case-img {
      max-width: 300px;
      height: auto;
    }
    
    .case-category {
      padding: 1rem 0 0.25rem 0rem;
      color:#4D4D4D;
    }

    .case-category h3 {
      font-weight: 400;
    }
  
    .case-title {
      font-size: 1.25rem;
      padding-top: 0rem;
      color: var(--color-code-accent);
    }
  

    .btn-group {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 1.5rem;
      gap: 0.5rem;
    }
    
  
    .btn-primary {
      align-items: center;
      font-size: 1.2rem;
      cursor: pointer;
      text-align: center;
    }

   .link {
      background-color: #ffffff00;
      border-radius: 2px;
      padding: 6px 16px 7px 16px;
      border: 2px solid var(--color-code-accent);
      text-decoration: none;
      color: var(--color-code-accent);
    }

    .link:hover {
      background-color: var(--color-code-accent);
      text-decoration: none;
      color: #ffffff;
    }

    .btn-primary a{
      font-family: "IBMPlexSans";
      cursor: pointer;
    }
  

    .btn-primary a:hover {
      color: #ffffff;
    }

 

    .link a:hover {
      text-decoration: none;
      color: #ffffff;
    }
  
    .about-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
    .text-section {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
    }
    
    .text-block {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
    }
  
    .text-block h2 {
      padding: 0 1rem 0 1rem;
   
    }
  
  /*--- Responsive-Optimierung ------------------------------*/
  @media (min-width: 414px) {
    .case-img {
      max-width: 320px;
    }
  }
  
  @media (min-width: 768px) {

      .cases-wrapper {
          padding: 0rem 2rem 0rem;
      }
      
      .case-wide {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: auto;
          border-radius: 12px;
        }
  
      .case-img {
          max-width: 600px;
          width: 100%;
        }
  
      .case-title {
          font-size: 1.25rem;
          padding-top: 0.25rem;
        }
        
      .btn-group {
          flex-direction: row;
          width: 100%;
      }
  
      .btn-primary{
          min-width: 6rem;
          max-width: 12rem;
      }
      
  
      .btn-secondary{
          max-width: 20rem;
          width: 100%;
      }
  
      .text-section {
          width: 100%;
      }
      
      .text-block {
          max-width: 600px;
      }
      
      .text-block h2 {
          padding: 0 1rem 0 1rem;
      
      }
  }    
    
   
  /* Tablets (landscape) and small laptops */
  @media (min-width: 992px) {
    .main {
        padding-top: 0rem;
    }
      .case-grid {
          row-gap: 2rem;
          grid-template-columns: 50% 50%;
        }
  
      .case-row {
          display: flex;
          flex-direction: row;
       }
  
      .case-left {
        grid-column-start: 1;
        grid-column-end: 2;
      }
  
      .case-right {
        grid-column-start: 2;
        grid-column-end: 3;
      }
  
      .case-title {
        font-size: 1.25rem;
        padding-top: 0.5rem;
      }
  
      .img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 520px;
      }
  
        .text-block {
          max-width: 700px;
      }
    }
    
    /* Large desktops */
    @media (min-width: 1200px) {
      .section-headline {
          padding: 4rem 0 4rem 0;
      }
      
      .case-category {
          padding: 1rem 0 0rem 0rem;
          color:#4D4D4D;
        }
  
      .text-block {
          max-width: 800px;
      }
    
    }