/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
.cs-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cs-checkbox input[type=checkbox] {
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--primary);
  margin-right: 0.5rem;
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-289 {
    text-align: center;
    padding: var(--sectionPadding);
  }
  #why-choose-289 .buy-section {
    text-align: start;
  }
  #why-choose-289 .buy-section > * {
    margin-bottom: 1rem;
    display: block;
  }
  #why-choose-289 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-289 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-289 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #why-choose-289 .cs-item {
    list-style: none;
    text-align: left;
    width: 100%;
    padding: 2rem;
    background-color: #f7f7f7;
    border-radius: 1rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: background-color 0.3s;
  }
  #why-choose-289 .cs-item:hover {
    background-color: var(--primary);
  }
  #why-choose-289 .cs-item:hover a {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(200%);
  }
  #why-choose-289 .cs-item:hover .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-icon {
    height: 3rem;
    margin-bottom: 1.5rem;
    display: block;
    transition: filter 0.3s;
  }
  #why-choose-289 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--headerColor);
  }
  #why-choose-289 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-289 .cs-container {
    max-width: 80rem;
  }
  #why-choose-289 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
  }
  #why-choose-289 .cs-flex {
    width: 50%;
    margin: 0 auto;
    text-align: center;
  }
  #why-choose-289 .cs-title {
    margin: 0;
    padding-bottom: 1rem;
  }
  #why-choose-289 .cs-card-group {
    justify-content: space-between;
    /* makes sure every box "stretches" to be the same height as the tallest box */
    align-items: stretch;
    flex-direction: row;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #why-choose-289 .cs-item {
    width: auto;
    /* 16px - 32px */
    padding: 2rem clamp(1rem, 2.1vw, 2rem);
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    background: #fafafa;
  }
  #faq .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq .cs-faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq .cs-button:hover {
    cursor: pointer;
  }
  #faq .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq .cs-image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq .cs-picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq .cs-content {
    width: 55%;
  }
  #faq .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq .cs-picture {
    height: 90%;
  }
}

/*# sourceMappingURL=mitglied-werden.css.map */