@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/176211652771/1778583898071/template_Helios_Neo_Variables_colors.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/176211652772/1780322296655/template_Helios_Neo_Variables_typo.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/176207196781/1779975872942/template_Helios_Neo_Variables_buttons.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/178193139220/1779195574884/template_Helios_Neo_Styles_buttons.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/181776518678/1779976735220/template_Helios_Neo_Styles_tags.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/176206573448/1741922271595/template_Helios_Neo_Variables_sizes.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/184929120818/1738847922494/template_Helios_Neo_legacy.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/65224586084/1781181686944/template_Helios_form.min.css);
@import url(https://603347.fs1.hubspotusercontent-na1.net/hubfs/603347/hub_generated/template_assets/1/208173890439/1780057322894/template_form.min.css);

:root {
  --space-unit: 1rem;
  
  --main-bg-color: var(--bg-primary-default);
  --main-bg-wavegrey: #f6f6f6;
  --main-blue: var(--blue700);
  --main-blue-hover: var(--blue800); /* #2277bc; */
  --main-green: var(--green700); /* rgb(65, 177, 74) */;
  --border-green: rgb(38, 135, 42);
  --border-darkgrey: rgb(118, 118, 118);
  --border-grey: rgb(172, 172, 172);
  --main-grey: rgb(193, 193, 193);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* give space to top for every scroll ancor on page */'
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

body {
  --page-width: var(--page-width-helios);
}
.neo {
  --page-width: var(--page-width-neo);
}

/* Accesibility */

/* Regular focus styles for non-supporting browsers. */
button:focus {
    outline: 2px solid purple;
}

/* For browsers that support :focus-visible */
@supports (:focus-visible) {
  button:focus:not(:focus-visible),
  a:focus:not(:focus-visible) {
    outline: none;
  }

  button:focus-visible, 
  a:focus-visible {
    outline: 3px solid #ff00aa;
    outline-offset: 2px;
  }
}


/* debug */
/*body {background: red !important}*/

/*@media(prefers-color-scheme: dark) and (max-width:500px){
  body{
  --main-bg-color: black;
  --main-bg-wavegrey: #121212;
  --main-blue : #0dbedc;
  }
  section > div{
  color:white;
  }
  section.waveAnanas > div{
  --main-blue : #005AA0;

  }
  }*/

  .___dev_debug_section_hubdb___ {
    background: green;
    background: rgba(0,128,0,.6);
    position: absolute;
    font-size: 14px;
    left: 0;
    top: 50px;
    border-radius: 0 6px 6px 0;
    width: auto;
    color: #fff !important;
    height: auto;
    padding: 0.5em 2em;
    z-index: 9999999999;
    transition: background .25s ease-out;
  }
  .___dev_debug_section_hubdb___:any-link {
    background: green;
    background: rgba(0,128,0,.6);
    width: auto;
    color: #fff !important;
  }
  .___dev_debug_section_hubdb___:hover {
    background: rgb(2, 151, 2);
    background: rgba(2, 155, 2, 0.6);
    width: auto;
    color: #fff !important;
  }
  body.dev .___dev_debug_menu___ {
    display: block;
  }
  .___dev_debug_menu___ {
    display: none;
    background: #600000;
    position: fixed;
    font-size: 14px;
    right: 0;
    top: 50%;
    border-radius: 6px 0 0 6px;
    width: auto;
    color: #fff !important;
    height: auto;
    padding: 0.5em 2em;
    z-index: 9999999999;
    transition: background .25s ease-out;
    cursor: pointer;
  }
  .___dev_debug_menu___:any-link {
    background: #600000;
    width: auto;
    color: #fff !important;
  }
  .___dev_debug_menu___:hover {
    background: #800000;
    width: auto;
    color: #fff !important;
  }


.hideCode{
  display:none !important;
}

.wave {
  margin-bottom: -1px;
}

.wave_flipped {
  margin-top: -1px;
  transform: translateZ(0);
}



html body {
  margin: 0;
/*  font-family: 'Roboto', sans-serif;
  font-size: var(--text-md-regular);
  font-weight: var(--text-md-regular-weight);
  line-height: var(--text-md-regular-lnht);
  color: var(--text-secondary); */
  background-color: var(--bg-primary-default);
}

button,
textarea,
input {
  font-family: 'Roboto', sans-serif;
}

#modalBackground{
  position: fixed;
  content: " ";
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.6);
  z-index: 12;
  display:none
}
#modalBackground:hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='white'%3E%3Ctitle%3E close %3C/title%3E%3Cpath d='M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z'/%3E%3Cpath d='M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z'/%3E%3C/svg%3E"),auto;
}

#modalContent{
  left: 0;
  position: fixed;
  right: 0;
  z-index: 45;
  max-width: min(max(50vw,400px),720px);
  margin: auto;
  max-height: fit-content;
  display: none;
  background-color: #fff;
  overflow-y: auto;
  text-align: center;
  padding: 2rem 20px;
  border-radius: 10px;
  bottom: 0;
  top: 0;
}
#modalContent:hover{
  cursor: default;
}
#modalContent > div{
  text-align: initial;
}
#modalContent > div.modalInnerContent{
  padding: 0 2rem;
}

.modalActive #modalContent{
  display: block;
}
.modalActive #modalBackground{
  display: block;
}



textarea {
  min-height: 6rem;
}

form input {
  line-height: 1.5rem;
  font-size: var(--text-lg-regular); /* 18px; */
}

* {
  /*outline: none;  We should not do this due to accessibility reasons */
  box-sizing: border-box;
}

main > div:first-of-type{
  padding-top: 50px;
  background: white;
  transform: translateZ(10px);
}

.neo-form {
}
.neo-input {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  height: 50px;
  margin: var(--size-16) 0;
  padding: var(--size-8) var(--size-16);
  min-width: 20rem;
  line-height: 1.5rem;
  font-size: var(--text-lg-regular); /* 18px; */
}

.neo-cards {
  justify-items: center;
  align-items: center;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 15.5rem);
  gap: 1rem;
  width: 100%;
}

.neo-card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  width: 100%;
  overflow: clip;
  & a {text-decoration: none !important;}
  .neo-card-inner {
    display: grid;
    align-items: start;
    grid-row-gap: 1rem;
    grid-template-rows: 9rem 5rem 5rem 3rem;
    .card-image {
      grid-row-start: 1;
      object-fit: cover;
      width: 100%;
      height: 9rem;
      overflow: clip;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .card-headline {
      grid-row-start: 2;
      height: 5rem;
      padding: 0 1rem;
      
    }
    .card-text {
      grid-row-start: 3;
      padding: 0 1rem;  
      height: 6rem;
      display: -webkit-box;
      line-clamp: 4;
      -webkit-line-clamp: 4;
      box-orient: vertical;
      -webkit-box-orient: vertical;
      overflow: hidden;
      align-self: start;
    }
    .card-link {
      grid-row-start: 4;
      text-decoration: underline;
      padding: 0 1rem;      
      color: var(--neo-main-blue);
    }
  }
}

/* Image only */
.neo-cards.neo-cards-small {
  .neo-card-inner {
    grid-template-rows: 9rem;
  }
  .md, .lg {
    display: none;
  }
}
/* Image, Title and Link */
.neo-cards.neo-cards-medium {
  .neo-card-inner {
    grid-template-rows: 9rem 5rem 3rem;
  }
  .card-link {
    grid-row-start: 3;
  }
  .lg {
    display: none;
  }
}
.neo-cards.neo-cards-large {
  /* Large = default. Image, Title, Text and Link */
}


/*
main h2.section-title:before,
.subStage h2:before {
  content: '';
  display: block;
  width: 70px;
  border-top: 4px solid #3a91d8;
  border-radius: 10px;
  margin: 0 auto 16px;
}
*/

.stageWrapper .col1Content h1:not(.col1Headline):before,
.stageWrapper .col1Content h2:before,
.stageWrapper .col1Content h3:not(.col1Subline):before,
.stageWrapper .col1Content h4:before,
.stageWrapper .col1Content h5:before,
.stageWrapper .col1Content h6:before {
  content: 'NO HEADER!';
  display: block;
  width: 200px;
  border: 4px solid #ff0000;
  border-radius: 10px;
  margin: 0 auto 10px;
  background: #800000;
  color: #fff;
  padding: 15px;
}


img:not(.not-rounded) {
  border-radius: 20px;
}

.bluebtn{
  border-radius: 2rem !important;
}
.cta-link-as-button *,
.bluebtn * {
  color: inherit
}

section sup{
  line-height: 1;
}

.neo .blueLine {
  display: none !important;
}

/* Link Styling  */

a:not(.bluebtn, .button-neo, .menu-link, .hs-menu-item a),
a:not(.bluebtn, .button-neo, .menu-link, .hs-menu-item a):visited,
.link-default,
main section:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button),
main section:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):visited,
div.BgWaveDiv:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):not(.menu-link),
div.BgWaveDiv:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):not(.menu-link):visited,
.stageWrapper:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button),
.stageWrapper:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):visited {
  color: var(--text-action);
  transition: color 0.15s ease-in-out;
  text-decoration: underline;
}

a:not(.bluebtn, .button-neo, .menu-link, .hs-menu-item a):hover,
.link-default:hover,
main section:not(.link-as-button) a:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):hover {
  color: var(--text-action-hover);
  text-decoration: none;  
}

a:not(.bluebtn, .button-neo, .menu-link, .hs-menu-item a):active,
.link-default:active,
main section:not(.link-as-button) a:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):active {
  color: var(--text-action-active);
}

.shopbetreiber-blog,
.trustedshops-blog {
  a:not(.bluebtn, .topic-link, .button-neo, .menu-link, .hs-menu-item a),
  a:not(.bluebtn, .topic-link, .button-neo, .menu-link, .hs-menu-item a):visited,
  .link-default,
  main section:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button),
  main section:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):visited,
  div.BgWaveDiv:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):not(.menu-link),
  div.BgWaveDiv:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):not(.menu-link):visited,
  .stageWrapper:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button),
  .stageWrapper:not(.link-as-button) a:any-link:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):visited {
    text-decoration: none;
  }

  a:not(.bluebtn, .topic-link, .button-neo, .menu-link, .hs-menu-item a):hover,
  .link-default:hover,
  main section:not(.link-as-button) a:not(.cta-link-as-button):not(.bluebtn):not(.cta_button):hover {
    text-decoration: underline;  
  }
}

/* Old Button Styling  */

input[type='submit']:not(.button-neo):not(.hs-button),
button:not(.button-neo):not(.splide__pagination__page):not(.splide__arrow):not(.testimonials-direct-item),
.cta-link-as-button:not(.button-neo) {
  text-decoration: none;
  background-color: var(--main-blue);
  border: 2px solid;
  border-color: transparent;
  border-radius: 32px;
  cursor: pointer;
  color: #fff;
  min-height: 50px;
  font-size: var(--text-lg-regular); /* 18px; */
  font-weight: 700;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  padding: 0.72rem 1rem;
  -webkit-appearance: none;
}

/* Some styles leak into the wysiwyg editor of hubspot. This overwrites those styles */
#tinymce-toolbar button,
._HS-react-root button,
#tinymce-toolbar input,
._HS-react-root input {
  background-color: inherit !important;
  color: inherit !important;
  border: inherit !important;
  font-size: inherit !important;
  padding: 8px !important;
}



a.cta-link-as-button.active:not(.button-neo) {
  background: #fff;
  color: var(--main-blue);
  border: 2px solid;
}

a[class^='cta_button'], a[class*='cta_button']{
  display: inline-block;
}

.filterButtons {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.filterButtons > .cta-link-as-button {
  color: var(--main-blue);
  background-color: #ccc;
  padding: 3px 16px;
  min-height: unset;
  font-weight: 400;
}
.filterButtons >.cta-link-as-button.active {
  background-color: var(--main-blue);
  color: #fff;
  border: 2px solid transparent;
}

.filterButtons > .cta-link-as-button:hover {
  color: #fff;
  background-color: var(--main-blue);
  border: 2px solid transparent;
}

input[type='submit']:not(.button-neo):not(.hs-button):hover,
button:not(.button-neo):not(.hs-button):hover,
.cta-link-as-button:not(.button-neo):not(.hs-button):hover {
  background-color: var(--main-blue-hover);
  border-color: var(--main-blue-hover);
}
/* .itemContentWrapper a {
  margin: 0 auto;
} */

.link-as-button a[href^='#']:not(.link-as-button-primary):not(.link-as-button-secondary):not(.button-neo) {
  background-color: var(--main-blue);
  border: 2px solid;
  border-color: transparent;
  border-radius: 32px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  min-height: 50px;
  font-size: var(--text-lg-regular); /* 18px; */
  font-weight: 700;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  padding: 0.72rem 1rem;
  -webkit-appearance: none;
  text-decoration: none;
  padding: 10px 16px;
}

.link-as-button a[href^='#']:not(:last-child) {
  margin-right: 0.5rem;
}

.link-as-button a[href^='#']:not(.link-as-button-primary):not(.link-as-button-secondary):not(.button-neo):hover {
  background-color: var(--main-blue-hover);
  border-color: var(--main-blue-hover);
  color: white;
}

.link-as-button a[href^='#']:not(.link-as-button-primary):not(.link-as-button-secondary):not(.button-neo) {
  background-color: var(--main-blue);
}

.link-as-button a[href^='#']:not(.link-as-button-primary):not(.link-as-button-secondary):not(.button-neo):hover {
  background-color: var(--main-blue-hover);
}

span.hs-cta-wrapper, span.hs-cta-wrapper > span{
  display:block;
}



a.link-as-button-primary:not(.button-neo) {
  background-color: var(--main-blue);
  border: 2px solid;
  border-color: transparent;
  border-radius: 32px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  min-height: 50px;
  font-size: var(--text-lg-regular); /* 18px; */
  font-weight: 700;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  padding: 0.72rem 1rem;
  -webkit-appearance: none;
  text-decoration: none;
  padding: 10px 16px;

}

body div a.link-as-button-primary:not(.button-neo):hover {
  background-color: var(--main-blue-hover);
  border-color: var(--main-blue-hover);
  color: white;
}

 body div a.link-as-button-secondary:not(.button-neo) {
  background-color: #fff;
  border: 2px solid;
  border-color: var(--main-blue);
  border-radius: 32px;
  cursor: pointer;
  display: inline-block;
  color: var(--main-blue);
  min-height: 50px;
  font-size: var(--text-lg-regular); /* 18px; */
  font-weight: 700;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  padding: 0.72rem 1rem;
  -webkit-appearance: none;
  text-decoration: none;
  padding: 10px 16px;
}

body div a.link-as-button-secondary:not(.button-neo):hover {
  background-color: var(--main-blue-hover);
  color: var(--main-blue-hover);
  border-color: var(--main-blue-hover);
}



/*Content Module Wave Background image styles START*/
/* section.backimg{
  background-image: url('https://603347.fs1.hubspotusercontent-na1.net/hub/603347/hubfs/-website/header-images/b2b_website_home_DE_st_516531457.jpg?width=2560&name=b2b_website_home_DE_st_516531457.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
} */

.img-overlay-wrap {
  position: relative;
  display: inline-block;
}

.img-overlay-wrap {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-overlay-wrap svg {
  fill: #fff;

}

.wavetop{
  transform: rotate(180deg);
  margin-top: -1px;
}

.wavebottom{
  margin-bottom: -20px;
  bottom: 0;
  fill: #fff;
}
/*Content Module Wave Background image styles END*/

/* Responsive Styles */

@media (max-width: 1024px) {
  h1 {
    font-size: 40px;
    line-height: 50px;
   /* background-position-x: 8.5px, 0, 100%;
    background-size: calc(100% - 17px) 17px, auto 17px, auto 17px;
    background-position-y: calc(100% - -1px * -1);*/
  }
  h2 {
    font-size: 26px;
    line-height: 34px;
  }
  h3 {
    font-size: 26px;
    line-height: 32px;
  }
  h4 {
    font-size: 18px;
    line-height: 22px;
  }
  h5 {
    font-size: 18px;
    line-height: 24px;
  }
  p {
    font-size: var(--text-lg-regular); /* 18px; */
  }
  div {
    font-size: var(--text-lg-regular); /* 18px; */
  }
  a {
    font-size: var(--text-lg-regular-link); /* 18px; */
  }
}

@media (max-width: 720px) {
  div.ops--fab-wrapper.fabExpandedNav {
    left: 152px;
  }
  form div[class^='form-columns-'],
  form fieldset[class^='form-columns-'] {
    flex-wrap: wrap;
  }
  form div[class^='form-columns-'] > div,
  form fieldset[class^='form-columns-'] > div {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 36px;
    line-height: 46px;
  /*  background-position-x: 6.75px, 0, 100%;
    background-size: calc(100% - 13.5px) 14px, auto 14px, auto 14px; */
  }
  h2 {
    font-size: 23px;
    line-height: 33px;
  }
  h3 {
    font-size: 18px;
    line-height: 24px;
  }
  h4 {
    font-size: 16px;
    line-height: 19px;
  }
  h5 {
    font-size: 16px;
    line-height: 24px;
  }
  p {
    font-size: 16px;
  }
  div {
    font-size: 16px;
  }
  a {
    font-size: 16px;
  }
  input[type='submit'],
  button {
    font-size: 16px;
  }
  form input {
    font-size: 16px;
  }
  .modalActive #modalContent{
    height: 95%;
    overflow: auto;
  }
  #modalContent{
    max-width: min(max(50vw,300px),720px);
  }
}

.contentWrapper {
  max-width: 1240px;
  margin: 0 auto;
  padding: 50px;
}

.___dev_debug_section_flag___ {
  background: maroon;
  background: rgba(128, 0, 0, 0.6);
  position: absolute;
  right: 0;
  margin-top: 50px;
  width: auto;
  border-radius: 6px 0 0 6px;
  color: #fff;
  height: auto;
  padding: 0.5em 2em;
  font-size: 14px;
  z-index: 10000;
  transition: background 0.25s ease-out;
  cursor: pointer;
}

.noStageMain {
  padding-top: 125px;
}
.staticyellowContent{
  text-align: center;
}
.footerWrapper {
  margin-top: auto;
}

/* Helios Col Module img Resizer */
@media (min-width: 1171px){
  .col3 .imgIconWrapper.roundedImgWrapper img.roundedImgg:not([width]){
    height: 333px;
    width:  333px;
  }
}
@media (max-width: 720px){
  .col1 .imgIconWrapper.roundedImgWrapper img.roundedImgg:not([width]){
    width: 300px;
    height: 300px;
  }
}
@media (max-width: 480px) and (min-width:251px){
  body .colModItem .imgIconWrapper.roundedImgWrapper img.roundedImgg:not([width]){
    width: 250px;
    height: 250px;
  }
}

/* changed from media query to contaioner query, because media queries
 * did not provide the ability to dynamically resize the images.
 * with container query we only need imgmax720, because no image is bigger
 * in this module. To be secure we leave the 960px variant. The higher
 * classes will be deactivated.
 *
 */

.imgWidth {
  container-type: inline-size;
  container-name: imgWidth;
  display: block;
  /*margin: 0 auto;*/
}

/*
@container imgWidth (min-width: 1920px){
  .imgmin1920{
    display:block;
  }
  .imgmax250,.imgmax630,.imgmax480,.imgmax960,.imgmax1170,.imgmin1170{
    display:none;
  }
}
@container imgWidth (min-width: 1171px) {
  .imgmin1170{
    display:block !important;
  }
  .imgmax250,.imgmax630,.imgmax480,.imgmax960,.imgmax1170 {
    display:none;
  }
}
@container imgWidth (max-width: 1170px) and (min-width:961px) {
  .imgmax250,.imgmax630,.imgmax480,.imgmax960,.imgmin1170{
    display:none;
  }
  .imgmax1170{
    display:block !important;
  }
}
*/

.heliosImage { /* fix for safari having problems with height: auto*/
  object-fit: contain;
  min-height: 15px;
}

@container imgWidth (width > 720px) { /* All images bigger that 720px, class is imgmax960 */
  .imgmax250,
  .imgmax480,
  .imgmax560,
  .imgmax630,
  .imgmax720 {
    display:none !important;
  }
  .imgmax960 {
    display:block !important;
  }
}

@container imgWidth (max-width: 720px) and (min-width:631px) {
  .imgmax250,
  .imgmax480,
  .imgmax560,
  .imgmax630,
  .imgmax960 {
    display:none !important;
  }
  .imgmax720 {
    display:block !important;
  }
}

@container imgWidth (max-width: 630px) and (min-width:561px) {
  .imgmax250,
  .imgmax480,
  .imgmax560,
  .imgmax720,
  .imgmax960 {
    display:none;
  }
  .imgmax630 {
    display:block !important;
  }
}

@container imgWidth (max-width: 560px) and (min-width:481px) {
  .imgmax250,
  .imgmax480,
  .imgmax630,
  .imgmax720,
  .imgmax960 {
    display:none;
  }
  .imgmax560 {
    display:block !important;
  }
}

@container imgWidth (max-width: 480px) and (min-width:251px) {
  .imgmax250,
  .imgmax560,
  .imgmax630,
  .imgmax720,
  .imgmax960 {
    display:none;
  }
  .imgmax480 {
    display:block !important;
  }
}

@container imgWidth (max-width: 250px) {
  .imgmax480,
  .imgmax560,
  .imgmax630,
  .imgmax720,
  .imgmax960 {
    display:none;
  }
  .imgmax250 {
    display:block !important;
  }
}

/* Helios Col Module img Resizer end */



.stage_img{
  display: block;
}
.stage_img_portrait {
  display: none;
}

@media (orientation: portrait) and (max-width: 960px) {
  .stage_img{
    display: none;
  }
  .stage_img_portrait {
    display: block;
  }
}

.subStage {
  transform: translateZ(0px);
}
main > div:first-of-type{
  transform: translateZ(0px);
}
div#hubspot-messages-iframe-container {
  transform: translateZ(10px);
}
/* only do z-index increase when hs-web-interactives-bottom-anchor is not empty */
/* same z-index as bottom banner cta, but lover z-index than popup with backdrop */
body:has(#hs-web-interactives-bottom-anchor > div) {
  div#hubspot-messages-iframe-container {
    z-index: 9998 !important;
  }
}


/* Neo Section Titel and Subtitel */
.neo .sectionHeader {
  margin-bottom: 2rem !important;
}
.neo .sectionHeader .section-title {
  margin-bottom: 3rem;
}
.neo .sectionHeader:has(p) {
  .section-title {
    margin-bottom: 0;
  }
  & p { 
    margin-top: .8rem
  }
}
.b2c .sectionHeader {
  margin-bottom: 1rem !important;
}

/* Section Arrows */
.arrow-reverse,
.arrow {
  margin: -3rem 0;
  z-index: 2;
  position: relative;
}

.arrow-reverse-shape,
.arrow-shape {
  margin: -2rem 0 0;
  z-index: 2;
  position: relative;
}


/* Cards */
.truncate1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical ;
  overflow: hidden;
}
.truncate2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
h4.truncate1 {
  height: 29px;
  @media (width < 1024px) {
    height: 27px;
  }
  @media (width < 480px) {
    height: 20px;
  }
}
h4.truncate2 {
  height: 60px;
  @media (width < 1024px) {
    height: 44px;
  }
  @media (width < 480px) {
    height: 38px;
  }  
}
h4.truncate3 {
  height: 91px;
  @media (width < 1024px) {
    height: 66px;
  }
  @media (width < 480px) {
    height: 58px;
  }
}


/* Presentation number */
.presentation-number-1 strong {
  position: relative;
}
.presentation-number-1 strong:after {
  background-color: var(--green50); 
  border-radius: var(--radius-full);  
  /* helios-icon-arrow-north-east */
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='16px' height='16x' viewBox='0 0 28 28' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Earrow-north-east%3C/title%3E%3Cg id='⭐️-Icons-(Icon-font)' stroke='none' stroke-width='1' fill-rule='evenodd'%3E%3Cg id='Arrows/North-East' fill='#12B76A'%3E%3Cpath d='M21.8749706,19.0491138 C21.253634,19.0491138 20.7499411,18.5459136 20.7499411,17.9251847 L20.7499411,8.84659117 L6.91207921,22.6709192 C6.62876921,22.9550931 6.21479801,23.0658878 5.82722777,22.9612675 C5.43965754,22.8566472 5.13787608,22.552643 5.03638037,22.1645951 C4.93488466,21.7765472 5.049227,21.3639166 5.33602549,21.0832569 L19.1850815,7.24785822 L10.0621616,7.24785822 C9.44082501,7.24785822 8.93713218,6.74465801 8.93713218,6.12392911 C8.93713218,5.5032002 9.44082501,5 10.0621616,5 L21.8749706,5 C22.4963072,5 23,5.5032002 23,6.12392911 L23,17.9251847 C23,18.5459136 22.4963072,19.0491138 21.8749706,19.0491138 Z' id='🎨-Icon-Color'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /*color: var(--green500);  
  fill: var(--green500);  */
  display: block;  
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 200;
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0;
  right: -3.5rem;
}
@supports (font-variation-settings:normal) {
  .presentation-number-1 strong:after,
  .presentation-number-1 i {
    font-variation-settings: "wght" 200;
  }
}

/* New version with exchangeable helios icons */
.presentation-number-1:has(i) i {
  background-color: var(--green50); 
  border-radius: var(--radius-full);  
  color: var(--green500);  
  fill: var(--green500); 
  display: block;  
  font-size: 1rem;
  line-height: 2rem;
  font-weight: 200;
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0;
  right: -3.5rem;
}
.presentation-number-1:has(i) strong:after {
  display: none;
}

.presentation-number-1 .helios-icon-red {
  color: var(--red500); 
  fill: var(--red500); 
  background-color: var(--red50); 
}


/*******************************************************/
/* Helper */
.d-none {
  display: none !important;
}
.d-flex {
  display: flex !important;
}
.d-grid {
  display: grid !important;
}
.d-inlineblock {
  display: inline-block;
}
.d-block {
  display: block;
}

.center {
  display: block;
  margin: auto;
  text-align: center !important;
}
.left {
  text-align: left !important;
  margin: auto;
  margin-left: 0;
}
.right {
  text-align: right !important;
  margin: auto;
  margin-right: 0;
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}
.justify-center {
  justify-content: center;
}
.justify-left {
  justify-content: start;
}
.justify-right {
  justify-content: end;
}

.text-justify-hypens {
  text-align: justify !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3; /* Wort min. 6 Zeichen, 3 vor/nach Trennstrich */
}

.no-underline,
.no-underline:hover,
.no-underline:active,
.no-underline:visited {
  text-decoration: none !important;
}


/* dynamically generate margin and padding values */
[class*="mt-"] {
  margin-top: calc(var(--space-unit) * var(--multiplier)) !important;
}
[class*="mb-"] {
  margin-bottom: calc(var(--space-unit) * var(--multiplier)) !important;
}
.mt-1, .mb-1 { --multiplier: 1; }
.mt-2, .mb-2 { --multiplier: 2; }
.mt-3, .mb-3 { --multiplier: 3; }
.mt-4, .mb-4 { --multiplier: 4; }
.mt-5, .mb-5 { --multiplier: 5; }
.mt-6, .mb-6 { --multiplier: 6; }
.mt-7, .mb-7 { --multiplier: 7; }
.mt-8, .mb-8 { --multiplier: 8; }
.mt-0 {margin-top: 0 !important;}
.mb-0 {margin-bottom: 0 !important;}

[class*="pt-"] {
  padding-top: calc(var(--space-unit) * var(--multiplier));
}
[class*="pb-"] {
  padding-bottom: calc(var(--space-unit) * var(--multiplier));
}
.pt-1, .pb-1 { --multiplier: 1; }
.pt-2, .pb-2 { --multiplier: 2; }
.pt-3, .pb-3 { --multiplier: 3; }
.pt-4, .pb-4 { --multiplier: 4; }
.pt-5, .pb-5 { --multiplier: 5; }
.pt-6, .pb-6 { --multiplier: 6; }
.pt-7, .pb-7 { --multiplier: 7; }
.pt-8, .pb-8 { --multiplier: 8; }
.pt-0 {padding-top: 0 !important;}
.pb-0 {padding-bottom: 0 !important;}


.section_divider:before {
  background-color: var(--blue700);
  border-radius: var(--radius-2xs);
  content: "";
  display: block;
  margin: auto;
  width: 70px;
  height: 4px;
}

/* Page backgrounds */
.none {
  background-color: none;
}
.white {
  background-color: var(--light-100-white);
}
.yellow {
  background-color: var(--pineapple500);
}
.neo_grey {
  background-color: var(--light-neutral200);
}
.light_blue {
  background-color: var(--blue25);
}
.light_violet {
  background-color: var(--light-violet);
}
.neo_light_grey,
.light_neo_grey {
  background-color: var(--neo-light-grey, --light-neo-grey);
}
.off_white{
  background-color: var(--off-white);
}

.box-shadow {
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.50);
}




/* Special CSS for non default cases */
#login_page_free_user_registration_page {
  position: absolute;  
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  .wrapper {
    place-self: center; 
    max-width: 700px; 
    width: 100%;
  }
  .stage-h3 {
    font-size: var(--heading-lg) !important;
	  font-weight: var(--heading-lg-weight) !important;
		line-height: var(--heading-lg-lnht) !important;
  }
  .stage-h6 {
    font-size: var(--heading-xs);
	  font-weight: var(--heading-xs-weight);
		line-height: var(--heading-xs-lnht);
		color: var(--text-primary);
  }
  .stage-text-sm-regular {
    color: var(--text-secondary) !important;
		font-size: var(--text-sm-regular) !important;
		font-weight: var(--text-sm-regular-weight) !important;
		line-height: var(--text-sm-regular-lnht) !important;
  }
  .stage-text-md-regular {
    color: var(--text-secondary) !important;
		font-size: var(--text-md-regular) !important;
		font-weight: var(--text-md-regular-weight) !important;
		line-height: var(--text-md-regular-lnht) !important;
  }
  .columns {
    text-align: left; 
    gap: 20px; 
    margin-top: -50px;
    @media (width < 720px) {
      flex-direction: column;
      margin-top: auto;
    }
  }
  .col {
    flex: 1;
  }
  .img-wrapper {
    width: 100%; 
    height: 200px; 
    @media (width < 720px) {
      height: 100px;
    }
    margin-bottom: 0px; 
    display: grid; 
    place-items: center;
  }
  & img {
    height: auto; 
    max-width: 300px; 
    width: 130%; 
    object-fit: contain;
    @media (width < 720px) {
      height: 170px;
      margin-top: -20px;
    }
  }
}

/* remove limitations of video modul for neo home page */
.neo .colModWrapper:has(.remove-max-width) {
  @media (width < 992px) {flex-direction: column-reverse;}
  .imgIconWrapper {
    justify-content: center;
  }
  & video {
    border: 1px solid var(--light-neutral200);
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .content {
    @media (width < 992px) {text-align: center !important;}
  }
}
.neo .itemContentWrapper.content:has(.remove-max-width) {
  max-width: 100%;
  padding-left: 3rem !important;
  @media (width < 992px) {padding: 0 !important;}
}

/* Add a footnote to content-module */
.footnotes-wrapper {
  position: relative;
}

@media (width > 960px) {
  .footnotes-wrapper.desktop {
    display: block;
  }
  .footnotes-wrapper.mobile {
    display: none;
  }
}
@media (width < 961px) {
  .footnotes-wrapper.desktop {
    display: none;
  }
  .footnotes-wrapper.mobile {
    display: block;
  }
}


.footnotes-content {
  font-size: var(--text-xs-regular);
  font-variation-settings: 'wght' var(--text-xs-regular-weight);
  font-weight: var(--text-xs-regular-weight);
  line-height: var(--text-xs-regular-lnht);
  text-align: left;
  position: absolute;
  top: 3rem;
  width: var(--page-width);
  & span {
    padding-right: 2rem;
    @media (width < 961px) {
      display: block;
    }
  }
}

/* force wrap on mobile devices */
.footnotes-wrapper.mobile .footnotes-content {
  max-width: 100%;
}
  
/* finetuning */
/* https://business.trustedshops.de/partner/authorized - easyCreditLogo */ 
.imageWrapper187097595218 img {
  max-height: 100px !important;
}


/* Beta new Hubspot Forms */
.hs-form-html {
  max-width: 60rem;
  width: 100%;
  margin: auto;
  border: 1px solid var(--neo-grey);
}

/* Additional CSS for code needed by our content managers. Ask Daniëlle for info */
.csquotebox {
  padding: 1.875em;
  line-height: 1.5em;
  border-radius: 1.25em;
}
.bgblue {
  background-color: #e1f0f6;
}
.bgwhite {
  background-color: #ffffff;
}
.csquotetext {
  font-size: 1.25em;
}
.csquoteauthor {
  font-size: 0.875em;
}

/* Until 2026 January 16th */

/*body:has(#hs-overlay-cta-204591399181) nav.navbar,
body:has(#hs-overlay-cta-204591399181) nav.navigation-primary { 
  top: 100px !important; 
}*/


/* Used for ad in neo price card module 
 * and also as standalone in content module */

.ad {
  background: #EEEBFD;
  max-width: 1240px;
  width: 65%;
  @media (width < 1000px) {
    width: 100%;
  }
  margin: 6rem auto;
  padding: 2rem 3rem;
  border-radius: var(--radius-lg);
  position: relative;
  h5, p {
    padding: 0;
    margin: 0;
    text-align: left;
  }
  h5 {
    padding-bottom: .5rem;
  }
  .btn-dismiss {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    border: 1px solid black;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
  }
  input {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    width: 0;
  }
  label {
    cursor: pointer;
  }
}
.ad:has(.dismiss-checkbox:checked) {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  max-height: 0;
  padding-block: 0;
  pointer-events: none;
}


/* Accordion */
/* used for FAQ or Neo Feature List */
/* needs ".accordion_wrapper" */
.accordion_wrapper {
  .accordion__content {
    margin: 0;
    overflow: hidden;
    padding: 0rem 2rem;
    div, p, strong {
      font-size: var(--text-sm-regular)
    }
  }

  /* the complete accordion item */
  details {
    interpolate-size: allow-keywords;
    background: light-dark(var(--grey-10), var(--trstd-gray-light));
    box-shadow: none;
    padding: 0;
    position: relative;
    width: 100%;

  }
  details[open] {
    background: var(--feature-list-highlight);
  }

  details[open] .accordion__content {
    animation: slideDown .3s ease
  }

  details::details-content {
    height: 0;
    overflow: hidden;
    transition:height .4s ease, content-visibility allow-discrete .4s ease
  }

  details[open]::details-content {
    height: auto;
    height: calc-size(auto, size)
  }

  /* The headline and subheadline for an accordion item */
  summary {
    cursor: pointer;
    list-style: none;
    padding: 1.5rem 2rem;
    h6, p {
      margin: 0 auto 0 0;
      max-width: var(--content-width, 1200px);
      width: 90%;

    }
  }

  summary::-webkit-details-marker {
    display: none
  }

  /* the chevron down icon */
  summary:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2,4 7,10 12,4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 2rem;
    top: 2rem;
    transition: transform .6s ease;
    transform: rotate(0deg);
    display: inline-block;
    width: 24px;
    height: 24px;
  }

  details[open] summary:after {
      transform:rotate(180deg)
  }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform:translateY(-6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}


.neo_b2b_de_pricing_2026,
.neo_b2b_fr_pricing_2026,
.neo_b2b_en_pricing_2026,
.neo_b2b_nl_pricing_2026,
.neo_b2b_be_pricing_2026 {
  /* members cards hubdb */
  #hs_cos_wrapper_widget_1778574801358 {
    .colCard-content {
      .imageWrapper {
        width: 80px;
        height: 80px !important;
        margin: 2rem auto;
        img {
          width: 80px;
          height: 80px !important;
          border-radius: 999px !important;  
          border: 1px solid #ddd;          
        }
      }
      h5,p {
        display: none;
      }
      p.text {
        display: block;
        text-align: left;
        font-size: 90%;
      }     
      p.title {
        display: block;
        text-align: center;
        font-weight: bold;
      }      
      p.company {
        display: block;
        text-align: center;
      }
      hr {
        color: #ddd;
        height: 1px;
        border-top: 1px solid #ddd;
        width: 200px;
        margin: 1rem auto;
      }
    }
  }
}

.icon-arrow-right:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005AA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  display: inline-block;
  padding-top: 3px;
  vertical-align: sub;
}