@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/lib/es/themes/Website/styles/rio-website.less

@@ -1,2300 +0,0 @@
-// Core
-@import (less) '../../../styles/rio-uikit-core.less';
-
-// Theme
-@hasDarkmode: true;
-
-// Utility Classes
-@import (less) '../../../styles/design/responsive/_imports.less';
-.import-reponsive(
-  @default: true;
-  @xs: true;
-  @ls: true;
-  @sm: true;
-  @md: true;
-  @lg: true;
-  @xl: true;
-  @print: false;
-);
-
-// Fonts
-@font-source-sans: true;
-@font-man: true;
-@font-redring: true;
-
-// Screens
-@screen-xs: 480px;
-@screen-ls: 768px;
-@screen-sm: @screen-ls;
-@screen-md: 992px;
-@screen-lg: 1200px;
-@screen-xl: 1700px;
-
-// Breakpoints
-@responsive-font-breakpoint: 1440px;
-@mobile-breakpoint: @screen-ls;
-
-// Colors
-@brand-man: #e40045;
-.text-color-darkest { color: var(--color-black) !important }
-
-.svg-color-primary { filter: invert(53%) sepia(50%) saturate(562%) hue-rotate(137deg) brightness(104%) contrast(92%) }
-.svg-color-coldplay-wine { filter: invert(10%) sepia(28%) saturate(7014%) hue-rotate(287deg) brightness(100%) contrast(102%) }
-.svg-color-coldplay-aubergine { filter: invert(26%) sepia(68%) saturate(353%) hue-rotate(222deg) brightness(94%) contrast(87%) }
-.svg-color-coldplay-kashmir { filter: invert(39%) sepia(54%) saturate(304%) hue-rotate(170deg) brightness(93%) contrast(85%) }
-.svg-color-coldplay-fountain { filter: invert(60%) sepia(86%) saturate(207%) hue-rotate(151deg) brightness(90%) contrast(89%) }
-.svg-color-coldplay-turquoise { filter: invert(74%) sepia(75%) saturate(342%) hue-rotate(118deg) brightness(87%) contrast(85%) }
-.svg-color-coldplay-bermuda { filter: invert(82%) sepia(22%) saturate(612%) hue-rotate(105deg) brightness(90%) contrast(91%) }
-.svg-color-coldplay-moos { filter: invert(91%) sepia(16%) saturate(739%) hue-rotate(61deg) brightness(93%) contrast(82%) }
-.svg-color-coldplay-primrose { filter: invert(90%) sepia(45%) saturate(358%) hue-rotate(20deg) brightness(92%) contrast(91%) }
-.svg-color-coldplay-khaki { filter: invert(96%) sepia(97%) saturate(604%) hue-rotate(340deg) brightness(103%) contrast(88%) }
-
-.svg-color-warmup-crimson { filter: invert(9%) sepia(63%) saturate(3034%) hue-rotate(259deg) brightness(88%) contrast(98%) }
-.svg-color-warmup-victoria { filter: invert(26%) sepia(13%) saturate(1942%) hue-rotate(214deg) brightness(90%) contrast(91%) }
-.svg-color-warmup-cadillac { filter: invert(30%) sepia(17%) saturate(1737%) hue-rotate(259deg) brightness(93%) contrast(89%) }
-.svg-color-warmup-raspberry { filter: invert(24%) sepia(85%) saturate(1488%) hue-rotate(301deg) brightness(91%) contrast(84%) }
-.svg-color-warmup-cerise { filter: invert(31%) sepia(62%) saturate(6649%) hue-rotate(322deg) brightness(93%) contrast(93%) }
-.svg-color-warmup-charm { filter: invert(59%) sepia(62%) saturate(394%) hue-rotate(297deg) brightness(85%) contrast(82%) }
-.svg-color-warmup-salmon { filter: invert(78%) sepia(54%) saturate(3248%) hue-rotate(310deg) brightness(114%) contrast(89%) }
-.svg-color-warmup-cherokee { filter: invert(93%) sepia(99%) saturate(5864%) hue-rotate(300deg) brightness(103%) contrast(93%) }
-.svg-color-warmup-corn { filter: invert(97%) sepia(66%) saturate(897%) hue-rotate(323deg) brightness(93%) contrast(116%) }
-.svg-color-white { filter: invert(100%) sepia(4%) saturate(16%) hue-rotate(173deg) brightness(106%) contrast(106%) }
-
-[class*="bg-"] { color: inherit }
-
-.bg-color-coldplay-wine { background-color: var(--color-coldplay-wine) !important }
-.bg-color-coldplay-aubergine { background-color: var(--color-coldplay-aubergine) !important }
-.bg-color-coldplay-kashmir { background-color: var(--color-coldplay-kashmir) !important }
-.bg-color-coldplay-fountain { background-color: var(--color-coldplay-fountain) !important }
-.bg-color-coldplay-turquoise { background-color: var(--color-coldplay-turquoise) !important }
-.bg-color-coldplay-bermuda { background-color: var(--color-coldplay-bermuda) !important }
-.bg-color-coldplay-moos { background-color: var(--color-coldplay-moos) !important }
-.bg-color-coldplay-primrose { background-color: var(--color-coldplay-primrose) !important }
-.bg-color-coldplay-khaki { background-color: var(--color-coldplay-khaki) !important }
-.bg-color-warmup-crimson { background-color: var(--color-warmup-crimson) !important }
-.bg-color-warmup-victoria { background-color: var(--color-warmup-victoria) !important }
-.bg-color-warmup-cadillac { background-color: var(--color-warmup-cadillac) !important }
-.bg-color-warmup-raspberry { background-color: var(--color-warmup-raspberry) !important }
-.bg-color-warmup-cerise { background-color: var(--color-warmup-cerise) !important }
-.bg-color-warmup-charm{ background-color: var(--color-warmup-charm) !important }
-.bg-color-warmup-salmon { background-color: var(--color-warmup-salmon) !important }
-.bg-color-warmup-cherokee { background-color: var(--color-warmup-cherokee) !important }
-.bg-color-warmup-corn { background-color: var(--color-warmup-corn) !important }
-.bg-color-black { background-color: var(--color-black) !important }
-.bg-color-white { background-color: var(--color-white) !important }
-.bg-color-primary { background-color: var(--color-highlight) !important }​
-
-.text-color-placeholder { color: transparent }
-.text-color-coldplay-wine { color: var(--color-coldplay-wine) !important }
-.text-color-coldplay-kashmir { color: var(--color-coldplay-kashmir) !important }
-.text-color-coldplay-aubergine { color: var(--color-coldplay-aubergine) !important }
-.text-color-coldplay-fountain { color: var(--color-coldplay-fountain) !important }
-.text-color-coldplay-turquoise { color: var(--color-coldplay-turquoise) !important }
-.text-color-coldplay-bermuda { color: var(--color-coldplay-bermuda) !important }
-.text-color-coldplay-moos { color: var(--color-coldplay-moos) !important }
-.text-color-coldplay-primrose { color: var(--color-coldplay-primrose) !important }
-.text-color-coldplay-khaki { color: var(--color-coldplay-khaki) !important }
-.text-color-warmup-crimson { color: var(--color-warmup-crimson) !important }
-.text-color-warmup-victoria { color: var(--color-warmup-victoria) !important }
-.text-color-warmup-cadillac { color: var(--color-warmup-cadillac) !important }
-.text-color-warmup-raspberry { color: var(--color-warmup-raspberry) !important }
-.text-color-warmup-cerise { color: var(--color-warmup-cerise) !important }
-.text-color-warmup-charm { color: var(--color-warmup-charm) !important }
-.text-color-warmup-salmon { color: var(--color-warmup-salmon) !important }
-.text-color-warmup-cherokee { color: var(--color-warmup-cherokee) !important }
-.text-color-warmup-corn { color: var(--color-warmup-corn) !important }
-.text-color-black { color: var(--color-black) !important }
-.text-color-white { color: var(--color-white) !important }
-.text-color-primary { color: var(--color-highlight) !important }
-
-.hyphens {
-  hyphens: auto;
-  overflow: hidden;
-  word-break: break-word;
-  word-wrap: break-word;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  border: 0;
-  color: inherit;
-  font-size: 100%;
-  font: inherit;
-  line-height: 1.15;
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-h1 { font-size: @font-size-h1; margin-bottom: @font-size-h1 * 0.75 }
-h2 { font-size: @font-size-h2; margin-bottom: @font-size-h2 * 0.75 }
-h3 { font-size: @font-size-h3; margin-bottom: @font-size-h3 * 0.75 }
-h4 { font-size: @font-size-h4; margin-bottom: @font-size-h4 * 0.75 }
-h5 { font-size: @font-size-h5; margin-bottom: @font-size-h5 * 0.75 }
-h6 { font-size: @font-size-h6; margin-bottom: @font-size-h6 * 0.75 }
-
-// Responsive Behaviour
-@media (min-width: @responsive-font-breakpoint) {
-  .text-size-10 { font-size: @font-size-10 * 1.25 !important }
-  .text-size-12 { font-size: @font-size-12 * 1.25 !important }
-  .text-size-14 { font-size: @font-size-14 * 1.25 !important }
-  .text-size-16 { font-size: @font-size-16 * 1.25 !important }
-  .text-size-18 { font-size: @font-size-18 * 1.25 !important }
-  .text-size-20 { font-size: @font-size-20 * 1.25 !important }
-
-  .line-height-10 { line-height: @font-size-10 * 1.25 !important }
-  .line-height-12 { line-height: @font-size-12 * 1.25 !important }
-  .line-height-14 { line-height: @font-size-14 * 1.25 !important }
-  .line-height-16 { line-height: @font-size-16 * 1.25 !important }
-  .line-height-18 { line-height: @font-size-18 * 1.25 !important }
-  .line-height-20 { line-height: @font-size-20 * 1.25 !important }
-
-  .text-size-h1,h1 { font-size:@font-size-h1 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h1 * .75 * 1.35!important } }
-  .text-size-h2,h2 { font-size:@font-size-h2 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h2 * .75 * 1.35!important } }
-  .text-size-h3,h3 { font-size:@font-size-h3 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h3 * .75 * 1.35!important } }
-  .text-size-h4,h4 { font-size:@font-size-h4 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h4 * .75 * 1.35!important } }
-  .text-size-h5,h5 { font-size:@font-size-h5 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h5 * .75 * 1.35!important } }
-  .text-size-h5,h6 { font-size:@font-size-h6 * 1.35!important; &:not([class*="margin-bottom-"]){ margin-bottom:@font-size-h6 * .75 * 1.35!important } }
-
-  .line-height-h1 { line-height: @font-size-h1 * 1.35 !important }
-  .line-height-h2 { line-height: @font-size-h2 * 1.35 !important }
-  .line-height-h3 { line-height: @font-size-h3 * 1.35 !important }
-  .line-height-h4 { line-height: @font-size-h4 * 1.35 !important }
-  .line-height-h5 { line-height: @font-size-h5 * 1.35 !important }
-  .line-height-h5 { line-height: @font-size-h6 * 1.35 !important }
-}
-
-@media (max-width: @screen-ls) {
-  .text-size-h1, h1 { font-size: @font-size-h1 * 0.8 !important; &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h1 * 0.75 * 0.8 !important; } }
-  .text-size-h2, h2 { font-size: @font-size-h2 * 0.8 !important; &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h2 * 0.75 * 0.8 !important; } }
-  .text-size-h3, h3 { font-size: @font-size-h3 * 0.8 !important; &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h3 * 0.75 * 0.8 !important; } }
-  .text-size-h4, h4 { &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h4 * 0.75 * 0.8 !important; } }
-  .text-size-h5, h5 { &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h5 * 0.75 * 0.8 !important; } }
-  .text-size-h5, h6 { &:not([class*="margin-bottom-"]){ margin-bottom: @font-size-h6 * 0.75 * 0.8 !important; } }
-
-  .line-height-h1 { line-height: @font-size-h1 * 0.8 !important }
-  .line-height-h2 { line-height: @font-size-h2 * 0.8 !important }
-  .line-height-h3 { line-height: @font-size-h3 * 0.8 !important }
-  .line-height-h4 { line-height: @font-size-h4 * 0.8 !important }
-  .line-height-h5 { line-height: @font-size-h5 * 0.8 !important }
-  .line-height-h5 { line-height: @font-size-h6 * 0.8 !important }
-}
-
-// Navigation
-html.show-handheld-navigation {
-  overflow: hidden;
-
-  body {
-    overflow: hidden;
-  }
-}
-
-body .module-content {
-  overflow: hidden;
-}
-
-.ApplicationHeader {
-  .navbar-brand {
-    background-size: cover;
-  }
-
-  .SubmoduleNavigation .SubmoduleNavigation {
-    padding-left: 0;
-  }
-
-  html.show-handheld-navigation & {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
-
-    &:before {
-      display: none;
-    }
-
-    .navbar-brand {
-      display: none;
-    }
-
-    .ApplicationActionBar {
-      position: fixed;
-      right: 5px;
-      top: 10px;
-
-      li:not(#handheld-navigation) {
-        display: none;
-      }
-    }
-
-    .ModuleNavigation {
-      display: none;
-    }
-
-    .SubmoduleNavigation {
-      border-bottom: none;
-      display: block;
-      height: auto;
-      margin: 50px 0;
-      max-height: none;
-      padding-left: 0;
-      text-align: center;
-
-      @media (min-width: @screen-ls) {
-        margin: 5% 0;
-      }
-
-      @media (max-width: @screen-ls) {
-        margin: 50px 0;
-      }
-
-      .submodule {
-        margin-left: 0 !important;
-        margin-bottom: 50px;
-
-        a {
-          box-shadow: none !important;
-          font-size: 20px;
-          padding-bottom: 0;
-          padding-top: 0;
-        }
-
-        .SubmoduleNavigation {
-          margin: 20px 0 0 0;
-
-          .submodule {
-            &:not(:last-child) {
-              margin-bottom: 10px;
-            }
-
-            a {
-              font-size: 16px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  html:not(.show-handheld-navigation) & {
-    @media (max-width: @screen-ls) {
-      .ModuleNavigation {
-        z-index: 1;
-
-        .dropdown {
-          width: calc(~"100vw - 205px");
-
-          &.open {
-            width: calc(~"100vw - 100px");
-
-            // .dropdown-menu {
-            //   width: calc(~"100% - 3px");
-            // }
-          }
-        }
-      }
-    }
-
-    .ApplicationActionBar {
-      li {
-        &#login {
-          .login-text {
-            font-weight: @font-medium;
-          }
-
-          @media (max-width: @screen-ls) {
-            .login-text {
-              display: none;
-            }
-          }
-
-          @media (min-width: @screen-ls) {
-            width: auto;
-
-            .ActionBarItem {
-              width: auto;
-            }
-
-            .login-icon {
-              display: none;
-            }
-          }
-        }
-
-        &#handheld-navigation {
-          @media (min-width: @screen-ls) {
-            display: none;
-          }
-        }
-
-        &#user-menu iframe {
-          height: 30px !important;
-        }
-
-        &.navigationItem .ActionBarItemIcon {
-          color: var(--color-black);
-        }
-      }
-    }
-
-    > .SubmoduleNavigation {
-      @media (max-width: @screen-ls) {
-        padding-left: 0 !important;
-
-        > .submodule {
-          display: none;
-        }
-      }
-
-      > .submodule {
-        @media (min-width: @screen-ls) {
-          > .SubmoduleNavigation {
-            max-height: calc(~"100vh - 100px");
-            height: auto;
-            overflow: auto;
-            // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
-          }
-        }
-
-        &:hover {
-          > .SubmoduleNavigation {
-            display: block;
-          }
-        }
-      }
-
-      .SubmoduleNavigation {
-        background: var(--color-white);
-        border-bottom: 1px solid var(--gray-light);
-        border-left: 1px solid var(--gray-light);
-        border-right: 1px solid var(--gray-light);
-        display: none;
-        left: 0;
-        position: absolute;
-        top: calc(100% - 1px);
-        width: auto;
-        z-index: 1;
-
-        li {
-          float: none;
-
-          a {
-            padding-top: 5px !important;
-            padding-bottom: 5px !important;
-          }
-
-          &:is(:hover, :active, .active, :focus) {
-            > a {
-              box-shadow: none !important;
-            }
-          }
-
-          &:first-child {
-            margin-left: 0 !important;
-            margin-top: 10px;
-          }
-
-          &:last-child {
-            margin-bottom: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Section Wrapper
-.section-wrapper {
-  position: relative;
-
-  &[class*="position-sticky"] {
-    top: (@ApplicationLayoutHeaderHeight - 1);
-    z-index: 10;
-
-    ~ * .anchor {
-      margin-top: -122px !important;
-
-      @media (min-width: @screen-md) {
-        margin-top: -172px !important;
-      }
-    }
-  }
-
-  .section-content-container-col {
-    &.position-sticky {
-      top: (@ApplicationLayoutHeaderHeight - 1);
-      z-index: 10;
-    }
-
-    &.position-sticky-ls {
-      @media (min-width: @screen-ls) {
-        top: (@ApplicationLayoutHeaderHeight - 1);
-        z-index: 10;
-      }
-    }
-  }
-
-  // reorder columns on mobile
-  @media (max-width: @screen-ls) {
-    &.flex-reorder-xs {
-      .section-layout-container-row {
-        display: flex !important;
-        flex-wrap: wrap !important;
-
-        > .section-content-container-col {
-          &:first-child {
-            order: 2 !important;
-          }
-
-          &:last-child {
-            order: 1 !important;
-          }
-        }
-      }
-    }
-  }
-
-  // Section Wrapper/Content Background Image
-  .section-wrapper-background-image,
-  .section-content-container-background-image {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1;
-
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    + * {
-      position: relative;
-      z-index: 2;
-    }
-
-    &[class*="opacity-"] {
-      &:before {
-        background: var(--always-color-black);
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
-    }
-
-    // iOS Background Image Fix
-    @supports (-webkit-touch-callout: none) {
-      @media (min-width: @screen-ls) {
-        &.bg-attachment-fixed-ls {
-          background-attachment: initial !important;
-        }
-      }
-    }
-
-    &.overlay-opacity-10:before { opacity: 0.1 }
-    &.overlay-opacity-20:before { opacity: 0.2 }
-    &.overlay-opacity-30:before { opacity: 0.3 }
-    &.overlay-opacity-40:before { opacity: 0.4 }
-    &.overlay-opacity-50:before { opacity: 0.5 }
-    &.overlay-opacity-60:before { opacity: 0.6 }
-    &.overlay-opacity-70:before { opacity: 0.7 }
-    &.overlay-opacity-80:before { opacity: 0.8 }
-    &.overlay-opacity-90:before { opacity: 0.9 }
-  }
-
-  @media (min-width: @screen-ls) {
-    &.min-height-offset {
-      .sizing-vh(min-height; -ls; @ApplicationLayoutHeaderHeight);
-    }
-  }
-
-  .section-layout {
-    position: relative;
-    padding: 10% 6%;
-    z-index: 2;
-
-    @media (max-width: @screen-ls) {
-      padding: 6%;
-    }
-
-    // Section Wrapper Outer Container
-    .section-layout-container {
-
-      // Section Wrapper Outer Container Row
-      .section-layout-container-row {
-
-        // Section Wrapper Outer Container Col
-        .section-content-container-col {
-          margin-bottom: 20px;
-
-          @media (max-width: @screen-ls) {
-            &:not(.margin-bottom-0) {
-              margin-bottom: 6%;
-            }
-
-            &[class*="margin-left--"] {
-              margin-left: 0 !important;
-            }
-
-            &[class*="margin-right--"] {
-              margin-right: 0 !important;
-            }
-          }
-
-          &.box-shadow-inner {
-            > .section-content-container {
-              box-shadow: 0 0 10px 5px .hsla(@color-black-hsl, 0.25)[@result] !important
-            }
-          }
-
-          &.rounded {
-            > .section-content-container {
-              border-radius: (@border-radius-default * 4) !important
-            }
-          }
-
-          &.hidden-reference {
-            display: none !important; // hide typo3 reference
-          }
-
-          &.headline-light {
-            .section-content-container {
-              .section-content-container-row {
-                .section-content-container-headline {
-                  font-weight: @font-light;
-                }
-              }
-            }
-          }
-
-          &.link-color-white {
-            a:not(.btn) {
-              color: var(--color-white);
-            }
-          }
-
-          &.link-underline {
-            a:not(.btn) {
-              text-decoration: underline;
-
-              &:hover {
-                text-decoration: none;
-              }
-            }
-          }
-
-          &.btn-default {
-            .btn {
-              .button-style(
-                ~'';
-                @brand-primary;
-                .hex-to-LESS-hsl(@color-white)[@result];
-                .hex-to-LESS-hsl(@brand-primary)[@result];
-
-                var(--brand-primary);
-                darken(@brand-primary, @btn-active-brightness);
-
-                var(--brand-primary);
-                darken(@brand-primary, @btn-active-border-brightness);
-
-                @color-white;
-                @color-white;
-              );
-            }
-          }
-
-          &.btn-white {
-            .btn {
-              .button-style(
-                ~'!important';
-                @color-black;
-                .hex-to-LESS-hsl(@color-white)[@result];
-                .hex-to-LESS-hsl(@color-white)[@result];
-              );
-            }
-          }
-
-          &.btn-primary {
-            .btn {
-              .button-style(
-                ~'!important';
-                @color-white;
-                .hex-to-LESS-hsl(@brand-primary)[@result];
-              );
-            }
-          }
-
-          &.btn-man {
-            .btn {
-              .button-style(
-                ~'!important';
-                @color-white;
-                .hex-to-LESS-hsl(@brand-man)[@result];
-              );
-
-              font-family: "MANEurope", sans-serif !important;
-            }
-          }
-
-          &.btn-right {
-            .btn {
-              float: right;
-            }
-          }
-
-          &.btn-block {
-            .btn {
-              width: 100%;
-            }
-          }
-
-          &[class*="margin-top--"] {
-            .btn.margin-top-25 {
-              margin-top: 0 !important;
-            }
-          }
-
-          &.hyphens {
-            .hyphens();
-
-            &-headline {
-              .section-content-container-headline {
-                .hyphens();
-              }
-            }
-
-            &-body {
-              .section-content-container-body {
-                .hyphens();
-              }
-            }
-          }
-
-          &.preset-thumbnail {
-            .section-content-container {
-              padding: 0 20px 20px 20px !important;
-
-              .img-responsive {
-                max-width: calc(100% + 40px + 2px);
-                width: calc(100% + 40px + 2px);
-                margin: -1px -1px 0 -21px;
-              }
-
-              .section-content-container-row  {
-                @media (max-width: @screen-ls) {
-                  margin: 0 !important;
-                }
-              }
-            }
-          }
-
-          &.headline-block {
-            .section-content-container-row {
-              display: flex;
-              flex-direction: column;
-
-              .section-content-container-headline {
-                padding: 10px 20px;
-                background: var(--color-black);
-                text-transform: uppercase;
-                width: fit-content;
-
-                &:before {
-                  display: block;
-                  content: "+";
-                  width: 20px;
-                  height: 20px;
-                  position: absolute;
-                  top: 0px;
-                  left: 0px;
-                  transform: translate(-100%, -100%);
-                  text-align: center;
-                  line-height: 20px;
-                  color: var(--color-black);
-                  font-size: 40px;
-                }
-              }
-            }
-          }
-
-          &.rounded-image .img-responsive {
-            border-radius: 10px
-          }
-
-          &.list-style-position-inside {
-            ul, ol {
-              list-style-position: inside !important;
-            }
-          }
-
-          &.large-panel-border {
-            > .section-content-container.panel {
-              border-width: 3px;
-            }
-
-            &.panel-border-color-lighter {
-              > .section-content-container.panel {
-                border-color: var(--gray-lighter);
-              }
-            }
-          }
-
-          // Section Wrapper Inner Container
-          .section-content-container {
-            height: 100%;
-            justify-content: center;
-            margin-bottom: 0;
-            position: relative;
-
-            @media (max-width: @screen-ls) {
-              &[class*="padding-"]:not([class*="bg-"]) {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-              }
-            }
-
-            // Section Wrapper Inner Container Link
-            .section-content-container-link {
-              align-items: center;
-              display: flex;
-              text-decoration: none;
-              z-index: 3;
-
-              * {
-                text-decoration: none;
-              }
-            }
-
-            // Section Wrapper Inner Container Row
-            .section-content-container-row {
-              position: relative;
-              z-index: 2;
-
-              // Section Wrapper Inner Container Headline
-              .section-content-container-headline {
-                font-weight: @font-bold;
-                line-height: 1.20;
-
-                // hyphens
-                // @media (max-width: @screen-ls) {
-                //   hyphens: auto;
-                //   word-break: break-word;
-                // }
-              }
-
-              // Section Wrapper Inner Container Body
-              .section-content-container-body {
-                ul, ol {
-                  &:not(.feature-list):not(.list-unstyled):not(.text-center) {
-                    margin: 10px 0 20px 0;
-                    padding-left: 20px;
-
-                    li {
-                      margin-bottom: 10px;
-                    }
-                  }
-                }
-
-                ul {
-                  &:not(.feature-list):not(.list-unstyled) {
-                    list-style: square;
-                  }
-                }
-
-                p {
-                  margin: 1% auto 3% auto;
-
-                  &:last-child {
-                    margin-bottom: 0;
-                  }
-
-                  + p {
-                    margin-top: 0
-                  }
-                }
-
-                .section-content-container-body-footnote {
-                  margin-top: 20px;
-                  opacity: 0.75;
-
-                  .section-content-container-body-footnote-text {
-                    font-style: italic;
-                    transform: scale(0.75);
-                    transform-origin: 0 0 0;
-
-                    &:before {
-                      content: "*";
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Section Wrapper Outer Presets
-  .section-layout {
-    &.small {
-      &-spacings {
-        &-top {
-          @media (min-width: @screen-ls) {
-            padding-top: 2%;
-          }
-        }
-        &-bottom {
-          @media (min-width: @screen-ls) {
-            padding-bottom: 2%;
-          }
-        }
-      }
-    }
-
-    &.medium {
-      &-spacings {
-        &-top {
-          @media (min-width: @screen-ls) {
-            padding-top: 5%;
-          }
-        }
-        &-bottom {
-          @media (min-width: @screen-ls) {
-            padding-bottom: 5%;
-          }
-        }
-      }
-    }
-
-    &.large {
-      &-spacings {
-        &-top {
-          @media (min-width: @screen-ls) {
-            padding-top: 7%;
-          }
-        }
-        &-bottom {
-          @media (min-width: @screen-ls) {
-            padding-bottom: 7%;
-          }
-        }
-      }
-    }
-
-    // Presets
-    &.preset {
-      &-hero {
-        padding: 7% 7% 7% 0;
-
-        .section-layout-container {
-          padding-left: 0;
-          margin-left: 0;
-
-          .section-layout-container-row {
-            justify-content: end;
-            flex-direction: column;
-
-            .section-content-container-col {
-              margin-bottom: 0;
-
-              .section-content-container {
-                flex: initial !important;
-                background: var(--color-black);
-
-                .section-content-container-row {
-                  font-family: 'Red Ring Bold', Helvetica, Arial, sans-serif;
-                  padding: 20px 30px 20px 30px;
-
-                  .section-content-container-headline {
-                    font-weight: @font-bold;
-                    margin-bottom: 0 !important;
-                    // hyphens
-                    // hyphens: auto;
-                    // word-break: break-word;
-                  }
-
-                  .section-content-container-body {
-                    margin-bottom: 0 !important;
-                  }
-                }
-              }
-
-              &:first-child {
-                max-width: 95%;
-              }
-
-              &:not(:first-child) {
-                max-width: 75%;
-                @media (max-width: @screen-ls) { max-width: 85% }
-              }
-            }
-          }
-        }
-      }
-
-      &-teaser {
-        &.rimless {
-          &.left {
-            padding-left: 0;
-
-            .section-layout-container {
-              padding-left: 0;
-              margin-left: 0;
-
-              .section-layout-container-row {
-                justify-content: flex-start;
-                margin-left: 0;
-
-                .section-content-container-col {
-                  &:first-child {
-                    padding-left: 0;
-                  }
-
-                  .section-content-container {
-                    justify-content: center;
-                  }
-
-                  @media (max-width: @screen-ls) {
-                    &:not(:first-child) {
-                      padding-left: calc(~"6% + 20px");
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          &.right {
-            padding-right: 0;
-
-            .section-layout-container {
-              padding-right: 0;
-              margin-right: 0;
-
-              .section-layout-container-row {
-                justify-content: flex-end;
-                margin-right: 0;
-
-                .section-content-container-col {
-                  &:last-child {
-                    padding-right: 0;
-                  }
-
-                  .section-content-container {
-                    justify-content: center;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-footer {
-        padding: 20px 6%;
-
-        @media (max-width: @screen-ls) {
-          padding: 6%;
-        }
-
-        &:not(.marketplace) a {
-          color: var(--color-white);
-        }
-
-        &.marketplace a {
-          color: var(--color-black)
-        }
-
-        &.minimal ul.text-center {
-          padding-left: 0;
-        }
-
-        .section-layout-container {
-          .section-layout-container-row {
-            .section-content-container-col {
-
-              @media (max-width: @screen-ls) {
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-
-              .section-content-container {
-                .section-content-container-row {
-                  .section-content-container-headline {
-                    font-size: @font-size-18;
-                    margin-bottom: 10px;
-
-                    @media (max-width: @screen-ls) {
-                      text-align: center;
-                    }
-                  }
-
-                  .section-content-container-body {
-                    font-size: @font-size-16;
-
-                    ul {
-                      li {
-                        margin: 0 0 5px 0;
-                        padding: 0;
-                      }
-
-                      @media (max-width: @screen-ls) {
-                        list-style: none !important;
-                        margin: 0 !important;
-                        padding: 0 !important;
-                        text-align: center;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Marketplace Presets
-    &.marketplace {
-      &-search-header {
-        padding-top: 4%;
-        padding-bottom: 0;
-        position: relative;
-
-        &:not([class*="bg-"]) {
-          &:last-child:before {
-            background-image: url('https://@{cdnBase}/images/placeholder/open_marketplace_1920x400.png');
-            background-size: cover;
-            content: "";
-            display: block;
-            height: 100%;
-            left: 0;
-            position: absolute;
-            right: 0;
-            top: 0;
-          }
-        }
-
-        @media (min-width: @responsive-font-breakpoint) {
-          min-height: 400px;
-        }
-
-        .section-layout-container {
-          .section-layout-container-row {
-            @media (max-width: @screen-ls) {
-              text-shadow: 1px 1px 0 #000;
-            }
-
-            .section-content-container-col {
-              .section-content-container {
-                .section-content-container-row {
-                  display: flex;
-                  flex-direction: column;
-                  min-height: 175px;
-                  //padding-bottom: 15px;
-
-                  .section-content-container-headline {
-                    font-size: @font-size-h1;
-                    margin-bottom: @font-size-h1 * 0.25;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-h1 * 1.35; margin-bottom: @font-size-h1 * 0.25 * 1.35 }
-                  }
-
-                  .section-content-container-body {
-                    flex: 1 0 auto;
-                  }
-
-                  &:not([class*="text-size-"]) .section-content-container-body {
-                    font-size: @font-size-20;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-20 * 1.35 }
-                  }
-
-                  .input-group-addon,
-                  .form-control {
-                    border: none !important;
-                    box-shadow: none !important;
-                  }
-                }
-              }
-
-              // Section Body Max Width
-              @media (min-width: @screen-ls) {
-                &.body-max-width-sm {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 45%
-                  }
-                }
-
-                &.body-max-width-md, &:not([class*="body-max-width"]) {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 65%
-                  }
-                }
-
-                &.body-max-width-lg {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 75%
-                  }
-                }
-
-                &.body-max-width-none {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: none
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-category-links {
-        .section-layout-container {
-          @media (min-width: @screen-ls) {
-            .section-content-container-link {
-              bottom: 0;
-              left: 0;
-              position: absolute;
-              right: 0;
-              top: 0;
-            }
-          }
-
-          .section-layout-container-row {
-            .section-content-container-col {
-              .section-content-container {
-                display: flex;
-                justify-content: center;
-
-                > a {
-                  text-decoration: none;
-                }
-
-                &:not([class*="bg-"]) {
-                  .section-content-container-background-image {
-                    background-image: url('https://@{cdnBase}/images/placeholder/open_marketplace_300x100.png');
-                  }
-                }
-
-                @media (min-width: @screen-ls) {
-                  min-height: 100px; // Image Size 300x100
-                }
-
-                .section-content-container-row {
-                  text-align: center;
-                  padding: 10px;
-
-                  .section-content-container-headline {
-                    font-weight: @font-normal;
-                    font-size: @font-size-18;
-                    line-height: 1.15;
-                    // hyphens
-                    // @media (max-width: @responsive-font-breakpoint) { hyphens: auto; word-break: break-word }
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-18 * 1.35 }
-                  }
-
-                  .section-content-container-body {
-                    font-weight: @font-normal;
-                    font-size: @font-size-14;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-14 * 1.35 }
-
-                    p {
-                      margin: 0;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-category-header {
-        padding-bottom: 0;
-
-        .section-layout-container {
-          .section-layout-container-row {
-            @media (max-width: @screen-ls) {
-              text-shadow: 1px 1px 0 #000;
-            }
-
-            .section-content-container-col {
-              .section-content-container {
-                min-height: 150px; // Image Size 1260x150
-
-                &:not([class*="bg-"]) {
-                  .section-content-container-background-image {
-                    background-image: url('https://@{cdnBase}/images/placeholder/open_marketplace_1260x175.png');
-                  }
-                }
-
-                .section-content-container-row {
-                  padding: 20px 20px 25px 20px;
-                  @media (min-width: @responsive-font-breakpoint) { padding: 25px 40px 30px 40px }
-
-                  .section-content-container-headline {
-                    font-size: @font-size-h4;
-                    margin-bottom: @font-size-h4 * 0.75;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-h4 * 1.35; margin-bottom: @font-size-h4 * 0.75 * 1.35 }
-                  }
-
-                  .section-content-container-body {
-                    font-size: @font-size-16;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.35 }
-                  }
-                }
-
-                // overlay gradient
-                .section-content-container-background-image {
-                  &:before {
-                    bottom: 0;
-                    content: "";
-                    left: 0;
-                    position: absolute;
-                    top: 0;
-
-                    @media (max-width: @screen-ls) {
-                      width: 100%;
-                      background: .hsla(@always-color-black-hsl, 0.5)[@result];
-                    }
-
-                    @media (min-width: @screen-ls) {
-                      width: 75%;
-                      background: linear-gradient(90deg, .hsla(@always-color-black-hsl, 0.65)[@result], .hsla(@always-color-black-hsl, 0)[@result]);
-                    }
-                  }
-                }
-              }
-
-              // hide overlay gradient on large screens
-              &.no-gradient {
-                @media (min-width: @screen-ls) {
-                  .section-content-container {
-                    .section-content-container-background-image {
-                      &:before {
-                        display: none !important;
-                      }
-                    }
-                  }
-                }
-              }
-
-              // Section Body Max Width
-              @media (min-width: @screen-ls) {
-                &:not([class*="body-max-width"]) {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 50%
-                  }
-                }
-
-                &.body-max-width-sm {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 35%
-                  }
-                }
-
-                &.body-max-width-lg {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 65%
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-category-tiles {
-        padding-top: 0;
-
-        .section-layout-container {
-          .section-layout-container-row {
-            .section-content-container-col {
-              margin-bottom: 0;
-
-              .section-content-container {
-                margin-bottom: 20px;
-
-                .teaser-headline {
-                  font-weight: @font-bold;
-                  font-size: @font-size-16;
-                  @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.35 }
-                }
-
-                .teaser-content-wrapper {
-                  margin-bottom: 0;
-
-                  .feature-list {
-                    margin: 0;
-                    padding: 0;
-                    list-style: none;
-
-                    li {
-                      padding: 5px 7px;
-                      border: 1px solid var(--gray-light);
-                      background: var(--gray-lightest);
-                      border-radius: 3px;
-
-                      &:last-child {
-                        margin-bottom: 0;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-banner {
-        .section-layout-container {
-          .section-layout-container-row {
-            @media (max-width: @screen-ls) {
-              text-shadow: 1px 1px 0 #000;
-
-              .btn {
-                text-shadow: none;
-              }
-            }
-
-            .section-content-container-col {
-              .section-content-container {
-                @media (min-width: @responsive-font-breakpoint) { min-height: 350px } // Image Size 1260x350
-
-                &:not([class*="bg-"]) {
-                  .section-content-container-background-image {
-                    background-image: url('https://@{cdnBase}/images/placeholder/open_marketplace_1260x350.png');
-                  }
-                }
-
-                @media (min-width: @responsive-font-breakpoint) {
-                  .section-content-container-link {
-                    bottom: 0;
-                    left: 0;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                  }
-                }
-
-                .section-content-container-row {
-                  padding: 20px 20px 25px 20px;
-                  @media (min-width: @responsive-font-breakpoint) { padding: 50px 40px 55px 40px; }
-
-                  .section-content-container-headline {
-                    font-size: @font-size-h4;
-                    margin-bottom: @font-size-h4 * 0.75;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-h4 * 1.35; margin-bottom: @font-size-h4 * 0.75 * 1.35 }
-                  }
-
-                  .section-content-container-body {
-                    font-size: @font-size-16;
-                    @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.35 }
-                  }
-
-                  // reset to primary because of default btn-black
-                  .btn {
-                    .button-style(
-                      ~'!important';
-                      @color-white;
-                      .hex-to-LESS-hsl(@brand-primary)[@result];
-                    );
-                  }
-                }
-
-                // overlay gradient
-                .section-content-container-background-image {
-                  &:before {
-                    bottom: 0;
-                    content: "";
-                    left: 0;
-                    position: absolute;
-                    top: 0;
-
-                    @media (max-width: @screen-ls) {
-                      width: 100%;
-                      background: .hsla(@always-color-black-hsl, 0.5)[@result];
-                    }
-
-                    @media (min-width: @screen-ls) {
-                      width: 75%;
-                      background: linear-gradient(90deg, .hsla(@always-color-black-hsl, 0.65)[@result], .hsla(@always-color-black-hsl, 0)[@result]);
-                    }
-                  }
-                }
-              }
-
-              // hide overlay gradient on large screens
-              &.no-gradient {
-                @media (min-width: @screen-ls) {
-                  .section-content-container {
-                    .section-content-container-background-image {
-                      &:before {
-                        display: none;
-                      }
-                    }
-                  }
-                }
-              }
-
-              // Section Body Max Width
-              @media (min-width: @screen-ls) {
-                &:not([class*="body-max-width"]) {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 50%
-                  }
-                }
-
-                &.body-max-width-sm {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 35%
-                  }
-                }
-
-                &.body-max-width-lg {
-                  .section-content-container-headline,
-                  .section-content-container-body {
-                    max-width: 65%
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &-details-buyframe {
-        .section-layout-container {
-          .section-layout-container-row {
-            background-color: var(--color-white);
-            border: 1px solid var(--gray-light);
-            margin: 0 0 -1px 0;
-            padding: 3% 5%;
-          }
-        }
-      }
-
-      &-details-panel {
-        .section-layout-container {
-          .section-layout-container-row {
-            background-color: var(--color-white);
-            border: 1px solid var(--gray-light);
-            margin: 0 0 20px 0;
-            padding: 5%;
-
-            .section-content-container-col {
-              @media (max-width: @screen-ls) {
-                &:not(:last-child) {
-                  margin-bottom: 5%;
-                }
-              }
-
-              @media (min-width: @mobile-breakpoint) {
-                &:not([class*="col-ls-"]) {
-                  width: 66.66666667%;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Partner Brandings
-    &.man {
-      &.marketplace-search-header,
-      &.marketplace-category-header,
-      &.marketplace-category-links,
-      &.marketplace-banner {
-        .section-layout-container {
-          .section-layout-container-row {
-            .section-content-container-col {
-              .section-content-container {
-                .section-content-container-row {
-                  .section-content-container-headline {
-                    font-family: "MANEurope Condensed", sans-serif;
-                  }
-
-                  .section-content-container-body {
-                    font-family: "MANEurope", sans-serif;
-                  }
-
-                  .btn {
-                    .button-style(
-                      ~'!important';
-                      @color-white;
-                      .hex-to-LESS-hsl(@brand-man)[@result];
-                    );
-
-                    font-family: "MANEurope", sans-serif !important;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Section Custom Wrapper Styles/Presets
-  &.preset {
-    &-hero-centered {
-      .section-layout {
-        &.preset-hero {
-          padding: 7%;
-
-          .section-layout-container {
-            padding-left: 10px;
-            padding-right: 10px;
-            margin-left: auto;
-            margin-right: auto;
-
-            .section-layout-container-row {
-              align-items: center;
-              display: flex;
-
-              .section-content-container-col {
-                justify-content: center;
-                max-width: none !important;
-
-                .section-content-container {
-                  flex: initial !important;
-                  background: var(--color-black);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &-rimless {
-      @media (min-width: @screen-ls) {
-        .section-layout {
-          padding-left: 0;
-          padding-right: 0;
-
-          .section-layout-container {
-            max-width: none;
-            padding-left: 0;
-            padding-right: 0;
-
-            .section-layout-container-row {
-              .section-content-container-col {
-                padding-left: 0;
-                padding-right: 0;
-              }
-            }
-          }
-        }
-      }
-
-      &-always {
-        .section-layout {
-          padding-left: 0;
-          padding-right: 0;
-
-          .section-layout-container {
-            max-width: none;
-            padding-left: 0;
-            padding-right: 0;
-
-            .section-layout-container-row {
-              .section-content-container-col {
-                padding-left: 0;
-                padding-right: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &-marketplace-details-panel {
-      &-rimless-bottom {
-        .section-layout-container-row {
-          padding-bottom: 0 !important;
-        }
-      }
-
-      &-rimless-top {
-        .section-layout-container-row {
-          padding-top: 0 !important;
-        }
-      }
-    }
-
-    &-marketplace-col-4-as-col-6 {
-      .section-layout {
-        .section-layout-container {
-          .section-layout-container-row {
-            .section-content-container-col {
-              &.col-md-4 {
-                @media (min-width: @screen-md) { width: 50%; }
-              }
-
-              &.col-ls-4 {
-                @media (min-width: @screen-ls) { width: 50%; }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &-double-col-padding {
-      .section-layout > .section-layout-container {
-        padding-left: 0;
-        padding-right: 0;
-
-        [class*="col-"] {
-          padding-left: 20px;
-          padding-right: 20px;
-        }
-      }
-    }
-
-    &-man {
-      .section-layout {
-        .section-layout-container {
-          .section-layout-container-row {
-            .section-content-container-col {
-              .section-content-container {
-                .section-content-container-row {
-                  .section-content-container-headline {
-                    font-family: "MANEurope Condensed", sans-serif;
-                  }
-
-                  .section-content-container-body {
-                    font-family: "MANEurope", sans-serif;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &-hide-background-on-mobile {
-      @media (max-width: @screen-ls) {
-        .section-wrapper-background-image {
-          display: none;
-        }
-      }
-    }
-
-    &-overlay-light {
-      .section-wrapper-background-image,
-      .section-content-container-background-image {
-        &[class*="opacity-"] {
-          &:before {
-            background: var(--color-white);
-          }
-        }
-      }
-    }
-  }
-
-  &:not(.no-gradient) {
-    @media (max-width: @screen-md) {
-      .marketplace-search-header {
-        &:before {
-          background: linear-gradient(0deg,.hsla(@always-color-black-hsl, 0.85)[@result],.hsla(@always-color-black-hsl, 0.5)[@result]);
-          bottom: 0;
-          content: "";
-          left: 0;
-          position: absolute;
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  // Section Wrapper Inner Presets
-  .section-layout {
-    .section-layout-container {
-      .section-layout-container-row {
-        .section-content-container-col {
-          &.preset {
-            &-feature {
-              &-tile {
-                margin-bottom: 20px;
-
-                .section-content-container {
-                  padding: 40px 20px;
-                  justify-content: flex-start;
-
-                  .section-content-container-row {
-                    display: flex;
-                    flex-direction: column;
-                    height: 100%;
-                    text-align: center;
-
-                    .section-content-container-headline {
-                      font-size: @font-size-20;
-                      margin-bottom: @font-size-20 * 0.75;
-                      margin-top: 30px;
-                      .hyphens();
-
-                      @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-20 * 1.35; margin-bottom: @font-size-20 * 0.75 * 1.35 }
-                    }
-
-                    .section-content-container-body {
-                      flex: 1 1 auto;
-                    }
-
-                    .btn {
-                      align-self: center;
-                    }
-                  }
-
-                  @media (max-width: @mobile-breakpoint) {
-                    &:not([class*="bg-"]) {
-                      padding-top: 0;
-                      padding-bottom: 0;
-
-                      .section-content-container-row {
-                        margin-top: 10%;
-                        margin-bottom: 10%;
-                      }
-                    }
-                  }
-                }
-
-                // hyphens
-                &.hyphens-none {
-                  .section-content-container-headline {
-                    hyphens: none !important;
-                    word-break: normal !important;
-                    word-wrap: normal !important;
-                  }
-                }
-
-                &.headline-max-width {
-                  .section-content-container-headline {
-                    margin-left: auto;
-                    margin-right: auto;
-                    max-width: 300px;
-
-                    @media (min-width: @responsive-font-breakpoint) { max-width: 400px; }
-                  }
-                }
-              }
-            }
-
-            &-app-feedback {
-              blockquote {
-                border: none;
-                font-size: inherit;
-                font-style: italic;
-                line-height: 1.30;
-                margin: 0 auto;
-                padding: 0 20px;
-                position: relative;
-                text-align: center;
-
-                p {
-                  margin: 0;
-                }
-
-                &:before,
-                &:after {
-                  font-size: 235%;
-                  height: 20px;
-                  line-height: 20px;
-                  opacity: 0.5;
-                  position: absolute;
-                  width: 20px;
-                }
-
-                &:before {
-                  top: 10px;
-                  left: 0;
-                  content: "“";
-                }
-
-                &:after {
-                  content: "”";
-                  right: 0;
-                  bottom: -10px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Theme
-html {
-  background-color: var(--color-white);
-}
-
-body {
-  font-weight: @font-light;
-  line-height: 1.35;
-
-  font-size: @font-size-16;
-  @media (min-width: @responsive-font-breakpoint) { font-size: @font-size-16 * 1.25 }
-}
-
-.box-shadow { box-shadow: 0 0 10px 5px .hsla(@always-color-black-hsl, 0.25)[@result] !important }
-
-iframe {
-  border: none;
-  overflow: hidden;
-  width: 100%;
-}
-
-#typo3-preview-info {
-  display: none;
-}
-
-.panel, .thumbnail {
-  box-shadow: none;
-  border-radius: 0;
-}
-
-blockquote {
-  padding: 2% 10%;
-
-  &:before {
-    font-size: 100px;
-    width: 10%;
-  }
-}
-
-.panel {
-  &[class*="bg-"]:not(.bg-white):not(.bg-black) {
-    border: none;
-  }
-
-  &-body {
-    padding: 20px;
-  }
-}
-
-.btn.btn-dynamic {
-  font-size: inherit !important;
-  line-height: inherit !important;
-  padding: 10px 20px !important;
-  height: auto !important;
-  text-transform: none !important;
-
-  &.btn-black {
-    .button-style(
-      ~'!important';
-      @color-white;
-      .hex-to-LESS-hsl(@color-black)[@result];
-      .hex-to-LESS-hsl(@color-black)[@result];
-
-      lighten(@color-black, 5%);
-      lighten(@color-black, 10%);
-
-      @color-black
-      @color-black
-    );
-  }
-
-  &.btn-white {
-    .button-style(
-      ~'!important';
-      @color-black;
-      .hex-to-LESS-hsl(@color-white)[@result];
-    );
-  }
-}
-
-@media (max-width: @screen-ls) {
-  .btn.btn-dynamic {
-    display: inline-block;
-    max-width: calc(~"100vw - 65px");
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    .marketplace-details-panel & {
-      max-width: calc(~"100vw - 110px");
-    }
-  }
-
-  // no scale animations on mobile
-  [class*="hover-scale-"],
-  [class*="hover-scale-"]:hover {
-    transform: scale(1.0) !important;
-    transition: none;
-  }
-
-  .module-content {
-    [class*="rotate-"],
-    [class*="rotate-"]:hover {
-      transform: rotate(0deg) !important;
-    }
-  }
-}
-
-.anchor {
-  display: block;
-  position: absolute;
-  visibility: hidden;
-}
-
-.text-shadow {
-  text-shadow: 1px 1px 3px .hsla(@always-color-black-hsl, 0.85)[@result];
-
-  .btn,
-  .input-group {
-    text-shadow: none;
-  }
-}
-
-.ApplicationLayout {
-  .ApplicationLayoutHeader + .ApplicationLayoutBody {
-    .anchor {
-      margin-top: -50px;
-    }
-  }
-
-  .ApplicationLayoutBody {
-    @media (min-width: @screen-ls) {
-      .module-content {
-        display: flex;
-        flex-direction: column;
-
-        > div:not([class]) {
-          display: flex;
-          flex: 1 1 auto;
-
-          > .section-wrapper {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .scroll-to-top {
-      display: none;
-
-      // bottom: 20px;
-      // position: fixed;
-      // right: 20px;
-      // z-index: 10;
-
-      // > .btn {
-      //   border-radius: 4px;
-
-      //   .button-style(
-      //     ~'!important';
-      //     @color-white;
-      //     .hex-to-LESS-hsl(@brand-primary)[@result];
-      //   );
-      // }
-
-      // @media (max-width: @screen-ls) {
-      //   transform: scale(1.3);
-      //   transform-origin: 100% 100%;
-      // }
-    }
-  }
-}
-
-// old dialog markup fix
-.modal-dialog {
-  .modal-header {
-    > .modal-header-close {
-      background: none;
-      border: none;
-      color: var(--gray-dark);
-      float: right;
-      font-size: 30px;
-      line-height: 55px;
-      margin-top: 0;
-      opacity: 0.7;
-      text-align: center;
-      width: 60px;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      .sr-only {
-        display: none;
-      }
-    }
-  }
-}
-
-// Search Pagination
-.pagination > li:not(:empty) {
-  width: auto;
-  min-width: 30px;
-
-  > a {
-    &.next,
-    &.prev {
-      position: relative;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-  }
-}
-
-// Hide typo3 <header>
-.module-content,
-.section-layout-container-row {
-  > header {
-    display: none;
-  }
-}
-
-// Product (Partner)
-@media (min-width: @screen-ls) {
-  header ~ .section-wrapper > a[id*="product"] + .section-layout {
-    .col-ls-4,
-    .col-ls-8 {
-      width: 50%;
-
-      .section-content-container-headline {
-        .hyphens;
-      }
-    }
-  }
-}
-
-// Video Player
-._video-embed-container {
-  background: @color-black;
-
-  .data-privacy-modal {
-    &.hide {
-      display: none !important;
-    }
-
-    @media (max-width: @screen-ls) {
-      p {
-        display: none;
-      }
-
-      .btn {
-        height: auto;
-        line-height: 1.25;
-        white-space: pre-wrap;
-      }
-    }
-    @media (min-width: @screen-ls) {
-      z-index: 1;
-
-      .btn {
-        min-height: auto;
-      }
-    }
-  }
-}
-
-// Button Hover
-[class*="btn-"]:hover {
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-// Cookie Disclaimer
-#cookieDisclaimer > .position-absolute {
-  position: fixed !important;
-
-  > .max-height-100vh {
-    overflow-y: auto !important;
-    // -webkit-overflow-scrolling: touch !important; // TODO remove when cleanup
-  }
-}
-
-// A/B testing switcher
-.ce-switcher {
-  display: contents;
-
-  .ab[style*="block"] {
-    display: contents !important;
-  }
-}
-
-// Contact Form
-form[id*="contactForm"] {
-  label[for*="newsletter"] {
-    display: none;
-  }
-}
-
-// Rioglyph Icons
-.column-icon-wrapper {
-  position: relative;
-  margin-bottom: 15px;
-
-  @media (max-width: @screen-ls) {
-    margin-bottom: 0;
-  }
-
-  .column-icon-background {
-    display: block;
-    margin: 0 auto;
-  }
-
-  .column-icon {
-    color: var(--color-white);
-    font-size: 60px;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-// Tables
-.table-last-child-border-none .table > tbody > tr:last-child {
-  border-bottom: none;
-}
-
-@media (max-width: @screen-ls) {
-  .table-responsive-wrapper {
-    position: relative;
-    z-index: 0;
-
-    &.scroll-horizontal {
-      &:before {
-        background: linear-gradient(90deg, .hsla(@color-white-hsl, 0)[@result], .hsla(@color-white-hsl, 1)[@result]);
-        bottom: 1px;
-        content: "";
-        position: absolute;
-        right: 11px;
-        top: 1px;
-        width: 20px;
-        z-index: 5;
-      }
-    }
-  }
-}
-
-body:not(.legal-documents) {
-  .table-responsive {
-    @media (min-width: @screen-ls) {
-      > .table {
-        tr {
-          > td, > th {
-            &:first-child {
-              padding-left: 0;
-            }
-
-            &:last-child {
-              padding-right: 0;
-            }
-          }
-        }
-      }
-    }
-
-    // @media (max-width: @screen-ls) {
-      > .table {
-        > thead,
-        > tbody,
-        > tfoot {
-          > tr {
-            > th,
-            > td {
-              white-space: initial;
-            }
-          }
-        }
-      }
-    // }
-  }
-}
-
-// Safari image fix
-@media not all and (min-resolution:.001dpcm) {
-  @supports (-webkit-appearance:none) {
-    img[src*="placeholder_transparent"]:not([style*="background-image"]) {
-      opacity: 0;
-    }
-
-    img[src*="placeholder_transparent_16x9"] {
-      width: 100%;
-      height: 0;
-      padding-bottom: 56.25%;
-    }
-  }
-}
-
-// Section Clippig
-.section-wrapper {
-  &[class*="clip-"]:after {
-    content: "";
-    background: var(--color-white);
-    width: 100%;
-    position: absolute;
-    z-index: 1;
-  }
-
-  &[class*="clip-top"]:after {
-    top: -1px;
-  }
-
-  &[class*="clip-bottom"]::after {
-    bottom: -1px;
-  }
-
-  &[class*="clip-white"]:after {
-    background: var(--color-white)
-  }
-
-  &[class*="clip-lightest"]::after {
-    background: var(--gray-lightest)
-  }
-
-  &.clip-top-ltr:after {
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-  }
-
-  &.clip-top-rtl:after {
-    clip-path: polygon(0 0, 100% 0, 0 100%);
-  }
-
-  &.clip-bottom-ltr:after {
-    clip-path: polygon(0 100%, 100% 0, 100% 100%);
-  }
-
-  &.clip-bottom-rtl:after {
-    clip-path: polygon(0 0, 100% 100%, 0 100%);
-  }
-}
-
-@media (max-width: @screen-ls) {
-  .section-wrapper[class*="clip-"]:after {
-    height: 0;
-    padding-bottom: 5%;
-  }
-}
-
-@media (min-width: @screen-ls) {
-  .section-wrapper[class*="clip-"]:after {
-    height: 50px;
-  }
-}