/* Allgemeine Stildefinitionen */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}


body {
    font-family: roboto, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.4;
}
body.fixed {
}

.centerwrapper {
  max-width: 1400px;
  padding: 0 5%;
  margin: 0 auto;
}
@media screen and (max-width: 1100px) {
  .centerwrapper {
    max-width: 1400px;
    padding: 0 3.5%;
  }
}
@media screen and (max-width: 750px) {
  .centerwrapper {
    max-width: 1400px;
    padding: 0 2.5%;
  }
}

.center {
  text-align: center;
}

.button {
  background-color: #025949;
  padding: 15px 35px;
  border-radius: 25px;
  color: #fff;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.dreieck::after {
  content: "";
  position: absolute;
  top: -50px; /* Abstand zum unteren Rand des DIV-Elements */
  left: 50%; /* Horizontale Positionierung in der Mitte des DIV-Elements */
  transform: translateX(-50%);
  border-width: 50px 50vw 0; /* 10px oben, 50vw für die Breite, 0 unten für das Dreieck */
  border-style: solid;
  border-color: transparent #fff6ed transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}

p {
  margin-top: 0;
}
a {
  color: #222;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}






.logo {
  background-color: #fff6ed;
  text-align: center;
  padding: 20px 0px;
  text-transform: uppercase;
  cursor: pointer;
}
    .logo .anne {
      margin-bottom: 0;
      font-size: 3rem;
    }
    .logo h2 {
      margin: 0;
    }
    .logo h2:last-child {
      margin-bottom: 20px;
    }
    @media screen and (max-width: 768px) {
      .logo h2 {
        margin-bottom: 0;
        font-size: 1.3rem;
      }
    }
    @media screen and (max-width: 768px) {
      .logo .anne {
        margin-bottom: 0;
        font-size: 2rem !important;
      }
    }

.naviwrapper {
  background-color: #fff6ed;
}
.fixed .naviwrapper {
  margin-top: 0;
  position: fixed;
  top: 0;
  box-shadow: 0 0 5px #333;
  width: 100%;
  z-index: 100;
}



    .naviwrapper .centerwrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .naviwrapper div {

    }
    .naviwrapper div:last-child {
      margin-left: auto;
    }
            .naviwrapper div a:not(.button) {
              display: block;
              text-decoration: none;
              color: #333;
              padding: 25px 35px;
              transition: background-color 0.3s;
              text-transform: uppercase;
            }
            .naviwrapper a:hover:not(.button), .naviwrapper div.active a:not(.button) {
              background-color: #E7E1FD;
            }
            @media screen and (max-width: 768px) {
                .naviwrapper div a:not(.button) {
                  padding: 25px 25px;
                }
              }
    .naviwrapper .button {
      margin: auto 0 auto auto;
    }
    @media screen and (max-width: 500px) {
      .naviwrapper .button {
        display: none;
      }
    }

.kvwrapper {
  background-color: #F3C6D3;
}

/* angebot */
.site-angebot .kvwrapper {
  background-color: #ECE6F5;
}
    .kvwrapper img {
      width: auto;
      height: 350px;
      margin-bottom: -5px;
    }
    @media screen and (max-width: 768px) {
      .kvwrapper img {
        width: auto;
        height: 210px;
      }
    }
    @media screen and (min-width: 1200px) {
      .kvwrapper img {
        height: 450px;
      }
    }
    .kvwrapper > div {
      display: inline-block;
      position: relative;
    }
    .kvwrapper > div::after {
      content: ""; /* Erstellt ein überlagerndes Pseudo-Element */
      position: absolute; /* Position absolut, um das Pseudo-Element über dem Hintergrundbild zu positionieren */
      top: 0; /* Am oberen Rand des Elements positionieren */
      right: 0; /* Am rechten Rand des Elements positionieren */
      height: 100%; /* Am unteren Rand des Elements positionieren */
      width: 20%; /* Breite des überlagernden Bereichs */
      background: linear-gradient(to right, rgba(243, 198, 211, 0), rgba(243, 198, 211, 1)); /* Verlauf vom transparenten zum undurchsichtigen Weiß */
    }
    /* angebot */
    .site-angebot .kvwrapper > div::after {
      background: linear-gradient(to right, rgba(236, 230, 245, 0), rgba(236, 230, 245, 1)); /* Verlauf vom transparenten zum undurchsichtigen Weiß */
    }
    .kvwrapper h1, .kvwrapper h2 {
      position: absolute;
      width: 100%;
      text-align: center;
    }
    .kvwrapper h1 {
      transform: translate(0, -250px);
      color: #ED6B2D;
    }
    @media screen and (max-width: 768px) {
      .kvwrapper h1 {
        transform: translate(0, -170px);
        font-size: 1.2em;
      }
    }
    @media screen and (min-width: 1200px) {
      .kvwrapper h1 {
        font-size: 3em;
          transform: translate(0, -350px);
      }
    }
    .kvwrapper h2 {
      transform: translate(0, -195px);
    }
    @media screen and (max-width: 768px) {
      .kvwrapper h2 {
        transform: translate(0, -140px);
        font-size: 1.1em;
      }
    }
    @media screen and (min-width: 1200px) {
      .kvwrapper h2 {
        transform: translate(0, -260px);
        font-size: 2em;
      }
    }

    @media screen and (max-width: 768px) {
      .kvwrapper h1, .kvwrapper h2 {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
      }
    }




.contentwrapper {
  background-color: #F0F483;
  padding: 60px 0 100px 0;
}
    .contentwrapper h2 {
    }
    .contentwrapper .centerwrapper  > h3 {
      margin: 0 0 40px 0;
    }
        .list3wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          hyphens: auto;
	      text-align: justify;
        }
        .list3wrapper .list {
          width: calc(33.3% - 30px); /* Breite von 33.333% mit 30px Abstand */
          margin-bottom: 30px;
        }
        @media screen and (max-width: 768px) {
          .list3wrapper {
            flex-direction: column;
          }
          .list {
            width: 100% !important; /* Bei kleineren Bildschirmen die Breite auf 100% ändern */
            margin: 0 !important;
          }
        }
        .list2wrapper img {
          border-radius: 50px;
          margin: 0 0 20px 0;
        }





.kontaktbox {
  background-color: #fff6ed;
  padding: 60px 0 100px 0;
  position: relative;
}
.kontaktbox::after {
  border-color: transparent #fff6ed transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}


.aboutme {
  background-color: #E8E1FD;
  padding: 60px 0 100px 0;
  position: relative;
}
.aboutme::after {
  border-color: transparent #E8E1FD transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}
    .aboutme .spalten2 {
        display: flex;
        flex-wrap: wrap;
    }
    .aboutme .left-column, .aboutme .right-column {
        box-sizing: border-box;
    }
    .aboutme .left-column {
      order: 0;
      margin: 0 100px 0 0;
      flex-basis: calc(60% - 100px);
    }
    .aboutme .right-column {
      flex-basis: 40%;
    }
    @media screen and (max-width: 950px) {
      .aboutme .left-column {
          flex-basis: calc(70% - 60px);
          margin: 0 60px 0 0;
      }
      .aboutme .right-column {
          flex-basis: 30%;
      }
    }
    @media screen and (max-width: 600px) {
      .aboutme .left-column, .aboutme .right-column {
          flex-basis: 100%;
      }
      .aboutme .left-column {
          margin: 30px 0 0 0;
          order: 1
      }
    }
        .aboutme img {
          width: 100%;
        }
        .aboutme button {
          margin: 20px 0 0 0;
        }





.kontakt {
  background-color: #F3C6D3;
  position: relative;
  padding: 60px 0 100px 0;
}
.kontakt::after {
  border-color: transparent #F3C6D3 transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}

    .kontakt .spalten2 {
        display: flex;
        flex-wrap: wrap;
    }
    .kontakt .left-column, .kontakt .right-column {
        box-sizing: border-box;
        flex-basis: 50%;
    }
    .kontakt .left-column {
      order: 0;
      margin: 0 40px 0 0;
      flex-basis: calc(50% - 40px);
    }
    @media screen and (max-width: 850px) {
      .kontakt .left-column, .kontakt .right-column {
          flex-basis: 100%;
      }
      .kontakt .left-column {
          margin: 0 0 30px 0;
      }
    }

    .kontakt .eingabe {
      background: none;
      text-decoration: inherit;
      padding: 1rem 2rem;
      outline: none;
      width: calc(100% - 4rem);
      border-radius: 30px;
      border: 2px solid #D46D73;
      margin: 5px 0 20px 0;
      transition: all 0.3s;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    .kontakt .eingabe:focus {
      background-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 8px rgba(255,255,255,1);
    }
    .kontakt label {
        display: none;
    }
    .kontakt button {
      background-color: #A6444C;
    }











    /* About me */

.site-aboutme .contentwrapper {
  background: #FFF6ED;
  padding: 60px 0 100px 0;
  position: relative;
}
.site-aboutme .contentwrapper::after {
  border-color: transparent #FFF6ED transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}
.site-aboutme .list3wrapper {
  text-align: left;
}



.facts {
  background: rgb(240,244,131);
  background: linear-gradient(180deg, rgba(240,244,131,1) 0%, rgba(255,246,237,1) 100%);
  padding: 60px 0 100px 0;
  position: relative;
}
.facts::after {
  border-color: transparent #f0f483 transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}
    .facts h2 {
      margin: 0;
    }
    .facts .spalten2 {
        display: flex;
        flex-wrap: wrap;
    }
    .facts .left-column {
      box-sizing: border-box;
      order: 0;
      margin: 0 40px 0 0;
      flex-basis: calc(30% - 40px);
    }
    .facts .right-column {
        box-sizing: border-box;
        flex-basis: 70%;
    }
    @media screen and (max-width: 800px) {
      .facts .left-column, .facts .right-column {
          flex-basis: 100%;
      }
      .facts .left-column {
          margin: 0 0 30px 0;
      }
    }
    
    



/*.accordion-main-title:before, .accordion-main-title:after {
  content: "";
  display: block;
  margin: 0 0.2rem;
  flex: 1;
  border-bottom: 1px solid #2e8074;
}*/

.accordion-wrapper {
  margin: auto;
}
@media (max-width: 768px) {
  .accordion-wrapper {
    width: auto;
    padding: 0 0.3rem;
  }
}
.accordionwrapper input[type=radio] {
  display: none;
}
.accordionwrapper input[type=radio]:checked + .accordion-item .accordion-title {
/*  color: #fff;
  border-color: #2e8074;
  background-color: #2e8074; */
}
.accordionwrapper input[type=radio]:checked + .accordion-item .accordion-title:after {
  transform: rotate(180deg);
}
.accordionwrapper input[type=radio]:checked + .accordion-item .accordion-content {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s, opacity 0.7s;
  margin: 15px 0 15px 2.5%;
}
.accordion-content {
  width: 95%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.accordion-item {
  display: block;
  margin-bottom: 15px;
  padding: 20px 0;
  border-top: 1px solid #D46D73;
  cursor: pointer;
}
.accordion-item:last-child {
  border-bottom: 1px solid #D46D73;
}

.accordion-title {
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-title:after {
  content: "▼";
  display: inline-block;
  font-size: 0.7rem;
}







/* angebot */


.angebot-preview {
  background-color: #E8E1FD;
  padding: 60px 0;
  position: relative;
}
    .angebot-preview img {
      width: 100%;
      max-width: 900px;
    }
    
    
.angebot {
  background: rgb(243,198,211);
  background: linear-gradient(180deg, rgba(243,198,211,1) 0%, rgba(232,225,253,1) 100%);
  padding: 60px 0 100px 0;
  position: relative;;
}
.angebot::after {
  border-color: transparent rgba(243,198,211,1) transparent ; /* Transparent für die oberen beiden Seiten, Hintergrundfarbe für die untere Seite */
}
    .bildliste {
      position: relative;
      width: 100%;
      margin: 0 0 100px 0;
    }
    .bildliste img {
      max-width: 60%;
    }
    .bildliste .overlay {
      position: absolute;
      top: 5%;
      right: 0;
      width: 50%;
      padding: 20px 40px 40px 40px;
      background-color: #025949;
      color: #fff;
    }
    .bildliste:nth-child(even) {
      text-align: right;
    }
    .bildliste:nth-child(even) .overlay {
      text-align: left;
      left: 0;
      right: auto;
    }
    
    @media screen and (max-width: 1300px) {
      .bildliste .overlay {
        width: 60%;
      }
    }
    
    @media screen and (max-width: 1100px) {
      .bildliste {
        margin: 0;
      }
      .bildliste .overlay {
        position: relative;
        transform: translate(5%, -100px);
        width: 88%;
        padding: 5px 15px;
        right: auto;
        top: auto;
      }
      .bildliste:nth-child(odd) {
        text-align: left;
      }
      .bildliste img {
        max-width: 100%;
        width: 100%;
      }
    }
    
    
    
    
    .impressum {
      padding: 60px 0 100px 0;
      background: #F0F483;
      background: linear-gradient(180deg, #F0F483 0%, rgba(232,225,253,1) 100%);
    }
    
    .impressum a {
      color: #444;
      text-decoration: underline;
    }
    .impressum a:hover {
      text-decoration: none;
    }
    .impressum h1, .impressum h2, .impressum h3 {
      font-weight: 300;
    }
    
    
    
    
    /*************************
    ****** FOOOTER **********
    **************************/
    
    
    
    footer {
      background-color: #B3ADD9;
      padding: 80px 0;
    }
        footer .split {
          display: flex;
          flex-wrap: wrap;
        }
          footer .split > div {
            flex-basis: 50%;
          }
          footer .rechts {
            text-align: right;
          }
          footer .links p:first-child {
            font-size: 1.3rem;
          }
          footer .links {
            font-style: italic;
          }
          footer p {
            margin: 0;
            font-style: initial;
            text-transform: uppercase;
          }
          

          @media screen and (max-width: 600px) {
            footer .split > div {
              flex-basis: 100%;
            }
            footer .links, footer .rechts {
              text-align: center;
            }
            footer .rechts {
              margin: 50px 0 0 0;
            }
          }