@charset "UTF-8";
/*
 Theme Name:   Förderverein Mayener Waldkinder e.V.
 Theme URI:    https://waldkinder-mayen.de/
 Description:  Use this child theme to extend Bricks.
 Author:       Alexandra Saßl
 Author URI:   https://sassl-webdesign.de/
 Template:     bricks
 Version:      1.1
 Text Domain:  mayener-waldkinder
*/
/* #region Cheats */
:where(img),
:where(figure:not(figure:has(img))) {
  border-radius: var(--radius);
}

/* #endregion Cheats */
/* #region Global Text Styling */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--dark, #000);
  outline-offset: 4px;
  border-radius: 0.5rem;
}

.brxe-text ul,
.brxe-post-content ul {
  list-style: none;
  padding-inline-start: 3rem;
}
.brxe-text ul li,
.brxe-post-content ul li {
  position: relative;
}
.brxe-text ul li::before,
.brxe-post-content ul li::before {
  content: "";
  width: 1.8rem;
  aspect-ratio: 1;
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250.02 306.86'%3E%3Cg id='Ebene_1-2' data-name='Ebene_1'%3E%3Cpath d='M121.27,306.86v-26.26l-5.2-.37c-31.43-2.23-60.66-16.2-82.32-39.34C11.99,217.64,0,187.33,0,155.56c0-5.22.29-10.47.88-15.62l.87-7.7,40.96,40.96c2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37c2.82-2.82,4.37-6.57,4.37-10.56s-1.55-7.74-4.37-10.56L11.77,100.02l1.11-2.37c7.43-15.85,18.11-30.93,31.76-44.82l2.64-2.69,23.52,23.52c2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37c5.82-5.82,5.82-15.29,0-21.11l-21.82-21.82,3.59-2.56C95.46,12.63,118.27,2.76,125.01,0c6.75,2.76,29.56,12.63,51.32,28.17l3.59,2.56-21.82,21.82c-2.82,2.82-4.37,6.57-4.37,10.56s1.55,7.74,4.37,10.56,6.57,4.37,10.56,4.37,7.74-1.55,10.56-4.37l23.52-23.52,2.64,2.69c13.65,13.89,24.33,28.97,31.76,44.82l1.11,2.37-52.06,52.06c-5.82,5.82-5.82,15.29,0,21.11,2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37l40.96-40.96.87,7.7c.58,5.15.88,10.4.88,15.61,0,31.78-11.98,62.08-33.75,85.33-21.66,23.14-50.89,37.11-82.32,39.34l-5.2.37v26.26h-7.48Z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: var(--tertiary-l-1);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: rotate(90deg);
  position: absolute;
  left: -2.8rem;
  top: 0.5rem;
}

.brxe-text h2 + h3,
.brxe-text h1 + h2 {
  margin-top: 2rem;
}

.brxe-text a:hover,
.brxe-text-basic a:hover,
.footer__menu a:hover,
label a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

label a {
  font-weight: 700;
  color: var(--secondary);
}

.footer__brand a {
  color: var(--bg-body);
}

/* #endregion Global Text Styling */
/* #region Logo Fixes */
img.bricks-site-logo {
  border-radius: 0 !important;
}

/* #endregion Logo Fixes */
/* #region Header Styling */
header.sticky {
  transition: all 300ms ease-in-out;
}
header.sticky .header__logo {
  transition: all 300ms ease-in-out;
}
header.sticky.scrolling .header {
  --primary-rgb: 75, 85, 61;
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
  padding-block: var(--space-xs);
}
header.sticky.scrolling .header__logo {
  width: 20rem;
}
header.sticky + main, header.sticky + #bricks-inline-css-header + main {
  margin-block-start: 115px;
}

@media (width < 1197px) {
  .header .header__container .button-group__container-btn .bricks-button {
    display: none;
  }
}
.bricks-nav-menu .bricks-button:not(.outline) a {
  color: var(--bg-body) !important;
}

@media (width > 1197px) {
  .bricks-nav-menu li.bricks-button {
    display: none;
  }
}
@media (width <= 1197px) {
  .bricks-mobile-menu li.bricks-button {
    display: block !important;
    margin-block-start: 0.5rem;
  }
  .bricks-mobile-menu li.bricks-button a {
    line-height: inherit;
  }
  .bricks-mobile-menu li.bricks-button:not(.outline) {
    margin-block-start: 1rem;
  }
  .bricks-mobile-menu li.bricks-button:not(.outline) a {
    color: var(--bg-body) !important;
  }
}
/* #endregion Header Styling */
/* #region Button effects */
.btn-primary-effect {
  --tertiary-rgb: 152, 166, 123;
  outline: 2px solid transparent;
  transition: box-shadow 0.5s ease-out;
}

.btn-primary-effect:hover {
  animation: box-shadow-pulse-primary 1s ease-out infinite;
}

.btn-light-effect {
  --light-rgb: 255, 255, 255;
  outline: 2px solid transparent;
  transition: box-shadow 0.5s ease-out;
}

.btn-light-effect:hover {
  animation: box-shadow-pulse-light 1s ease-out infinite;
}

.button__text::after {
  content: "";
  right: 0;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>');
  width: 30px;
  aspect-ratio: 1;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: cover;
  transition: transform 0.3s ease-out;
}

.button__text:hover::after {
  transform: translateX(10px);
}

/* #endregion Button effects */
/* #region Projekte Cards */
.projekte-teaser {
  /* Mask for slider wrapper so that the slider does not overlap the info container (container left) */
}
.projekte-teaser .projekte-teaser__slider-wrapper {
  clip-path: inset(-1rem -100vw -1rem -1rem);
  /* Removing the mask on tablet versions */
  /* Slider styles */
}
@media (max-width: 991px) {
  .projekte-teaser .projekte-teaser__slider-wrapper {
    clip-path: none;
  }
}
.projekte-teaser .projekte-teaser__slider-wrapper .projekte-teaser__slider {
  /* Styles the internal slider container so that it does not hide the cards outside its container.*/
}
.projekte-teaser .projekte-teaser__slider-wrapper .projekte-teaser__slider .splide__track {
  overflow: visible;
}

.card-project__title {
  pointer-events: none;
  max-width: 400px;
}

.projekte-teaser__card__img-wrapper:focus-within {
  outline: 2px solid black;
  border-radius: 0.5rem;
  outline-offset: 4px;
}

.card-project {
  container-name: card-project;
  container-type: inline-size;
  width: 100%;
}

.projekte__card__donation-percentage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 9.2rem;
  height: 14.84rem;
  position: absolute;
  right: var(--space-m);
  bottom: 0;
  z-index: 1;
  font-size: var(--text-m);
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
.projekte__card__donation-percentage::before {
  content: "";
  width: 15rem;
  aspect-ratio: 1;
  mask-image: url("https://mayener-waldkinder.de/wp-content/uploads/Spendenbutton.svg");
  background-color: var(--accent);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  position: absolute;
  z-index: -1;
}
.projekte__card__donation-percentage span {
  padding-block-start: 5rem;
  color: var(--secondary-d-3);
  font-weight: 700;
}
.projekte__card__donation-percentage:has(span[data-percentage="100"]) {
  color: var(--light);
}
.projekte__card__donation-percentage:has(span[data-percentage="100"])::before {
  background-color: #98a67b;
}

@container card-project (max-width: 450px) {
  .projekte__card__donation-percentage {
    height: 9.84rem;
  }
  .projekte__card__donation-percentage::before {
    width: 10rem;
  }
  .projekte__card__donation-percentage span {
    padding-block-start: 3rem;
  }
  .card-project__title {
    max-width: 200px;
    hyphens: auto;
  }
}
@container card-project (max-width: 350px) {
  .card-project__title {
    max-width: 150px;
  }
}
/* #endregion Projekte Cards */
/* #region CTA */
.cta__img {
  overflow: hidden;
  will-change: transform;
}

.cta__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 15s ease infinite alternate;
  will-change: transform;
  transform-origin: center;
}

.cta__container .cta__heading {
  hyphens: auto;
}

/* #endregion CTA */
/* #region Crowdfunding */
/* #region Donation Progress */
:root {
  --progress-fill: #4caf50;
}

.donation-progress__container {
  --progress-height: 1.8rem;
  --progress-radius: var(--radius-full);
  --progress-bg: #f0f0f0;
  --progress-fill: #4caf50;
  width: 100%;
  height: var(--progress-height);
  background: var(--progress-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
  position: relative;
}

.donation-progress__fill {
  width: var(--progress, 0%);
  height: 100%;
  background: var(--progress-fill);
  border-radius: var(--progress-radius);
  transition: width 1s ease-out;
  will-change: transform, width;
  animation: slideIn 1s ease-out forwards;
}

/* #endregion Donation Progress */
/* #region Donation Overview */
.project-single-hero__overview > .brxe-div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--tertiary-l-1);
  margin: 0 auto;
}

/* #endregion Donation Overview */
/* #region Donation Form */
.jet-form-builder .jet-form-builder-row.field-has-error .error-message {
  color: var(--accent);
  font-size: var(--text-s);
  line-height: 1.3;
  font-weight: 700;
}

.donation-sidebar .jet-form-builder__desc {
  line-height: 1;
}

.donation-form .jet-form-builder__next-page {
  background-color: transparent;
}
.donation-form .jet-form-builder__prev-page {
  border-color: var(--light);
}
.donation-form .jet-form-builder__submit {
  color: var(--text-body);
}
.donation-form.brxe-jet-form-builder-form button.jet-form-builder__prev-page {
  margin-right: 1rem;
}

.form-progress {
  background-color: var(--tertiary-40);
  text-align: center;
  padding-block: 0.2em;
  border-radius: var(--radius-xs);
  margin-block-end: 2rem;
  font-size: var(--text-s);
}

.jet-form-builder-row.field-type-switcher {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  gap: 1.5rem;
  justify-content: center;
}

.jet-form-builder__label-text {
  hyphens: auto;
  padding-block-end: 0.1em;
}

.jet-form-builder__field.text-field {
  border-radius: var(--radius-s);
}

/* #endregion Donation Form */
/* #region Donor List */
.donor-list {
  --transition-timing: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
  /*&::details-content {
  	block-size: 0;
  	transition: block-size 1s, content-visibility 1s;
  }*/
}
.donor-list::marker {
  display: none;
}
.donor-list__toggle {
  cursor: pointer;
  transition: all var(--transition-timing);
  position: relative;
  list-style: none;
  width: 100%;
  display: block;
}
.donor-list__toggle::before {
  content: "";
  display: inline-block;
  width: 24px;
  aspect-ratio: 1;
  vertical-align: middle;
  margin-right: 0.5rem;
  background-color: currentColor;
  transition: transform var(--transition-timing);
  transform-origin: center;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path class="vertical" d="M12 8v8"/></svg>') no-repeat center;
}
.donor-list__toggle::marker, .donor-list__toggle::-webkit-details-marker {
  display: none;
}
.donor-list__content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-timing);
}
.donor-list__content-wrapper ul {
  list-style: none;
  padding-inline-start: 3rem;
}
.donor-list__content-wrapper ul li {
  position: relative;
}
.donor-list__content-wrapper ul li::before {
  content: "";
  width: 1.8rem;
  aspect-ratio: 1;
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250.02 306.86'%3E%3Cg id='Ebene_1-2' data-name='Ebene_1'%3E%3Cpath d='M121.27,306.86v-26.26l-5.2-.37c-31.43-2.23-60.66-16.2-82.32-39.34C11.99,217.64,0,187.33,0,155.56c0-5.22.29-10.47.88-15.62l.87-7.7,40.96,40.96c2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37c2.82-2.82,4.37-6.57,4.37-10.56s-1.55-7.74-4.37-10.56L11.77,100.02l1.11-2.37c7.43-15.85,18.11-30.93,31.76-44.82l2.64-2.69,23.52,23.52c2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37c5.82-5.82,5.82-15.29,0-21.11l-21.82-21.82,3.59-2.56C95.46,12.63,118.27,2.76,125.01,0c6.75,2.76,29.56,12.63,51.32,28.17l3.59,2.56-21.82,21.82c-2.82,2.82-4.37,6.57-4.37,10.56s1.55,7.74,4.37,10.56,6.57,4.37,10.56,4.37,7.74-1.55,10.56-4.37l23.52-23.52,2.64,2.69c13.65,13.89,24.33,28.97,31.76,44.82l1.11,2.37-52.06,52.06c-5.82,5.82-5.82,15.29,0,21.11,2.82,2.82,6.57,4.37,10.56,4.37s7.74-1.55,10.56-4.37l40.96-40.96.87,7.7c.58,5.15.88,10.4.88,15.61,0,31.78-11.98,62.08-33.75,85.33-21.66,23.14-50.89,37.11-82.32,39.34l-5.2.37v26.26h-7.48Z'/%3E%3C/g%3E%3C/svg%3E");
  background-color: var(--tertiary-l-2);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: rotate(90deg);
  position: absolute;
  left: -2.8rem;
  top: 1rem;
}
.donor-list__content, .donor-list__empty {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: all var(--transition-timing);
}
.donor-list__content {
  list-style: none;
  margin: 0;
}
.donor-list[open]::details-content {
  block-size: auto;
}
.donor-list[open] .donor-list__toggle::before {
  transform: rotate(180deg);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>') no-repeat center;
}
.donor-list[open] .donor-list__content-wrapper {
  grid-template-rows: 1fr;
}
.donor-list[open] .donor-list__content,
.donor-list[open] .donor-list__empty {
  opacity: 1;
  transform: translateY(0);
  padding-block-start: 1rem;
}
.donor-list__item {
  padding: 0.5rem 0;
}

/* #endregion Donor List */
/* #endregion Crowdfunding */
/* #region News/Projekte Archive */
.card-news__wrapper:first-child {
  grid-column: 1/3;
  grid-row: 1/-5;
  /* Mobile landscape styles */
}
.card-news__wrapper:first-child .card-news {
  position: sticky;
  top: var(--space-m);
  left: 0;
}
@media (max-width: 767px) {
  .card-news__wrapper:first-child {
    grid-column: auto;
    grid-row: auto;
  }
  .card-news__wrapper:first-child .card-news {
    position: static;
  }
}

/* #endregion News/Projekte Archive */
/* #region Mitglied werden */
/* #region Membership Steps */
.membership-steps__steps-arrow-1 {
  position: absolute;
  width: 7rem;
  right: -10%;
  top: 26%;
  transform: scaleX(-1) rotate(85deg);
}
@media (width <= 1140px) {
  .membership-steps__steps-arrow-1 {
    right: -12%;
    top: 18%;
  }
}
@media (width <= 855px) {
  .membership-steps__steps-arrow-1 {
    top: 38%;
  }
}
@media (width <= 553px) {
  .membership-steps__steps-arrow-1 {
    right: 6%;
    top: 102%;
    transform: scaleX(1) rotate(41deg);
  }
}

.membership-steps__steps-arrow-2 {
  position: absolute;
  width: 7rem;
  right: -10%;
  top: 26%;
  transform: rotate(-94deg);
}
@media (width <= 1140px) {
  .membership-steps__steps-arrow-2 {
    right: -12%;
    top: 18%;
  }
}
@media (width <= 855px) {
  .membership-steps__steps-arrow-2 {
    transform: rotate(57deg);
    top: 105%;
    right: 72%;
  }
}
@media (width <= 553px) {
  .membership-steps__steps-arrow-2 {
    right: 4%;
    top: 102%;
    transform: scaleX(1) rotate(41deg);
  }
}

/* #endregion Membership Steps */
/* #region Membership Features */
.card-membership-features {
  background-color: var(--primary);
}
.card-membership-features:nth-child(odd) {
  background-color: var(--tertiary-d-1);
}

/* #endregion Membership Features */
/* #region Membership Form */
.membership-form .wp-block-columns.is-layout-flex {
  margin-block-end: 0;
}
.membership-form .jet-form-builder-row {
  margin-block-end: 1rem;
}
.membership-form .jet-form-builder-row:not(:first-child) {
  margin-block-start: 1rem;
}
.membership-form .jet-form-builder-row.field-has-error .error-message {
  font-size: var(--text-s);
}
.membership-form .jet-form-builder__field-wrap :not(.for-radio) span {
  display: inline;
  padding-inline-start: 3rem;
  position: relative;
}
.membership-form .jet-form-builder__field-wrap :not(.for-radio) span::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0.3rem;
}
.membership-form .jet-form-builder__field-wrap span {
  color: var(--text-body);
}
.membership-form .jet-form-builder__field-wrap span:before {
  border-color: var(--primary);
}
.membership-form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
  border-color: var(--tertiary-l-1);
  background-color: var(--tertiary-l-1);
}
.membership-form .field-type-checkbox-field .jet-form-builder__field.text-field {
  border-color: var(--primary);
}
.membership-form .field-type-radio-field .jet-form-builder__field-label.for-radio :checked + span::before {
  border-color: var(--tertiary-l-1);
  background-color: var(--tertiary-l-1);
}
.membership-form .field-type-radio-field .jet-form-builder__field.text-field {
  border-color: var(--primary);
}
.membership-form .jet-form-builder__fields-group {
  gap: 0;
}

/* #endregion Membership Form */
/* #endregion Mitglied werden */
/* #region Spenden */
.card-help-overview__wrapper {
  counter-increment: item;
  /*-- Styles applied to all elements multiples of 4 + 3 --*/
  /*-- Styles applied when mouse hover or focus on the card --*/
}
.card-help-overview__wrapper:nth-child(4n+3) {
  margin-left: auto;
}
@media (max-width: 991px) {
  .card-help-overview__wrapper:nth-child(4n+3) {
    margin-left: 0;
  }
}
.card-help-overview__wrapper .card-help-overview__link {
  /* -- Counter styles -- */
  /* In "content" of the pseudo-element, "decimal-leading-zero" is used so that it has a 0 in each number */
}
.card-help-overview__wrapper .card-help-overview__link .card-help-overview:before {
  content: counter(item, decimal-leading-zero);
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 120%;
  color: var(--light-20);
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  transition: color 0.3s ease;
}
.card-help-overview__wrapper .card-help-overview__link:hover, .card-help-overview__wrapper .card-help-overview__link:focus {
  /*.card-help-overview__heading {
  color: var(--light);
  }

  .card-help-overview__description {
  color: var(--light-80);
  }*/
}
.card-help-overview__wrapper .card-help-overview__link:hover .card-help-overview, .card-help-overview__wrapper .card-help-overview__link:focus .card-help-overview {
  background-color: var(--tertiary-l-3);
}
.card-help-overview__wrapper .card-help-overview__link:hover .card-help-overview:before, .card-help-overview__wrapper .card-help-overview__link:focus .card-help-overview:before {
  color: var(--dark-20);
}

.card-help-overview__wrapper.no-counter .card-help-overview::before {
  content: none;
  counter-increment: none;
}

/* #endregion Spenden */
/* #region Formulare allgemein	 */
.donation-form-single .wp-block-columns,
.contact-form .wp-block-columns {
  gap: 0;
  column-gap: var(--space-s);
  margin-block-end: 0;
}

/* #endregion Formulare allgemein */
/* #region Keyframes */
@keyframes box-shadow-pulse-light {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--light-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--light-rgb), 0.3);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(var(--light-rgb), 0);
  }
}
@keyframes box-shadow-pulse-primary {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--tertiary-rgb), 0.3);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(var(--tertiary-rgb), 0);
  }
}
@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.1) translate(-1%, -1%);
  }
}
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
/* #endregion Keyframes *//*# sourceMappingURL=style.css.map */