@import url("font.css");
@import url("header.css");
@import url("footer.css");

:root {
  --color-white: white;
  --color-black: black;

  --color-primary: rgba(238, 129, 99, 1);
  --color-secondary: #ea593d;
  --color-tertiary: #000;
  --color-footer: rgba(252, 247, 244, 1);
  --color-bg-beige: rgb(252, 247, 237);
  --color-caption: rgba(104, 102, 103, 0.8);
  --color-light-gray: rgba(192, 191, 192, 0.8);

  --header-gap: 80px;
}

body,
html {
  overflow-x: hidden;
}

/*
* setup colors
*/
.color-white {
  color: var(--color-white);
}

.color-black {
  color: var(--color-black);
}

.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-tertiary {
  color: var(--color-tertiary);
}

/*
* setup backgrounds
*/
.bg_color-primary {
  background-color: var(--color-primary);
}

.bg_color-secondary {
  background-color: var(--color-secondary);
}

.bg_color-tertiary {
  background-color: var(--color-tertiary);
}

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

/*
* default HTML adjustments
*/
html,
.body,
body p {
  color: var(--color-black);
}

/* p {
  margin-bottom: 0 !important;
} */

.wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/*
* individual HTML adjustments
*/
body,
html {
  overflow-x: none;
}

button {
  background-color: transparent !important;
  border: none !important;
}

/* need to adjust attributes */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: white;
  text-decoration: none;
  font-family: var(--font-family);
  cursor: pointer;
}

.btn-text {
  color: #fff;
  box-shadow: none;
  text-decoration: none;
  font-size: clamp(1rem, 3vw, 2.1875rem);
  line-height: clamp(1.25rem, 3.5vw, 2.625rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  transition: filter 0.3s ease-in-out;
}

.btn-text:hover {
  filter: brightness(0.85);
}

.btn-text__bg {
  position: absolute;
  display: block;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%) scale(1.3, 1.3) !important;
}

.btn-project {
  color: #fff;
  box-shadow: none;
  text-decoration: none;
  font-size: clamp(1rem, 3vw, 2.1875rem);
  line-height: clamp(1.25rem, 3.5vw, 2.625rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 0;
  background-color: transparent !important;
  transition: filter ease-in-out;
  padding: 5px 0px 0px;
}
.btn-project:hover {
  filter: brightness(0.85);
}

.button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--color-white) !important;
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 2.1875rem);
  line-height: clamp(1.25rem, 3.5vw, 2.625rem);
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  transition: filter ease-in-out;
}
.button-primary:hover {
  filter: brightness(0.85);
}

.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--btn-color);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='58' viewBox='0 0 460 58' fill='none'><path d='M0 58L16.3754 6.97468H29.7735L413.851 0L460 58H0Z' fill='white'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='58' viewBox='0 0 460 58' fill='none'><path d='M0 58L16.3754 6.97468H29.7735L413.851 0L460 58H0Z' fill='white'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transform-origin: center;
}

.btn-hero {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 5vw, 3.43rem);
  color: var(--color-primary);
  padding: 1rem 2rem;
  line-height: 1.25;
  z-index: 1;
}

.btn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.btn-foerdermitglied {
  display: flex !important;
  justify-content: center !important;
}

.wp-block-button__link + .btn-foerdermitglied {
  color: #fff;
  box-shadow: none;
  text-decoration: none;
  font-size: clamp(1rem, 3vw, 2.1875rem);
  line-height: clamp(1.25rem, 3.5vw, 2.625rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

.wp-block-button__link::before + .btn-foerdermitglied {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="771" height="144" viewBox="0 0 771 144"><path d="M15.7274 12.1996L0 68.1146L32.1697 144L196.95 131.519L277.374 144L748 131.519L771 26.6782L629.811 0L15.7274 12.1996Z" fill="%23C55099"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

/* adjust if needed */
figure {
  margin: 0 0 0 0 !important;
}

.nav-link {
  padding: var(--bs-nav-link-padding-y) 0 !important;
}

a:hover {
  cursor: pointer !important;
}

.caption,
.wp-element-caption {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--color-caption);
}

.wp-element-caption {
  padding-top: 1rem !important;
}

.parallax-fly-up {
  will-change: transform;
  transform-origin: center center;
  pointer-events: none;
}

@media (max-width: 768px) {
  .btn-text__bg {
    transform: translate(-50%, -50%) !important;
    width: 12rem !important;
  }
}

/*
* Fade in animation
*/
.fade_in_element {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.float-wobble {
  animation: floatWobble 2s ease-in-out infinite;
  will-change: transform;
}

.jet-form-builder__radio-item label span {
  display: block;
  line-height: 1.3;
}

#nachhaltig,
#werte,
#wochenkarte,
#philosophie,
#lieferanten {
  scroll-margin-top: 13rem;
}

@media (max-width: 768px) {
  #nachhaltig,
  #werte,
  #wochenkarte,
  #philosophie,
  #lieferanten {
    scroll-margin-top: 6rem;
  }
}

.wp-block-image img {
  max-height: 40rem;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.header-hight {
  margin-top: 3rem !important;
}

.layout-block.show_border {
  position: relative;
}

.layout-block.show_border::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 21px;

  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1922 21' xmlns='http://www.w3.org/2000/svg'><path d='M1356 11.5564L0 20.9453V0.000867844L845 5.05642L1428 0.000867844L1922 5.05642V20.9453L1356 11.5564Z' fill='%23F6C1AF'/></svg>")
    no-repeat bottom center;

  background-size: cover;
}

/*
**************************************
default Theme settings: DO NOT change 
**************************************
*/

/* Mehr Luft links und rechts */
@media (max-width: 1500px) {
  .container-lg {
    padding-left: clamp(2rem, 7vw, 8rem) !important;
    padding-right: clamp(2rem, 7vw, 8rem) !important;
  }
}
@media (max-width: 992px) {
  .container-lg {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

.layout-60 .layout-60__inner {
  width: 60%;
  max-width: 1200px !important;
}

@media (max-width: 1200px) {
  .layout-60__inner {
    width: 80%;
    max-width: none;
  }
}

@media (max-width: 1024px) {
  .layout-60 .layout-60__inner {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .layout-60 .layout-60__inner {
    width: 100%;
  }
}

.block-my-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.block-my-default {
  padding-top: 2.1875rem !important;
  padding-bottom: 2.1875rem !important;
}
.block-my-80-0 {
  padding-top: 2.1875rem !important;
  padding-bottom: 0 !important;
}
.block-my-0-80 {
  padding-top: 0 !important;
  padding-bottom: 2.1875rem !important;
}

@media (min-width: 992px) {
  .block-my-default {
    padding-top: 4.375rem !important;
    padding-bottom: 4.375rem !important;
  }
  .block-my-80-0 {
    padding-top: 4.375rem !important;
    padding-bottom: 0 !important;
  }
  .block-my-0-80 {
    padding-top: 0 !important;
    padding-bottom: 4.375rem !important;
  }
  .block-my-extra {
    padding-top: 9.375rem !important;
    padding-bottom: 9.375rem !important;
  }
}

.has-extra-padding.block-my-default {
  padding-top: 0;
  padding-bottom: calc(2.1875rem * 2) !important;
}

.has-extra-padding.block-my-80-0 {
  padding-top: calc(2.1875rem * 2) !important;
  padding-bottom: 0 !important;
}

.has-extra-padding.block-my-0-80 {
  padding-top: 0 !important;
  padding-bottom: calc(2.1875rem * 2) !important;
}

.has-extra-padding.block-my-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* extra padding top */
.has-extra-padding-top.block-my-default {
  padding-top: calc(2.1875rem * 2) !important;
}

.has-extra-padding-top.block-my-80-0 {
  padding-top: calc(2.1875rem * 2) !important;
}

.has-extra-padding-top.block-my-0-80 {
  padding-top: 0 !important;
}

.has-extra-padding-top.block-my-none {
  padding-top: 0 !important;
}

/* extra padding bottom */
.has-extra-padding-bottom.block-my-default {
  padding-bottom: calc(2.1875rem * 2) !important;
}

.has-extra-padding-bottom.block-my-80-0 {
  padding-bottom: 0 !important;
}

.has-extra-padding-bottom.block-my-0-80 {
  padding-bottom: calc(2.1875rem * 2) !important;
}

.has-extra-padding-bottom.block-my-none {
  padding-bottom: 0 !important;
}

@media (min-width: 992px) {
  /* ---- EXTRA PADDING – oben & unten ---- */
  .has-extra-padding.block-my-default {
    padding-top: calc(4.375rem * 2) !important;
    padding-bottom: calc(4.375rem * 2) !important;
  }

  .has-extra-padding.block-my-80-0 {
    padding-top: calc(4.375rem * 2) !important;
    padding-bottom: 0 !important;
  }

  .has-extra-padding.block-my-0-80 {
    padding-top: 0 !important;
    padding-bottom: calc(4.375rem * 2) !important;
  }

  .has-extra-padding.block-my-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ---- EXTRA PADDING – NUR OBEN ---- */
  .has-extra-padding-top.block-my-default,
  .has-extra-padding-top.block-my-80-0 {
    padding-top: calc(4.375rem * 2) !important;
  }

  .has-extra-padding-top.block-my-0-80,
  .has-extra-padding-top.block-my-none {
    padding-top: 0 !important;
  }

  /* ---- EXTRA PADDING – NUR UNTEN ---- */
  .has-extra-padding-bottom.block-my-default,
  .has-extra-padding-bottom.block-my-0-80 {
    padding-bottom: calc(4.375rem * 2) !important;
  }

  .has-extra-padding-bottom.block-my-80-0,
  .has-extra-padding-bottom.block-my-none {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 1920px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1420px;
  }
}

@media (min-width: 1720px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 1520px)/2);
  }
}

.dw_padding_left {
  padding-left: max(0px, (100vw - 1320px)/2);
}

.dw_padding_right {
  padding-right: max(0px, (100vw - 1320px)/2);
}

.dw_margin_left {
  margin-left: max(0px, (100vw - 1320px)/2);
}

.dw_margin_right {
  margin-right: max(0px, (100vw - 1320px)/2);
}

.dw_margin_left_child .has_content:first-child {
  padding-left: max(0px, (100vw - 1320px)/2);
}

.dw_margin_right_child .has_content:last-child {
  margin-right: max(0px, (100vw - 1320px)/2);
}

@media only screen and (min-width: 992px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 960px)/2);
  }

  .dw_padding_right {
    padding-right: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_left {
    margin-left: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_right {
    margin-right: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_left_child .has_content:first-child {
    padding-left: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_right_child .has_content:last-child {
    margin-right: max(0px, (100vw - 960px)/2);
  }
}

@media only screen and (min-width: 1140px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 960px)/2);
  }

  .dw_padding_right {
    padding-right: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_left {
    margin-left: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_right {
    margin-right: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_left_child .has_content:first-child {
    padding-left: max(0px, (100vw - 960px)/2);
  }

  .dw_margin_right_child .has_content:last-child {
    margin-right: max(0px, (100vw - 960px)/2);
  }
}

@media only screen and (min-width: 1200px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 1140px)/2);
  }

  .dw_padding_right {
    padding-right: max(0px, (100vw - 1140px)/2);
  }

  .dw_margin_left {
    margin-left: max(0px, (100vw - 1140px)/2);
  }

  .dw_margin_right {
    margin-right: max(0px, (100vw - 1140px)/2);
  }

  .dw_margin_left_child .has_content:first-child {
    padding-left: max(0px, (100vw - 1140px)/2);
  }

  .dw_margin_right_child .has_content:last-child {
    margin-right: max(0px, (100vw - 1140px)/2);
  }
}

@media only screen and (min-width: 1400px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 1320px)/2);
  }

  .dw_padding_right {
    padding-right: max(0px, (100vw - 1320px)/2);
  }

  .dw_margin_left {
    margin-left: max(0px, (100vw - 1320px)/2);
  }

  .dw_margin_right {
    margin-right: max(0px, (100vw - 1320px)/2);
  }

  .dw_margin_left_child .has_content:first-child {
    padding-left: max(0px, (100vw - 1320px)/2);
  }

  .dw_margin_right_child .has_content:last-child {
    margin-right: max(0px, (100vw - 1320px)/2);
  }
}

@media only screen and (min-width: 1920px) {
  .dw_padding_left {
    padding-left: max(0px, (100vw - 1720px)/2);
  }

  .dw_padding_right {
    padding-right: max(0px, (100vw - 1720px)/2);
  }

  .dw_margin_left {
    margin-left: max(0px, (100vw - 1720px)/2);
  }

  .dw_margin_right {
    margin-right: max(0px, (100vw - 1720px)/2);
  }

  .dw_margin_left_child .has_content:first-child {
    padding-left: max(0px, (100vw - 1720px)/2);
  }

  .dw_margin_right_child .has_content:last-child {
    margin-right: max(0px, (100vw - 1720px)/2);
  }
}

@media only screen and (max-width: 992px) {
  .dw_padding_left {
    padding-left: 24px;
    padding-right: 24px;
  }

  .dw_padding_right {
    padding-right: 24px;
    padding-left: 24px;
  }

  .dw_margin_left {
    margin-left: 24px;
  }

  .dw_margin_right {
    margin-right: 24px;
  }

  h1{
    hyphens: auto;
  }
}

@media only screen and (min-width: 1920px) {
  .offcanvas-body.dw_padding_left {
    padding-left: 48px;
  }
}