:root {
  --accent-color: #026cb6;
  --secondary-color: #ffed00;
  --background-dg-color: #535353;
  --background-lg-color-1: #f0f6fb;
  --background-lg-color-2: #dbebf8;
  --background-lg-color: rgba(2, 108, 182, 0.06);
  --background-btn-lg-color: #f0f0f0;
  --text-color: #000;
  --text-color-wh: #fff;
  --headline-color: #121212;
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  --cs-theme-button-border-radius: 2;
}
/* Content-Container */
.cs_content-wrapper {
  width: 90%;
  max-width: 1536px !important;
}
.cs_content-fullwidth-wrapper {
  width: 100%;
  max-width: 1920px !important;
}
.flex_center_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_center_center_h {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.round-border-xl {
  border-radius: 55px 55px 0 55px;
}
@media all and (max-width: 980px) {
  .round-border-xl {
    border-radius: 22px 22px 0 22px;
  }
}
.round-border-xl-r img {
  border-radius: 0 55px 0 0 !important;
}
@media all and (max-width: 980px) {
  .round-border-xl-r img {
    border-radius: 0 0 0 22px !important;
  }
}
.gradient-1 {
  background: radial-gradient(50% 50% at 50% 50%, #814aa9 0.01%, #47295d 100%);
}
/* End Content-Container */
/* Hero Bild Overlay */
.gradient-overlay {
  position: relative;
  overflow: hidden; /* nötig, damit der Overlay die Rundung übernimmt */
  border-radius: 0 55px 0 0; /* DEINE Rundungen – Beispiel: oben links + oben rechts 55px */
}
@media all and (max-width: 980px) {
  .gradient-overlay {
    border-radius: 0 0 0 22px !important;
  }
}
.gradient-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit; /* übernimmt automatisch exakt dieselben Ecken */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.55) 20%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0) 85%
  );
}

/* End Hero Bild Overlay */
/* Fonts */
@font-face {
  font-family: "Barlow Regular";
  src: url("/assets/fonts/Barlow/Barlow-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Bold";
  src: url("/assets/fonts/Barlow/Barlow-Bold.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-family:
    Barlow Bold,
    sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 140%;
  color: var(--text-color);
}
p,
a,
li {
  font-family:
    Barlow Regular,
    sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 140%;
  color: var(--text-color);
}
/* Buttons */
a.btn-cd-bl {
  font-family:
    Barlow Regular,
    sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-color-wh);
  background-color: var(--text-color);
  padding: 8px 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  transition: background-color 0.5s ease;
}
a.btn-cd-bl:hover {
  background-color: #eeeeee;
}
/* End Buttons */