*, *::before, *::after {
  box-sizing: border-box; }

* {
  margin: 0; }

html, body {
  height: 100%; }

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; }

input, button, textarea, select {
  font: inherit; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

#root, #__next {
  isolation: isolate; }

h1, h2, h3, h4, h5, h6, strong {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* inter-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v19-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v19-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v19-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v19-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/inter-v19-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v19-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v19-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* inter-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v19-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/barlow-v12-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/barlow-v12-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/barlow-v12-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/barlow-v12-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/barlow-v12-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/barlow-v12-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/barlow-v12-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/barlow-v12-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/barlow-v12-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/barlow-v12-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/barlow-v12-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/barlow-v12-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/barlow-v12-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* barlow-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/barlow-v12-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
h1 {
  font-family: var(--headline-font-family);
  font-weight: 700;
  color: var(--gray-700);
  font-size: var(--typo-h1-size);
  line-height: var(--typo-h1-line);
  margin-block-end: var(--typo-h1-marginend); }

h2 {
  font-family: var(--headline-font-family);
  font-weight: 700;
  color: var(--gray-700);
  font-size: var(--typo-h2-size);
  line-height: var(--typo-h2-line);
  margin-block-end: var(--typo-h2-marginend); }

h3 {
  font-family: var(--headline-font-family);
  font-weight: 700;
  color: var(--gray-700);
  font-size: var(--typo-h3-size);
  line-height: var(--typo-h3-line);
  margin-block-end: var(--typo-h3-marginend); }

p {
  font-family: var(--content-font-family);
  font-weight: 400;
  color: var(--gray-700);
  font-size: var(--typo-text-size);
  line-height: var(--typo-text-line);
  margin-block-end: var(--typo-text-marginend); }

strong {
  font-weight: bold; }

button {
  display: block;
  cursor: pointer;
  outline: unset;
  font-family: var(--content-font-family); }

.ctabutton {
  color: var(--white);
  font-size: var(--base-font-size);
  font-weight: 700;
  font-family: var(--content-font-family);
  background-color: var(--red);
  width: fit-content;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  height: 35px;
  display: block;
  padding-inline: calc(20*var(--unit));
  padding-block: calc(5*var(--unit)) calc(5*var(--unit));
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .ctabutton:hover {
    background-color: #BE1622; }
  @media (min-width: 767px) {
    .ctabutton {
      padding-block: calc(4*var(--unit)) calc(5*var(--unit)); } }
  @media (min-width: 1200px) {
    .ctabutton {
      padding-block: calc(5*var(--unit)) calc(5*var(--unit)); } }

a.orderlink {
  color: var(--white);
  font-size: var(--base-font-size);
  font-weight: 700;
  font-family: var(--content-font-family);
  background-color: var(--red);
  width: fit-content;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  height: 35px;
  display: block;
  padding-inline: calc(20*var(--unit));
  padding-block: calc(4*var(--unit)) calc(5*var(--unit));
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a.orderlink:hover {
    background-color: #BE1622; }
  @media (min-width: 767px) {
    a.orderlink {
      padding-block: calc(5*var(--unit)) calc(5*var(--unit)); } }
  @media (min-width: 1200px) {
    a.orderlink {
      padding-block: calc(6*var(--unit)) calc(5*var(--unit)); } }

.ctabuttonwhite {
  font-family: var(--headline-font-family);
  font-weight: bold;
  color: var(--gray-700);
  font-size: var(--typo-text-size);
  line-height: var(--typo-text-line);
  margin-block-end: var(--typo-text-marginend);
  background-color: var(--white);
  width: fit-content;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  height: 35px;
  display: block;
  padding-inline: calc(20*var(--unit));
  padding-block: calc(7*var(--unit)) calc(5*var(--unit));
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .ctabuttonwhite:hover {
    background-color: #F6F5F1; }
  @media (min-width: 767px) {
    .ctabuttonwhite {
      padding-block: calc(5*var(--unit)) calc(5*var(--unit)); } }

.formbody button {
  color: var(--white);
  font-size: var(--base-font-size);
  font-weight: 700;
  font-family: var(--content-font-family);
  background-color: var(--red);
  width: fit-content;
  text-align: center;
  text-decoration: none;
  height: 35px;
  display: block;
  border: 0;
  outline: 0;
  margin-block: unset;
  padding-inline: calc(20*var(--unit));
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .formbody button:hover {
    background-color: #BE1622; }
.formbody button:not(.newslettercontent button) {
  border-radius: 18px; }

strong.orderlink {
  color: var(--white);
  font-size: var(--base-font-size);
  font-weight: 700;
  font-family: var(--content-font-family);
  background-color: var(--red);
  width: fit-content;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  height: 35px;
  display: block;
  padding-inline: calc(15*var(--unit));
  padding-block: calc(4*var(--unit)) calc(5*var(--unit));
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  strong.orderlink:hover {
    background-color: #BE1622; }

.newslettercontent button {
  border-radius: 30px;
  padding-inline: calc(30*var(--unit)); }

.ccm--p, .ccm-powered-by a, .ccm-modal-inner {
  font-family: var(--content-font-family); }

.ccm--h1 {
  font-family: var(--headline-font-family); }

header {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: var(--white);
  padding-block: var(--header-padding-block);
  height: var(--header-height); }

header .inlay {
  height: 75px; }
  @media (min-width: 1200px) {
    header .inlay {
      height: 120px; } }
header .logo {
  padding-inline-start: var(--articledistance-inner);
  max-width: 175px; }
  header .logo img {
    width: 100%;
    max-width: var(--header-logo-maxwidth);
    height: auto; }
  @media (min-width: 767px) {
    header .logo {
      max-width: 300px; } }
  @media (min-width: 1200px) {
    header .logo {
      padding-inline-start: var(--articledistance-inner);
      padding-block-start: calc(8 * var(--unit)); } }
  @media (min-width: 1620px) {
    header .logo {
      padding-inline-start: 0; } }

.breadcrumbcontent:not(.home .breadcrumbcontent) {
  display: none;
  width: 100%;
  background: var(--breadcrumb-background);
  margin-block-start: calc(var(--header-height)); }
  @media (min-width: 1024px) {
    .breadcrumbcontent:not(.home .breadcrumbcontent) {
      display: block; } }

.headerline {
  height: var(--home-breadcrumb-height);
  background: var(--breadcrumb-background); }

.home .breadcrumbcontent {
  bottom: 0; }
  .home .breadcrumbcontent ul {
    display: none; }

.breadcrumbcontent:not(.home .breadcrumbcontent) {
  height: var(--content-breadcrumb-height); }
  .breadcrumbcontent:not(.home .breadcrumbcontent) ul {
    display: none; }
  @media (min-width: 1024px) {
    .breadcrumbcontent:not(.home .breadcrumbcontent) {
      margin-block-end: var(--articledistance); }
      .breadcrumbcontent:not(.home .breadcrumbcontent) ul {
        font-family: var(--content-font-family);
        font-size: var(--base-font-size);
        color: var(--gray-700);
        padding-inline: 0;
        display: flex;
        list-style-type: none; } }
    @media (min-width: 1024px) and (min-width: 1200px) {
      .breadcrumbcontent:not(.home .breadcrumbcontent) ul {
        padding-block-start: var(--distance-25);
        padding-inline-start: 0; } }
    @media (min-width: 1024px) and (min-width: 1620px) {
      .breadcrumbcontent:not(.home .breadcrumbcontent) ul {
        margin-inline-start: 0; } }
  @media (min-width: 1024px) {
        .breadcrumbcontent:not(.home .breadcrumbcontent) ul li:not(:first-of-type) {
          padding-inline-start: var(--distance-15); }
        .breadcrumbcontent:not(.home .breadcrumbcontent) ul li, .breadcrumbcontent:not(.home .breadcrumbcontent) ul a {
          color: inherit; }
          .breadcrumbcontent:not(.home .breadcrumbcontent) ul li a, .breadcrumbcontent:not(.home .breadcrumbcontent) ul a a {
            text-decoration: none; }
        .breadcrumbcontent:not(.home .breadcrumbcontent) ul li:first-of-type {
          font-weight: 700; }
        .breadcrumbcontent:not(.home .breadcrumbcontent) ul li:not(:first-of-type, :last-of-type) {
          background-image: url("../img/breadcrumb-arrow.svg");
          background-repeat: no-repeat;
          background-position: center right;
          padding-right: 30px; } }

.heroelement {
  width: 100%;
  height: var(--hero-hight); }
  .heroelement .ce_rsce_herocontent {
    width: inherit;
    height: inherit; }
    .heroelement .ce_rsce_herocontent .herobackgroundimage {
      width: inherit;
      height: inherit;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: -200px; }
      @media (min-width: 767px) {
        .heroelement .ce_rsce_herocontent .herobackgroundimage {
          background-position: -80px; } }
      @media screen and (min-width: 640px) {
        .heroelement .ce_rsce_herocontent .herobackgroundimage {
          background-position: -0px; } }
      @media (min-width: 1620px) {
        .heroelement .ce_rsce_herocontent .herobackgroundimage {
          background-size: 100%; } }

.menuarea {
  position: absolute;
  top: var(--articledistance-medium);
  right: var(--articledistance-inner);
  width: calc( 54*var(--unit));
  height: calc( 30 * var(--unit));
  border-radius: 18px; }
  .menuarea .menubutton {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-content: center; }
  .menuarea span {
    display: block;
    background-color: var(--white);
    width: 15px;
    height: 2px; }
  .menuarea .top {
    margin-block-end: 5px; }
  @media (min-width: 1200px) {
    .menuarea {
      display: none; } }

/*Main Navigation*/
.activenavigation {
  display: block !important; }

.mainnavigation {
  --fontsizemainul: var(--mainnavigation-font-size);
  --fontsizesecondlevel: var(--mainnavigation-font-size);
  position: relative;
  z-index: 9;
  background-color: var(--white);
  top: 5px;
  width: 100%;
  font-family: var(--content-font-family);
  height: 100vh;
  padding-block: 60px;
  display: none; }
  .mainnavigation ul.level_1 li {
    padding-block-end: 15px; }
    @media (min-width: 767px) {
      .mainnavigation ul.level_1 li {
        padding-block-end: 25px; } }
    .mainnavigation ul.level_1 li a:not(a.orderlink) {
      font-size: var(--fontsizemainul);
      font-weight: 700;
      text-decoration: none;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      .mainnavigation ul.level_1 li a:not(a.orderlink):hover {
        color: var(--navlinkhovercolor); }
    .mainnavigation ul.level_1 li a:not(a.orderlink) {
      color: var(--navlinkcolor); }
  .mainnavigation ul.level_1 li.orderlink {
    position: relative;
    margin-block: 25px;
    left: 0px; }
    @media (min-width: 767px) {
      .mainnavigation ul.level_1 li.orderlink {
        left: 72px; } }
    @media (min-width: 1200px) {
      .mainnavigation ul.level_1 li.orderlink {
        left: 82px;
        margin-block: 13px; } }
  .mainnavigation ul.level_1 a.orderlink, .mainnavigation ul.level_1 strong.orderlink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -50%); }
    @media (min-width: 767px) {
      .mainnavigation ul.level_1 a.orderlink, .mainnavigation ul.level_1 strong.orderlink {
        position: static; } }
  @media (min-width: 767px) {
    .mainnavigation ul.level_1 {
      margin-inline-start: 125px; } }
  .mainnavigation ul.level_1 strong:not(strong.orderlink) {
    font-weight: 700;
    color: var(--red);
    background-color: var(--navstrong);
    position: relative;
    left: -15px;
    padding: 5px 15px;
    z-index: 99;
    box-sizing: border-box; }
  .mainnavigation li.submenu {
    position: relative;
    width: 95px; }
  .mainnavigation span.submenubutton {
    position: absolute;
    right: -15px;
    top: 10px;
    width: 30px;
    height: 30px; }
    .mainnavigation span.submenubutton svg {
      transform-origin: center;
      width: 10px; }
    @media (min-width: 1200px) {
      .mainnavigation span.submenubutton {
        top: 11px;
        right: -20px; }
        .mainnavigation span.submenubutton svg {
          display: block;
          width: 10px !important;
          height: auto; } }
  .mainnavigation .activesubmenu ul.level_2 {
    display: block !important;
    width: 100%;
    min-width: 220px;
    z-index: 98;
    background-color: var(--white); }
  .mainnavigation .activebutton {
    top: -8px; }
    .mainnavigation .activebutton svg {
      transform: rotate(180deg); }
  .mainnavigation ul.level_2 {
    padding-inline: 0;
    padding-block: 5px;
    display: none; }
    .mainnavigation ul.level_2 li {
      padding-block-end: 0; }
      .mainnavigation ul.level_2 li a {
        color: var(--navsecondlevelcolor);
        font-size: var(--fontsizesecondlevel);
        font-weight: 400 !important;
        line-height: 2.143;
        letter-spacing: 0;
        text-transform: unset; }
      .mainnavigation ul.level_2 li strong {
        color: var(--navsecondlevelcolor);
        font-size: var(--fontsizesecondlevel);
        font-weight: 700 !important;
        line-height: 2.143;
        letter-spacing: 0 !important;
        text-transform: unset !important;
        background-color: transparent;
        white-space: nowrap; }
    @media (min-width: 1200px) {
      .mainnavigation ul.level_2 {
        background-color: var(--subnavbackground); } }

@media (min-width: 1200px) {
  .darksub svg path {
    fill: var(--darkpink); }

  nav.block {
    overflow: unset; }

  .mainnavigation {
    display: block;
    background-color: transparent;
    padding-block: 0;
    height: 100px;
    position: relative;
    top: -48px;
    z-index: 12;
    margin-left: 22%; } }
  @media (min-width: 1200px) and (min-width: 1620px) {
    .mainnavigation {
      margin-left: 35%; } }
@media (min-width: 1200px) {
    .mainnavigation ul.level_1 {
      display: flex;
      gap: 0 15px;
      position: static !important; }
      .mainnavigation ul.level_1 li.submenu {
        width: fit-content; }
      .mainnavigation ul.level_1 strong {
        position: static !important;
        left: 0; }
      .mainnavigation ul.level_1 a {
        padding: 5px 15px; }
    .mainnavigation ul.level_2 {
      position: absolute;
      background-color: var(--gray-100);
      top: 20px;
      display: none;
      width: fit-content;
      z-index: 999;
      margin: 25px 0 0 0;
      border-radius: 10px; } }
    @media (min-width: 1200px) and (min-width: 1200px) {
      .mainnavigation ul.level_2 {
        padding-bottom: 15px;
        padding-top: 15px; } }
@media (min-width: 1200px) {
      .mainnavigation ul.level_2 a {
        white-space: nowrap;
        display: block;
        font-weight: 300 !important;
        width: 100%;
        color: var(--subnavlinkcolor) !important;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        padding: 0px 10px;
        border-radius: 4px; }
      .mainnavigation ul.level_2 strong {
        background-color: var(--subnavhovercolor) !important;
        padding: 0px 10px !important;
        white-space: nowrap;
        display: block;
        margin-block: 2px;
        color: var(--subnavlinkcolor) !important; }
      .mainnavigation ul.level_2 .submenuicon {
        position: relative;
        top: -19px;
        left: 11px;
        width: 20px;
        height: 10px;
        display: none; }
        .mainnavigation ul.level_2 .submenuicon svg path {
          fill: var(--subnavbackground); } }
      @media (min-width: 1200px) and (min-width: 1200px) {
        .mainnavigation ul.level_2 .submenuicon {
          display: block; } }
@media (min-width: 1200px) {
      .mainnavigation ul.level_2 li {
        margin-inline: 10px;
        height: 33px;
        padding: 0 10px 4px 5px;
        border-radius: 5px; }
        .mainnavigation ul.level_2 li:hover {
          background-color: #D6E0DC; }
        .mainnavigation ul.level_2 li a {
          line-height: 1.96; }

  li.jobs ul.level_2 {
    height: 95px;
    width: 250px !important; }

  .mainnavigation ul.level_1 li.submenu:hover > ul {
    display: block !important; } }
@media (min-width: 1200px) {
  .mainnavigation {
    right: 18px; } }
@media (min-width: 1200px) {
  ul.level_2 {
    display: block; }
    ul.level_2:before {
      content: "";
      display: block !important;
      background-image: url("../img/iconsubnav.svg");
      background-repeat: no-repeat;
      background-size: 15px 9px;
      width: 15px;
      height: 9px;
      position: absolute;
      top: -9px;
      left: 17px; }
    ul.level_2 li {
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; } }

.mastercontent:not(.home .mastercontent) {
  margin-block-start: calc(var(--header-height) + var(--content-breadcrumb-height) + var(--articledistance)); }
  @media (min-width: 1024px) {
    .mastercontent:not(.home .mastercontent) {
      margin-block-start: 0; } }
  .mastercontent:not(.home .mastercontent) .mod_article {
    margin-block-end: var(--articledistance); }
  .mastercontent:not(.home .mastercontent) .mod_article:not(.articlefullsize, .heroelement, .graybackground) {
    margin-inline: var(--articledistance-inner); }
  .mastercontent:not(.home .mastercontent) img:not(.iconimage img) {
    border-radius: var(--content-image-border-radius); }

.mastercontent ul {
  margin-block: var(--distance-25);
  padding-inline: 0;
  margin-inline-start: var(--distance-20);
  font-family: var(--headline-font-family);
  font-weight: 300;
  color: var(--gray-700);
  font-size: var(--typo-text-size);
  line-height: var(--typo-text-line);
  margin-block-end: var(--typo-text-marginend);
  list-style: disc; }
  .mastercontent ul li {
    font-family: var(--content-font-family);
    font-weight: 400;
    color: var(--gray-700);
    font-size: var(--typo-text-size);
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend);
    margin-block-end: 5px; }
.mastercontent a:not(.ctabutton, .ctabuttonwhite) {
  color: var(--red); }

.stepcontent {
  padding: var(--distance-25);
  border: 2px solid #f0efe8;
  border-radius: 10px; }
  @media (min-width: 1200px) {
    .stepcontent {
      padding: var(--distance-50); } }
  .stepcontent h3 {
    font-family: var(--headline-font-family);
    font-weight: bold;
    color: var(--gray-700);
    font-size: var(--typo-h3-size);
    line-height: var(--typo-h3-line);
    margin-block-end: var(--distance-15); }
    @media (min-width: 1200px) {
      .stepcontent h3 {
        font-family: var(--headline-font-family);
        font-weight: bold;
        color: var(--gray-700);
        font-size: var(--typo-h3-size);
        line-height: var(--typo-h3-line);
        margin-block-end: var(--distance-25); } }

.stepcontent:not(:last-of-type) {
  margin-block-end: var(--distance-25); }
  @media (min-width: 1200px) {
    .stepcontent:not(:last-of-type) {
      margin-block-end: var(--distance-50); } }

.graystepcontent {
  background-color: var(--gray-100); }

.inlay {
  max-width: var(--max-width);
  margin-inline: auto; }

.home .mastercontent {
  margin-block-start: var(--header-height); }
  .home .mastercontent .mod_article:not(.articlefullsize, .heroelement, .graybackground) {
    margin-inline: var(--articledistance-inner); }
  .home .mastercontent img:not(.iconimage img) {
    border-radius: var(--content-image-border-radius); }
  .home .mastercontent .mod_article {
    margin-block-end: var(--articledistance); }

.gridrow figure {
  margin-block-end: var(--distance-25); }
  .gridrow figure img {
    width: 100%;
    height: auto; }
  @media (min-width: 767px) {
    .gridrow figure {
      margin-block-end: var(--distance-35); } }

@media (min-width: 767px) {
  .grid8-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--distance-25); } }
@media (min-width: 1200px) {
  .grid8-4 {
    grid-template-columns: 8fr 4fr; } }

@media (min-width: 1024px) {
  .gridtwoelements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--distance-25); } }
@media (min-width: 1200px) {
  .gridtwoelements {
    gap: 0 var(--distance-50); }
    .gridtwoelements .content-text {
      padding-block: var(--distance-75); } }

@media (min-width: 1024px) {
  .grid4-8 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--distance-25); } }
@media (min-width: 1200px) {
  .grid4-8 {
    grid-template-columns: 4fr 8fr; } }

.ce_rsce_accordeons h2 {
  -webkit-margin-after: 35px;
  margin-block-end: 35px;
  color: var(--gray-700); }
  .ce_rsce_accordeons h2:after {
    display: none !important; }
.ce_rsce_accordeons .accordeon-items:last-of-type {
  -webkit-margin-after: 0px;
  margin-block-end: 0px; }
.ce_rsce_accordeons .accordeon-items {
  margin-block-end: 5px; }
  @media (min-width: 1024px) {
    .ce_rsce_accordeons .accordeon-items {
      display: grid; } }
  .ce_rsce_accordeons .accordeon-items .accordeon-headline {
    border-radius: 10px;
    position: relative;
    width: 100%;
    background-color: var(--white);
    height: var(--distance-75);
    padding-inline: 15px;
    overflow-y: hidden;
    display: flex;
    align-items: center; }
    @media (min-width: 767px) {
      .ce_rsce_accordeons .accordeon-items .accordeon-headline {
        padding-inline: 25px; } }
    .ce_rsce_accordeons .accordeon-items .accordeon-headline h3 {
      margin: 0;
      padding: 0;
      background-repeat: no-repeat;
      background-position: 15px center;
      max-width: 90%;
      font-size: 1rem;
      cursor: pointer;
      line-height: 1.2;
      color: var(--darkgray) !important; }
      @media (min-width: 767px) {
        .ce_rsce_accordeons .accordeon-items .accordeon-headline h3 {
          font-size: 1.25rem; } }
      @media (min-width: 1024px) {
        .ce_rsce_accordeons .accordeon-items .accordeon-headline h3 {
          max-width: unset;
          font-family: var(--headline-font-family);
          font-weight: 700;
          color: var(--gray-700);
          font-size: var(--distance-20);
          line-height: var(--typo-h3-line);
          margin-block-end: 0; } }
    .ce_rsce_accordeons .accordeon-items .accordeon-headline .accstatebutton {
      background-image: url("../img/plus.svg");
      width: 30px;
      height: 30px;
      background-repeat: no-repeat;
      position: absolute;
      right: var(--articledistance-inner);
      top: 25px; }
  .ce_rsce_accordeons .accordeon-items .accordeon-content {
    position: relative;
    height: 0px;
    background-color: var(--white);
    overflow-y: hidden;
    transition: height .5s ease;
    padding-inline: 15px;
    border-bottom: 1px solid var(--hm-light-gray); }
    @media (min-width: 767px) {
      .ce_rsce_accordeons .accordeon-items .accordeon-content {
        padding-inline: 25px; } }
    .ce_rsce_accordeons .accordeon-items .accordeon-content p {
      padding-block-start: var(--distance-15) !important;
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: var(--typo-text-size);
      line-height: var(--typo-text-line);
      margin-block-end: 0;
      -webkit-padding-after: 25px;
      padding-block: 0 25px; }
      @media (min-width: 1200px) {
        .ce_rsce_accordeons .accordeon-items .accordeon-content p {
          padding-inline-start: 0px !important; } }
.ce_rsce_accordeons .activeacc .accordeon-headline {
  border-radius: 10px 10px 0 0; }
  .ce_rsce_accordeons .activeacc .accordeon-headline .accstatebutton {
    background-image: url("../img/minus.svg"); }
.ce_rsce_accordeons .activeacc .accordeon-content {
  height: auto;
  border-radius: 0 0 10px 10px;
  border-top: 0; }
  .ce_rsce_accordeons .activeacc .accordeon-content p {
    padding-block-end: 0px !important;
    margin-block-end: 0; }
  @media (min-width: 767px) {
    .ce_rsce_accordeons .activeacc .accordeon-content p {
      padding-block-end: 30px !important; } }
.ce_rsce_accordeons .activeacc .statebutton .topline {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }
.ce_rsce_accordeons .activeacc .statebutton .bottomline {
  -webkit-transform: rotate(-45deg) !important;
  -ms-transform: rotate(-45deg) !important;
  transform: rotate(-45deg) !important; }

@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(180deg); } }
.ratgebercontent .content-image {
  margin-block: var(--articledistance); }
  .ratgebercontent .content-image img {
    width: 100%;
    height: auto; }
.ratgebercontent .content-text:not(:first-of-type) {
  margin-block: var(--distance-25); }
  @media (min-width: 767px) {
    .ratgebercontent .content-text:not(:first-of-type) {
      margin-block: var(--distance-50); } }
  @media (min-width: 1024px) {
    .ratgebercontent .content-text:not(:first-of-type) {
      margin-block: var(--distance-75); }
      .ratgebercontent .content-text:not(:first-of-type) h2 {
        font-family: var(--headline-font-family);
        font-weight: bold;
        color: var(--gray-700);
        font-size: var(--distance-30);
        line-height: var(--typo-h2-line);
        margin-block-end: var(--typo-h2-marginend); } }
  @media (min-width: 1200px) {
    .ratgebercontent .content-text:not(:first-of-type) {
      margin-block: var(--distance-100); } }

.ce_form {
  margin-block-start: var(--articledistance);
  font-family: var(--content-font-family);
  color: var(--gray-700); }
  @media (min-width: 1024px) {
    .ce_form {
      margin-block-start: unset; } }
  .ce_form div.widget {
    margin-block-end: var(--distance-15); }
    @media (min-width: 1200px) {
      .ce_form div.widget {
        margin-block-end: var(--distance-25); } }
  .ce_form label {
    display: block;
    font-family: var(--content-font-family);
    color: inherit;
    font-family: var(--headline-font-family);
    font-weight: 400;
    color: var(--gray-700);
    font-size: var(--typo-text-size);
    line-height: var(--typo-text-line);
    margin-block-end: calc( 5* var(--unit)); }
  .ce_form input:not(input[tyoe=checkbox]), .ce_form select, .ce_form textarea {
    width: 100%;
    border: 1px solid #979797;
    outline: unset;
    border-radius: 5px;
    padding: calc( 10* var(--unit)); }
  .ce_form input:not(input[tyoe=checkbox]), .ce_form select {
    height: 50px; }
  .ce_form div.widget-textarea:not(.areaProdukte, .areaErsatzteie) {
    height: 136px; }
    @media (min-width: 767px) {
      .ce_form div.widget-textarea:not(.areaProdukte, .areaErsatzteie) {
        height: 140px; } }
  .ce_form .widget-select {
    position: relative; }
    .ce_form .widget-select:after {
      display: block;
      content: '';
      width: 15px;
      height: 10px;
      background-repeat: no-repeat;
      background-image: url("../img/selecticon.svg");
      z-index: 2;
      position: absolute;
      top: 55px;
      right: 13px; }
  .ce_form select {
    border: 1px solid #bbbab5;
    outline: unset;
    border-radius: 5px;
    padding: calc( 10* var(--unit));
    font-family: var(--content-font-family);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; }
  .ce_form fieldset {
    border: 0;
    padding: 0; }
  @media (min-width: 1024px) {
    .ce_form fieldset:not(.fields-2, .fieldsfull) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0 15px; } }
  @media (min-width: 1024px) {
    .ce_form .fields-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 15px; } }
  .ce_form textarea {
    padding-bottom: 0 !important; }
  .ce_form .widget-checkbox span {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0 10px;
    height: 50px; }
    @media (min-width: 767px) {
      .ce_form .widget-checkbox span {
        height: 35px; } }
    .ce_form .widget-checkbox span label {
      align-self: center;
      padding-top: 12px;
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: 0.85rem;
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend); }
      @media screen and (min-width: 600px) {
        .ce_form .widget-checkbox span label {
          padding-top: 16px; } }
  .ce_form .widget-checkbox span:last-of-type {
    margin-block-end: 15px; }

.youtube-consent-banner {
  background: #F6F5F1;
  border-radius: 10px;
  margin-bottom: 2rem;
  font-size: 1rem;
  max-width: var(--content-max-width);
  margin-inline: auto;
  margin-block-end: var(--distance-75);
  padding: var(--distance-25); }
  @media (min-width: 1024px) {
    .youtube-consent-banner {
      padding: var(--distance-50); } }

.youtube-consent-banner .yt-note {
  color: #555;
  margin-top: 0.35rem; }
  @media (min-width: 767px) {
    .youtube-consent-banner .yt-note {
      padding-inline-start: 15px;
      white-space: nowrap; } }

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  margin: 0;
  top: -8px; }
  @media (min-width: 767px) {
    .switch {
      left: -35px;
      top: 0; } }

.switch input {
  opacity: 0;
  width: 0;
  height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
  z-index: 98; }

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%; }

input:checked + .slider {
  background-color: var(--green); }

input:checked + .slider:before {
  transform: translateX(24px); }

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem; }
  @media (min-width: 1024px) {
    .youtube-grid {
      grid-template-columns: repeat(3, 1fr); } }

.youtube-video-card {
  padding: 0;
  text-align: center;
  border-radius: 4px;
  width: 100%; }
  .youtube-video-card figure {
    position: relative;
    display: block;
    line-height: 0;
    width: 100%;
    height: auto; }
    .youtube-video-card figure img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; }
  .youtube-video-card p {
    font-family: var(--headline-font-family);
    font-weight: bold;
    color: var(--gray-700);
    font-size: 1rem;
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend); }

.youtube-video-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  display: block; }

.youtube-video-card button {
  padding: 0.5rem 1rem;
  position: absolute;
  width: 60px;
  height: 60px;
  color: transparent;
  background-color: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  border: 0;
  background-image: url("../img/ytbutton.svg");
  background-repeat: no-repeat;
  z-index: 5; }
  .youtube-video-card button:hover {
    background-image: url("../img/yt-hover-button.svg"); }

.youtube-video-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

/* MODAL */
.youtube-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; }
  .youtube-modal.hidden {
    display: none; }

#youtube-modal-iframe-wrapper {
  position: relative;
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden; }

#youtube-modal-iframe-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none; }
  @media (min-width: 1024px) {
    #youtube-modal-iframe-wrapper iframe {
      max-width: 800px;
      left: 50%;
      transform: translateX(-50%); } }

#modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  background: #800;
  font-size: 1.5rem;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 0px;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  z-index: 2; }
  @media (min-width: 1024px) {
    #modal-close {
      top: 20px;
      right: 20px; } }
  #modal-close span {
    position: relative;
    top: -1px; }

@media (min-width: 767px) {
  .ytcol2 {
    display: grid;
    max-width: 400px;
    grid-template-columns: 20px 1fr;
    height: 30px;
    padding-inline-start: var(--distance-35); }
    .ytcol2 p {
      align-self: center;
      position: relative;
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: var(--typo-text-size);
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend);
      top: -5px; }

  #youtube-modal-iframe-wrapper {
    width: 100vw;
    max-width: 100%;
    margin: 0 1rem; } }
.orderformarticle .minifiedcontentwidth {
  border: 2px solid #f0efe8;
  border-radius: 10px;
  padding: var(--distance-15); }
  @media (min-width: 1024px) {
    .orderformarticle .minifiedcontentwidth {
      padding: var(--distance-50); } }
.orderformarticle .ce_form {
  margin-block-start: var(--distance-35); }
  .orderformarticle .ce_form h3 {
    margin-block-end: var(--distance-25); }

.hintcontent {
  background-color: var(--info-background-color);
  box-sizing: border-box;
  border-radius: 10px;
  width: 100%;
  min-height: 140px;
  max-height: 140px;
  background-image: url("../img/info.svg");
  background-position: 25px center;
  background-repeat: no-repeat;
  padding: var(--distance-25);
  margin-block-start: 75px; }
  @media screen and (min-width: 512px) {
    .hintcontent {
      min-height: 100px;
      max-height: 100px; } }
  @media (min-width: 767px) {
    .hintcontent {
      padding: 32px var(--distance-25); } }
  @media (min-width: 1024px) {
    .hintcontent {
      padding: var(--distance-25); } }
  .hintcontent p {
    padding-inline-start: var(--distance-50);
    font-family: var(--headline-font-family);
    font-weight: 400;
    color: var(--gray-700);
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 0; }
    @media (min-width: 1024px) {
      .hintcontent p {
        font-family: var(--headline-font-family);
        font-weight: 400;
        color: var(--gray-700);
        font-size: 1rem;
        line-height: var(--typo-text-line);
        margin-block-end: 0; } }

.errormessage {
  background-color: var(--info-background-color);
  box-sizing: border-box;
  border-radius: 10px;
  width: 100%;
  min-height: 80px;
  max-height: 80px;
  background-image: url("../img/info.svg");
  background-position: 25px center;
  background-repeat: no-repeat;
  padding: var(--distance-25);
  margin-block-start: 75px; }
  @media (min-width: 1024px) {
    .errormessage {
      padding: var(--distance-25); } }
  .errormessage p {
    margin-top: 5px;
    padding-inline-start: var(--distance-50);
    font-family: var(--headline-font-family);
    font-weight: bold;
    color: var(--gray-700);
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 0; }
    @media (min-width: 1024px) {
      .errormessage p {
        font-family: var(--headline-font-family);
        font-weight: bold;
        color: var(--gray-700);
        font-size: 1rem;
        line-height: var(--typo-text-line);
        margin-block-end: 0; } }

@media (min-width: 767px) {
  .produkte-order-view .col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px; } }
.produkte-order-view .orderproitem {
  border: 2px solid #708d81;
  border-radius: 10px;
  cursor: pointer;
  margin-block-end: var(--distance-10);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: var(--distance-15); }
  @media (min-width: 1024px) {
    .produkte-order-view .orderproitem {
      margin-block-end: 0;
      height: 85px; } }
  @media (min-width: 1024px) {
    .produkte-order-view .orderproitem {
      padding: var(--distance-15) var(--distance-15) 0 var(--distance-15); } }
  .produkte-order-view .orderproitem p.name {
    font-family: var(--headline-font-family);
    font-weight: 700;
    color: var(--gray-700);
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 5px; }
    @media (min-width: 1024px) {
      .produkte-order-view .orderproitem p.name {
        font-family: var(--headline-font-family);
        font-weight: 700;
        color: var(--gray-700);
        font-size: 1rem;
        line-height: var(--typo-text-line);
        margin-block-end: 5px;
        white-space: nowrap; } }
  .produkte-order-view .orderproitem p.price {
    font-family: var(--headline-font-family);
    font-weight: 700;
    color: var(--red);
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 0; }
    @media (min-width: 1024px) {
      .produkte-order-view .orderproitem p.price {
        font-family: var(--headline-font-family);
        font-weight: 700;
        color: var(--red);
        font-size: 1rem;
        line-height: var(--typo-text-line);
        margin-block-end: 0; } }
  .produkte-order-view .orderproitem:hover {
    background-color: var(--gray-100); }
  .produkte-order-view .orderproitem .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #dadada;
    position: relative;
    top: 15px; }
    @media screen and (min-width: 400px) {
      .produkte-order-view .orderproitem .dot {
        top: 10px; } }
    @media (min-width: 1024px) {
      .produkte-order-view .orderproitem .dot {
        top: 15px; } }

.accessory-order-list .col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); }
  .accessory-order-list .col-2 input:not(input[tyoe=checkbox]), .accessory-order-list .col-2 select, .accessory-order-list .col-2 textarea {
    font-family: var(--content-font-family);
    width: 100%;
    border: 1px solid #BBBAB5;
    outline: unset;
    border-radius: 5px;
    margin-top: 3px;
    padding: calc( 10* var(--unit));
    height: 30px;
    font-family: var(--headline-font-family);
    font-weight: 400;
    color: #212832;
    font-size: 0.85rem;
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend); }
  .accessory-order-list .col-2 input:not(input[tyoe=checkbox], .zubsearch), .accessory-order-list .col-2 select, .accessory-order-list .col-2 textarea {
    color: red !important; }
  .accessory-order-list .col-2 h3 {
    padding-top: 5px;
    font-family: var(--headline-font-family);
    font-weight: bold;
    color: var(--gray-700);
    font-size: var(--typo-text-size);
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend); }
    @media (min-width: 767px) {
      .accessory-order-list .col-2 h3 {
        padding-top: 2px;
        font-family: var(--headline-font-family);
        font-weight: bold;
        color: var(--gray-700);
        font-size: var(--typo-h3-size);
        line-height: var(--typo-h3-line);
        margin-block-end: var(--typo-h3-marginend); } }

.activeproductitem {
  background-color: var(--gray--100); }
  .activeproductitem .dot {
    padding: 2px;
    background-color: var(--green); }

.zubehoerformitems {
  border-radius: 10px;
  cursor: pointer;
  border-bottom: 2px solid #f0efe8;
  margin-block-end: var(--distance-10);
  padding-block: var(--distance-10);
  padding-inline-start: var(--distance-25);
  position: relative; }
  @media (min-width: 767px) {
    .zubehoerformitems {
      padding-block: var(--distance-25);
      display: grid;
      grid-template-columns: 40px 2fr 1fr;
      align-items: center;
      position: static; } }
  .zubehoerformitems .content {
    position: relative;
    width: 90%; }
  .zubehoerformitems .dot {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    border: 1px solid #dadada;
    position: relative;
    top: 50px;
    left: -30px; }
    @media screen and (min-width: 400px) {
      .zubehoerformitems .dot {
        top: 30px; } }
    @media (min-width: 767px) {
      .zubehoerformitems .dot {
        top: 0px; } }
  .zubehoerformitems .form {
    margin-block-start: var(--distance-10);
    position: relative;
    width: 220px; }
    @media (min-width: 1024px) {
      .zubehoerformitems .form {
        width: auto; } }
    .zubehoerformitems .form select {
      padding-inline-start: 5px; }
    .zubehoerformitems .form:after {
      display: block;
      content: '';
      width: 15px;
      height: 10px;
      background-repeat: no-repeat;
      background-image: url("../img/selecticon.svg");
      z-index: 2;
      position: absolute;
      top: 15px;
      right: 14px; }
      @media (min-width: 1024px) {
        .zubehoerformitems .form:after {
          right: 6px; } }
    .zubehoerformitems .form select {
      border: 1px solid #bbbab5;
      outline: unset;
      border-radius: 5px;
      width: 160px;
      position: relative;
      top: 0px;
      padding: calc( 5* var(--unit));
      font-family: var(--content-font-family);
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: 1rem;
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend);
      margin-left: 5px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none; }
    .zubehoerformitems .form label {
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: 0.75rem;
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend); }
      @media (min-width: 1024px) {
        .zubehoerformitems .form label {
          font-family: var(--headline-font-family);
          font-weight: 400;
          color: var(--gray-700);
          font-size: 1rem;
          line-height: var(--typo-text-line);
          margin-block-end: var(--typo-text-marginend); } }
    @media (min-width: 767px) {
      .zubehoerformitems .form {
        justify-self: end; } }
  .zubehoerformitems p.name {
    width: fit-content;
    font-family: var(--headline-font-family);
    font-weight: 700;
    color: var(--gray-700);
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 5px; }
    @media (min-width: 767px) {
      .zubehoerformitems p.name {
        position: relative;
        font-family: var(--headline-font-family);
        font-weight: 700;
        color: var(--gray-700);
        font-size: 1rem;
        line-height: var(--typo-text-line);
        margin-block-end: 5px;
        white-space: nowrap; } }
  .zubehoerformitems p.price {
    font-family: var(--headline-font-family);
    font-weight: 700;
    color: #BE1622;
    font-size: 0.75rem;
    line-height: var(--typo-text-line);
    margin-block-end: 0; }
  .zubehoerformitems .moreinfo {
    width: 15px;
    height: 15px;
    overflow: hidden;
    background-color: transparent;
    display: block;
    border: 0;
    background-image: url("../img/zubinfo.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -5px;
    right: -30px; }
    @media (min-width: 767px) {
      .zubehoerformitems .moreinfo {
        right: -27px;
        top: 4px; } }

.modal.hidden {
  display: none; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  width: 90%;
  left: 5%; }
  @media (min-width: 1024px) {
    .modal {
      width: 100%;
      left: 0; } }

.modal-content {
  background: white;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  border-radius: 8px;
  height: 99%;
  overflow-y: scroll;
  position: relative; }

.modal-close {
  position: absolute;
  top: 10px;
  right: 1rem;
  background: transparent;
  font-size: 1.5rem;
  border: none;
  z-index: 999999;
  cursor: pointer;
  color: var(--gray-700); }

.hidden {
  display: none !important; }

.zubtoogler {
  display: block;
  margin-block: var(--distance-35);
  background-color: white;
  width: 100%;
  border: 2px solid #708d81;
  border-radius: 10px;
  height: 60px;
  text-align: left;
  font-family: var(--headline-font-family);
  font-weight: 700;
  color: var(--gray-700);
  font-size: 1rem;
  line-height: var(--typo-text-line);
  margin-block-end: var(--typo-text-marginend);
  padding-inline: var(--distance-20) var(--distance-50);
  background-image: url("../img/plusbtoggler.svg");
  background-repeat: no-repeat;
  background-position: calc( 100% - 20px ) center; }

textarea.areaProdukte, textarea.areaErsatzteie {
  display: none; }

div.areaErsatzteie, div.areaProdukte {
  margin: 0 !important; }

.greencontentbackground .content-text {
  background-color: var(--green);
  color: var(--white);
  border-radius: 18px;
  height: 200px;
  position: relative;
  margin-block-start: var(--distance-15);
  padding: var(--distance-15); }
  .greencontentbackground .content-text .rte {
    padding-block-start: 25px; }
  .greencontentbackground .content-text p, .greencontentbackground .content-text h3 {
    color: inherit; }
  .greencontentbackground .content-text p {
    font-size: calc( 15 * var(--unit));
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Inter",sans-serif;
    margin-block-end: 10px; }
  .greencontentbackground .content-text p a {
    text-transform: none !important;
    margin-top: 14px; }
  .greencontentbackground .content-text h3 {
    font-family: var(--headline-font-family);
    font-weight: 300;
    color: var(--white);
    font-size: var(--typo-h3-size);
    line-height: var(--typo-h3-line);
    margin-block-end: var(--typo-h3-marginend);
    max-width: 304px; }
  .greencontentbackground .content-text .rte {
    position: absolute;
    bottom: 5px;
    left: var(--distance-15); }
  @media (min-width: 767px) {
    .greencontentbackground .content-text {
      height: auto;
      margin-block-start: 0; }
      .greencontentbackground .content-text .rte {
        bottom: var(--distance-25);
        left: var(--distance-25); } }
@media (min-width: 767px) {
  .greencontentbackground .content-image img {
    object-fit: cover;
    aspect-ratio: 3 /2.75; }
  .greencontentbackground .content-text h3 {
    max-width: 380px; }
  .greencontentbackground .content-text .rte {
    bottom: var(--distance-35);
    left: var(--distance-35); } }
@media (min-width: 1200px) {
  .greencontentbackground .content-image img {
    object-fit: unset;
    aspect-ratio: unset; } }

.graybackground {
  background-color: var(--gray-100);
  padding-inline: var(--articledistance-inner);
  padding-block: var(--distance-50); }
  @media (min-width: 767px) {
    .graybackground {
      padding-block: var(--distance-75); } }
  @media (min-width: 1024px) {
    .graybackground {
      padding-block: var(--distance-100); } }
  @media (min-width: 1200px) {
    .graybackground {
      padding-block: var(--distance-125); } }

.minifiedcontentwidth {
  max-width: var(--content-max-width);
  margin-inline: auto; }

.newslettercontent {
  border-radius: 18px;
  margin-inline: var(--articledistance-inner);
  max-width: var(--max-width);
  background-color: var(--green-100);
  padding-inline: var(--distance-15);
  padding-block: var(--distance-35) var(--distance-35); }
  @media (min-width: 1200px) {
    .newslettercontent {
      margin-inline: auto !important; } }
  .newslettercontent h3 {
    margin-block-end: var(--distance-15); }
  .newslettercontent input {
    height: 35px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding-inline: var(--distance-20);
    border-color: transparent;
    font-family: var(--content-font-family);
    font-size: calc(14*var(--unit)); }
  .newslettercontent button {
    margin-block-start: var(--distance-15); }
  @media (min-width: 767px) {
    .newslettercontent {
      padding-block: var(--distance-35) var(--distance-35);
      padding-inline: var(--distance-25); }
      .newslettercontent .formbody {
        display: grid;
        grid-template-columns: 4fr 1fr;
        gap: 0 var(--distance-15); }
      .newslettercontent button {
        margin-block-start: unset; } }
  @media (min-width: 1200px) {
    .newslettercontent {
      padding-inline: var(--distance-75);
      padding-block: var(--distance-50) var(--distance-50); }
      .newslettercontent .content-text {
        max-width: 855px; }
      .newslettercontent input, .newslettercontent button {
        height: 50px; }
      .newslettercontent input {
        font-size: calc(18* var(--unit)); }
      .newslettercontent .formbody {
        grid-template-columns: 1.25fr 1fr;
        gap: 0 var(--distance-15); } }

.teaseralarmanlage .content-text {
  background-color: var(--green);
  color: var(--white);
  border-radius: 18px;
  position: relative;
  margin-block-start: var(--distance-15);
  padding-inline: var(--distance-15);
  padding-block: var(--distance-35) var(--distance-35); }
  .teaseralarmanlage .content-text p, .teaseralarmanlage .content-text h3 {
    color: inherit; }
  .teaseralarmanlage .content-text h3 {
    margin-block-end: var(--distance-15); }
@media (min-width: 767px) {
  .teaseralarmanlage .inlay {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--distance-25); }
  .teaseralarmanlage .content-text {
    margin-block-start: 0; }
  .teaseralarmanlage p:last-of-type, .teaseralarmanlage a.ctabuttonwhite {
    margin-block-end: unset !important; } }
@media (min-width: 1200px) {
  .teaseralarmanlage .inlay {
    grid-template-columns: 4fr 8fr;
    gap: 0 var(--distance-25); }
    .teaseralarmanlage .inlay .rte {
      position: absolute;
      bottom: var(--distance-50);
      left: var(--distance-50);
      padding-inline-end: var(--distance-100); } }

.ce_rsce_factitem h2 {
  width: 100%;
  color: var(--gray-700);
  font-size: calc(20*var(--unit));
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  padding-inline: var(--distance-50); }
  @media (min-width: 767px) {
    .ce_rsce_factitem h2 {
      font-size: calc(30*var(--unit));
      line-height: 1.333;
      max-width: unset;
      width: 100%;
      padding-inline: var(--distance-100); } }
  @media (min-width: 1024px) {
    .ce_rsce_factitem h2 {
      padding-inline: var(--distance-150); } }
  @media (min-width: 1200px) {
    .ce_rsce_factitem h2 {
      font-size: calc(40*var(--unit));
      padding-inline: calc(2.3 *var(--distance-150)); } }
.ce_rsce_factitem .inlay {
  margin-block-start: calc(20*var(--unit)); }
  @media (min-width: 767px) {
    .ce_rsce_factitem .inlay {
      margin-block-start: calc(35*var(--unit));
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 var(--distance-30); } }
  @media (min-width: 1200px) {
    .ce_rsce_factitem .inlay {
      margin-block-start: var(--distance-50);
      grid-template-columns: repeat(4, 1fr); } }
  .ce_rsce_factitem .inlay .iconitem {
    padding: var(--icon-item-padding);
    min-height: 125px;
    border: 2px solid #f6f5f1;
    border-radius: 10px; }
    @media (min-width: 767px) {
      .ce_rsce_factitem .inlay .iconitem {
        padding: var(--distance-35) var(--icon-item-padding); } }
    @media (min-width: 1200px) {
      .ce_rsce_factitem .inlay .iconitem {
        padding: var(--distance-50) var(--icon-item-padding);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
        .ce_rsce_factitem .inlay .iconitem:hover {
          background-color: var(--gray-100); } }
    .ce_rsce_factitem .inlay .iconitem .iconimage img {
      margin-block-end: var(--distance-25); }
      @media (min-width: 1200px) {
        .ce_rsce_factitem .inlay .iconitem .iconimage img {
          margin-block-end: var(--distance-50); } }
    .ce_rsce_factitem .inlay .iconitem .iconcontent h3 {
      font-family: var(--headline-font-family);
      font-weight: 700;
      color: #BE1622;
      font-size: var(--typo-h3-size);
      line-height: var(--typo-h3-line);
      margin-block-end: var(--typo-h3-marginend);
      margin-block-end: var(--distance-15);
      white-space: nowrap; }
    .ce_rsce_factitem .inlay .iconitem .iconcontent p {
      font-family: var(--headline-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: calc(15 * var(--unit));
      line-height: var(--typo-text-line);
      margin-block-end: 0; }
  .ce_rsce_factitem .inlay .iconitem {
    margin-block-end: var(--distance-25); }
.ce_rsce_factitem .iconitemctabutton {
  display: grid;
  justify-content: center; }

.mb-product-detail-view {
  max-width: var(--content-max-width);
  margin-inline: auto; }

.producttopcontent, .product-infos {
  margin-block-end: var(--articledistance); }

@media (min-width: 767px) {
  .product-infos {
    display: grid;
    grid-template-columns: 1fr 1fr; } }
.product-infos .firstinfobox {
  border-radius: 10px;
  background-color: var(--gray-100);
  padding: var(--distance-35) var(--distance-25); }
  @media (min-width: 1024px) {
    .product-infos .firstinfobox {
      border-radius: 10px 0px  0 10px; } }
  @media (min-width: 1024px) {
    .product-infos .firstinfobox {
      padding: var(--distance-50) var(--distance-50); } }
  .product-infos .firstinfobox p.protitle {
    font-weight: 700;
    font-family: var(--content-font-family);
    font-size: var(--base-font-size); }
    @media (min-width: 1024px) {
      .product-infos .firstinfobox p.protitle {
        font-size: 1.125rem; } }
  .product-infos .firstinfobox p:not(p.protitle, p.propricedata) {
    font-family: var(--headline-font-family);
    font-weight: 400;
    color: var(--gray-700);
    font-size: 0.85rem;
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend); }
  .product-infos .firstinfobox p:last-of-type {
    margin-block-end: 0; }
  .product-infos .firstinfobox p.propricedata {
    font-family: var(--headline-font-family);
    font-weight: 700;
    color: var(--red);
    font-size: 0.85rem;
    line-height: var(--typo-h5-line);
    margin-block-end: calc(20 * var(--unit)); }
  .product-infos .firstinfobox p:not(:last-of-type, p.propricedata) {
    margin-block-end: 0; }
  .product-infos .firstinfobox p:last-of-type {
    margin-block-start: 20px; }
.product-infos .secondinfobox {
  margin-block-start: var(--distance-15);
  border-radius: 10px;
  background-color: var(--green-100);
  padding: var(--distance-35) var(--distance-25); }
  @media (min-width: 767px) {
    .product-infos .secondinfobox {
      margin-block-start: 0; } }
  @media (min-width: 1024px) {
    .product-infos .secondinfobox {
      border-radius: 0 10px 10px 0; } }
  @media (min-width: 1024px) {
    .product-infos .secondinfobox {
      padding: var(--distance-50) var(--distance-50); } }
  .product-infos .secondinfobox p {
    font-family: var(--headline-font-family);
    font-weight: 400;
    color: var(--gray-700);
    font-size: 0.85rem;
    line-height: var(--typo-text-line);
    margin-block-end: 10px; }
  .product-infos .secondinfobox p:last-of-type {
    margin-block-end: 0; }
  .product-infos .secondinfobox p.protitle {
    font-weight: 700;
    font-family: var(--content-font-family);
    font-size: var(--base-font-size);
    margin-block-end: var(--distance-15); }
    @media (min-width: 1024px) {
      .product-infos .secondinfobox p.protitle {
        font-size: 1.125rem; } }

.pvheadline {
  color: var(--red);
  font-family: var(--headline-font-family);
  font-weight: 700;
  color: var(--red);
  font-size: var(--distance-25);
  line-height: var(--typo-h2-line);
  margin-block-end: var(--typo-h2-marginend); }

.productcontainer .productitems {
  padding-inline: var(--distance-20);
  padding-block: var(--distance-35);
  border: 2px solid #f0efe8;
  border-radius: 10px; }
  @media (min-width: 767px) {
    .productcontainer .productitems {
      display: grid;
      grid-template-columns: 1fr 1fr; } }
  .productcontainer .productitems h3 {
    margin-block-end: var(--distance-35); }
  .productcontainer .productitems h5, .productcontainer .productitems h4 {
    font-weight: 700;
    font-family: var(--content-font-family);
    font-size: var(--base-font-size);
    margin-block-end: var(--distance-15); }
  .productcontainer .productitems ul {
    margin-block: var(--distance-25);
    padding-inline: 0;
    margin-inline-start: var(--distance-20);
    font-family: var(--headline-font-family);
    font-weight: 300;
    color: var(--gray-700);
    font-size: var(--typo-text-size);
    line-height: var(--typo-text-line);
    margin-block-end: var(--typo-text-marginend);
    list-style: disc; }
    .productcontainer .productitems ul li {
      font-family: var(--content-font-family);
      font-weight: 400;
      color: var(--gray-700);
      font-size: var(--typo-text-size);
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend);
      margin-block-end: 5px; }
  .productcontainer .productitems .productimage {
    margin-block-end: var(--distance-15);
    display: grid;
    justify-content: center; }
.productcontainer .productitems:not(:last-of-type) {
  margin-block-end: var(--distance-25); }

.orderarticle h1 {
  text-align: center;
  max-width: var(--content-max-width);
  margin-inline: auto; }
.orderarticle h5, .orderarticle h4 {
  font-family: var(--content-font-family);
  font-weight: bold;
  color: var(--gray-700);
  font-size: var(--typo-h5-size);
  line-height: var(--typo-h5-line);
  margin-block-end: var(--distance-15); }
  @media (min-width: 1024px) {
    .orderarticle h5, .orderarticle h4 {
      font-family: var(--content-font-family);
      font-weight: bold;
      color: var(--gray-700);
      font-size: calc(18 * var(--unit));
      line-height: var(--typo-h5-line);
      margin-block-end: var(--distance-25); } }
.orderarticle p {
  font-family: var(--content-font-family);
  font-weight: 400;
  color: var(--gray-700);
  font-size: 1rem;
  line-height: var(--typo-text-line);
  margin-block-end: var(--typo-text-marginend); }
.orderarticle .content-text, .orderarticle .proteaseritem {
  border: 2px solid #f0efe8;
  border-radius: 10px;
  padding: var(--distance-25);
  margin-block-start: var(--distance-25); }
  @media (min-width: 1200px) {
    .orderarticle .content-text, .orderarticle .proteaseritem {
      padding: var(--distance-50) var(--distance-50) var(--distance-75) var(--distance-50);
      position: relative; }
      .orderarticle .content-text a, .orderarticle .proteaseritem a {
        position: absolute;
        bottom: var(--distance-35);
        left: var(--distance-50); } }
@media (min-width: 1024px) {
  .orderarticle .producteaserframe {
    max-width: var(--max-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 30px; } }
@media (min-width: 767px) {
  .orderarticle .inlay:not(.ordercol2 .inlay) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px; }
    .orderarticle .inlay:not(.ordercol2 .inlay) h1 {
      grid-column: 1 / -1;
      /* nimmt volle Breite */ } }
@media (min-width: 1200px) {
  .orderarticle .inlay:not(.ordercol2 .inlay) {
    grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 767px) {
  .ordercol2 .inlay {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px; }
    .ordercol2 .inlay h1 {
      grid-column: 1 / -1;
      /* nimmt volle Breite */ } }

.kundenmeinungen {
  margin-block-end: var(--articledistance);
  max-width: var(--max-width);
  margin-inline: auto;
  --itemfontsize: 14px;
  --itemlineheight: 1.5; }
  @media (min-width: 1620px) {
    .kundenmeinungen {
      margin-block-end: 0; } }
  .kundenmeinungen h2 {
    margin-inline: auto;
    display: block; }
  .kundenmeinungen .kmslider {
    display: grid;
    grid-template-columns: 5% 90% 5%;
    max-width: var(--max-width);
    width: 100%; }
    @media screen and (min-width: 1024px) {
      .kundenmeinungen .kmslider {
        grid-template-columns: 2% 96% 2%; } }
    @media screen and (min-width: 1171px) {
      .kundenmeinungen .kmslider {
        grid-template-columns: 75px 1020px 75px; } }
    .kundenmeinungen .kmslider button {
      cursor: pointer;
      background-color: transparent;
      background-repeat: no-repeat;
      border: 0;
      align-self: center;
      justify-self: center;
      position: relative;
      z-index: 99;
      display: block; }
      @media screen and (min-width: 767px) {
        .kundenmeinungen .kmslider button {
          display: block; } }
    .kundenmeinungen .kmslider .kmsliderwrapper {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 0;
      gap: 0 15px;
      margin: 0;
      width: 100vw;
      box-sizing: border-box;
      max-width: var(--max-width); }
      .kundenmeinungen .kmslider .kmsliderwrapper::-webkit-scrollbar {
        height: 0; }
    .kundenmeinungen .kmslider .kmitem {
      flex-shrink: 0;
      scroll-snap-align: start;
      padding-block-end: 25px;
      width: calc( 100% - 26px);
      padding: 50px 25px 32px 25px; }
      @media screen and (min-width: 767px) {
        .kundenmeinungen .kmslider .kmitem {
          width: calc(50% - 30px); } }
      @media screen and (min-width: 1024px) {
        .kundenmeinungen .kmslider .kmitem {
          width: calc(33.33% - 30px); } }
      @media (min-width: 1200px) {
        .kundenmeinungen .kmslider .kmitem {
          width: calc(33.33% - 10px); } }
    .kundenmeinungen .kmslider .kmsliderwrapper {
      overflow-x: auto;
      height: 480px;
      scroll-snap-type: x mandatory; }
      @media (min-width: 767px) {
        .kundenmeinungen .kmslider .kmsliderwrapper {
          height: 440px; } }
      @media (min-width: 1620px) {
        .kundenmeinungen .kmslider .kmsliderwrapper {
          height: 400px; } }
    .kundenmeinungen .kmslider p.kmcontent {
      height: 155px; }
    .kundenmeinungen .kmslider p.hmname {
      font-weight: bold;
      color: var(--authorcolor) !important; }
    .kundenmeinungen .kmslider .kmsliderwrapper::-webkit-scrollbar {
      height: 0px; }
    .kundenmeinungen .kmslider .kmsliderwrapper::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 4px; }
    .kundenmeinungen .kmslider .kmsliderwrapper::-webkit-scrollbar-thumb:hover {
      background-color: #555; }
    .kundenmeinungen .kmslider .kmitem {
      padding-inline: var(--distance-20);
      padding-block: var(--distance-35);
      border: 2px solid #f0efe8;
      border-radius: 10px;
      flex-shrink: 0;
      scroll-snap-align: start;
      padding: 50px 25px 32px 25px; }
      .kundenmeinungen .kmslider .kmitem ul {
        display: flex;
        gap: 0 10px;
        margin-bottom: 25px;
        padding-inline: 0 !important;
        list-style: none;
        margin-inline-start: 0; }
        .kundenmeinungen .kmslider .kmitem ul li {
          background-image: url("../img/staricon.svg");
          width: 20px;
          height: 20px;
          padding-right: 10px; }
      .kundenmeinungen .kmslider .kmitem p {
        font-size: var(--itemfontsize);
        line-height: var(--itemlineheight);
        color: var(--itemtextcolor); }
  .kundenmeinungen p.kmname {
    font-weight: 700;
    font-size: calc(18 * var(--unit)) !important; }

.kmbuttons {
  position: absolute;
  height: 550px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 65px;
  right: 20px;
  padding-block-end: var(--articledistance);
  margin-block-start: var(--distance-25); }
  @media (min-width: 1200px) {
    .kmbuttons {
      position: relative;
      display: grid;
      left: 96%;
      height: 50px; } }
  .kmbuttons .kmbackbutton {
    background-image: url("../img/iconback.svg");
    background-repeat: no-repeat;
    padding-block-end: var(--articledistance);
    height: 30px;
    border: 0;
    background-color: transparent;
    width: 40px;
    left: 7px; }
    @media screen and (min-width: 767px) {
      .kmbuttons .kmbackbutton {
        left: 0; } }
  .kmbuttons .kmforwardbutton {
    background-image: url("../img/iconforward.svg");
    background-repeat: no-repeat;
    height: 30px;
    border: 0;
    background-color: transparent;
    width: 40px;
    right: 23px; }
    @media screen and (min-width: 1024px) {
      .kmbuttons .kmforwardbutton {
        right: 33px; } }
    @media screen and (min-width: 1171px) {
      .kmbuttons .kmforwardbutton {
        right: 0; } }

footer {
  background-color: var(--footer-background-color);
  color: white;
  padding-inline: var(--articledistance-inner);
  padding-block: var(--articledistance);
  position: relative;
  margin-block-start: var(--articledistance); }
  @media (min-width: 767px) {
    footer {
      padding-block-start: var(--articledistance);
      padding-block-end: var(--distance-15); } }
  @media (min-width: 1200px) {
    footer {
      padding-block-start: var(--distance-75);
      padding-block-end: var(--distance-15); } }
  footer h5 {
    font-family: var(--content-font-family);
    font-weight: 700;
    color: inherit;
    font-size: var(--typo-h5-size);
    line-height: var(--typo-h5-line);
    margin-block-end: var(--typo-h5-marginend);
    border-bottom: 2px solid var(--gray--500);
    margin-block-end: calc(10 * var(--unit)); }
    @media (min-width: 1200px) {
      footer h5 {
        border-bottom: unset; } }
  footer ul {
    padding-inline: 0; }
    footer ul li a {
      font-family: var(--content-font-family);
      font-weight: 400;
      color: inherit;
      font-size: calc(14*var(--unit));
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend);
      text-decoration: none; }
    footer ul li strong {
      font-family: var(--content-font-family);
      font-weight: 400;
      color: inherit;
      font-size: calc(14*var(--unit));
      line-height: var(--typo-text-line);
      margin-block-end: var(--typo-text-marginend); }
    footer ul li:not(:last-of-type) {
      margin-block-end: calc(10 * var(--unit)); }
  footer nav:not(:last-of-type) {
    margin-block-end: var(--articledistance-medium); }
  footer .footer-bottom-position {
    border-top: 2px solid var(--footer-bottom-line);
    margin-block-start: var(--articledistance);
    padding-block-start: var(--articledistance); }
  footer .scrolltopbutton {
    border: 0;
    background-color: transparent;
    background-image: url("../img/top-arrow.svg");
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 12px;
    position: absolute;
    bottom: 55px;
    right: var(--articledistance-inner); }
    @media (min-width: 767px) {
      footer .scrolltopbutton {
        bottom: 35px;
        right: var(--distance-25); } }
    @media (min-width: 1200px) {
      footer .scrolltopbutton {
        bottom: 20px;
        right: -0px; } }
  @media (min-width: 767px) {
    footer .footer-top-position {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 var(--distance-15); }
    footer .footer-bottom-position {
      padding-block-start: var(--distance-25); }
      footer .footer-bottom-position ul {
        display: flex;
        gap: 0 var(--distance-35); } }
  @media (min-width: 1200px) {
    footer .footer-top-position {
      grid-template-columns: repeat(4, 1fr);
      gap: 0 var(--distance-15); }
    footer .footer-bottom-position {
      padding-block-start: var(--distance-25);
      position: relative;
      margin-block-start: var(--distance-75); }
      footer .footer-bottom-position ul {
        display: flex;
        gap: 0 var(--distance-35);
        justify-content: center; } }
  footer a {
    width: fit-content;
    position: relative; }
    footer a:after {
      content: '';
      width: 0;
      height: 1px;
      position: absolute;
      bottom: -1px;
      left: 0;
      background-color: white;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    footer a:hover:after {
      width: 100% !important; }

:root {
  /*Gloable Layouteinstellungen*/
  --unit: 0.0625rem;
  --distance-10: calc(10 * var(--unit));
  --distance-15: calc(15 * var(--unit));
  --distance-20: calc(20 * var(--unit));
  --distance-25: calc(25 * var(--unit));
  --distance-30: calc(30 * var(--unit));
  --distance-35: calc(35 * var(--unit));
  --distance-50: calc(50 * var(--unit));
  --distance-75: calc(75 * var(--unit));
  --distance-100: calc(100 * var(--unit));
  --distance-125: calc(125 * var(--unit));
  --distance-150: calc(150 * var(--unit));
  --max-width: 1410px;
  --headline-font-family: "Inter", sans-serif;
  --content-font-family: "Barlow", sans-serif;
  --base-font-size: calc(16* var(--unit));
  --articledistance: calc(50 * var(--unit));
  --articledistance-medium: calc(35 * var(--unit));
  --articledistance-inner: calc(13* var(--unit));
  --content-max-width: calc(970 * var(--unit));
  --hero-hight: calc(300 * var(--unit));
  --content-image-border-radius: 10px;
  --content-breadcrumb-height: var(--home-breadcrumb-height);
  /*Farben */
  --white: #ffffff;
  --black: #000000;
  --gray-100: #F6F5F1;
  --gray-200: #758190;
  --gray--500: #313841;
  --gray-700: #212832;
  --red: #E30613;
  --green: #708D81;
  --green-100: #D6D4CA;
  --footer-bottom-line: #4F5864;
  --info-background-color: rgba(227, 6, 19, 0.2);
  /*Typo* */
  --typo-h1-size: calc(20 * var(--unit));
  --typo-h1-line: 1.5;
  --typo-h1-marginend: calc(20 * var(--unit));
  --typo-h2-size: calc(18 * var(--unit));
  --typo-h2-line: 1.389;
  --typo-h2-marginend: calc(15 * var(--unit));
  --typo-h3-size: 1rem;
  --typo-h4-size: 1.6rem;
  --typo-h5-size: var(--base);
  --typo-h5-line: 1.563;
  --typo-text-size: calc(16 * var(--unit));
  --typo-text-line: 1.429;
  --typo-text-marginend: calc(20 * var(--unit));
  --typo-h3-line: 1.563;
  --typo-h4-line: 1.4;
  --icon-item-padding: var(--distance-25);
  /*Bereichsfarben*/
  --header-padding-block: calc(20 * var(--unit));
  --header-logo-maxwidth: 154px;
  --home-breadcrumb-height: 5px;
  --header-height: 100px;
  --mainnavigation-font-size: var(--base-font-size);
  --mainnavigation-color: var(--gray-700);
  --mainnavigation-font-family: var(--content-font-family);
  --mainnavigation-text-weight: 700;
  --mainnavigation-speciallink-color: var(--white);
  --mainnavigation-speciallink-backgroundcolor: var(--red);
  --mainnavigation-speciallink-border-radius: 18px;
  --mainnavigation-level2-background-color: var(--gray-100);
  --mainnavigation-level2-border-radius: 10px;
  --mainnavigation-level2-color: var(--gray-700);
  --mainnavigation-level2-text-weight: 400;
  --mainnavigation-level2-hover-background: #D6E0DC;
  /*produkte*/
  --pro-firstinfo-background: #F6F5F1;
  --pro-secondinfo-background: #D6D4CA;
  --newsletterbox-background-color: var(--green-100);
  --footer-background-color: var(--gray-700);
  /*Breadcrumb: */
  --breadcrumb-background: linear-gradient(45deg, #96fd92, #cfff86, #a2f29d, #78ffa6); }
  @media (min-width: 767px) {
    :root {
      --articledistance-inner: calc(21* var(--unit));
      --articledistance: calc(75 * var(--unit));
      --typo-h1-size: calc(30 * var(--unit));
      --typo-h1-line: 1.333;
      --typo-h1-marginend: calc(20 * var(--unit));
      --typo-h2-size: calc(25 * var(--unit));
      --typo-h2-line: 1.4;
      --typo-h2-marginend: calc(25 * var(--unit));
      --typo-h3-size: 1.25rem;
      --typo-h4-size: 1.6rem;
      --typo-h5-size: var(--base);
      --typo-h5-line: 1.563;
      --typo-text-size: calc(16 * var(--unit));
      --typo-text-line: 1.563;
      --typo-text-marginend: calc(25 * var(--unit));
      --hero-hight: calc(325 * var(--unit)); } }
  @media (min-width: 1024px) {
    :root {
      --articledistance: calc(100 * var(--unit));
      --content-breadcrumb-height: var(--distance-75); } }
  @media (min-width: 1200px) {
    :root {
      --header-logo-maxwidth: 205px;
      --header-height: 140px;
      --typo-h1-size: calc(40 * var(--unit));
      --typo-h1-line: 1.125;
      --typo-h1-marginend: calc(40 * var(--unit));
      --typo-h2-size: calc(40 * var(--unit));
      --typo-h2-line: 1.4;
      --typo-h2-marginend: calc(25 * var(--unit));
      --typo-h3-size: calc(25 * var(--unit));
      --typo-h3-line: 1.4;
      --typo-h3-marginend: calc(25 * var(--unit));
      --typo-text-size: calc(18 * var(--unit));
      --typo-text-line: 1.389;
      --articledistance: calc(125 * var(--unit));
      --typo-text-marginend: calc(25 * var(--unit)); } }
  @media (min-width: 1620px) {
    :root {
      --hero-hight: calc(585 * var(--unit)); } }

body {
  font-size: 16px;
  width: 100%;
  overflow-x: hidden; }

/*# sourceMappingURL=main.css.map */