@font-face {
   font-family:'Poppins';
   src:url('fonts/poppins-v22-latin-regular.woff2') format('woff2'); 
   font-weight: normal;
   font-style: normal;
 }

@font-face {
   font-family: 'Lato';
   src: url('fonts/lato-v24-latin-regular.woff2');
   font-weight: normal;
   font-style: normal;
}

.navigation {
   font-family: 'Poppins', sans-serif;
   text-align: right;
     display: flex;  
     background-color: #EFEBE9;
     justify-content: flex-end;
     font-size: 25px;
     gap: 15px;
     padding: 10px 20px;     
  } 
    
  .navigation li {
  
     list-style-type: none;
  }  
    
  .navigation a {
  
     padding: 20px;  
     display: inline-block;  
     color: #DAA38F;  
     text-decoration: none;
     font-size: 25px !important;
     font-family: 'Poppins', sans-serif;
  }
  
  .aboutme .navigation {
   font-size: 25px !important;
  }

.aboutme .navigation a {
   font-size: 25px !important;
}

    .navigation a:hover, #akt_tab {
  
     background-color: #EFEBE9;
     color: #B87C6A;
     font-weight: bold;
  }

html, body {
   height: 100%;
   margin: 0;
   padding: 0%;
 }

body {
   display: flex;
   flex-direction: column;
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   background-color: #EFEBE9;
   min-height: 100vh;
}

main {
   flex: 1;
}

  .hero {
   position: relative;
   width: 100%;
}

.hero img{
   width: 100%;
   height: auto;
   display: block;
}

.hero.aboutme-hero {
   position: relative;
   width: 100vw;
   left: 50%;
   transform: translateX(-50%);
   margin: 0;
   padding:0;
}

.hero.aboutme-hero img {
   width: 100%;
   height: auto;
   display: block; 
   margin: 0;
   border-radius: 10px;
}

.hero-text {
   position: absolute;
   top: 25%;
   left: 15%;
   transform: translate(-50%, -50%);
   color: #DAA38F;
   font-size: 80px;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
   font-family: 'Poppins', sans-serif;
}

div.impressum-hero .hero-text {
   font-size: 50px;
   top: 15%;
   left: 50%;
   transform: translate(-50%, -50%);
}

aside {
   text-align: center;
   color: #2C2C2C;
}

footer {
   text-align: center;
   background-color: #B87C6A;
   color: #DAA38F;
   margin-top: auto;
   padding: 20px;
}
 footer a {
   color: #DAA38F;
   text-decoration: none;
 }
     

 main{
   flex: 1;
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   padding: 20px;
 }
 
  
     .timeline-horizontal {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
       gap: 40px;
       padding: 0 20px;
       margin: 40px 0;
       font-size: larger;
       }
       
       .timeline-block {
         background-color: #F5F5F5;
         padding: 20px;
         border-radius: 10px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0,0,0,0.05);
       }
       
       .timeline-year {
         font-weight: bold;
         color: #2C2C2C;
         margin-bottom: 10px;      
       }
         
       .timeline-gap{
         height: 15px;
         }
        
       
       .timeline-school {
         font-weight: 600;
         color: #B87C6A;
       }

       .wrapper {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: flex-start;
         gap: 40px;
         padding: 20px;
         max-width: 1200px;
         margin: 40px auto;
         padding: 20px;
        }
        
 .textbereich {
   flex: 1;
   font-size: 22px;
   line-height: 1.6;
   color: #2C2C2C;
 }

.bildbereich {
   flex: 1;
   max-width: 100%;
   height: auto;
}

 .bildbereich img {
   width: 100%;
   max-width: 450px;
   height: auto;
   border-radius: 10px;
 }

 /*Handys */
 @media only screen and (max-width: 759px) {
   body{
      font-size: 14px;
   }

   .hero-text {
      font-size: 50px;
      top: 35%;
   }
 }

 /* Tablets */ 
 @media only screen and (min-width: 760px) and (max-width: 979px) {
   body {
      font-size: 16px;
   }

   .hero-text {
      font-size: 70px;
      top: 40%;
   }
 }

 /* Klassische Browserfensterbreite */ 
 @media only screen and (min-width: 980px) and (max-width: 1279px) {
   body {
      font-size: 18px;
   }
   
 }

 /* Große Bildschrime */ 
 @media only screen and (min-width: 1280px) {
   body {
      font-size: 20px;
   }

   .wrapper {
      max-width: 100%;
      padding: 0 40px;
   }

   .timeline-horizontal {
      max-width: 1600px;
      margin: 0 auto;
      gap: 60px;
   }

   .hero-text {
      font-size: 100px;
      top: 45%;
   }
 }