/* Color Styles */
.blue {
  background-color: var(--kita-blue);
}
.red {
  background-color: var(--kita-red);
}
.yellow {
  background-color: var(--kita-yellow);
}
.orange {
  background-color: var(--kita-orange);
}
.green {
  background-color: var(--kita-green);
}

.text-section:not(:has(.button)) p {
  margin-block: var(--section-margin-tb);
  & + p {
    margin-top: 0 !important;
  }
}
/* Button Style */
.button {
  display: inline-flex;
  padding: 0.75em 1.5em;
  background-color: var(--clr-primary);
  color: var(--kita-white) !important;
  text-decoration: none;
  border-radius: 4px;
  font-size: var(--text-size-lg);
  transition: background-color 0.3s ease;
  & p {
    color: var(--kita-white) !important;
  }
}

.content-section {
  padding: var(--section-height) var(--body-mg-lr);
}
.content-section + .content-section {
  margin-top: var(--section-margin-tb) !important;
}

.content-section {
  padding: var(--section-height) var(--body-mg-lr);
  display: flex;
  justify-content: center;
  & p {
    color: var(--clr-primary);
    padding: unset !important;
  }
  & h2 {
    margin-bottom: unset !important;
  }
  & .wpb_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
  &.no-gap .wpb_wrapper {
    gap: unset !important;
  }
}

/* Flex Box mit 2 Spalten */
.flex-box .section_inner_margin,
.flex-box .full_section_inner {
  display: flex;
  max-width: 90vw;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  & > * {
    flex: 1;
    width: 100%;
  }
}
@media only screen and (max-width: 1000px) {
  .flex-box .section_inner_margin
  /*, .flex-box .full_section_inner*/ {
    flex-direction: column;
    & > * {
      text-align: center;
    }
  }
}

#intro .content-section {
  padding-block: 0 !important;
}
#intro.content-section {
  padding-block: var(--body-mg-lr);
}

/* Absolute Positioning von Images in einem row container */

/* Container */
.row-container {
  position: relative;
}
/* Images */
.floating-image {
  position: absolute !important;
  /* inset: 0; */
  width: fit-content !important;
  height: fit-content !important;

  &.left {
    left: 5% !important;
    top: 50% !important;
  }
  &.right {
    right: 5% !important;
    top: 50% !important;
  }
  &.top {
    top: 0 !important;
  }
  &.bottom {
    bottom: 0 !important;
  }
  &.center {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* Image Icon Sizes */

.icon-small img {
  width: 6vw !important;
  min-width: 100px !important;
}

.icon-md img {
  width: 10vw !important;
  min-width: 150px !important;
}

.icon-lg img {
  width: 15vw !important;
  min-width: 200px !important;
}

.icon-xl img {
  width: 20vw !important;
  min-width: 250px !important;
}

.icon-xxl img {
  width: 25vw !important;
  min-width: 300px !important;
}

/* Abstände von Stockholm Theme */

.vc_empty_space {
  height: 12rem !important;
  &.space-l {
    height: 24rem !important;
  }
}

@media only screen and (max-width: 1000px) {
  .vc_empty_space {
    height: 6rem !important;
    &.space-l {
      height: 12rem !important;
    }
  }
}

/* RESPONSIVE */

/* Mobile Header */

.mobile-only {
  display: none;
}
.desktop-only {
  display: block;
}