:root{
    --white: #ffffff;
    --black: #000000;
    --black2: #262626;
    --black3: #17274c;
    --gray: #a9a9a9;
    --blue_1: #2196f3;
    --blue_2: #0e71b4;
    --gold: #ffcf05;
    --gold1:#f3b65c;
    --orange: #f07e01;
    --gelb: #afba16;
    --red: #ff0000;
    --red1: #ff005b;
    /* Fraben der Webseite */
    --sandy: #ffd5af;
    --orange1: #e59a59;
    --mud: #888870;
    --bordeaux: #712e1e;
    --azur: #59a4e5;
    --green1: #839d90;
    --green2: #a3b995;
    --darkpeach:#f58220;
    --peach: #FBBD96;
    --lightpeach: #f9ddb8;
    --grau: #525252;
   
  }
  body {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins'; 
      }
    h1, h2, h3, p, li, a{
        color: var(--white);
        transition: all ease 0.4s;
      }
    h1{
      
        font-size: 3em;
        text-align: center;
        font-family: 'Roboto-Light';
        letter-spacing: 5px;
      } 
      .firstletter{
        color: #f38526;
      } 
      .container_0 > h1{
        padding-top: 100px;
      } 
    
      h2{
        font-size: 1.5em;
        text-align: center; 
        color: var(--black3); 
        transition: all ease 0.4s;     
      }
      h2.headline{
        color: #f38526;
        font-size: 2em;
        text-align: center; 
        text-transform: uppercase; 
      }
      h3{
        font-size: 1.3em;
        text-align: center;  
      }
      
      p, a{
        font-size: 1em;
        text-align: left;
      }
      a{
        color: var(--white);
        text-decoration: none;
      }
     
      li{
        font-size: 1.2em;
        padding-left: 1rem;
      }
      /*  Setz einen checkhaken bei li */
      .check li {
        list-style-type: "✔";
     } 
    
      .link_klein{
        font-size: 0.7em;
      }
      .center p{
        text-align: center;
      }
      
      .knopf{
        width: 300px;
        background: #f38526;
        color: #fff;
        border: 1px solid #fff;
        padding: 15px;
        border-radius: 15px;
      }
      .knopf:hover{
        background: hsl(28, 55%, 40%);
        color: #fff;
        border: 1px solid #fff;
      }
      .icon{
        width: 25px;
      }


      /* Container */
      .container_0{  
        display: flex; 
        flex-direction: column;     
        margin: 0 auto;
       /* margin: 20px 0 0 0;*/
        width: 100%;
        height:auto;
        /*padding: 10px 5%;*/         
        background: url("../img/massage.jpg");
        background-repeat: no-repeat;        
        background-position: center;        
        background-size: cover;
      }    
   
      .container_2{        
        margin: 0 auto;
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*background-color: #f9ddb8;*/
        
      }
      .container_text{
        width: 45%; 
        flex: 1;
        padding: 2%;
        text-align: center;
                  
      }
      .container_text > p{
        font-size: 1em;
        color: var(--white);           
      }


      /* Leistungen */
      #leistungen{
        margin: 0 auto;
       display: flex;
        width: 100%;
        height: auto;
        color: #000;
      }
     
      .leistungsbox{
        flex: 1;
        gap: 15%;
        padding: 5%;
      }
      .leistungsbox  li{
        color: var(--grau);
        font-size: 1em;

      }
      .leistungsbox > h2{
        text-align: left;
        font-size: 1.5em;
      }

      #fotos{
        margin: 0 auto;
        margin: 20px 0 0 0;
        display: flex;
         width: 100%;
         height: auto;
         color: #000;
         
      }
      .fotobox{
        flex: 1;
        gap: 15%;
        padding: 15px;
      }
      .fotobox img{
        width: 100%;
        height: auto;
      }
      .boxshadow{
        -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.65); 
        box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.65);
      }
      #team{
        margin: 0 auto;
        /* margin: 20px 0 0 0;*/
        display: flex;
        flex-wrap: wrap;
         width: 100%;
         height: auto;
         color: #000;
         background-color: #fff;
         background:var(--darkpeach);
      }
      .teambox{
        flex: 1;
        gap: 15%;
        padding: 5px;
      }

      .teambox img{
        width: auto;
        height: 300px;
        padding: 15px;
      }
      .teambox p{
        background-color: #fff;
        color: #000;
        padding: 15px;
        margin: 10%;

      }

      .about-section {
  padding: 60px 20px;
  background-color: #f4f6f8;
}

.about-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.2rem;
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
}

.about-box {
  flex: 1;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.image-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.text-box h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #000;
}

.text-box p {
  line-height: 1.6;
  margin-bottom: 15px;
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
  }
}



      /* Footer Start */
      footer{
        background-color: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .footer_item{
        text-align: center;
        padding: 2% 10%;
      }
      .footer_item p,a{
        font-size: 15px;
      }
   

/*+++++++++++++++++++++++++++++++++++++++++++++*/
      
       /* Media Queries */
      
      @media (max-width:900px){
       /* .container_0 .klein{
          margin: 10px 0 0 0;
        }*/
        .container_2{
          width: 100%;
          height: auto;
          margin: 0 auto;
          display: flex;
          flex-direction: column;    
          /* bringt die beiden Flexitems auf Abstand  */
          /*justify-content: space-between;*/
        }
        h1{
          font-size: 25px;
        }
        
        h2{
          font-size: 23px;
        }
        h3{
          font-size: 20px;
        }
       
        p{
          font-size: 15px;
        }
        .container_0 ul li a{
          font-size: 15px;
        }
        .container_text{
            width: 90%; 
            flex: 1;
           /*padding: 5%;*/
            text-align: center;
                      
          }

        #leistungen{
          margin: 0 auto;
         /* margin: 20px 0 0 0;*/
         display: flex;
         flex-direction: column;
        }
        .leistungsbox{
          flex: 1;
          gap: 5%;
          padding: 5%;
        }
        #fotos{
          margin: 0 auto;
          /* margin: 20px 0 0 0;*/
          display: flex;
          flex-direction: column;
           width: 100%;
           height: auto;
           color: #000;
           justify-content: center;
           align-items: center;
        }

        .fotobox{
          display: flex;
          justify-content: center;
           align-items: center;
        }
        .fotobox img{
          width: 90%;
          padding: 0px ;
        }
        #team{
          margin: 0 auto;
          /* margin: 20px 0 0 0;*/
          display: flex;
          flex-direction: column;
           width: 100%;
           height: auto;
           color: #000;
           overflow-x: hidden;
        }
        .teambox{
          width: 100%;
          margin: 0 auto;
          display: flex;
          justify-content: center;
        }
        .teambox img{
          width: 40%;
          padding: 0 ;
        }

       footer{
          background-color: var(--gray);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .footer_item p{
          text-align: center;
          padding: 0 5%;
        }



        @media (max-width:600px){
          /*ANCHOR - {
            width: 90%; 
            flex: 1;
           padding: 5%;
            text-align: center;
                      
          }*/
          .teambox img{
            width: 80%;
            padding: 5% ;
          }
        }
       /*  .footer_item p,a{
          font-size: 15px;
        }*/
       
      }
       /* Media Queries */