:root {
  --p-prime: #30cabb;
  --p-sec: #15746a;
  --p-bg: #f5f6fa;

  --bg-dark: #0c1514;
  --text-color: #0c1514 !important;
  --text-color-dark: #535b5a;
  --link-color: #30cabb !important;
  --gradient: linear-gradient(
    90deg,
    var(--p-sec) 4.25%,
    var(--p-prime) 93.67%
  ) !important;
  --shadow-cards: 0px 4px 15px #00000020;
  --shadow-cards-hover: 0px 4px 20px #00000060;
  --op-hover: 0.7;
  --card-edge: 8px;
  --animation-gradient: gradient 10s ease infinite;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
  --bs-body-font-family: var(--bs-font-sans-serif);
  --p-size: 1rem;
  --h1-size: 3rem;
  --h2-size: 1.7rem;
  --h3-size: 1.1rem;
  --h4-size: 1.2rem;
  --h5-size: 20rem;
}

/* ################# GLOBAL ######################## */

/* FONTS */
body,
html {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  background-color: var(--p-bg);
  font-size: clamp(14px, 3vw, 16px) !important;
  line-height: clamp(25px, 3vw, 35px) !important;
  background-color: var(--p-bg) !important;
}

h1,
h2,
h3,
h4,
h5,
p,
span,
a {
  color: var(--text-color) !important;
  padding: 0px;
  margin: 0px;
}
#impressum a,
#datenschutz a {
  color: var(--link-color) !important;
  text-decoration: underline !important;
}

p,
li {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;

  font-weight: 300;
}

p {
  width: 100%;
  margin: 0 !important;
  font-size: var(--p-size) !important;
  line-height: calc(var(--p-size) * 2) !important;
}

h1 {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 900 !important;
  font-size: var(--h1-size) !important;
  line-height: calc(var(--h1-size) * 1.2) !important;
}

h2 {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--h2-size);
  line-height: calc(var(--h2-size) * 1.2);
  letter-spacing: 1px;
}

h3 {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: var(--h3-size);
  line-height: calc(var(--h3-size) * 1.2);
  font-weight: 400;
}

/* H4 Sub Headline */

h4 {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: var(--h4-size) !important;
  line-height: calc(var(--h4-size) * 1.2) !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
/* H5 Headline */

.styled-title {
  margin-left: 25px !important;
}

.styled-title .sppb-addon-title:before {
  position: absolute;
  content: "";
  width: 16px !important;
  height: 4px !important;
  background: var(--p-prime) !important;
  border-radius: 100px;
  bottom: 10px;
  left: 0;
  margin-left: -25px !important;
}

/* Active State */
.active > a {
  font-weight: 900 !important;
  color: var(--p-prime) !important;
}

/* -----------  CONTAINER ----------- */
.sectionmin {
  width: 1400px !important;
  margin: 0 auto !important;
}
.padding-section {
  padding: 60px 0;
}
.sectionfull {
  width: 100% !important;
}

.full-mobile {
  padding: 120px 20% 120px 20% !important;
}
.hero-mobile {
  width: 100% !important;
  height: calc(100vh - 100px);
  max-height: 1000px;
  padding: 0px 0% 0px 20% !important;
}
.hero-mobile .sppb-container-inner,
.hero-mobile .sppb-row,
.hero-mobile .sppb-row-column {
  height: 100%;
}
.hero-mobile .sppb-column:nth-child(1) {
  height: 100%;
  align-items: flex-end;
}

.sec-margin-left {
  padding: 120px 0% 120px 5% !important;
}

.sec-margin {
  margin-right: 20% !important;
}

/* Navigation */
#sp-header {
  padding: 0 !important;
}
#sp-header .container-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 !important;
}

.offcanvas-inner {
  height: 100% !important;
}
.menu {
  display: flex;
  justify-content: center;
}
.menu li {
  text-align: center;
  display: inline-block;
  padding: 0 15px;
}

.sppb-panel-body {
  padding: 0px !important;
  border-top: 1px solid transparent;
}

.sppb-panel-heading {
  padding: 5px 0px !important;
  cursor: pointer;
  position: relative;
}

.sp-megamenu-parent > li > a:before,
.sp-megamenu-parent > li > span:before {
  background-color: var(--p-prime) !important;
  height: 2px !important;
}

/* ################# CUSTOM CLASS ######################## */
/* ALIGNMENT */
.content-center .sppb-row {
  display: flex;
  justify-content: space-evenly !important;
  padding-top: 5vh;
}

/* BTN */

.btn {
  border-radius: var(--card-edge) !important;
  min-width: 200px;
  color: var(--p-bg) !important;
  background: var(--gradient);
  background-size: 400% 400%;
  animation: var(--animation-gradient);
  transition: all 400ms ease-in-out;
  opacity: 1;
  font-weight: 900 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 24px !important;
}

.btn:hover {
  color: var(--p-bg) !important;
  opacity: 0.6;
  transition: all 400ms ease-in-out;
}

.btn-sec {
  color: var(--p-prime) !important;
  transition: all 400ms ease-in-out;
  font-weight: 900 !important;
  text-transform: uppercase;
}

.btn-sec:hover {
  color: var(--p-sec) !important;
  transition: all 400ms ease-in-out;
  opacity: var(--op-hover);
}

#btn-center .sppb-addon-content {
  display: flex;
  justify-content: center;
}

/* COLOR */

.color-prime {
  color: var(--p-prime) !important;
  font-weight: 900 !important;
}

.bg-blur {
  backdrop-filter: blur(40px);
}

/* ARROW */
.cta-arrow {
  margin: 15px 0 0 25%;
}

/* BOX */
/* Vorgehen */
#vorgehen-container .sppb-addon-wrapper,
#vorgehen-container .clearfix,
#vorgehen-container .sppb-addon,
#vorgehen-container .sppb-addon-content {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* Kunden */
#kunden-container .sppb-addon-wrapper,
#kunden-container .clearfix,
#kunden-container .sppb-addon,
#kunden-container .sppb-addon-content,
#kunden-container .sppb-media-content,
#kunden-container .sppb-addon-text,
#kunden-container .sppb-addon-text div {
  height: 100%;
}
#kunden-container .sppb-addon-content,
#kunden-container .sppb-media-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.vorgehen-box {
  border: var(--p-prime) solid 1px;
  margin: 15px 0;
  padding: 30px;
}
.vorgehen-box img {
  padding-bottom: 4px;
  max-width: 96px;
  min-width: 32px;
}

.vorgehen-box h4 {
  color: var(--p-prime) !important;
}

/* BORDER */
.border-sec li {
  margin: 0px !important;
  padding: 4% 0;
  border-bottom: solid 1px var(--text-color-dark) !important;
  list-style: none !important;
}

.border-links li {
  margin: 0px !important;
  padding: 5% 0;
  border-bottom: solid 1px var(--text-color-dark) !important;
  list-style: none !important;

  font-size: var(--h3-size) !important;
  line-height: var(--h3-size) !important;
  font-weight: 400 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.border-links h4 {
  margin: 0px !important;
  padding: 0 !important;
}

.border-links li:hover > h4 {
  color: var(--p-sec) !important;
  cursor: pointer;
  transition: all 400ms ease-in-out;
  opacity: var(--op-hover);
}

/* TOGGLE */
.toggle-custom span {
  font-weight: 400 !important;
}

/* CARDS */

.cards-shadow {
  box-shadow: var(--shadow-cards);
  overflow: hidden;
  transition: all 400ms;
}

.cards-shadow:hover {
  box-shadow: var(--shadow-cards-hover);
}

/* LISTE */
.list-custom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.list-custom p {
  text-align: left;
  padding: 0 15px 20px 8px;
}

.faq-titel {
  font-size: var(--p-size) !important;
  line-height: calc(var(--p-size) * 1.2) !important;
  font-weight: 400 !important;
  letter-spacing: 0px !important;
  text-decoration: solid;
  text-transform: none !important;
  margin: 10px 0 !important;
}
.sppb-panel-heading {
  display: flex;
  align-content: center;
  align-items: center;
  grid-gap: 8px !important;
}
.sppb-panel-heading:before {
  content: "+";
}
.sppb-panel-heading.active:before {
  content: "-";
}
.sppb-panel-collapse p {
  padding: 0px 0 15px 0px;
}

/* ################# BACKGROUND ######################## */
.com_spsimpleportfolio #sp-main-body {
  margin-top: 0px !important;
  padding-top: 0 !important;
}

#sec-04 {
  height: 40vh;
  margin-top: -40vh;
}

.top-fix {
  position: absolute !important;
  top: -100px;
}
.top-fix svg {
  height: calc(100vh + 100px) !important;
}

#hero-bg {
  opacity: 0.2;
}

/* ###################  NAVIGATION  ################### */

/* Navigation Off-Canvas */
#offcanvas-toggler {
  display: none;
}

.close-offcanvas {
  display: none !important;
}

.offcanvas-menu {
  background-color: var(--p-bg) !important;
  color: var(--text-color) !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li:not(:last-child) {
  border-bottom: 0px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dropdown */
.sp-dropdown {
  padding-top: 30px;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  box-shadow: var(--shadow-cards) !important;
  background-color: var(--p-bg) !important;
  border-radius: 0px !important;
  padding: 30px;
  overflow: hidden;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:before,
.sp-megamenu-parent
  .sp-dropdown
  li.sp-menu-item
  > span:not(.sp-menu-badge):before {
  height: 2px !important;
  background-color: var(--p-prime) !important;
}

/* Navigation */
#sp-header.header-sticky {
  background-color: var(--p-bg) !important;
  box-shadow: var(--shadow-cards) !important;
}

#sp-menu > .sp-column nav.sp-megamenu-wrapper {
  margin: 0px !important;
  display: flex;
  align-items: center;
}

.nav-counter {
  display: none !important;
}

.sp-megamenu-parent {
  margin: 0 !important;
}

.offcanvas-inner .sp-module:nth-child(2) {
  position: absolute;
  bottom: 10px;
  left: -30%;
}

#section-id-1602595266516 p {
  padding: 0 !important;
}
.cta-mobile {
  height: 60px !important;
  width: 60px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

/* ###################  Hero & Footer  ################### */
.hero {
  height: fit-content;
}

#sppb-addon-1682267907467 {
  width: 35px !important;
  height: 35px !important;
  margin: 0 auto;
  margin-top: 25px;
}
#sp-bottom1 {
  padding: 0 !important;
}
#sp-botto1 .gap-custom .sppb-row-column {
  padding: 0 !important;
}
#sp-footer,
#sp-bottom {
  background: #fff !important;
}
#sp-bottom {
  border-top: var(--p-bg) 2px solid;
}
#sp-bottom h4 {
  color: var(--p-prime) !important;
}
#sp-bottom .container {
  max-width: 100% !important;
}
#sp-bottom .menu {
  flex-direction: column !important;
  align-items: flex-start !important;
}
#sp-bottom .menu li {
  padding: 0 !important;
}

.sp-scroll-up {
  color: var(--text-color) !important;
  background: var(--gradient) !important;
  border-radius: 100% !important;
  opacity: var(--op-hover);
}

.sp-scroll-up:hover {
  opacity: 1;
}

/* ################# ANIMATION ######################## */

/* GRADIENT */

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* SVG */
#path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear alternate infinite;
}

#path-hero {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 2s linear alternate infinite;
}

.path-hero-box .sppb-addon-content {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.align .sppb-addon-content {
  display: flex;
  justify-content: center;
  height: 600px;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Nummer */
.num-animate span {
  font-weight: 900 !important;
  font-size: calc(var(--h1-size) * 3) !important;
  line-height: calc(calc(var(--h1-size) * 1.2) * 3) !important;
  color: var(--p-prime) !important;
}

/* ################# Project Cards ######################## */
.sppb-addon-wimble-person .sppb-wimble-person-info-wrapper {
  mix-blend-mode: normal;
  backdrop-filter: blur(50px);
  position: absolute;
  bottom: 0px;
  padding: 30px 0px 35px 30px !important;
  width: calc(100% - 0px) !important;
  background-color: #fff;
  color: var(--text-color);
}

.sppb-addon-wimble-person .sppb-person-information {
  margin-bottom: 0px !important;
  transition: all 0.6s ease;
}

.sppb-addon-wimble-person:hover .sppb-person-information {
  margin-bottom: 0px !important;
}

.sppb-addon-wimble-person .sppb-person-introtext {
  height: 0px;
  transition-property: height;
  transition: 0.7s !important;
}

.sppb-addon-wimble-person:hover .sppb-person-introtext {
  height: 120px;
}

.wimble-home-slider.sppb-addon-sp-slider .sp-slider-content-align-left:before {
  background: var(--gradient) !important;
  opacity: 0.5;
}

.sp-page-builder .page-content #section-id-1603724675051 {
  padding-top: 80px !important;
}

.sp-module-title {
  display: none;
}

.sppb-addon-wrapper {
  left: 0px !important;
}

/* ############### SECTIONS ###############*/
/* Team */
.team-section {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 5%;
}

/* SLIDER 2 */
.custom-slider {
  color: var(--p-bg) !important;
}

div.sp-slider .sp-indicator.line-indicator {
  background: var(--p-prime) !important;
}

.custom-slider .sppb-container {
  margin: 0px;
  margin-left: 20%;
  width: 100% !important;
}

.custom-slider {
  position: relative;
  padding: 0px;
  overflow: hidden !important;
}

.custom-slider .sp-slider-custom-dot-indecators {
  overflow: hidden !important;
  min-width: 80% !important;
  padding: 0px !important;
  backdrop-filter: blur(50px);
}

.custom-slider .sp-slider-custom-dot-indecators ul {
  width: 100% !important;
  padding-right: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.custom-slider ul li {
  margin: 0 0px;
  float: left;
  cursor: pointer;
  padding: 18px 0px 18px 30px;
  flex: 1 0 auto;
  min-width: 20% !important;
}

.custom-slider ul li.active {
  background-color: rgba(255, 255, 255, 0.05);
}

.custom-slider .sp-slider-text-thumb-number {
  font-weight: 900;
  font-size: 96px;
  line-height: 120px;
  letter-spacing: -0.5px;
  opacity: 0.7;
}

.custom-slider .sp-dot-indicator-wrap {
  display: none;
}

.custom-slider h2,
.custom-slider h4 {
  color: var(--p-bg) !important;
  text-shadow: #000 0 0 50px;
}

/* ############### PORTFOLIO ###############*/

/* Filter */
.sp-simpleportfolio .sp-simpleportfolio-filter ul > li a:after {
  background: none !important;
}

.btn-projekt {
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  background-size: 400% 400%;
  animation: var(--animation-gradient);
  transition: all 400ms ease-in-out;
  opacity: 0;
  box-shadow: var(--shadow-cards);
}
.sp-simpleportfolio-short-info p {
  height: 100%;
  padding: 0 !important;
}

.btn-projekt img {
  width: 10%;
}

.btn-projekt:hover {
  transition: all 400ms ease-in-out;
  opacity: 1;
  box-shadow: var(--shadow-cards-hover);
}

.wimble-sp-simpleportfolio-img-wrapper span {
  font-weight: 900 !important;
  text-transform: uppercase !important;
  -webkit-text-stroke: 1px var(--text-color) !important;
}

.wimble-sp-simpleportfolio-info {
  position: absolute;
  top: 0;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  z-index: 500 !important;
}

.sp-simpleportfolio .sp-simpleportfolio-item {
  padding: 0px !important;
  margin: 15px;
}

.sp-simpleportfolio-title-wrap,
.wimble-sp-simpleportfolio-btns {
  display: none !important;
}

.sp-simpleportfolio-short-info {
  height: 100% !important;
  width: 100% !important;
}

#sppb-addon-wrapper-1677334069202 {
  position: relative;
  left: 0px !important;
  margin: 0px 0px 0px 0px;
}

.com-spsimpleportfolio.portfolio-classic
  .sp-simpleportfolio-item
  .sp-simpleportfolio-wrapper
  .wimble-sp-simpleportfolio-img-wrapper:hover:after {
  background: var(--gradient) !important;
  opacity: var(--op-hover);
  transition: all 300ms ease-in-out;
}

.sp-simpleportfolio .sp-simpleportfolio-item {
  padding: 0px !important;
  margin: 0 0 25px 0 !important;
}

.sp-simpleportfolio .sp-simpleportfolio-items {
  margin: 0px !important;
}

.com-spsimpleportfolio.portfolio-classic
  .sp-simpleportfolio-item
  .sp-simpleportfolio-wrapper
  .wimble-sp-simpleportfolio-img-wrapper:after {
  background: #0000005d !important;
}

/* ################### PROJEKTE #################### */

.sp-page-builder .page-content #section-id-1677339534690 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.sppb-panel {
  background-color: transparent !important;
}

.pull-left {
  height: 100% !important;
}

/* ################### Foto Gallerie #################### */
.mfp-arrow {
  margin: 0 10% 0 10% !important;
}

.gallery-item-center > li {
  box-shadow: var(--shadow-cards) !important;
  overflow: hidden;
  border-radius: var(--card-edge);
}

.mfp-arrow-left:after,
.mfp-arrow-right:after {
  display: none !important;
}

button.mfp-arrow,
button.mfp-close {
  height: 60px !important;
  width: 60px !important;
  background-color: var(--p-bg);
  border-radius: 100px;
  border: var(--p-prime) solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  transition: all 400ms;
  width: 100%;
  height: 100%;
}
.mfp-arrow:before {
  display: none;
}
.mfp-arrow-right {
  background-image: url(/images/arrow-right-slider.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
}
.mfp-arrow-left {
  background-image: url(/images/arrow-left-slider.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
}

.mfp-arrow,
.mfp-arrow {
  transition: all 400ms;
  opacity: 1 !important;
}
.mfp-arrow:hover {
  opacity: var(--op-hover) !important;
  transition: all 400ms;
}

.mfp-bottom-bar,
.mfp-close {
  display: none !important;
}

/* ################# CASE STUDY ######################## */

/* -------- H5 Big Headline -------- */

h5 {
  font-weight: 900 !important;
  font-size: clamp(10vw, 14vw, 20rem) !important;
  line-height: calc(clamp(17vw, 17vw, 20rem) * 1.1) !important;
  overflow: hidden;
}

.stoke-text-custom .sppb-addon-title:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: block;
  background: linear-gradient(180deg, #0c151400 10%, var(--p-bg) 90%);
}

.stoke-text-custom span {
  font-weight: 900 !important;
}

.stoke-text-custom .sppb-addon-title {
  color: var(--text-color);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text-color);
  position: relative;
  width: 100%;
  opacity: 0.8;
}

.stoke-text-white .sppb-addon-title:before {
  background: linear-gradient(180deg, #ffffff00 10%, #fff 90%) !important;
}

/* -------- Abstände Case Study -------- */

#section-normal ul,
.meine-rolle {
  padding-left: 0px !important;
}
#section-normal li {
  list-style: none !important;
}

.gap-custom {
  padding: 60px 0;
}
.gap-custom-h5 {
  padding-bottom: 32px;
}

.space-element .sppb-row-column {
  padding-right: 30px !important;
  padding-left: 30px !important;
}
.background-white {
  background-color: #fff !important;
}

.padding-bottom-8 {
  padding-bottom: 8px;
}
.padding-bottom-16 {
  padding-bottom: 16px;
}
.padding-bottom-32 {
  padding-bottom: 32px;
}
.hero-hey {
  margin: 0 auto !important;
}
/* -------- Hero Projekte -------- */

.hero-img-container {
  height: 100%;
  position: absolute !important;
  bottom: 0;
  right: 0;
  width: 50%;
}
.hero-anker .sppb-addon-single-image-container {
  float: right;
}
.hero-img-container img {
  max-height: 800px;
  width: auto;
}

/* -------- Module -------- */
/* Section Normal */
#section-normal ul,
#section-normal h3 {
  margin: 0;
}
/* Cards */
.case-study-cards {
  border-radius: var(--card-edge);
  padding: 32px;
}
.case-study-cards ul {
  margin: 0 !important;
}
.case-study-cards li::marker {
  color: var(--p-prime);
}
.cards-full-height .sppb-addon-wrapper,
.cards-full-height .clearfix,
.cards-full-height .sppb-addon,
.cards-full-height .sppb-addon-content,
.cards-full-height .case-study-cards {
  height: 100%;
}

/* Module & Flow - SLIDER */
#section-slider .sp-slider-content-wrap {
  margin: 0 auto;
  width: 100% !important;
}
#section-slider {
  background-color: #fff;
}
.slider-height {
  display: flex;
  flex-direction: column-reverse !important;
}
.slider-height .sp-slider-outer-stage {
  height: 500px;
}
.slider-height-700 {
  display: flex;
  flex-direction: column-reverse !important;
}
.slider-height-700 .sp-slider-outer-stage {
  height: 700px !important;
}

#section-slider .sp-dot-text-key-1 {
  color: var(--text-color) !important;
}
#section-slider .sp-slider-text-thumb-number {
  font-weight: 400 !important;
  font-size: var(--h2-size) !important;
  line-height: calc(var(--h2-size) * 1.2) !important;
  letter-spacing: 1px !important;
  color: var(--p-prime) !important;
}
#section-slider .sp-slider-custom-dot-indecators {
  width: 100%;
  position: relative !important;
}

#section-slider h2 {
  padding-bottom: 16px;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 400 !important;
  font-size: var(--h2-size) !important;
  line-height: calc(var(--h2-size) * 1.2) !important;
  letter-spacing: 1px !important;
}
#section-slider .sp-dot-indicator-wrap {
  display: none;
}

#section-slider .sp-slider-custom-dot-indecators {
  width: 100%;
  background: transparent !important;
  padding: 0 !important;
  margin-top: 60px;
  overflow-x: auto !important;
}
#section-slider .sp-slider-custom-dot-indecators ul {
  display: table !important;
  width: 100% !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0 -16px !important;
  border-spacing: 16px;
}

#section-slider .sp-slider-custom-dot-indecators ul li {
  background-color: #f5f6fa60;
  border-radius: var(--card-edge);
  display: table-cell;
  float: none !important;
  padding: 32px;
}

#section-slider .sp-slider-custom-dot-indecators .active {
  background-color: var(--p-bg) !important;
}
.flow-slider .sp-slider-outer-stage .sppb-row {
  flex-direction: column;
}
.flow-slider .sp-slider-outer-stage .sppb-row div:nth-child(1),
.flow-slider img {
  max-width: 100% !important;
}
.flow-slider h2 {
  display: none;
}
#section-slider .sp-slider-dot-indecator-text {
  font-size: 0.9rem !important;
}
#section-slider .sp-slider-text-thumb-number {
  display: none;
}
/* Projekt & Rolle */

#case-study-start {
  box-shadow: 0px -4px 15px #00000020 !important;
  background-color: var(--p-bg);
  height: 30px;
}
#case-study-projekt-rolle {
  background-color: var(--p-bg);
}
.meine-rolle {
  display: flex;
  flex-wrap: wrap;
}

.meine-rolle li {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  background-color: #fff;
  padding: 16px;
  border-radius: var(--card-edge);
  margin: 0 16px 16px 0;
  min-width: 300px;
  width: fit-content;
}

.meine-rolle p {
  padding-left: 16px;
  font-weight: 400 !important;
}

/* Projekte Cards */
.case-study-projekte {
  padding: 32px;
  background-color: var(--p-bg);
  border-radius: var(--card-edge);
  transition: all 400ms;
}
.case-study-projekte:hover {
  background-color: #f5f6fa60;
  transition: all 400ms;
}
.case-study-projekte h2 {
  margin: 0 !important;
}
.case-study-projekte .btn-sec {
  display: flex;
  row-gap: 8px;
  align-items: center;
  width: fit-content;
}
.projekt-img-box {
  overflow: hidden;
  border-radius: var(--card-edge);
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.projekt-gap {
  padding-bottom: 60px;
}

.video-height .addon-root-video,
.video-height .clearfix,
.video-height .sppb-addon-video,
.video-height .sppb-addon-video-local-video-wrap,
.video-height video {
  height: 100% !important;
}
/* ################# MEDIA QUARY ######################## */

/* ################# MEDIA QUARY ######################## */

/* ################# MEDIA QUARY ######################## */

/* Medium devices (tablets) */
@media only screen and (max-width: 599px) {
  #slider-modul .sp-slider-custom-dot-indecators {
    display: none;
  }
  #sec-04 {
    height: 60vh !important;
    margin-top: calc(-60vh + -100px) !important;
  }
  .sppb-section-content-center {
    align-items: first baseline !important;
  }

  .sectionfull {
    width: 100% !important;
    margin: 0px auto !important;
  }
  .space-element .sppb-row-column {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .gap-custom {
    padding: 30px 0 !important;
  }
  .gap-custom-h5 {
    padding-bottom: 16px !important;
  }

  .meine-rolle li {
    min-width: 100% !important;
  }

  /* BTN */
  .btn {
    min-width: 100% !important;
  }
  #btn-center .sppb-addon-content {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  /* BG */
  .sp-page-builder
    .page-content
    #section-id-09bd5e4b-f061-466f-95f3-93b8b042c13e {
    background-image: linear-gradient(270deg, #fff 5%, #fff 5%) !important;
  }

  .sp-page-builder
    .page-content
    #section-id-d1a12892-6052-47b4-9fd4-6f2dd80cba57 {
    background-image: linear-gradient(270deg, #fff 5%, #fff 5%) !important;
  }

  .sp-page-builder
    .page-content
    #section-id-ad6d209f-2b2e-430d-b2c6-19649f232913 {
    background-image: linear-gradient(
      270deg,
      #ffffff30 0%,
      #ffffff30 0%
    ) !important;
  }

  /* ------ Padding ------ */
  .sectionmin {
    width: 96% !important;
    margin: 0 2% !important;
  }

  .sec-margin {
    margin-right: 2% !important;
  }

  .sec-margin-left {
    padding: 60px 0% 60px 2% !important;
  }
  /* BG */

  .hero-mobile {
    width: 100% !important;
    padding: 0px 0% 0px 2% !important;
  }

  /* Navigation */
  #sp-header .container-inner {
    padding: 0 2% !important;
  }

  /* BG */

  #sec-01 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 2%,
      #ffffff80 2%
    ) !important;
  }

  #sec-02 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 2%,
      #ffffff 2%
    ) !important;
  }

  #sec-04 {
    background-image: linear-gradient(270deg, #ffffff00 2%, #fff 2%) !important;
  }
}
@media (max-width: 992px) and (min-width: 599px) {
  .gap-custom {
    padding: 50px 0 !important;
  }
  .gap-custom-h5 {
    padding-bottom: 32px !important;
  }
}

@media (max-width: 992px) {
  #offcanvas-toggler {
    display: flex !important;
    align-items: center;
  }
  .menu-toggler,
  .fa-bars:before,
  .hero-img {
    display: none !important;
  }

  #offcanvas-toggler > .fa {
    background-image: url(/images/nav-bars.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 38px !important;
    height: 38px !important;
  }
}

/* Medium devices (Switch) */
@media only screen and (max-width: 1100px) {
  .sectionmin {
    width: 90% !important;
    margin: 0 5% !important;
  }

  .sec-margin {
    margin-right: 5% !important;
  }

  .sec-margin-left {
    padding: 100px 0% 100px 5% !important;
  }
  .sectionfull {
    width: 100% !important;
    margin: 0px auto !important;
  }
  /* BG */

  .hero-mobile {
    width: 100% !important;
    padding: 0px 0% 0px 5% !important;
  }
  .hero-headline {
    padding: 0 15px 0 0 !important;
  }

  /* Navigation */
  #sp-header .container-inner {
    padding: 0 5% !important;
  }

  .hero-mobile .sppb-row-column:nth-child(2) {
    width: 100% !important;
    padding: 0 !important;
    margin-right: -9%;
  }

  #section-slider img {
    width: 100% !important;
    height: auto !important;
  }
  #section-slider .sp-slider-custom-dot-indecators ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    row-gap: 16px;
  }
  #section-slider .sp-slider-custom-dot-indecators ul li {
    width: 100% !important;
    margin: 0 !important;
  }
  #section-slider .sppb-col-xs-6 {
    max-width: 100% !important;
  }
  #section-slider .sppb-sp-slider-image {
    margin: 0px !important;
  }
  .hero img {
    margin: 0 !important;
    width: 100%;
  }
  .hero-img-container {
    position: relative !important;
    width: 100% !important;
  }

  .hero-mobile .sppb-container-inner,
  .hero-mobile .sppb-row,
  .hero-mobile .sppb-row-column,
  .hero-mobile {
    height: fit-content !important;
  }
  .projekt-gap {
    padding-bottom: 30px !important;
  }

  .sppb-row {
    flex-direction: column !important;
    row-gap: 30px;
  }
  .sppb-row-column {
    max-width: 100% !important;
    flex-basis: 100%;
  }
  .sppb-nested-row {
    row-gap: 30px;
  }
  .flex-custom .sppb-nested-row,
  .flex-custom .sppb-row {
    flex-direction: column-reverse !important;
  }
  .cta-arrow {
    float: right;
  }
  .cta-arrow img {
    width: 100%;
  }
  #kunden-container .sppb-column-addons {
    margin-top: 15px;
  }
  #kunden img {
    width: 50%;
  }
  #termin-section .sppb-addon-wrapper {
    margin-right: 0px !important;
  }

  #sppb-addon-wrapper-7d2cc8ec-b3de-4312-b05a-1e797485a5f7 {
    margin-left: 0px !important;
  }
  #column-wrap-id-dd18137d-d757-4b73-a8f9-829bf87ed103 {
    margin-top: 30px !important;
  }

  #sec-01 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 0%,
      #ffffff 0%
    ) !important;
  }
}

/* Large devices (desktops) */
@media only screen and (max-width: 1920px) and (min-width: 1100px) {
  .sectionmin {
    width: 90% !important;
    margin: 0 5% !important;
  }

  .full-mobile {
    width: 100% !important;
    padding: 120px 5% 120px 5% !important;
  }
  .sectionfull {
    width: 100% !important;
    margin: 0px auto !important;
  }

  .sec-margin {
    margin-right: 5% !important;
  }

  .sec-margin-left {
    padding: 120px 0% 120px 5% !important;
  }
  /* BG */

  .hero-mobile {
    width: 100% !important;
    padding: 0px 0% 0px 5% !important;
  }
  .slider-height .sp-slider-outer-stage {
    height: 800px !important;
  }
  .slider-height-700 .sp-slider-outer-stage {
    height: 1200px !important;
  }

  /* Navigation */
  #sp-header .container-inner {
    padding: 0 5% !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* BG */

  #sec-01 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 5%,
      #ffffff80 5%
    ) !important;
  }

  #sec-02 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 5%,
      #ffffff 5%
    ) !important;
  }

  #sec-04 {
    background-image: linear-gradient(270deg, #ffffff00 5%, #fff 5%) !important;
  }

  #sec-05 {
    background-image: linear-gradient(
      270deg,
      #ffffff00 0%,
      #ffffff80 0%
    ) !important;
  }

  .custom-slider .sp-slider-custom-dot-indecators {
    width: 100% !important;
  }

  .custom-slider .sp-slider-custom-dot-indecators ul {
    padding-right: 0% !important;
  }
}

/* Extra large devices (large desktops) */
@media only screen and (max-width: 1920px) {
  .gap-custom-hero {
    padding: 0px !important;
  }
}