* {
    box-sizing: border-box;
  }

/*Tokens*/

  h1{


    text-align: center;
    font-family: "National 2";
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 108%; /* 38.88px */
    margin-bottom: 0px;

  }

  h2{


    font-family: "National 2";
    font-size: 8vw;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 33.6px */

  }

    .main-title h2 {
        font-family: "National 2";
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

  h3{


    font-family: "National 2";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 26.4px */
  }

  p-large{


    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; 
  }



  p{
 

    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; 
}

ul{


    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: -0.176px;
    margin: 0;
}


  .link {
    color: #030DFF;

    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 21.12px */
  }

/*Container*/


body .overlay-background {

  z-index: -1;
}

body .overlay-background-2 {

  z-index: -1;
}

body {
  color: #191923;
  margin: 0;
  font-family: "NationalWeb-Regular",Arial, sans-serif;
  background: #fff;
  position: relative; /* Damit das absolute Element korrekt positioniert werden kann */
  min-height: 100vh; /* Stelle sicher, dass der Body die Mindesthöhe des Viewports hat */
  background: linear-gradient(180deg, rgba(210, 207, 207, 0.3) 14.69%, rgba(255, 255, 255, 0) 31.75%), #FFFFFF;

}

/*
.overlay-background-2 {
  height: 110vh; 
  width: 100%;
  position: absolute;
  top: 0; 
  left: 0;
  background: linear-gradient(359deg, #FFF 18.64%, #000AE7 43.72%, #0008A8 72.94%, #000342 104.24%);
  opacity: 1; 

}*/


.overlay-background {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}


  .main-container {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    align-items: center;
    text-align: left;

  }


  .content-container{
  width:100%;
  align-self: center;
  padding:16px;
}


.bg-img{
    position: absolute;
    z-index: 0;
    width: 100%;
    margin: 48px 0 0 -16px ;
}


/*Header*/

  .header-section {
    display: flex;
    z-index: 2;
    flex-direction: column;
    padding: 0 16px;
    width: 100%;
  }


  .header-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 16px;
    color: #191923;
    font-weight: 400;
    letter-spacing: -0.16px;
  }


  .logo {
    font-family: 'National 2', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }

  .header-contact {
    width: 66px;
    height: 24px;
    flex-shrink: 0;
    gap: 24px;
    display: flex;
  }

   .header-contact-icon {
    width: 24px;
    gap: 24px;
    
  }

/*Intro*/

  .main-title {
    width: 100%;

    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    margin: -128px 0 120px 0;
    color:#191923;

  }

.image-column{

  padding: 24px 12px 12px 12px;
}

 /*About*/
  .about-section {
    opacity: 0;
    transition: opacity 0.8s ease-out;
    align-self: center;
    margin-top: 12px;
    width: 100%;
    flex-shrink: 0;
  }



  .about-wrap {
    display: flex;
    gap: calc(10% + 64px);
    flex-direction: column;
  }



  .column {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
  }



  .profile-img-2 {
    width: 100%;
    background-image: url(../img/profil.jpg);
    background-size: cover;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    opacity: 1;
  }



  .text-column {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }



  .text-about {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    align-self: stretch;
    gap:24px;
  }




/*Services*/

  .services-section {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 140px;
    
  }


  .service-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 48px;
  }



  .service-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }




  .service-subsection {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    border-bottom: 1px solid #19192330; /* Graue Trennlinie */

  }





  .service-description {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    margin-bottom: 32px;
  }



/* Entfernen der Trennlinie vom letzten Element, um Doppel-Linien zu vermeiden */
.service-subsection:last-child {
  border-bottom: none;
}

.contact-standard {
  transition: color 0.3s ease-in-out; 
  color: #19192360; /* Ziel-Farbwechsel beim Eintritt in den Viewport */

}





.contact-highlight,
.contact-highlight a { /* Wende den Stil auch auf Links an */
  color: #fff; /* Ziel-Farbwechsel beim Eintritt in den Viewport */
  transition: color 0.3s ease-in-out;
}





  .contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    margin-top: 120px;

  }

  .contact-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
  }


   .contact-section h1{
    text-align: left;
    margin: 0 0 24px 0;


   }




  .contact-info {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }


  .contact-icon {
    width: 24px;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .contact-links-wrap {
    margin-top: 48px;

  }

  .contact-link {
    font-family: 'National 2', sans-serif;
    text-decoration: underline;
    display: flex;
    gap: 24px;
    padding: 8px 0px;
  }

  .footer {
    display: flex;
    flex-direction: column;
    margin: 120px 0 64px 0;
    width: 100%; 

    align-items: left;
    align-self: stretch;
    gap: 24px;
    justify-content: space-between;


  }


  .footer-claim {
    display: flex;
    flex-direction: row;


    align-self: stretch;
    vertical-align: center;
    padding: 5px ;
    color: #fff;
  }

  .footer-links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    margin: initial;
    padding: 0;
  }

html {
  scroll-behavior: smooth; }

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; } }

  @keyframes blinkCursor {
    from { border-right-color: black; }
    to { border-right-color: transparent; }
}

#animatedText {
    animation: blinkCursor 0.7s steps(1) infinite;
    padding-left:6px;
}