:root {
    --mainColor01:rgb(168, 117, 78);
    --white: #ffffff;
    --topBarHeight: 220px;
  }
  .site {
    overflow-x: hidden;
    /* Unnecessary IMHO, uncomment next line to force hidden behavior */
    /* overflow-x: hidden !important; */
    /* Additional tunning proposed by the community */
    position: relative;
    width: 100%;
}
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.2em;
    line-height: 1.8;
    font-weight: 300;
    font-style: normal;
}
h1 {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;

    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;

    font-family: "Chela One", serif;
    font-weight: 400;

    color: var(--mainColor01);
    font-size: 3.5em;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1;
}
/* .flexCol03 {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
    border: 1px solid red;
} */
.mainButton {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.2em;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: white;
    border: none;
    padding: 10px 0px;
    width: 200px;
    border-radius: 20px;
    background-color: var(--mainColor01);
}
.backbox {
    background-color: rgb(228, 228, 228);
    width: 100%;
    padding: 80px;
    box-sizing: border-box;
}

.TopBar {
    width: 100%;
    height: var(--topBarHeight);
    background-color: var(--mainColor01);
    background-color: rgb(128, 100, 78);

    background: rgb(58,45,54);
    background: linear-gradient(24deg, rgba(58,45,54,1) 0%, rgba(128,100,78,1) 100%);

    display: flex;
    flex-direction: column;
    /* justify-content: space-between;  *//* Abstand zwischen den Objekten */
    align-items: center;
    padding: 0 40px; /* Abstand außen links und rechts */
    width: 100%; /* Haupt-Div hat volle Breite */
    box-sizing: border-box; /* Padding wird in die Breite einberechnet */
  
}
.fullWText {
    font-family: "chela one", sans-serif;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    white-space: nowrap;
    color: var(--mainColor01);
    color: rgba(255, 255, 255, 0.338);
    text-align: center;
/*     color:white; */
    margin: 0;
    margin: 10px;
    font-size: clamp(10px,1.6em,50px);
}
.logoStutenkerl {
/*     margin-top: 35px; */
    display: flex;
    margin-bottom: 0px;
    height: var(--topBarHeight);
}
.logoStutenkerl>img {
    margin: auto;
    width: clamp(250px, 25vw, 600px);
    max-width: 400px;
    height: auto;
}


.topMenu {
    margin: auto;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.topMenu>li {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-family: "Raleway", sans-serif;
/*     font-optical-sizing: auto;
    font-family: "Chela One", serif; */
    font-weight: 400;
    font-size: 1.6em;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    margin-right: 15px;
    list-style-type: none;
    color: white;
    color: var(--mainColor01);
    color: rgb(93, 75, 66);
}


.space01 {
    height: 130px;
}


.contentBox01 {
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 80vw;
    max-width: 100%;
}

.textContent01 {
    width: 70%;
}
.Img01 {
    width: 50%;
    max-width: 250px;   
}
.Img01 img {
width: 100%;
}

.imgLine01 {
width: 100%;
height: 300px;
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 1px;
}
.imgLine01_img01, .imgLine01_img02, .imgLine01_img03 {
    height: 100%;
    width: 33.33%;
    flex-basis: auto;
    background-position: center;
    background-size: cover; /* Passt das Bild an, um den Bereich auszufüllen */
  }
  
/* Variante 01 */
/*   .imgLine01_img01 {
    background-image: url("../../img/IMG_6710_small.jpg");
    background-position: center top -30px;
  }
  .imgLine01_img02 {
    background-image: url("../../img/IMG_6948_small.jpg");
    background-position: center top -60px;
  }
  .imgLine01_img03 {
    background-image: url("../../img/IMG_7001_small.jpg");
    background-position: center top -25px;
  } */

  /* Variante 02 */
/*   .imgLine01_img01 {
    background: url("../../img/IMG_6710_small.jpg") center calc(50% + 50px) / cover no-repeat;

  }
  .imgLine01_img02 {
    background: url("../../img/IMG_6948_small.jpg") center calc(50% + 23px) / cover no-repeat;
  }
  .imgLine01_img03 {
    background: url("../../img/IMG_7001_small.jpg") center calc(50% + 50px) / cover no-repeat;
  } */

    .imgLine01_img01 {
    background-image: url("../../img/IMG_6710_small.jpg");
    background-position: center top;
  }
  .imgLine01_img02 {
    background-image: url("../../img/IMG_6948_small.jpg");
    background-position: center top;
  }
  .imgLine01_img03 {
    background-image: url("../../img/IMG_7001_small.jpg");
    background-position: center top ;
  }


  .backImg01 {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 750px;
    background-image: url("../../img/IMG_6710Wide.jpg");
    opacity: 1;
    background-position: top;
    background-size: cover;

  }

.content {
    margin: auto;
    max-width: 800px;
}

  footer {
        height: 290px;
        background-color: var(--mainColor01);
        background-color: rgb(128, 100, 78);
    
        background: rgb(58,45,54);
        background: linear-gradient(24deg, rgba(58,45,54,1) 0%, rgba(128,100,78,1) 100%);

        /* padding: 0 40px; */ /* Abstand außen links und rechts */
        width: 100%; /* Haupt-Div hat volle Breite */
        box-sizing: border-box; /* Padding wird in die Breite einberechnet */
  }

  .footerCont {
    display: flex;
    padding-top: 0px;
    align-items: flex-end;
    justify-content: space-between;
  }

.footerMenu>li, .ulFont {
    
/*     margin-right: 15px; */
    padding: 0;
    margin: 0;
    list-style-position: outside;
    list-style-type: none;
    color: white;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.2rem;
    line-height: 1.8;
    font-weight: 300;
    font-style: normal;

    list-style-type: none;
    list-style-position: inside;
}
.footerMenu>li {
    transform: translateX(-40px);
}
.ulFont {
    transform: translateY(-16px);
}


@media screen and (max-width: 600px) {
    .contentBox01 {
        flex-direction: column;
        width: 100%;
    }
    .backbox {
        background-color: rgb(228, 228, 228);
        width: 100%;
        padding: 80px 0px;
        box-sizing: border-box;
    }
    .footerCont {
/*         flex-direction: column; */
/*         padding-top: 0px; */
/*         padding: 40px;
        box-sizing: border-box; */
/*         align-items: flex-start;
        justify-content: flex-start; */
      }
  }