@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    background: var(--color-accent);
  }

  .menu-list {
    flex-direction: column;
    background: var(--color-bg);
    position: fixed;
    top: 0;
    right: -300px;
    width: 250px;
    height: 100vh;
    padding: 2rem 1rem;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
  }

  .menu-list.open {
    right: 0;
  }
}


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

.flex-column{
  display:flex;
  flex-direction:column;
}

.flex-row{
  display:flex;
  flex-direction:row
}

.just-cent{
  justify-content: center;
}

.row40{
  width:40%
}

.row60{
  width:60%;
}
.grid{padding:10px;}
.logo {
  height: auto;
  max-height: 40px;
  max-width: 100%;
}

#startsection{
    text-align: center;
    background-color: #fff;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHZpZXdCb3g9JzAgMCAxNjAwIDgwMCc+PGcgPjxwYXRoIGZpbGw9JyNmOGZiZmYnIGQ9J000ODYgNzA1LjhjLTEwOS4zLTIxLjgtMjIzLjQtMzIuMi0zMzUuMy0xOS40Qzk5LjUgNjkyLjEgNDkgNzAzIDAgNzE5LjhWODAwaDg0My44Yy0xMTUuOS0zMy4yLTIzMC44LTY4LjEtMzQ3LjYtOTIuMkM0OTIuOCA3MDcuMSA0ODkuNCA3MDYuNSA0ODYgNzA1Ljh6Jy8+PHBhdGggZmlsbD0nI2YwZjZmZicgZD0nTTE2MDAgMEgwdjcxOS44YzQ5LTE2LjggOTkuNS0yNy44IDE1MC43LTMzLjVjMTExLjktMTIuNyAyMjYtMi40IDMzNS4zIDE5LjRjMy40IDAuNyA2LjggMS40IDEwLjIgMmMxMTYuOCAyNCAyMzEuNyA1OSAzNDcuNiA5Mi4ySDE2MDBWMHonLz48cGF0aCBmaWxsPScjZTlmMmZmJyBkPSdNNDc4LjQgNTgxYzMuMiAwLjggNi40IDEuNyA5LjUgMi41YzE5Ni4yIDUyLjUgMzg4LjcgMTMzLjUgNTkzLjUgMTc2LjZjMTc0LjIgMzYuNiAzNDkuNSAyOS4yIDUxOC42LTEwLjJWMEgwdjU3NC45YzUyLjMtMTcuNiAxMDYuNS0yNy43IDE2MS4xLTMwLjlDMjY4LjQgNTM3LjQgMzc1LjcgNTU0LjIgNDc4LjQgNTgxeicvPjxwYXRoIGZpbGw9JyNlMWVkZmYnIGQ9J00wIDB2NDI5LjRjNTUuNi0xOC40IDExMy41LTI3LjMgMTcxLjQtMjcuN2MxMDIuOC0wLjggMjAzLjIgMjIuNyAyOTkuMyA1NC41YzMgMSA1LjkgMiA4LjkgM2MxODMuNiA2MiAzNjUuNyAxNDYuMSA1NjIuNCAxOTIuMWMxODYuNyA0My43IDM3Ni4zIDM0LjQgNTU3LjktMTIuNlYwSDB6Jy8+PHBhdGggZmlsbD0nI0RBRTlGRicgZD0nTTE4MS44IDI1OS40Yzk4LjIgNiAxOTEuOSAzNS4yIDI4MS4zIDcyLjFjMi44IDEuMSA1LjUgMi4zIDguMyAzLjRjMTcxIDcxLjYgMzQyLjcgMTU4LjUgNTMxLjMgMjA3LjdjMTk4LjggNTEuOCA0MDMuNCA0MC44IDU5Ny4zLTE0LjhWMEgwdjI4My4yQzU5IDI2My42IDEyMC42IDI1NS43IDE4MS44IDI1OS40eicvPjxwYXRoIGZpbGw9JyNiMGNmZmEnIGQ9J00xNjAwIDBIMHYxMzYuM2M2Mi4zLTIwLjkgMTI3LjctMjcuNSAxOTIuMi0xOS4yYzkzLjYgMTIuMSAxODAuNSA0Ny43IDI2My4zIDg5LjZjMi42IDEuMyA1LjEgMi42IDcuNyAzLjljMTU4LjQgODEuMSAzMTkuNyAxNzAuOSA1MDAuMyAyMjMuMmMyMTAuNSA2MSA0MzAuOCA0OSA2MzYuNi0xNi42VjB6Jy8+PHBhdGggZmlsbD0nIzhiYjdlZScgZD0nTTQ1NC45IDg2LjNDNjAwLjcgMTc3IDc1MS42IDI2OS4zIDkyNC4xIDMyNWMyMDguNiA2Ny40IDQzMS4zIDYwLjggNjM3LjktNS4zYzEyLjgtNC4xIDI1LjQtOC40IDM4LjEtMTIuOVYwSDI4OC4xYzU2IDIxLjMgMTA4LjcgNTAuNiAxNTkuNyA4MkM0NTAuMiA4My40IDQ1Mi41IDg0LjkgNDU0LjkgODYuM3onLz48cGF0aCBmaWxsPScjNmRhMWRjJyBkPSdNMTYwMCAwSDQ5OGMxMTguMSA4NS44IDI0My41IDE2NC41IDM4Ni44IDIxNi4yYzE5MS44IDY5LjIgNDAwIDc0LjcgNTk1IDIxLjFjNDAuOC0xMS4yIDgxLjEtMjUuMiAxMjAuMy00MS43VjB6Jy8+PHBhdGggZmlsbD0nIzU1OGJjNCcgZD0nTTEzOTcuNSAxNTQuOGM0Ny4yLTEwLjYgOTMuNi0yNS4zIDEzOC42LTQzLjhjMjEuNy04LjkgNDMtMTguOCA2My45LTI5LjVWMEg2NDMuNGM2Mi45IDQxLjcgMTI5LjcgNzguMiAyMDIuMSAxMDcuNEMxMDIwLjQgMTc4LjEgMTIxNC4yIDE5Ni4xIDEzOTcuNSAxNTQuOHonLz48cGF0aCBmaWxsPScjNEI3NTlGJyBkPSdNMTMxNS4zIDcyLjRjNzUuMy0xMi42IDE0OC45LTM3LjEgMjE2LjgtNzIuNGgtNzIzQzk2Ni44IDcxIDExNDQuNyAxMDEgMTMxNS4zIDcyLjR6Jy8+PC9nPjwvc3ZnPg==);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}


#startsection1{
  background-color:var(--color-accent2);
  min-height:300px;
}
.logo-image{
  max-width:200px
}

.card-image{
  width:100%;
  height:100%;
  object-fit: cover;
}

.bg-white-box{
  background-color:var(--color-bg);
  box-shadow: 2px 2px 2px #9e9e9e;
  transition: all .2s ease-in-out;
  color:var(--color-text);
}

.bg-white-box:hover{
  transform: scale(1.05);
   color:var(--color-accent);
}

.ph3{
  font-size:var(--font-heading3);
  font-weight:600;
}

.margin-bot-10{
  margin-bottom:10%;
}

.animated-button8 {
  background: var(--color-accent);
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color:white;
  font-size: 20px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .2s ease-in-out;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button8:hover{
  transform: scale(1.05);
   color:var(--color-text);
}

.animated-button8::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: color(3);

  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button8:hover::before {
  opacity: 0.2;
}

.animated-button8 span {
  position: absolute;
}

.animated-button8 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);

  -webkit-animation: 5s animateTop linear infinite;
          animation: 5s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.animated-button8 span.unverbindlich{display:block; margin-left:auto; margin-right:auto; position:unset; font-size:small;}

.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    margin-bottom:-2px;
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-bottom .shape-fill {
    fill: #318DCE;
}


.custom-shape-divider-top {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top:-2px
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);

    height: 150px;
}

.custom-shape-divider-top .shape-fill {
    fill: #318DCE;
}



.text-center{
  text-align: center;
}

.text-white{
  color:var(--color-bg);
}

.padd-top-bottom-10{
  padding-top:10%;
  padding-bottom:10%;
}

.padd-top-bottom-5{
  padding-top:5%;
  padding-bottom:5%;
}

.checkbox, .smiley{
  max-width:35px;
  margin-left:15px;
  margin-right:15px;

}

.checkbox-text{
  color:var(--color-bg);
  font-size:var(--font-heading3);
  margin-block-start: 0em;
    margin-block-end: 0em;
}

.smiley-text{
  color:var(--color-accent);
  font-size:var(--font-heading3);
  margin-block-start: 0em;
    margin-block-end: 0em;
}

.checkspace{
  margin:12px 0px;
}

.blue-bold{
  color:var(--color-accent3);
  font-weight:700;
}

#startsection1, #startsection2, #startsection3{
  position:relative;
}
#startsection3{
  background-color: var(--color-accent2);
}

#startsection5{
  background-color: var(--color-accent3);
}

.align-center{align-items:center;} 
.watertest{border-radius:15px;}
.padme{padding: 0 15px;}

.watertest{
  width:250px;
  height:120px;
  object-fit: cover;
}

.left-minus-100{
  margin-left:-100px
}
.left-minus-50{
  margin-left:-50px;
}
ul.w-test  li{
  font-size: var(--font-heading3);
  color:var(--color-accent3);
}

.img-max{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mag-auto{
  display:flex;
  margin:auto;
}

header.container{padding:0;}




@media only screen and (max-width: 760px) {
.custom-shape-divider-bottom svg, .custom-shape-divider-top svg  {
  height:100px;
}
}

@media only screen and (max-width: 550px) {
.custom-shape-divider-bottom svg, .custom-shape-divider-top svg  {
  height:50px;
}
.padd-top-bottom-10{
  padding-top:20%;
  padding-bottom:20%;
}
}

@media only screen and (max-width: 1200px) {
  .left-minus-100{margin:0;}
  .left-minus-50{margin:0;}
  .small-col{
    display:flex;
    flex-direction: column;
  }
  .watertest{width:300px;}
  .small-col-rev{
    display:flex;
    flex-direction:row-reverse;
  }
}


.font-big{
  font-size:var(--font-heading);
}

.card-holder{
  background-color: var(--color-bg);
  display:flex;
  flex-direction: column;
  margin-bottom:50px;  
}

.card-number{
  text-align:center;
  color:var(--color-bg);
  font-size:var(--font-heading);
  font-weight:bold;
  padding:15px 0px;
}
.card-number p{
  background-color:var(--color-accent);
  border-radius: 50%;
  padding:10px 30px;
}

@media only screen and (max-width: 992px) {
  .card-number p{padding:10px 25px;}
}

.card-pic, .card-text{
  display:flex;
  align-items: center;
    justify-content: center;
    padding:0px 20px;
}

.schatten{
   -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.card-text-col{
  display:flex;
  flex-direction:column;
  text-align: left;
  padding:0px 20px;
}

.card-text-col ol{
  padding:0px 30px;
}