/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/vars.css ***!
  \****************************************************************/
:root {
  --white: #fff;
  --black: #000;

  --yellow: #ffea00;
  --grey-yellow: #f3efeb;

  --green: #00e575;
  --grey-green: #e8f2e8;
  --red: #d83410;
  --blue: #5a38f6;
  --grey-blue: #f2ebff;

  --accent-color: var(--yellow);
  --text-on-accent-color: var(--black);
  --grey: var(--grey-yellow);

  --font-family-main: "Plex", sans-serif;
  --font-family-mainBold: "PlexBold", sans-serif;
  --font-family-heading: "Poppins", sans-serif;

  --header-height: 4rem;

  --shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  --border: 1px var(--black) solid;
  --border-radius-s: 0.4rem;
  --border-radius: 1rem;

  --font-factor-xxl: (45 / 16);
  --font-factor-xl: (30 / 16);
  --font-factor-l: (22 / 16);
  --font-factor-s: (12 / 16);

  --font-size-xxl: calc(var(--font-size-m) * var(--font-factor-xxl));
  --font-size-xl: calc(var(--font-size-m) * var(--font-factor-xl));
  --font-size-l: calc(var(--font-size-m) * var(--font-factor-l));
  --font-size-m: clamp(1rem, min(3vh, 1.9vw), 1.5rem);
  --font-size-s: calc(var(--font-size-m) * var(--font-factor-s));

  --line-height: 1.5;

  --card-max-width: 450px;
  --content-width: 900px;
  --content-vertical-padding: 3.5em;

  --focus-shadow: 0 0 0 4px var(--accent-color);
}

@media (min-height: 800px) {
  :root {
    --header-height: 5rem;
  }
}

@media (max-height: 700px) {
  :root {
    --content-vertical-padding: 3em;
  }
}

@font-face {
  font-family: "Poppins";
  src: url(.././build/Poppins-Regular.woff);
}

@font-face {
  src: url(.././build/Poppins-Bold.woff);
  font-family: "Poppins";
  font-weight: bold;
}

@font-face {
  font-family: "Plex";
  src: url(.././build/IBMPlexMono-Regular.woff2);
}

@font-face {
  font-family: "Plex";
  src: url(.././build/IBMPlexMono-Italic.woff2);
  font-style: italic;
}

@font-face {
  font-family: "Plex";
  src: url(.././build/IBMPlexMono-Bold.woff2);
  font-weight: bold;
}

@font-face {
  font-family: "Plex";
  src: url(.././build/IBMPlexMono-BoldItalic.woff2);
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "PlexBold";
  src: url(.././build/IBMPlexMono-Bold.woff2);
}

@font-face {
  font-family: "PlexBold";
  src: url(.././build/IBMPlexMono-BoldItalic.woff2);
  font-style: italic;
}

/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/layout.css ***!
  \******************************************************************/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body.menu-expanded {
  overflow: hidden;
}

.mainContent {
  margin-top: calc(
    var(--header-height) + var(--wp-admin--admin-bar--height, 0rem)
  );

  padding: var(--content-vertical-padding) 1rem;
  font-size: var(--font-size-m);
  overflow-wrap: break-word;
}

/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/footer.css ***!
  \******************************************************************/
.footer {
  font-size: var(--font-size-m);
}

.footer-black,
.footer-logos {
  padding: var(--content-vertical-padding) 1rem;
}

.footer-black {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  background: var(--black);
  color: var(--white);
}

.footer-menu a:hover {
  box-shadow: inset 0 -2px 0 currentColor;
  text-decoration: none;
}

.footer-menu-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem 4rem;
  font-weight: bold;
}

@media (max-width: 600px) {
  .footer-menu-list {
    flex-direction: column;
  }
}

[class^="footer-text"] {
  line-height: var(--line-height);
  margin: 1em 0 2em;
}

[class^="footer-text"] p {
  margin: 0;
}

@media (max-width: 700px) {
  .footer-text-wide {
    display: none;
  }
}

@media (min-width: 701px) {
  .footer-text-small {
    display: none;
  }
}

.footer-copyright {
  font-size: var(--font-size-s);
}

.footer-black-inner,
.footer-logos-inner {
  width: var(--content-width);
  max-width: calc(100vw - 2rem);
  margin: 0 auto;
}

.footer-menu a:not(:hover) {
  text-decoration: none;
}

.footer-logos-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-logos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
}

.footer-logos a {
  display: block;
}

.footer-logos-logo {
  object-fit: contain;
  width: auto;
  height: auto;
}

.footer-logos-BUMV {
  height: 6rem;
}

.footer-logos-BMV {
  height: 2rem;
}

.footer-logos-slowfood {
  height: 4rem;
}

.footer-logos-bundesprogramm {
  width: 9rem;
}

@media (min-width: 500px) {
  .footer-logos-container {
    flex: 0 1 auto;
  }

  .footer-logos-BUMV {
    height: 8rem;
  }

  .footer-logos-BMV {
    height: 3rem;
  }
}

@media (min-width: 900px) {
  .footer-logos-container {
    gap: 4rem;
  }

  .footer-logos-slowfood {
    height: 5rem;
  }

  .footer-logos-bundesprogramm {
    width: 10rem;
  }

  .footer-logos-BUMV {
    height: 9rem;
  }

  .footer-logos-BMV {
    height: 3rem;
  }
}

/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/header.css ***!
  \******************************************************************/
.header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0);
  width: 100%;
  z-index: 10;
  background: var(--white);
  height: var(--header-height);
  padding: 1rem;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--content-width);
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

.header-menu-button {
  all: unset;
  position: relative;
  height: 1rem;
  width: 1.8rem;
  cursor: pointer;
}

.header-menu-button:focus-visible {
  box-shadow: 0 0 0 4px var(--accent-color);
}

.header-menu-button > div {
  position: absolute;
  width: 100%;
  height: 0.2rem;
  background: var(--black);
  top: calc(50% - 0.2rem);
  transition: transform 0.2s cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

.header-menu-button > div:first-child {
  transform: translateY(-130%);
}

.header-menu-button > div:last-child {
  transform: translateY(130%);
}

.header-menu-button[aria-expanded="true"] > div:last-child {
  transform: rotate(45deg);
}

.header-menu-button[aria-expanded="true"] > div:first-child {
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .header-menu-button:hover > div:first-child {
    transform: translateY(-250%);
  }

  .header-menu-button:hover > div:last-child {
    transform: translateY(250%);
  }

  .header-menu-button[aria-expanded="true"]:hover > div:last-child {
    transform: rotate(35deg);
  }

  .header-menu-button[aria-expanded="true"]:hover > div:first-child {
    transform: rotate(-35deg);
  }
}

.header-menu {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 100%;
  height: calc(100vh - 100%);
  width: 100%;
  left: 0;
  overflow: scroll;
  transition: 0.4s ease;
  background: var(--white);
  padding: 1rem;
}

.header-menu[aria-expanded="false"] {
  height: calc(0vh - 100%);
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
}

.header-menu a:not(:hover) {
  text-decoration: none;
}

.header-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-l);
  max-width: var(--content-width);
  flex: 1 0 auto;
}

.header-menu-link {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-family: var(--font-family-heading);
  text-decoration: none;
}

.header-menu-link div {
  position: relative;
  display: inline-block;
}

.header-menu-link:hover div:after {
  content: "";
  width: 100%;
  height: 0.2rem;
  display: block;
  position: absolute;
  background: var(--black);
  bottom: 0.22em;
}

.header-menu .section-button {
  padding: 2rem 3rem 2rem 1rem;
}

@media (max-height: 650px) {
  .header-menu .section-button {
    padding: 1rem 3rem 1rem 1rem;
  }
}

.header-logo-link {
  margin-bottom: -0.4rem;
}

.header-logo {
  display: block;
  width: auto;
}

@media (min-height: 800px) {
  .header-logo {
    height: 3rem;
  }
}

@media (min-width: 950px) {
  .header {
    padding: 1rem 2rem;
  }
}

/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/typography.css ***!
  \**********************************************************************/
body:not(.wp-admin),
.edit-post-visual-editor {
  font-family: var(--font-family-main);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  line-height: 1.3;
}

h1 {
  font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-l);
}

h4 {
  font-size: var(--font-size-m);
}

p {
  margin: 1rem 0;
}

a {
  color: inherit;
}

p a {
  box-shadow: inset 0 -2px 0 currentColor;
  text-decoration: none;
}

p a:hover {
  font-weight: bold;
}

input[type="mail"],
input[type="text"] {
  all: unset;
  box-sizing: border-box;
  border: var(--border);
  border-radius: var(--border-radius-s);
  padding: 0.5em;
}

:is(input[type="mail"], input[type="text"])::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

:is(input[type="mail"], input[type="text"]):focus {
  box-shadow: inset 0 0 0 1px var(--black);
}

input[type="checkbox"] {
  all: unset;
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  background-image: url(.././build/img/checkbox-unchecked.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

input[type="checkbox"]:checked {
  background-image: url(.././build/img/checkbox-checked.svg);
}

.checkbox-label:hover {
  cursor: pointer;
  text-decoration: underline;
}

.checkbox-label:hover input[type="checkbox"],
input[type="checkbox"]:focus-visible {
  background-image: url(.././build/img/checkbox-unchecked-focus.svg);
}

.checkbox-label:hover input[type="checkbox"]:checked,
input[type="checkbox"]:checked:focus-visible {
  background-image: url(.././build/img/checkbox-checked-focus.svg);
}

.checkbox-label:focus-within {
  text-decoration: underline;
}

/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/page.css ***!
  \****************************************************************/
.page-header {
  display: none;
}

/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/blocks.css ***!
  \******************************************************************/
.page-content p {
  line-height: var(--line-height);
  font-size: var(--font-size-m);
}

.wp-block-group {
  margin: 0 -1rem;
  padding: var(--content-vertical-padding) 1rem;
}

.illustration-intro + .wp-block-group {
  padding-top: 2em;
}

@media (max-height: 800px) {
  .illustration-intro + .wp-block-group {
    padding-top: 1.5em;
  }
}

:is(
    .page-content,
    .wp-block-group,
    .block-library-block__reusable-block-container
  )
  > * {
  margin-block: 0;
}

:is(
    .page-content,
    .wp-block-group,
    .block-library-block__reusable-block-container
  )
  > *
  + * {
  margin-block-start: var(--space, 1em);
}

:is(
    .page-content,
    .wp-block-group,
    .block-library-block__reusable-block-container
  )
  > h1
  + h2 {
  margin-block-start: 2.5em;
}

.wp-block-group > *:not(.cards, .alignfull),
.page-content
  > *:not(.cards, .alignfull, .wp-block-group, .illustration-intro) {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

:is(.wp-block-group),
:is(.wp-block-group) + * {
  margin-block-start: 0;
}

:is(.section-button) {
  --space: 2em;
}

:is(.section-button) + :is(.section-button) {
  --space: 0.5rem;
}

:is(.barchart, .infographic),
:is(.barchart, .infographic) + * {
  --space: 2em;
}

:is(.cards, .embed, .wp-block-image.alignfull, .start-section-buttons),
:is(.cards, .embed, .wp-block-image.alignfull, .start-section-buttons) + * {
  --space: calc(var(--font-size-m) * 2);
}

.page-content :is(.wp-block-group, .illustration-intro):last-child {
  margin-bottom: calc(var(--content-vertical-padding) * -1);
}

.page-content :is(.wp-block-group, .illustration-intro):first-child {
  margin-top: calc(var(--content-vertical-padding) * -1);
}

.wp-block-image.alignfull {
  font-size: var(--font-size-m);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0 1rem;
}

.wp-block-image.alignfull img {
  max-height: 70svh;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

.wp-block-image .wp-element-caption {
  max-width: var(--content-width);
  margin: 0 auto;
  margin-top: 0.5rem;
}

.wp-element-caption {
  font-size: var(--font-size-s);
}

.wp-block-embed {
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wp-block-embed iframe {
  display: block;
}

.wp-block-embed.is-provider-soundcloud {
  display: flex;
  flex-direction: column-reverse;
}

.wp-block-embed figcaption {
  font-size: var(--font-size-s);
  margin: 0;
  padding: 1rem;
}

.wp-block-buttons {
  display: flex;
  gap: 2em;
  align-items: baseline;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
  padding: 0;
  border: none;
  font-weight: normal;
  position: relative;
  padding-right: 1.6em;
}

:is(
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button .wp-block-button__link.is-style-outline
  ):after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0.05em;
  height: 1.3em;
  width: 1.2em;
  background-image: url(.././build/img/arrow-right.svg);
  background-repeat: no-repeat;
  transform: rotate(-45deg);
}

:is(
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button .wp-block-button__link.is-style-outline
  ):hover:after {
  animation: buttonArrow 1s ease-in-out infinite;
}

@keyframes buttonArrow {
  0%,
  100% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-45deg) translateX(0.25em);
  }
}

:is(
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button .wp-block-button__link.is-style-outline
  ):is(:hover, :focus-visible) {
  font-weight: bold;
}

:is(
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button .wp-block-button__link.is-style-outline
  ):is(:focus-visible) {
  text-decoration: underline;
}

.button,
.wp-element-button,
.wp-block-button__link {
  all: unset;
  display: block;
  font-weight: bold;
  background: var(--black);
  color: var(--white);
  padding: 0.8em 2em;
  border-radius: 2em;
  cursor: pointer;
  border: var(--border);
}

:is(.button, .wp-element-button, .wp-block-button__link):hover {
  background: transparent;
  color: var(--black);
}

:is(.button, .wp-element-button, .wp-block-button__link):focus-visible {
  box-shadow: 0 0 0 4px var(--accent-color);
}

.has-accent-background-color {
  color: var(--text-on-accent-color);
}

.has-blue-background-color {
  color: var(--white);
}

/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/quiz.css ***!
  \****************************************************************/
.wp-block-group .quiz {
  max-width: var(--card-max-width);
  padding-bottom: 1.8rem;
}

.quiz-container {
  display: grid;
  grid-template-columns: 1fr;
  perspective: 1000px;
}

.quiz-card {
  position: relative;
  grid-area: 1 / 1;
  transition: 0.5s transform;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.quiz-card-flipped {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  backface-visibility: hidden;
  background: var(--white);
  color: var(--black);
  padding: 1em;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.card-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: rotateY(180deg);
  z-index: 1;
}

.card-front {
  min-height: 100%;
}

.quiz-card-done {
  pointer-events: none;
  animation: done 1s forwards;
}

.quiz-card-done.quiz-card-flipped {
  animation: doneFlipped 1s forwards;
}

.quiz-card-next-01 {
  transform: translateZ(-7rem) translateY(8%);
}

.quiz-card-next-02,
.quiz-card-not-yet {
  transform: translateZ(-16rem) translateY(18%);
}

.quiz-card-not-yet {
  opacity: 0;
}

@keyframes done {
  0% {
  }
  50% {
    transform: translate(-120%) rotate(-10deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-120%) rotate(-10deg);
    visibility: hidden;
  }
}

@keyframes doneFlipped {
  0% {
    transform: rotateY(180deg) translateX(0%);
  }
  50% {
    transform: rotateY(180deg) translateX(120%) rotate(10deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotateY(180deg) translateX(120%) rotate(10deg);
    visibility: hidden;
  }
}

.quiz h3 {
  margin: 0;
}

.quiz-question {
  margin: 0;
  font-size: var(--font-size-l);
}

.quiz-question-small {
  font-size: var(--font-size-m);
}

.quiz-question-counter {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-s);
}

.quiz-explanation {
  padding: 0.5rem 0 0;
}

.quiz-explanation-answer {
  font-size: var(--font-size-s);
  margin-bottom: 0.5em;
}

.quiz-explanation-text,
.quiz-explanation-result {
  margin-top: 0.5em;
  font-size: var(--font-size-s);
}

.quiz-explanation-result {
  font-style: italic;
}

.quiz-button {
  --background: var(--white);
  --font-color: var(--black);
  --bubble-size: 2em;
  --border-color: var(--black);
  position: relative;
  box-sizing: border-box;
  min-height: var(--bubble-size);
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 5rem;
  padding: 0.5em 1em;
  text-align: center;
  font-weight: bold;
  backface-visibility: hidden;
  font-size: var(--font-size-m);
  background: var(--background);
  color: var(--font-color);
  z-index: 0;
}

.quiz-button-small {
  font-size: var(--font-size-s);
}

.quiz-button:focus-visible {
  box-shadow: var(--focus-shadow);
}

.quiz-button:is(:disabled, [aria-disabled="true"]) {
  cursor: auto;
}

.quiz-button:hover:not(:where(:disabled, .quiz-button-answer-draggable)),
.quiz-button-selected {
  --background: var(--black);
  --font-color: var(--white);
}

.quiz-button-wrong,
.quiz-button-correct {
  position: relative;
}

.quiz-button-wrong:after,
.quiz-button-correct:after {
  content: "";
  animation: blinkButtonIcon 0.5s;
  animation-iteration-count: 1;
  position: absolute;
  right: 0.2em;
  top: 50%;
  transform: translateY(-50%);
  height: var(--bubble-size);
  width: var(--bubble-size);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8em;
}

.quiz-button-correct:after {
  background-image: url(.././build/img/check.svg);
  background-color: var(--font-color);
}

.quiz-button-correct.quiz-button-selected:after {
  background-image: url(.././build/img/check-black.svg);
  background-color: var(--font-color);
}

.quiz-button:hover:not(:disabled):after {
  background-image: url(.././build/img/check-black.svg);
}

.quiz-button-wrong:after {
  background-image: url(.././build/img/cross.svg);
  background-color: var(--white);
}

.quiz-button-answer {
  text-align: left;
  padding-right: 2rem;
}

.quiz-button-answer-draggable {
  cursor: grab;
  position: relative;
}

@media (hover: none) {
  .quiz-button-answer-draggable:before {
    content: "";
    position: absolute;
    height: calc(100% + 1.2rem);
    width: calc(100% + 1.2rem);
    top: -0.6rem;
    left: -0.6rem;
  }
}

.quiz-button-answer-dragging {
  cursor: grabbing;
  z-index: 1;
}

.quiz-button-icon svg {
  display: block;
  stroke-width: 3px;
  margin-left: -0.2em;
}

@keyframes blinkButtonIcon {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.quiz-buttons-bottom-button {
  all: unset;
  cursor: pointer;
  text-align: center;
}

.quiz-buttons-bottom-button:focus-visible {
  box-shadow: var(--focus-shadow);
}

.quiz-buttons-bottom-button:hover {
  font-weight: bold;
}

.quiz-buttons-bottom {
  margin-top: auto;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-around;
  min-height: 2.4rem;
  margin-bottom: 0.5rem;
}

.quiz-buttons-bottom .quiz-button {
  text-align: center;
  padding-right: 1em;
}

.quiz-button-skip {
  font-size: var(--font-size-s);
}

.quiz-button-skip:disabled {
  visibility: hidden;
}

.quiz-status {
  display: flex;
  margin-block: 0.5em;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.quiz-status-dot {
  border-radius: 100%;
  width: 4px;
  height: 4px;
  background: var(--black);
}

.quiz-status-dot-done,
.quiz-status-dot-active {
  width: 10px;
  height: 10px;
}

.quiz-aria-announce {
  top: 0;
  left: -2px;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.quiz-confetti {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

/* TODO: get away with :has selector, not supported in FF yet! */
.wp-block-group:has(.quiz) {
  position: relative;
}

.quiz-summary-heading {
  margin-top: 0;
}

.quiz-summary-circle {
  transform: rotate(-90deg);
  stroke-dasharray: 502;
  stroke-dashoffset: 502;
  transition: all 3s;
  transition-delay: 0.5s;
}

.quiz-summary-illustration {
  --circle-margin: 10px;
  --circle-d: 80;
  --circle-d-px: calc(var(--circle-d) * 1px);
  --circle-c: calc(var(--circle-c) * 2 * 3.14);
  position: relative;
  height: calc(var(--circle-d-px) * 2);
  margin: 3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 0.3em;
}

.quiz-summary-illustration svg {
  position: absolute;
  top: calc(50% - var(--circle-d-px) - var(--circle-margin) / 2);
  left: calc(50% - var(--circle-d-px) - var(--circle-margin) / 2);
}

.quiz-summary-percentage {
  font-size: var(--font-size-xxl);
  font-family: var(--font-family-heading);
  font-weight: bold;
  margin-bottom: -0.5rem;
}

@media (min-width: 1000px) {
  .quiz-summary-percentage {
    font-size: var(--font-size-xl);
  }
}

@media (max-height: 700px) and (min-width: 1000px) {
  .quiz-button {
    font-size: var(--font-size-s);
  }

  .quiz-question {
    font-size: var(--font-size-m);
  }
}

.quiz-answer {
  margin-block: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-answer-description {
  margin: 0;
}

.quiz-answer-answer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.quiz-answer-buttons {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/cards.css ***!
  \*****************************************************************/
.cards {
  position: relative;
}

.cards-inner {
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  overflow-x: scroll;
  padding: 1rem max(1rem, calc((100vw - var(--card-max-width)) / 2)) 2rem;
  width: calc(100% + 2rem);
  gap: 1rem;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
  scrollbar-width: none;
}

.cards-inner::-webkit-scrollbar {
  display: none;
}

.card {
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  width: min(var(--card-max-width), calc(100vw - 4rem));
  background: var(--white);
  color: var(--black);
  min-height: 25rem;
  scroll-snap-align: center;
  overflow: hidden;
  /* fixes Safari bug of overflow hidden not working in the rounded corners */
  isolation: isolate;
  line-height: var(--line-height);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card.next {
  cursor: e-resize;
}

.card.prev {
  cursor: w-resize;
}

.card.next > *,
.card.prev > * {
  pointer-events: none;
}

.card-heading {
  margin-top: 0.5rem;
}

.card-image-container {
  position: relative;
}

.card-image-container-fill {
  margin: -1rem -3rem 0;
}

.card-image-container-fill .card-image {
  --offset-distance: calc(max(3vw, 1rem) * var(--offset));
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 6;
  object-fit: cover;
  transform: translateX(clamp(-2rem, var(--offset-distance) * 2, 2rem));
}

.card-image-container-transparent {
  --offset-distance: calc(min(6vw, 3em) * var(--offset));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  aspect-ratio: 1 / 1;
  width: calc(60% + 1rem);
  max-width: 18rem;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(var(--offset-distance));
}

.card-image-container-transparent .card-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translateX(clamp(-0.9em, var(--offset-distance), 0.9em));
  object-fit: contain;
}

.card-image-copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.2em 2.5rem 0.5em 0.5em;
  font-size: var(--font-size-s);
  background: rgba(255, 255, 255, 0.5);
}

.card:nth-child(3n) .card-image-container-transparent {
  background-image: url(.././build/img/card-background-1.svg);
}

.card:nth-child(3n + 1) .card-image-container-transparent {
  background-image: url(.././build/img/card-background-2.svg);
}

.card:nth-child(3n + 2) .card-image-container-transparent {
  background-image: url(.././build/img/card-background-3.svg);
}

.card-text {
  transform: translateX(calc(0.5rem * var(--offset)));
  font-size: var(--font-size-s);
  margin-bottom: 0.5em;
}

.card-text,
.card-text p {
  font-size: var(--font-size-s);
}

.card h4 {
  margin: 0.5rem 0 0;
}

.card-text ul {
  padding: 0 0 0 2em;
}

.card-text li + li {
  margin-top: 0.5em;
}

.card-text > * {
  margin: 0;
}

.card-text > * + * {
  margin-top: 1rem;
}

.card-illustration {
  position: relative;
  flex: 1 0 auto;
  margin-top: 1rem;
  min-height: 10em;
}

:is(.card-illustration-apples) {
  margin-inline: -2em;
  margin-bottom: -2em;
}

.card-illustration div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-illustration > div > div {
  background-size: cover;
  background-repeat: no-repeat;
  animation: float 4s infinite ease-in-out;
}

.card-illustration-watering > div > div {
  background-position: center;
  background-size: 100% auto;
}

:is(
    .card-illustration-infiltration,
    .card-illustration-jar,
    .card-illustration-jar-water
  )
  > div
  > div {
  background-size: contain;
  background-position: center;
}

.card-illustration > div:nth-child(2) > div {
  animation-delay: -1s;
}

.card-illustration > div:nth-child(3) > div {
  animation-delay: -2s;
}

.card-illustration > div:nth-child(4) > div {
  animation-delay: -3s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0.5rem);
  }
}

:is(.card-illustration-apples, .card-illustration-infiltration)
  > div:nth-child(1) {
  transform: translateX(calc(10% * var(--offset)));
}

:is(.card-illustration-apples, .card-illustration-infiltration)
  > div:nth-child(2) {
  transform: translateX(calc(20% * var(--offset)));
}

:is(.card-illustration-apples, .card-illustration-infiltration)
  > div:nth-child(3) {
  transform: translateX(calc(30% * var(--offset)));
}

:is(.card-illustration-apples, .card-illustration-infiltration)
  > div:nth-child(4) {
  transform: translateX(calc(40% * var(--offset)));
}

.card-illustration-apples > div:nth-child(1) > div {
  background-image: url(.././build/img/apples-1.svg);
}

.card-illustration-apples > div:nth-child(2) > div {
  background-image: url(.././build/img/apples-2.svg);
}

.card-illustration-apples > div:nth-child(3) > div {
  background-image: url(.././build/img/apples-3.svg);
}

.card-illustration-infiltration > div:nth-child(1) > div {
  background-image: url(.././build/img/infiltration-1.svg);
}

.card-illustration-infiltration > div:nth-child(2) > div {
  background-image: url(.././build/img/infiltration-2.svg);
}

.card-illustration-infiltration > div:nth-child(3) > div {
  background-image: url(.././build/img/infiltration-3.svg);
}

.card-illustration-jar > div:nth-child(1) > div {
  background-image: url(.././build/img/jar-1.svg);
}

.card-illustration-jar > div:nth-child(2) > div {
  background-image: url(.././build/img/jar-2.svg);
}

.card-illustration-jar > div:nth-child(3) > div {
  background-image: url(.././build/img/jar-3.svg);
}

.card-illustration-jar-water > div:nth-child(1) > div {
  background-image: url(.././build/img/jar-wasser-1.svg);
}

.card-illustration-jar-water > div:nth-child(2) > div {
  background-image: url(.././build/img/jar-wasser-2.svg);
}

.card-illustration-jar-water > div:nth-child(3) > div {
  background-image: url(.././build/img/jar-wasser-3.svg);
}

.card-illustration-watering > div:nth-child(1) > div {
  background-image: url(.././build/img/bewaesserung-1.svg);
}

.card-illustration-watering > div:nth-child(2) > div {
  background-image: url(.././build/img/bewaesserung-2.svg);
}

.card-illustration-watering > div:nth-child(3) > div {
  background-image: url(.././build/img/bewaesserung-3.svg);
}

.card-illustration-watering > div:nth-child(4) > div {
  background-image: url(.././build/img/bewaesserung-4.svg);
  animation-delay: 0s;
}

.cards-navigation-dots {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.cards-navigation-dot {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-navigation-dot:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--black);
}

.has-blue-background-color .cards-navigation-dot:after {
  background: var(--white);
}

.cards-navigation-dot-active:after {
  width: 10px;
  height: 10px;
}

.cards-navigation-arrows-prev,
.cards-navigation-arrows-next {
  all: unset;
  position: absolute;
  height: 3rem;
  width: 3rem;
  top: calc(50% - 1.5rem);
  cursor: pointer;
  background-image: url(.././build/img/arrow-right-minimal.svg);
  background-position: right 1rem center;
  background-repeat: no-repeat;
}

.cards-navigation-arrows-prev:hover,
.cards-navigation-arrows-next:hover {
  animation: sectionButtonHover ease-in-out 0.8s infinite;
}

@keyframes cardNextButtonHover {
  0%,
  100% {
    background-position: right 1rem center;
  }
  50% {
    background-position: right 0.5rem center;
  }
}

.cards-navigation-arrows-prev.hidden,
.cards-navigation-arrows-next.hidden {
  display: none;
}

.cards-navigation-arrows-prev {
  left: -0.5rem;
  transform: rotate(180deg);
}

.cards-navigation-arrows-next {
  right: -0.5rem;
}

.has-blue-background-color
  :is(.cards-navigation-arrows-prev, .cards-navigation-arrows-next) {
  filter: invert();
}

@media (hover: none) {
  .cards-navigation-arrows-prev,
  .cards-navigation-arrows-next {
    display: none;
  }
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/section-button.css ***!
  \**************************************************************************/
.section-button,
.editor-styles-wrapper .section-button {
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  justify-content: space-around;
  background: var(--accent-color);
  padding: 1em 3rem 1em 1em;
  text-decoration: none;
  border-radius: var(--border-radius-s);
  background-image: url(.././build/img/arrow-right.svg);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  min-height: 5rem;
}

.header-menu .section-button {
  background-size: calc(1em / var(--font-factor-l));
}

.edit-post-visual-editor .section-button {
  pointer-events: none;
}

.section-button:hover {
  animation: sectionButtonHover ease-in-out 0.8s infinite;
}

.section-button.visited {
  padding-left: 3.5em;
  background-color: var(--grey);
}

.section-button.visited:hover {
  background-color: var(--accent-color);
}

.section-button.visited:before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.75em);
  left: 1em;
  height: 1.5em;
  width: 1.5em;
  background: var(--black);
  border-radius: 50%;
  background-image: url(.././build/img/check.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.9em;
}

.section-button:not(.visited),
.section-button:hover {
  color: var(--text-on-accent-color);
}

.accent-background-dark .section-button:not(.visited),
.accent-background-dark .section-button:hover {
  background-image: url(.././build/img/arrow-right-white.svg);
}

.section-button-boden {
  --accent-color: var(--yellow);
}

.section-button-wasser {
  --accent-color: var(--blue);
  --text-on-accent-color: var(--white);
  color: var(--text-on-accent-color);
  background-image: url(.././build/img/arrow-right-white.svg);
}

.section-button-klima {
  --accent-color: var(--green);
}

@keyframes sectionButtonHover {
  0%,
  100% {
    background-position: right 1rem center;
  }
  50% {
    background-position: right 0.5rem center;
  }
}

.section-button-title {
  font-family: var(--font-family-heading);
  font-weight: bold;
  position: relative;
}

:is(.section-button-boden, .section-button-wasser, .section-button-klima)
  .section-button-title:before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}

.section-button-boden .section-button-title:before {
  background-image: url(.././build/img/Icons_Boden.svg);
}

.section-button-wasser .section-button-title:before {
  background-image: url(.././build/img/Icons_Wasser.svg);
  filter: invert(1) brightness(1.5);
}

.section-button-klima .section-button-title:before {
  background-image: url(.././build/img/Icons_Klima.svg);
}

.section-button-title,
.section-button-text {
  transition: transform 0.2s ease;
}

.section-button:hover .section-button-title,
.section-button:hover .section-button-text {
  transform: translateX(0.5rem);
}

.header-menu-item .section-button {
  position: relative;
}

.header-menu-item .section-button:before {
  content: "";
  position: absolute;
  right: 2em;
  left: 0;
  height: calc(100% + 0.5rem);
  top: -0.25rem;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

.header-menu-item .section-button:hover:before {
  animation: sectionButtonFloat ease-in-out 4s infinite;
  animation-delay: -1s;
}

@keyframes sectionButtonFloat {
  0%,
  100% {
    transform: translateY(0.25rem);
  }
  50% {
    transform: translateY(-0.25rem);
  }
}

.header-menu-item .section-button-boden:before {
  background-image: url(.././build/img/menu-button-boden.svg);
}

.header-menu-item .section-button-wasser:before {
  background-image: url(.././build/img/menu-button-wasser.svg);
}

.header-menu-item .section-button-klima:before {
  background-image: url(.././build/img/menu-button-klima.svg);
}

/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/downloads.css ***!
  \*********************************************************************/
.downloads {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.downloads-item {
  margin: 0;
}

.downloads-link {
  display: block;
  position: relative;
  padding: 0 3rem 0 0;
  text-decoration: none;
}

.downloads-link:after,
.downloads-link:before {
  --height: calc(1em * (21 / 16));
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: calc(50% - var(--height) / 2);
  width: calc(1em * (18 / 16));
  height: var(--height);
  background-image: url(.././build/img/download-arrow.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

.has-blue-background-color .downloads-link:after,
.has-blue-background-color .downloads-link:before {
  filter: invert();
}

.downloads-link:before {
  background-image: url(.././build/img/download-box.svg);
}

.downloads-link:hover:before {
  background-image: url(.././build/img/download-box-filled.svg);
}

.downloads-link div {
  transition: 0.2s all;
}

.downloads-link:hover div {
  transform: translateX(0.5rem);
}

.downloads-link:hover:after {
  animation: downloadsArrowHover 0.4s ease-out infinite alternate-reverse;
  filter: invert(1);
  mix-blend-mode: difference;
}

@keyframes downloadsArrowHover {
  0% {
    background-position: bottom -0.4rem center;
  }
  100% {
    background-position: bottom 0 center;
  }
}

.downloads-link:not(:hover) {
  text-decoration: none;
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/embed.css ***!
  \*****************************************************************/
.embeds,
.embed {
  --card-max-width: var(--content-width);
}

.embeds-inner {
  align-items: start;
}

.embed {
  padding: 0;
  min-height: 0;
  gap: 0;
}

.embed:not(.embeds *) {
  width: 100%;
}

.embed.soundcloud,
.embed.podcaster {
  display: flex;
  flex-direction: column-reverse;
}

.embed.youtube .embed-iframe-wrapper {
  width: 100%;
  aspect-ratio: 100 / 56.25;
}

.embed.soundcloud .embed-iframe-wrapper {
  width: 100%;
  height: 166px;
}

.embed.podcaster .embed-iframe-wrapper {
  width: calc(100% + 4rem);
  height: 240px;
  margin: -2rem;
}

@media (max-width: 630px) {
  .embed.podcaster .embed-iframe-wrapper {
    height: 400px;
  }
}

.embed.podcaster .embed-text {
  padding-bottom: 0;
}

.embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.embed-text {
  padding: 1rem;
}

.embed-text p {
  font-size: var(--font-size-s);
}

.embed h4,
.embed p {
  margin: 0;
}

.embed h4 + p {
  margin-top: 0.5rem;
}

.edit-post-visual-editor .embed iframe {
  pointer-events: none;
}

/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/illustration-intro.css ***!
  \******************************************************************************/
.illustration-intro {
  margin: 0 -1rem;
  padding: var(--content-vertical-padding) 1rem;
  position: relative;
}

.illustration-intro-start {
  height: 53svh;
}

.illustration-intro-start {
  --max-width: calc(var(--content-width) + 10em);
  max-width: var(--max-width);
  max-height: calc(var(--max-width) * (181 / 374) - 1em);
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

@media (max-width: 500px) {
  .illustration-intro-start {
    margin-top: calc(var(--content-vertical-padding) * -1 + 3em) !important;
  }
}

body.scrollTop:not(.menu-expanded) .illustration-intro {
  z-index: 10;
}

body.menu-collapsed .illustration-intro {
  /* deplay z-index fo menu animation to finish */
  animation: delayZIndex 0.3s linear;
}

@keyframes delayZIndex {
  from {
    z-index: 0;
  }
  to {
    z-index: 0;
  }
}

.illustration-intro-boden,
.illustration-intro-wasser,
.illustration-intro-wasser-heringe,
.illustration-intro-wasser-dorsch,
.illustration-intro-klima {
  height: calc(247px - 1rem);
}

.illustration-intro div {
  position: absolute;
  width: 100%;
  height: calc(100% + 2rem);
  top: -1rem;
  left: 0;
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  animation: illustrationFloat 5s ease-in-out infinite;
}

@media (max-height: 800px) {
  .illustration-intro div {
    height: calc(100% + 1rem);
    top: -0.5rem;
  }
}

.illustration-intro .illustration-intro-image:nth-last-of-type(1) {
  animation-delay: -1s;
}

.illustration-intro .illustration-intro-image:nth-last-of-type(2) {
  animation-delay: -2s;
}

.illustration-intro .illustration-intro-image:nth-last-of-type(3) {
  animation-delay: -4s;
}

.illustration-intro .illustration-intro-image:nth-last-of-type(4) {
  animation-delay: -3s;
}

.illustration-intro .illustration-intro-image:nth-last-of-type(5) {
  animation-delay: -0s;
}

.illustration-intro-boden div:nth-child(1) {
  background-image: url(.././build/img/titel-boden-1.svg);
}

.illustration-intro-boden div:nth-child(2) {
  background-image: url(.././build/img/titel-boden-2.svg);
}

.illustration-intro-boden div:nth-child(3) {
  background-image: url(.././build/img/titel-boden-3.svg);
}

.illustration-intro-wasser div:nth-child(1) {
  background-image: url(.././build/img/titel-wasser-1.svg);
}

.illustration-intro-wasser div:nth-child(2) {
  background-image: url(.././build/img/titel-wasser-2.svg);
}

.illustration-intro-wasser div:nth-child(3) {
  background-image: url(.././build/img/titel-wasser-3.svg);
}

@media (max-width: 800px) {
  .illustration-intro-wasser div {
    background-position: bottom 0px right -8.5rem;
  }
}

.illustration-intro-wasser-heringe div:nth-child(1) {
  background-image: url(.././build/img/titel-heringe-1.svg);
}

.illustration-intro-wasser-heringe div:nth-child(2) {
  background-image: url(.././build/img/titel-heringe-2.svg);
}

.illustration-intro-wasser-heringe div:nth-child(3) {
  background-image: url(.././build/img/titel-heringe-3.svg);
}

@media (max-width: 550px) {
  .illustration-intro-wasser-heringe div {
    background-position: bottom 0px left -29.5rem;
  }
}

.illustration-intro-wasser-dorsch div:nth-child(1) {
  background-image: url(.././build/img/titel-dorsch-1.svg);
}

.illustration-intro-wasser-dorsch div:nth-child(2) {
  background-image: url(.././build/img/titel-dorsch-2.svg);
}

.illustration-intro-wasser-dorsch div:nth-child(3) {
  background-image: url(.././build/img/titel-dorsch-3.svg);
}

@media (max-width: 600px) {
  .illustration-intro-wasser-dorsch div {
    background-position: bottom 0px left -8.5rem;
  }
}

.illustration-intro-klima div:nth-child(1) {
  background-image: url(.././build/img/titel-klima-1.svg);
}

.illustration-intro-klima div:nth-child(2) {
  background-image: url(.././build/img/titel-klima-2.svg);
}

.illustration-intro-klima div:nth-child(3) {
  background-image: url(.././build/img/titel-klima-3.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(1) {
  background-image: url(.././build/img/start-1.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(2) {
  background-image: url(.././build/img/start-2.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(3) {
  background-image: url(.././build/img/start-3.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(4) {
  background-image: url(.././build/img/start-4.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(5) {
  background-image: url(.././build/img/start-5.svg);
}

.illustration-intro-start .illustration-intro-image:nth-last-of-type(6) {
  background-image: url(.././build/img/start-6.svg);
}

.illustration-intro-boden {
  background-color: var(--yellow);
}

.illustration-intro-wasser {
  background-color: var(--blue);
}

.illustration-intro-wasser-heringe {
  background-color: var(--green);
}

.illustration-intro-wasser-dorsch {
  background-color: var(--blue);
}

.illustration-intro-klima {
  background-color: var(--green);
}

@keyframes illustrationFloat {
  0%,
  100% {
    transform: translateY(-0.3rem);
  }
  50% {
    transform: translateY(0.3rem);
  }
}

.illustration-intro-logo {
  background: var(--white);
  border: var(--white) 1rem solid;
  width: auto;
  height: calc(var(--header-height) * 1.3);
  z-index: 2;
  position: absolute;
  top: -1em;
  right: max(calc((100% - var(--content-width)) / 2 - 1rem), 0rem);
}

@media (max-width: 500px) {
  .illustration-intro-logo {
    top: -4em;
    background: transparent;
    border-color: transparent;
  }
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/start-section-button.css ***!
  \********************************************************************************/
.start-section-buttons {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.start-section-button {
  position: relative;
  border-radius: var(--border-radius-s);
  text-decoration: none;
  padding: 1rem;
  font-family: var(--font-family-heading);
  font-weight: bold;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: end;
  font-size: var(--font-size-l);
}

@media (max-width: 900px) {
  .start-section-button {
    font-size: var(--font-size-xl);
  }
}

.start-section-button > div {
  transition: transform 0.3s;
  background-image: url(.././build/img/arrow-right.svg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: calc(1em / var(--font-factor-l));
  width: 100%;
}

:is(
    .start-section-button-boden,
    .start-section-button-wasser,
    .start-section-button-klima
  )
  > div:before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  margin-right: 0.2em;
}

.start-section-button-boden > div:before {
  background-image: url(.././build/img/Icons_Boden.svg);
}

.start-section-button-wasser > div:before {
  background-image: url(.././build/img/Icons_Wasser.svg);
  filter: invert(1) brightness(1.5);
}

.start-section-button-klima > div:before {
  background-image: url(.././build/img/Icons_Klima.svg);
}

.start-section-button:hover > div {
  animation: startSectionButtonHover ease-in-out 0.8s infinite;
  transform: translateX(0.5rem);
}

.start-section-button-boden {
  background-color: var(--yellow);
}

.start-section-button-wasser {
  --text-on-accent-color: var(--white);
  background-color: var(--blue);
  color: var(--text-on-accent-color);
}

.start-section-button-wasser > div {
  background-image: url(.././build/img/arrow-right-white.svg);
}

.start-section-button-klima {
  background-color: var(--green);
}

@keyframes startSectionButtonHover {
  0%,
  100% {
    background-position: center right 0;
  }
  50% {
    background-position: center right 0.5em;
  }
}

.start-section-button:before {
  content: "";
  position: absolute;
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  inset: -0.5rem;
}

.start-section-button-boden:before {
  background-image: url(.././build/img/section-button-boden.svg);
}

.start-section-button-wasser:before {
  background-image: url(.././build/img/section-button-wasser.svg);
}

.start-section-button-klima:before {
  background-image: url(.././build/img/section-button-klima.svg);
}

@media (min-width: 800px) {
  .start-section-button-boden:only-child {
    grid-column: 1 / -1;
    aspect-ratio: 3.1 / 1;
  }
  .start-section-button-boden:only-child:before {
    background-image: url(.././build/img/section-button-boden-big.svg);
  }
}

/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/newsletter.css ***!
  \**********************************************************************/
.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.newsletter > * {
  grid-column: span 2;
}

.newsletter input[type="mail"],
.newsletter-name input[type="text"] {
  width: 100%;
}

.newsletter label + input {
  margin-top: 0.5em;
}

.newsletter-name {
  grid-column: span 1;
}

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

@media (min-width: 600px) {
  .newsletter .button {
    justify-self: end;
  }
}

.newsletter label {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
  font-size: var(--font-size-s);
}

.newsletter input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.1em;
}

.et-pb-contact-message {
  padding: 1em;
  background: var(--accent-color);
}

/*!*********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/bar-chart.css ***!
  \*********************************************************************/
.barchart-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: bold;
}

.barchart-bar {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.barchart-bar:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-color);
  width: var(--bar-width);
  height: 100%;
}

.barchart:not(.hide) .barchart-bar:after {
  transition-delay: 0.8s;
  transition-duration: 0.8s;
  transition-property: width;
  transition-timing-function: ease;
}

.barchart.hide .barchart-bar:after {
  width: 0;
}

.barchart:not(.hide) .barchart-bar:nth-child(1):after {
  transition-delay: 0.2s;
}

.barchart:not(.hide) .barchart-bar:nth-child(2):after {
  transition-delay: 0.4s;
}

.barchart:not(.hide) .barchart-bar:nth-child(3):after {
  transition-delay: 0.6s;
}

.barchart-bar:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  top: 50%;
  background: var(--black);
}

.barchart-percentage {
  position: relative;
  z-index: 1;
  padding: 0.5em 1em;
}

.barchart-percentage span {
  font-size: var(--font-size-xl);
}

.barchart-label {
  position: relative;
  z-index: 1;
  margin: 0.5em;
  text-align: right;
  line-height: 1;
}

.barchart-description {
  margin-top: 1em;
  font-size: var(--font-size-s);
}

@media (max-width: 900px) {
  .barchart-chart {
    margin-left: -1em;
  }
}

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/infographic.css ***!
  \***********************************************************************/
.infographic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.infographic-images {
  position: relative;
  width: 30rem;
  max-width: 100%;
}

.infographic-image {
  width: 100%;
  height: auto;
}

.infographic-image:not(.fixed) {
  animation: floatInfoGraphic 4s ease-in-out infinite;
}

.infographic-image:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.infographic-image:nth-child(2) {
  animation-delay: -1s;
}

.infographic-image:nth-child(3) {
  animation-delay: -2s;
}

.infographic-image:nth-child(4) {
  animation-delay: -3s;
}

.infographic-description {
  font-size: var(--font-size-s);
}

@keyframes floatInfoGraphic {
  0%,
  100% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0.5rem);
  }
}

/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./css/main.css ***!
  \****************************************************************/



/*# sourceMappingURL=main.b5e7042ec883ad9cf04b.css.map*/