@rio-cloud/rio-uikit 0.16.1-beta-7 → 0.16.1-beta-10

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

@@ -0,0 +1,2236 @@
+// Core
+@import (less) '../../../styles/rio-uikit-core.less';
+
+// 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
+@text-color: @color-black;
+.text-color-darkest { color: @text-color !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: @color-coldplay-wine !important }
+.bg-color-coldplay-aubergine { background-color: @color-coldplay-aubergine !important }
+.bg-color-coldplay-kashmir { background-color: @color-coldplay-kashmir !important }
+.bg-color-coldplay-fountain { background-color: @color-coldplay-fountain !important }
+.bg-color-coldplay-turquoise { background-color: @color-coldplay-turquoise !important }
+.bg-color-coldplay-bermuda { background-color: @color-coldplay-bermuda !important }
+.bg-color-coldplay-moos { background-color: @color-coldplay-moos !important }
+.bg-color-coldplay-primrose { background-color: @color-coldplay-primrose !important }
+.bg-color-coldplay-khaki { background-color: @color-coldplay-khaki !important }
+.bg-color-warmup-crimson { background-color: @color-warmup-crimson !important }
+.bg-color-warmup-victoria { background-color: @color-warmup-victoria !important }
+.bg-color-warmup-cadillac { background-color: @color-warmup-cadillac !important }
+.bg-color-warmup-raspberry { background-color: @color-warmup-raspberry !important }
+.bg-color-warmup-cerise { background-color: @color-warmup-cerise !important }
+.bg-color-warmup-charm{ background-color: @color-warmup-charm !important }
+.bg-color-warmup-salmon { background-color: @color-warmup-salmon !important }
+.bg-color-warmup-cherokee { background-color: @color-warmup-cherokee !important }
+.bg-color-warmup-corn { background-color: @color-warmup-corn !important }
+.bg-color-black { background-color: @color-black !important }
+.bg-color-white { background-color: @color-white !important }
+.bg-color-primary { background-color: @color-highlight !important }​
+
+.text-color-placeholder { color: transparent }
+.text-color-coldplay-wine { color: @color-coldplay-wine !important }
+.text-color-coldplay-kashmir { color: @color-coldplay-kashmir !important }
+.text-color-coldplay-aubergine { color: @color-coldplay-aubergine !important }
+.text-color-coldplay-fountain { color: @color-coldplay-fountain !important }
+.text-color-coldplay-turquoise { color: @color-coldplay-turquoise !important }
+.text-color-coldplay-bermuda { color: @color-coldplay-bermuda !important }
+.text-color-coldplay-moos { color: @color-coldplay-moos !important }
+.text-color-coldplay-primrose { color: @color-coldplay-primrose !important }
+.text-color-coldplay-khaki { color: @color-coldplay-khaki !important }
+.text-color-warmup-crimson { color: @color-warmup-crimson !important }
+.text-color-warmup-victoria { color: @color-warmup-victoria !important }
+.text-color-warmup-cadillac { color: @color-warmup-cadillac !important }
+.text-color-warmup-raspberry { color: @color-warmup-raspberry !important }
+.text-color-warmup-cerise { color: @color-warmup-cerise !important }
+.text-color-warmup-charm { color: @color-warmup-charm !important }
+.text-color-warmup-salmon { color: @color-warmup-salmon !important }
+.text-color-warmup-cherokee { color: @color-warmup-cherokee !important }
+.text-color-warmup-corn { color: @color-warmup-corn !important }
+.text-color-black { color: @color-black !important }
+.text-color-white { color: @color-white !important }
+.text-color-primary { color: @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-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
+    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;
+
+    .navbar-brand {
+      display: none;
+    }
+
+    .ApplicationActionBar {
+      position: fixed;
+      right: 0;
+
+      li:not(#handheld-navigation) {
+        display: none;
+      }
+    }
+
+    .ModuleNavigation {
+      display: none;
+    }
+
+    .SubmoduleNavigation {
+      border-bottom: none;
+      display: block;
+      height: auto;
+      margin: 50px 0;
+      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");
+          }
+        }
+      }
+    }
+
+    .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: @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;
+          }
+        }
+
+        &:hover {
+          > .SubmoduleNavigation {
+            display: block;
+          }
+        }
+      }
+
+      .SubmoduleNavigation {
+        background: white;
+        border-bottom: 1px solid @gray-light;
+        border-left: 1px solid @gray-light;
+        border-right: 1px solid @gray-light;
+        display: none;
+        position: absolute;
+        width: auto;
+
+        li {
+          float: none;
+
+          a {
+            padding-top: 5px !important;
+            padding-bottom: 5px !important;
+          }
+
+          &.active,
+          &:hover {
+            > 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: (@navbar-height - 1);
+    z-index: 10;
+
+    ~ * .anchor {
+      margin-top: -122px !important;
+
+      @media (min-width: @screen-md) {
+        margin-top: -172px !important;
+      }
+    }
+  }
+
+  .section-content-container-col {
+    &[class*="position-sticky"] {
+      top: (@navbar-height - 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: #000000;
+        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; @navbar-height);
+    }
+  }
+
+  .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 rgba(0,0,0,.25) !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: @color-white;
+            }
+          }
+
+          &.link-underline {
+            a:not(.btn) {
+              text-decoration: underline;
+
+              &:hover {
+                text-decoration: none;
+              }
+            }
+          }
+
+          &.btn-default {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @btn-default-bg;
+                @btn-default-border;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                darken(@btn-default-color, 17%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 25%);
+                darken(@btn-default-border, 25%);
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+              );
+            }
+          }
+
+          &.btn-white {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @color-white;
+                darken(@color-white, 5%);
+                @color-black;
+                darken(@color-white, 3%);
+              );
+            }
+          }
+
+          &.btn-primary {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @btn-primary-bg;
+                @btn-primary-border;
+                @btn-primary-color;
+              );
+            }
+          }
+
+          &.btn-man {
+            .btn {
+              .button-variant(
+                ~'!important';
+                #e40045;
+                darken(#e40045, 5%);
+                @color-white;
+              );
+
+              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: @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: @color-black;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+
+          &.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: @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:not(:only-child) {
+                  margin: 1% auto 3% auto;
+                }
+
+                .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: @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: @color-white;
+        }
+
+        &.marketplace a {
+          color: @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('@{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('@{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('@{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: rgba(0, 0, 0, 0.5);
+                    }
+
+                    @media (min-width: @screen-ls) {
+                      width: 75%;
+                      background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+                    }
+                  }
+                }
+              }
+
+              // 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 @gray-light;
+                      background: @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('@{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-variant(
+                      ~'!important';
+                      @btn-primary-bg;
+                      @btn-primary-border;
+                      @btn-primary-color;
+                    );
+                  }
+                }
+
+                // 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: rgba(0, 0, 0, 0.5);
+                    }
+
+                    @media (min-width: @screen-ls) {
+                      width: 75%;
+                      background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+                    }
+                  }
+                }
+              }
+
+              // 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: @color-white;
+            border: 1px solid @gray-light;
+            margin: 0 0 -1px 0;
+            padding: 3% 5%;
+          }
+        }
+      }
+
+      &-details-panel {
+        .section-layout-container {
+          .section-layout-container-row {
+            background-color: @color-white;
+            border: 1px solid @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-variant(
+                      ~'!important';
+                      #e40045;
+                      darken(#e40045, 5%);
+                      @color-white;
+                    );
+
+                    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: @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: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.no-gradient) {
+    @media (max-width: @screen-md) {
+      .marketplace-search-header {
+        &:before {
+          background: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.50));
+          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: @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 rgba(0,0,0,.25) !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;
+  }
+}
+
+@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;
+  }
+
+  [class*="rotate-"],
+  [class*="rotate-"]:hover {
+    transform: rotate(0deg) !important;
+  }
+}
+
+.anchor {
+  display: block;
+  position: absolute;
+  visibility: hidden;
+}
+
+.text-shadow {
+  text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
+
+  .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 {
+      bottom: 20px;
+      position: fixed;
+      right: 20px;
+      z-index: 10;
+
+      > .btn {
+        border-radius: 4px;
+
+        .button-variant(
+          ~'!important';
+          @btn-primary-bg;
+          @color-white;
+          @btn-primary-color;
+        );
+      }
+
+      @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: @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;
+      }
+    }
+  }
+}
+
+[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;
+  }
+}
+
+// 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: @color-white;
+    font-size: 60px;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+// Responisve Table
+@media (max-width: @screen-ls) {
+  .table-responsive-wrapper {
+    position: relative;
+    z-index: 0;
+
+    &.scroll-horizontal {
+      &:before {
+        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
+        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: @color-white;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+  }
+
+  &[class*="clip-top"]:after {
+    top: 0;
+  }
+
+  &[class*="clip-bottom"]::after {
+    bottom: 0;
+  }
+
+  &[class*="clip-white"]:after {
+    background: @color-white
+  }
+
+  &[class*="clip-lightest"]::after {
+    background: @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;
+  }
+}