html body .hero.hero--center {
  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  background-color:
    var(--primary-dark) !important;

  color:
    var(--text-white) !important;
}




html body .hero.hero--center::before {
  content: "";

  position: absolute;

  top: -30%;
  right: -8%;

  width: 52%;
  height: 160%;

  background-color:
    rgba(255, 255, 255, 0.045) !important;

  transform:
    skewX(-13deg);

  pointer-events:
    none;
}




html body .hero.hero--center
.hero-inner {
  position: relative !important;

  z-index: 1 !important;

  display: grid !important;

  grid-template-columns:
    1fr !important;

  justify-items:
    center !important;

  align-items:
    center !important;

  width:
    100% !important;

  gap:
    0 !important;

  padding-block:
    clamp(50px, 7.5vw, 100px) !important;

  text-align:
    center !important;
}




html body .hero.hero--center
.hero-inner > div {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .hero.hero--center
.crumb {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  width:
    100% !important;

  margin:
    0
    0
    22px !important;

  padding:
    0 !important;

  color:
    rgba(255, 255, 255, 0.82) !important;

  font-size:
    14px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;

  list-style:
    none !important;
}




html body .hero.hero--center
.crumb > li {
  display:
    inline-flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  gap:
    8px !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}




html body .hero.hero--center
.crumb a,
html body .hero.hero--center
.crumb a:link,
html body .hero.hero--center
.crumb a:visited {
  color:
    var(--text-white) !important;

  text-decoration:
    none !important;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.38) !important;
}


html body .hero.hero--center
.crumb a:hover {
  border-bottom-color:
    var(--text-white) !important;
}




html body .hero.hero--center
.crumb .sep {
  color:
    inherit !important;

  opacity:
    0.55 !important;
}




html body .hero.hero--center
.crumb [aria-current="page"] {
  color:
    var(--text-white) !important;
}




html body .hero.hero--center
h1.h1 {
  width:
    100% !important;

  max-width:
    24ch !important;

  margin:
    0
    auto
    20px !important;

  color:
    var(--text-white) !important;

  text-align:
    center !important;

  text-wrap:
    balance;
}




html body .hero.hero--center
h1.h1 .mark {
  color:
    inherit !important;
}




html body .hero.hero--center
p.lead {
  width:
    100% !important;

  max-width:
    66ch !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  color:
    var(--text-white) !important;

  text-align:
    center !important;
}




html body .hero.hero--center
.hero-actions {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    14px !important;

  width:
    100% !important;

  margin:
    32px
    0
    0 !important;

  padding:
    0 !important;
}




html body .hero.hero--center
.hero-actions > .btn {
  flex:
    0 0 auto !important;

  width:
    auto !important;

  margin:
    0 !important;
}




@media (max-width: 560px) {

  html body .hero.hero--center
  .hero-inner {
    padding-block:
      42px
      48px !important;
  }


  html body .hero.hero--center
  .crumb {
    margin-bottom:
      18px !important;

    font-size:
      13px !important;
  }


  html body .hero.hero--center
  h1.h1 {
    max-width:
      100% !important;
  }


  html body .hero.hero--center
  .hero-actions {
    gap:
      10px !important;

    margin-top:
      28px !important;
  }


  html body .hero.hero--center
  .hero-actions > .btn {
    width:
      100% !important;
  }
}



html body .trustbar {
  width: 100% !important;

  background-color:
    var(--background) !important;

  border-bottom:
    1px solid
    var(--border) !important;
}




html body .trustbar ul {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap:
    12px
    clamp(22px, 4vw, 54px) !important;

  width: 100% !important;

  margin: 0 !important;

  padding:
    18px
    0 !important;

  list-style:
    none !important;
}




html body .trustbar li {
  display: inline-flex !important;

  align-items: center !important;

  gap:
    10px !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    15px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  list-style:
    none !important;
}




html body .trustbar li::before {
  content: "";

  display: block !important;

  flex:
    0 0
    8px !important;

  width:
    8px !important;

  height:
    8px !important;

  background-color:
    var(--accent) !important;

  border-radius:
    50% !important;
}




@media (max-width: 560px) {

  html body .trustbar ul {
    gap:
      10px
      20px !important;

    padding-block:
      16px !important;
  }


  html body .trustbar li {
    font-size:
      14.5px !important;
  }
}





html body #leistungen .sec-head {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items:
    end !important;

  gap:
    24px !important;

  width:
    100% !important;

  margin:
    0 0 44px !important;

  padding:
    0 !important;
}


html body #leistungen .sec-head > div {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


html body #leistungen .sec-head > .btn {
  justify-self:
    end !important;

  width:
    auto !important;

  margin:
    0 !important;
}




html body #leistungen .svc-list {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body #leistungen .svc {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  align-items:
    center !important;

  gap:
    clamp(26px, 4.6vw, 68px) !important;

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    clamp(38px, 5vw, 62px)
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-top:
    1px solid
    var(--border) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


html body #leistungen .svc > * {
  min-width:
    0 !important;
}




html body #leistungen
.svc-list > .svc:first-child {
  padding-top:
    clamp(6px, 1.6vw, 16px) !important;

  border-top:
    0 !important;
}




html body #leistungen
.svc-list > .svc:last-child {
  padding-bottom:
    0 !important;
}




html body #leistungen
.svc--flip .svc-media {
  order:
    2 !important;
}




html body #leistungen .svc-media {
  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  aspect-ratio:
    3 / 2 !important;

  background-color:
    var(--primary-light) !important;

  border:
    0 !important;

  border-radius:
    14px !important;
}


html body #leistungen
.svc-media picture {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;
}


html body #leistungen
.svc-media img {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;
}




html body #leistungen .svc-body {
  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body #leistungen
.svc-body .h3--lg {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    clamp(21px, 1.1rem + 0.85vw, 28px) !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    -0.022em !important;
}




html body #leistungen
.svc-body .svc-claim {
  display:
    block !important;

  width:
    100% !important;

  margin:
    10px 0 14px !important;

  padding:
    0 !important;

  color:
    var(--primary-deep) !important;

  font-size:
    clamp(17px, 0.98rem + 0.3vw, 18px) !important;

  font-weight:
    600 !important;

  line-height:
    1.45 !important;
}




html body #leistungen
.svc-body > p:not(.svc-claim),

html body #leistungen
.svc-body > .brxe-text-basic:not(.svc-claim) {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    16px !important;

  font-weight:
    400 !important;

  line-height:
    1.65 !important;
}


html body #leistungen
.svc-body p strong {
  color:
    var(--text) !important;

  font-weight:
    600 !important;
}




html body #leistungen .svc-chips {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    9px !important;

  width:
    100% !important;

  margin:
    20px 0 0 !important;

  padding:
    0 !important;
}




html body #leistungen
.svc-chips > .chip {
  display:
    inline-flex !important;

  flex:
    0 0 auto !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  width:
    auto !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  min-height:
    34px !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    6px
    14px !important;

  background-color:
    var(--background-soft) !important;

  color:
    var(--text) !important;

  border:
    1px solid
    var(--border) !important;

  border-radius:
    999px !important;

  box-shadow:
    none !important;

  font-size:
    13.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.35 !important;

  letter-spacing:
    0 !important;

  text-align:
    center !important;

  text-decoration:
    none !important;

  text-transform:
    none !important;

  white-space:
    normal !important;

  box-sizing:
    border-box !important;
}




html body #leistungen
.svc-chips > .brxe-text-basic.chip {
  display:
    inline-flex !important;

  width:
    auto !important;
}




html body #leistungen
.svc-chips > .chip.chip--yellow,

html body #leistungen
.svc-chips > .brxe-text-basic.chip.chip--yellow {
  background-color:
    var(--accent) !important;

  color:
    var(--text-black) !important;

  border-color:
    var(--accent) !important;
}




html body #leistungen .link-more {
  display:
    inline-flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  gap:
    8px !important;

  width:
    auto !important;

  margin:
    18px 0 0 !important;

  padding:
    0 !important;

  color:
    var(--primary-deep) !important;

  font-size:
    15.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  text-decoration:
    underline !important;

  text-underline-offset:
    3px !important;
}


html body #leistungen
.link-more .arw {
  display:
    inline-block !important;

  transition:
    transform 200ms ease !important;
}


html body #leistungen
.link-more:hover .arw {
  transform:
    translateX(4px) !important;
}




html body #leistungen
.svc-media.svc-ph {
  display:
    grid !important;

  place-content:
    center !important;

  justify-items:
    center !important;

  align-content:
    center !important;

  gap:
    12px !important;

  padding:
    26px !important;

  background-color:
    var(--background-soft) !important;

  text-align:
    center !important;
}


html body #leistungen
.svc-ph svg {
  display:
    block !important;

  width:
    38px !important;

  height:
    38px !important;

  margin:
    0 !important;

  fill:
    none !important;

  stroke:
    var(--primary) !important;

  stroke-width:
    1.4 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


html body #leistungen
.svc-ph .t {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    36ch !important;

  margin:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    14.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;

  text-align:
    center !important;
}




@media (max-width: 900px) {

  html body #leistungen .sec-head {
    grid-template-columns:
      1fr !important;

    align-items:
      start !important;

    gap:
      22px !important;

    margin-bottom:
      36px !important;
  }


  html body #leistungen
  .sec-head > .btn {
    justify-self:
      start !important;

    width:
      auto !important;
  }
}




@media (max-width: 860px) {

  html body #leistungen .svc {
    grid-template-columns:
      1fr !important;

    gap:
      26px !important;
  }


  

  html body #leistungen
  .svc--flip .svc-media {
    order:
      0 !important;
  }
}




@media (max-width: 560px) {

  html body #leistungen .sec-head {
    gap:
      20px !important;

    margin-bottom:
      30px !important;
  }


  html body #leistungen
  .sec-head > .btn {
    width:
      100% !important;
  }


  html body #leistungen .svc {
    gap:
      22px !important;

    padding:
      36px
      0 !important;
  }


  html body #leistungen
  .svc-list > .svc:first-child {
    padding-top:
      0 !important;
  }


  

  html body #leistungen
  .svc-chips {
    gap:
      7px !important;

    margin-top:
      18px !important;
  }


  html body #leistungen
  .svc-chips > .chip {
    min-height:
      32px !important;

    padding:
      5px
      12px !important;

    font-size:
      13px !important;

    line-height:
      1.35 !important;

    white-space:
      normal !important;
  }
}





html body .steps {
  --step-gap: clamp(16px, 2.2vw, 30px);
}




html body .steps {
  margin-top:
    44px !important;
}






html body .steps {
  display:
    grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  align-items:
    start !important;

  gap:
    var(--step-gap) !important;

  width:
    100% !important;

  padding:
    0 !important;
}




html body .steps > .step {
  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}




html body .steps .step-no {
  position:
    relative !important;

  z-index:
    2 !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background-color:
    var(--accent) !important;

  color:
    var(--text-black) !important;

  border-radius:
    11px !important;

  font-size:
    15px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}




html body .steps .step-link {
  position:
    absolute !important;

  z-index:
    0 !important;

  top:
    21px !important;

  left:
    56px !important;

  right:
    calc(-1 * var(--step-gap)) !important;

  width:
    auto !important;

  height:
    2px !important;

  margin:
    0 !important;

  background-image:
    radial-gradient(
      circle,
      var(--border) 1.1px,
      transparent 1.2px
    ) !important;

  background-size:
    9px 2px !important;

  background-repeat:
    repeat-x !important;

  pointer-events:
    none !important;
}




html body .steps .step-body {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .steps .step-body .h3 {
  width:
    100% !important;

  margin:
    18px 0 8px !important;

  padding:
    0 !important;

  color:
    var(--text) !important;
}




html body .steps .step-body > p,
html body .steps .step-body > .brxe-text-basic {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  line-height:
    1.55 !important;
}




@media (max-width: 860px) {

  html body .steps {
    grid-template-columns:
      1fr !important;

    gap:
      0 !important;

    margin-top:
      38px !important;
  }


  html body .steps > .step {
    display:
      grid !important;

    grid-template-columns:
      44px
      minmax(0, 1fr) !important;

    column-gap:
      20px !important;

    align-items:
      start !important;

    padding:
      0
      0
      28px !important;
  }


  

  html body .steps
  > .step:last-child {
    padding-bottom:
      0 !important;
  }


  

  html body .steps .step-body {
    grid-column:
      2 !important;
  }


  html body .steps
  .step-body .h3 {
    margin:
      10px 0 6px !important;
  }


  

  html body .steps .step-link {
    top:
      56px !important;

    bottom:
      0 !important;

    left:
      21px !important;

    right:
      auto !important;

    width:
      2px !important;

    height:
      auto !important;

    background-image:
      radial-gradient(
        circle,
        var(--border) 1.1px,
        transparent 1.2px
      ) !important;

    background-size:
      2px 9px !important;

    background-repeat:
      repeat-y !important;
  }
}




@media (max-width: 560px) {

  html body .steps {
    margin-top:
      32px !important;
  }


  html body .steps > .step {
    column-gap:
      16px !important;

    padding-bottom:
      24px !important;
  }


  html body .steps
  .step-body > p,
  
  html body .steps
  .step-body > .brxe-text-basic {
    font-size:
      14.5px !important;
  }
}