@font-face {
  font-family: myFont;
  src: url("/html/Fonts/SofiaSans-VariableFont_wght.ttf");
}
@font-face {
  font-family: myFont2;
  src: url("/html/Fonts/SofiaSans-VariableFont_wght.ttf");
}
  .wrapper{
    display: flex;
    justify-content: center;
  }
  .collector{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
  
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 30px;
    padding-bottom: 35px;
 
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;
  }
  @media (min-width: 100px) and (max-width: 600px){
    .collector{ 
      padding-left: 0px;
    }
  }
  .headliner-div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width:70%;
    margin-bottom: 20px;
    margin-top:60px;
  }
  .headliner-div h1{
    color: rgb(255, 255, 255);
    font-size: 3.4rem;
    font-family:myFont;
    margin-bottom: 10px;
  }
    .headliner-div h2{
      color: rgb(255, 255, 255);
      font-size: 2rem;
      font-family:myFont;
    }
    .headliner-div p{
       color: rgb(255, 255, 255);
    }
   
    .family-portrait{
      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items:center;
      margin-top: 50px;
      margin-bottom: 20px;
      object-fit: cover;
      width: 80vw;
    }
  .family-portrait .logoBild{
    width: 100vw;
    margin-bottom: 25px;
  }
 .family-portrait .headImage{
    width: 80vw;
 }
 .family-portrait .headImage1{
    width: 40vw;
 }
 .headliner-div .topImage{
    width: 60%;
 }
  .headliner-div p{
    font-size: 1.2rem;
  }
  
  @media (min-width: 100px) and (max-width: 600px){
    .headliner-div h1{
      color: rgb(255, 255, 255);
      font-size: 2rem;
    }
    .headliner-div p{
      font-size: 0.7rem;
    }
  }
  .text-div1{
    max-width: 70%;
  }
  .text-div1 p{
    font-size: 1.25rem;
    font-family: myFont2;
    color: aliceblue;
  }
  
  .headliner-div h2{
    color: aliceblue;
  
  }
  .family-portrait img{
    border-radius: 10px;
    width: 80%;
  }
  @media (min-width: 100px) and (max-width: 600px){
    .img-div img{
      max-width: 100px;
      margin: 10px;
    }
  }

  .sliderShow{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1500px;
  }

  .openings-div{
    margin-top: 20px;
  
  }
  .kontakt{
    text-align: center;
    margin-top: 100px;
  }
  .kontakt h1{
    margin-top: 20px;
    font-size: 2rem;
    color: brown;
  }
  .kontakt p{
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
  }
  @media (min-width: 100px) and (max-width: 600px){
    .kontakt h1{
     font-size: 1rem;
    }
    .kontakt p{
     font-size: 0.7rem;
    }
    .openings-div h1{
      font-size: 1rem;
    }
    .openings-div p{
      font-size: 0.7rem;
    }
  }
  .photo-gallery{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 1.2rem;
  }
  .photo-grid{
    display: grid;
    width: 70%;
    
    gap: 6rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 240px;
    padding: 50px;
  
  }
  .photo-grid p{
    margin-top: 100px;
  }
  @media screen and (max-width: 240px) {
    .photo-grid{
      grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
      grid-auto-rows: 240px;
    
    
  }
  
  }
  .card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 1.3rem;
    color: #ffffff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8,20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width:100%;
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
    box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.103) inset;
  }
  .card:hover{
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35rem 0.175rem, rgba(2, 8,20, 0.08) 0px 0.175rem 0.5rem;
    transform: translateY(-3px) scale(1.1);
  }