/*! otm, Compiled at 2023-10-24 10:53:06 */
/*
 I am essential for the Grunt workflow to function correctly.

 If the HTML Dummy did not provide its own `portal.less` then you have to build it manually by taking a look at the file `customized/assets.json` of the Dummy
 itself and importing every single LESS file here by hand.

 The Grunt workflow could work without this file, if you are configuring it to use every available file within the directory `portal/assets/styles`, but then it
 could happen that the stylesheets won't get merged in the correct order and therefore destroying the styles. If you want to try this then change the file
 `grunt/less.js` to use `<%= paths.assets.styles %>/**\/*.less` instead of `<%= paths.assets.styles %>/portal.less` (without the backslash).

 Example:

 ```less
 @import "_imports/imports.var.less";
 @import "_imports/imports.color.less";
 @import "_imports/imports.mixins.less";

 @import "_base/base.font.less";
 @import "_base/base.init.less";

 @import "_grid/grid.init.less";
 @import "_grid/grid.hLarge.less";
 @import "_grid/grid.hMedium.less";
 @import "_grid/grid.hSmall.less";
 @import "_grid/grid.hTiny.less";

 @import "_vendor/perfect-scrollbar.min.less";

 @import "pageHeader/pageHeader.init.less";
 ```
*/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage base
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
vegur - light
vegur - regular
vegur - bold
========================================================== */
/*  =========================================================
vegur - light
========================================================= */
@font-face {
  font-family: 'Vegur';
  src: url('../fonts/vegur/light/Vegur-Light-webfont.a36731d6.woff');
  font-weight: 300;
  font-style: normal;
}
/*  =========================================================
vegur - regular
========================================================= */
@font-face {
  font-family: 'Vegur';
  src: url('../fonts/vegur/regular/Vegur-Regular-webfont.2c69f51f.woff');
  font-weight: 400;
  font-style: normal;
}
/*  =========================================================
vegur - bold
========================================================= */
@font-face {
  font-family: 'Vegur';
  src: url('../fonts/vegur/bold/Vegur-Bold-webfont.e3f420ae.woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "HalvarEngschrift";
  src: url('../fonts/halvarEngschrift/light/Halvar-Engschrift-Light.e35ce4be.eot');
  src: url('../fonts/halvarEngschrift/light/Halvar-Engschrift-Light.e35ce4be.eot?#iefix') format('embedded-opentype'), url('../fonts/halvarEngschrift/light/Halvar-Engschrift-Light.ba6046b7.woff2') format('woff2'), url('../fonts/halvarEngschrift/light/Halvar-Engschrift-Light.a7735add.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "HalvarEngschrift";
  src: url('../fonts/halvarEngschrift/regular/Halvar-Engschrift-Regular.d36ff7a4.eot');
  src: url('../fonts/halvarEngschrift/regular/Halvar-Engschrift-Regular.d36ff7a4.eot?#iefix') format('embedded-opentype'), url('../fonts/halvarEngschrift/regular/Halvar-Engschrift-Regular.044afcfd.woff2') format('woff2'), url('../fonts/halvarEngschrift/regular/Halvar-Engschrift-Regular.ec51ce5e.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-cyrillic-ext.691dc7b2.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-cyrillic.624242eb.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-greek-ext.9743cdd9.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-greek.43cb3dce.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-vietnamese.e5565c92.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-latin-ext.755f17d6.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal-latin.24f7b094.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-cyrillic-ext.e755c8ea.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-cyrillic.0c4fa4c6.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-greek-ext.a47b9667.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-greek.7aed216c.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-vietnamese.eafec10d.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-latin-ext.6923b196.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal-latin.33543c5c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-cyrillic-ext.76563ea1.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-cyrillic.ff3904f6.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-greek-ext.3648eede.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-greek.faf40e5a.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-vietnamese.3cb1ef2e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-latin-ext.f5f8ba17.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal-latin.819af3d3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-cyrillic-ext.f61100cb.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-cyrillic.93843230.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-greek-ext.658c1c24.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-greek.1edc4ebb.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-vietnamese.36ae0534.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-latin-ext.63f785f0.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal-latin.0edb7628.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans/open-sans-300-normal.73a1b98b.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans/open-sans-400-normal.049a929c.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans/open-sans-600-normal.8f712814.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans/open-sans-700-normal.e5111cab.ttf') format('truetype');
}
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon/icomoon.58c3cc48.eot?ic17ly');
  src: url('../fonts/icomoon/icomoon.58c3cc48.eot?ic17ly#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.747c7d17.woff2?ic17ly') format('woff2'), url('../fonts/icomoon/icomoon.c81dea93.ttf?ic17ly') format('truetype'), url('../fonts/icomoon/icomoon.e0b62b8a.woff?ic17ly') format('woff'), url('../fonts/icomoon/icomoon.fbf33152.svg?ic17ly#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-arrow_right:before {
  content: "\e921";
}
.icon-whatsapp:before {
  content: "\e91e";
}
.icon-burger:before {
  content: "\e900";
}
.icon-karte:before {
  content: "\e901";
}
.icon-magnifier:before {
  content: "\e902";
}
.icon-host:before {
  content: "\e903";
}
.icon-calender:before {
  content: "\e904";
}
.icon-aroundMe:before {
  content: "\e905";
}
.icon-phone:before {
  content: "\e906";
}
.icon-mail:before {
  content: "\e907";
}
.icon-instagram:before {
  content: "\e908";
}
.icon-facebook:before {
  content: "\e909";
}
.icon-google:before {
  content: "\e90a";
}
.icon-youtube:before {
  content: "\e90b";
}
.icon-twitter:before {
  content: "\e90c";
}
.icon-blog:before {
  content: "\e90d";
}
.icon-poi:before {
  content: "\e90e";
}
.icon-close:before {
  content: "\e90f";
}
.icon-filter:before {
  content: "\e910";
}
.icon-checkmark:before {
  content: "\e911";
}
.icon-arrowRight:before {
  content: "\e912";
}
.icon-arrowLeft:before {
  content: "\e913";
}
.icon-zoom:before {
  content: "\e914";
}
.icon-navi:before {
  content: "\e915";
}
.icon-triangleDown:before {
  content: "\e916";
}
.icon-people:before {
  content: "\e917";
}
.icon-clock:before {
  content: "\e918";
}
.icon-star:before {
  content: "\e919";
}
.icon-pinterest:before {
  content: "\e91a";
}
.icon-arrowUp02:before {
  content: "\e91b";
}
.icon-arrowUp01:before {
  content: "\e91c";
}
.icon-touristinfo:before {
  content: "\e91d";
}
.icon-shop:before {
  content: "\e91f";
}
.icon-erlebnisse:before {
  content: "\e920";
}
.icon-ticket:before {
  content: "\e922";
}
.icon-arrowDown01:before {
  content: "\e923";
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage base
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure setup
general font setup
tools
buttons
mainWrapper
sticky buttons
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure setup
========================================================= */
@media all {
  html {
    height: auto;
    background: #fff;
    overflow-x: hidden;
  }
  html,
  body {
    margin: 0;
    border: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  html.-state-noScroll,
  html.-state-noScroll > body {
    overflow-y: hidden;
  }
  body {
    top: 0 !important;
  }
  a > img {
    border: 0 none;
  }
  hr {
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    border: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid;
  }
}
/*  =========================================================
general font setup
========================================================= */
@media all {
  strong {
    font: inherit;
  }
  em {
    font: inherit;
  }
  a {
    cursor: pointer;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
}
/* global font size setting (can be corrected localy in each module) */
@media all and (min-width: 1401px) {
  html {
    font-size: 0.625em;
  }
}
@media all and (max-width: 1400px) and (min-width: 1001px) {
  html {
    font-size: 0.5625em;
  }
}
@media all and (max-width: 1000px) and (min-width: 701px) {
  html {
    font-size: 0.5em;
  }
}
@media all and (max-width: 700px) {
  html {
    font-size: 0.4375em;
  }
}
/*  =========================================================
tools
========================================================= */
@media all {
  .closing::after,
  .closer {
    content: '';
    clear: both;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .none,
  .hide {
    display: none !important;
  }
  .noMargin {
    margin: 0 !important;
  }
  .noPadding {
    padding: 0 !important;
  }
  .noBorder {
    border: 0 none transparent !important;
  }
  .verticalAlign::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin: 0;
  }
  .horizontalAlign {
    text-align: center;
  }
}
/*  =========================================================
buttons
========================================================= */
@media all {
  .button {
    display: inline-block;
    height: 40px;
    padding: 0 15px;
    border-radius: 3px;
    border: none;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
  }
  .button > em {
    font-size: 12px;
  }
  .button.button--inverse {
    background: #fff;
    color: #48483E;
  }
  .offCanvas__search__buttonArea .button {
    font: 700 normal 18px/40px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .button.button--cta {
    background: #d2492a;
    color: #fff;
  }
  html:not(.-css-microsite-gruenkohl) .button:not(.button--cta):not(.button--inverse):not(.button--red) {
    background: #48483E;
    color: #fff;
  }
  html:not(.-css-microsite-gruenkohl) .button.button--red {
    background: #bb1f2e;
    color: #fff;
  }
  html.-css-microsite-gruenkohl .button {
    background: #006b37;
    color: #fff;
  }
}
/* icons in buttons */
@media all {
  .button > [class*='icon-'] {
    font-size: 18px;
  }
}
.button--text {
  border: 0;
  background: transparent;
  font: 400 normal 18px/1.5em 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5em;
  text-decoration: underline;
  cursor: pointer;
}
/*  =========================================================
mainWrapper
========================================================= */
@media all {
  #mainWrapper {
    z-index: 1;
    display: block;
    width: 100%;
    position: relative;
    /* spare some space for the pageHeader */
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) #mainWrapper {
    background: #fff;
  }
  html.-css-microsite-gruenkohl #mainWrapper {
    background: #fff url('../images/_branding/background_microsite2.bdb81e89.jpg') 0 0 repeat;
  }
}
@media all and (min-width: 701px) {
  #mainWrapper {
    padding: 70px 0 100px 0;
  }
  .-css-microsite-infoscreen #mainWrapper {
    padding: 0;
  }
}
@media all and (max-width: 700px) {
  #mainWrapper {
    padding: 50px 0 50px 0;
  }
}
/* general styling for section to overlap heroImage */
@media all {
  #mainWrapper > section {
    position: relative;
  }
}
@media all {
  html:not(.-css-microsite-gruenkohl) .sectionBackground {
    position: relative;
    width: 100%;
  }
  html:not(.-css-microsite-gruenkohl) .sectionBackground:not(.sectionBackground--noBubbles) {
    padding: 200px 0;
  }
  html:not(.-css-microsite-gruenkohl) .sectionBackground > :not(svg) {
    position: relative;
  }
  html:not(.-css-microsite-gruenkohl) .sectionBackground > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  html:not(.-css-microsite-gruenkohl).mix-blend-mode .sectionBackground > svg > circle {
    mix-blend-mode: multiply;
    fill: #ffa100;
  }
  html:not(.-css-microsite-gruenkohl):not(.mix-blend-mode) .sectionBackground > svg > circle {
    opacity: 0.75;
    fill: #ff8a00;
  }
}
@media all and (min-width: 701px) {
  html:not(.-css-microsite-gruenkohl) .sectionBackground.sectionBackground--noBubbles {
    padding: 67px 0 40px 0;
  }
}
@media all and (max-width: 700px) {
  html:not(.-css-microsite-gruenkohl) .sectionBackground.sectionBackground--noBubbles {
    padding: 60px 0 0 0;
  }
}
/* ketchup and majo' */
@media all {
  .mainWrapper--brand::after {
    content: '';
    position: absolute;
    right: 0;
    display: block;
    background: url('../images/_branding/brand.303ae7cb.svg') 0 0 no-repeat;
    background-size: cover;
  }
}
@media all and (min-width: 701px) {
  .mainWrapper--brand::after {
    width: 30px;
    height: 60px;
  }
}
@media all and (max-width: 700px) {
  .mainWrapper--brand::after {
    width: 20px;
    height: 40px;
  }
}
@media all and (min-width: 1401px) {
  .mainWrapper--brand::after {
    top: 180px;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) {
  .mainWrapper--brand::after {
    top: 200px;
  }
}
@media all and (max-width: 700px) {
  .mainWrapper--brand::after {
    top: 100px;
  }
}
@media all {
  .wa-mediabox-overlay {
    background-color: black;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage base
 * @author     gueldner
 * @since
 * @version    $Id$
 **/
/**

Navigation:
A. loading animation

**/
/*  =========================================================
A. loading animation
========================================================= */
@media all {
  .loadingAnimation {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(236, 236, 236, 0.75);
  }
  .loadingAnimation > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    background: none;
  }
  .loadingAnimation--active {
    display: block;
  }
}
/**
 * oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Sauer <sauer@infomax-it.de>
 * @since      2020-12-03
 */
/** grid */
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
horizontal grid
vertical grid
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
horizontal grid
========================================================= */
@media all {
  .h-grid {
    margin: 0 auto;
    clear: both;
    display: block;
  }
  .h-grid--centerd {
    text-align: center;
  }
  .h-grid--centerd [class*='h-el'] {
    text-align: left;
  }
  [class*='h-el'] {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
  }
}
@media all and (min-width: 701px) {
  .h-grid {
    max-width: 98.82352941%;
  }
}
@media all and (max-width: 700px) {
  .h-grid {
    max-width: 93.33333333%;
  }
}
/*  =========================================================
vertical grid
========================================================= */
@media all and (min-width: 1401px) {
  .v-el-1 {
    padding-bottom: 70px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .v-el-1 {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 1000px) {
  .v-el-1 {
    padding-bottom: 25px;
  }
}
@media all and (min-width: 1001px) {
  .v-el-2 {
    padding-bottom: 100px;
  }
}
@media all and (max-width: 1000px) {
  .v-el-2 {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 701px) {
  .v-el-2 {
    padding-bottom: 25px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
define grid elements and offsets
large scaling in tiny grid
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
define grid elements and offsets
========================================================= */
@media all and (min-width: 701px) {
  /* generic widths */
  /* generic offsets */
  /* generic grid elements */
  /* grid part dependend calls */
  .h-grid-lg-4 {
    /* max 1680 */
  }
  .h-grid-lg-4 .h-el-lg-0 {
    display: none !important;
  }
  .h-grid-lg-4 .h-el-lg-1 {
    width: 23.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-2 {
    width: 48.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-3 {
    width: 73.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-4 {
    width: 98.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-5 {
    width: 123.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-6 {
    width: 148.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-7 {
    width: 173.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-8 {
    width: 198.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-9 {
    width: 223.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-10 {
    width: 248.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-11 {
    width: 273.21428571%;
  }
  .h-grid-lg-4 .h-el-lg-12 {
    width: 298.21428571%;
  }
  .h-grid-lg-4 .h-off-lg-0 {
    margin-left: 0.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-1 {
    margin-left: 25.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-2 {
    margin-left: 50.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-3 {
    margin-left: 75.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-4 {
    margin-left: 100.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-5 {
    margin-left: 125.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-6 {
    margin-left: 150.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-7 {
    margin-left: 175.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-8 {
    margin-left: 200.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-9 {
    margin-left: 225.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-10 {
    margin-left: 250.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-11 {
    margin-left: 275.89285714%;
  }
  .h-grid-lg-4 .h-off-lg-12 {
    margin-left: 300.89285714%;
  }
  .h-grid-lg-5 {
    /* max 1680 */
  }
  .h-grid-lg-5 .h-el-lg-0 {
    display: none !important;
  }
  .h-grid-lg-5 .h-el-lg-1 {
    width: 18.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-2 {
    width: 38.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-3 {
    width: 58.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-4 {
    width: 78.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-5 {
    width: 98.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-6 {
    width: 118.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-7 {
    width: 138.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-8 {
    width: 158.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-9 {
    width: 178.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-10 {
    width: 198.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-11 {
    width: 218.57142857%;
  }
  .h-grid-lg-5 .h-el-lg-12 {
    width: 238.57142857%;
  }
  .h-grid-lg-5 .h-off-lg-0 {
    margin-left: 0.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-1 {
    margin-left: 20.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-2 {
    margin-left: 40.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-3 {
    margin-left: 60.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-4 {
    margin-left: 80.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-5 {
    margin-left: 100.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-6 {
    margin-left: 120.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-7 {
    margin-left: 140.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-8 {
    margin-left: 160.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-9 {
    margin-left: 180.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-10 {
    margin-left: 200.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-11 {
    margin-left: 220.71428571%;
  }
  .h-grid-lg-5 .h-off-lg-12 {
    margin-left: 240.71428571%;
  }
  .h-grid-lg-6 {
    /* max 1680 */
  }
  .h-grid-lg-6 .h-el-lg-0 {
    display: none !important;
  }
  .h-grid-lg-6 .h-el-lg-1 {
    width: 15.47619048%;
  }
  .h-grid-lg-6 .h-el-lg-2 {
    width: 32.14285714%;
  }
  .h-grid-lg-6 .h-el-lg-3 {
    width: 48.80952381%;
  }
  .h-grid-lg-6 .h-el-lg-4 {
    width: 65.47619048%;
  }
  .h-grid-lg-6 .h-el-lg-5 {
    width: 82.14285714%;
  }
  .h-grid-lg-6 .h-el-lg-6 {
    width: 98.80952381%;
  }
  .h-grid-lg-6 .h-el-lg-7 {
    width: 115.47619048%;
  }
  .h-grid-lg-6 .h-el-lg-8 {
    width: 132.14285714%;
  }
  .h-grid-lg-6 .h-el-lg-9 {
    width: 148.80952381%;
  }
  .h-grid-lg-6 .h-el-lg-10 {
    width: 165.47619048%;
  }
  .h-grid-lg-6 .h-el-lg-11 {
    width: 182.14285714%;
  }
  .h-grid-lg-6 .h-el-lg-12 {
    width: 198.80952381%;
  }
  .h-grid-lg-6 .h-off-lg-0 {
    margin-left: 0.5952381%;
  }
  .h-grid-lg-6 .h-off-lg-1 {
    margin-left: 17.26190476%;
  }
  .h-grid-lg-6 .h-off-lg-2 {
    margin-left: 33.92857143%;
  }
  .h-grid-lg-6 .h-off-lg-3 {
    margin-left: 50.5952381%;
  }
  .h-grid-lg-6 .h-off-lg-4 {
    margin-left: 67.26190476%;
  }
  .h-grid-lg-6 .h-off-lg-5 {
    margin-left: 83.92857143%;
  }
  .h-grid-lg-6 .h-off-lg-6 {
    margin-left: 100.5952381%;
  }
  .h-grid-lg-6 .h-off-lg-7 {
    margin-left: 117.26190476%;
  }
  .h-grid-lg-6 .h-off-lg-8 {
    margin-left: 133.92857143%;
  }
  .h-grid-lg-6 .h-off-lg-9 {
    margin-left: 150.5952381%;
  }
  .h-grid-lg-6 .h-off-lg-10 {
    margin-left: 167.26190476%;
  }
  .h-grid-lg-6 .h-off-lg-11 {
    margin-left: 183.92857143%;
  }
  .h-grid-lg-6 .h-off-lg-12 {
    margin-left: 200.5952381%;
  }
  .h-grid-lg-7 {
    /* max 1680 */
  }
  .h-grid-lg-7 .h-el-lg-0 {
    display: none !important;
  }
  .h-grid-lg-7 .h-el-lg-1 {
    width: 13.26530612%;
  }
  .h-grid-lg-7 .h-el-lg-2 {
    width: 27.55102041%;
  }
  .h-grid-lg-7 .h-el-lg-3 {
    width: 41.83673469%;
  }
  .h-grid-lg-7 .h-el-lg-4 {
    width: 56.12244898%;
  }
  .h-grid-lg-7 .h-el-lg-5 {
    width: 70.40816327%;
  }
  .h-grid-lg-7 .h-el-lg-6 {
    width: 84.69387755%;
  }
  .h-grid-lg-7 .h-el-lg-7 {
    width: 98.97959184%;
  }
  .h-grid-lg-7 .h-el-lg-8 {
    width: 113.26530612%;
  }
  .h-grid-lg-7 .h-el-lg-9 {
    width: 127.55102041%;
  }
  .h-grid-lg-7 .h-el-lg-10 {
    width: 141.83673469%;
  }
  .h-grid-lg-7 .h-el-lg-11 {
    width: 156.12244898%;
  }
  .h-grid-lg-7 .h-el-lg-12 {
    width: 170.40816327%;
  }
  .h-grid-lg-7 .h-off-lg-0 {
    margin-left: 0.51020408%;
  }
  .h-grid-lg-7 .h-off-lg-1 {
    margin-left: 14.79591837%;
  }
  .h-grid-lg-7 .h-off-lg-2 {
    margin-left: 29.08163265%;
  }
  .h-grid-lg-7 .h-off-lg-3 {
    margin-left: 43.36734694%;
  }
  .h-grid-lg-7 .h-off-lg-4 {
    margin-left: 57.65306122%;
  }
  .h-grid-lg-7 .h-off-lg-5 {
    margin-left: 71.93877551%;
  }
  .h-grid-lg-7 .h-off-lg-6 {
    margin-left: 86.2244898%;
  }
  .h-grid-lg-7 .h-off-lg-7 {
    margin-left: 100.51020408%;
  }
  .h-grid-lg-7 .h-off-lg-8 {
    margin-left: 114.79591837%;
  }
  .h-grid-lg-7 .h-off-lg-9 {
    margin-left: 129.08163265%;
  }
  .h-grid-lg-7 .h-off-lg-10 {
    margin-left: 143.36734694%;
  }
  .h-grid-lg-7 .h-off-lg-11 {
    margin-left: 157.65306122%;
  }
  .h-grid-lg-7 .h-off-lg-12 {
    margin-left: 171.93877551%;
  }
  .h-grid-lg-8 {
    /* max 1680 */
  }
  .h-grid-lg-8 .h-el-lg-0 {
    display: none !important;
  }
  .h-grid-lg-8 .h-el-lg-1 {
    width: 11.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-2 {
    width: 24.10714286%;
  }
  .h-grid-lg-8 .h-el-lg-3 {
    width: 36.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-4 {
    width: 49.10714286%;
  }
  .h-grid-lg-8 .h-el-lg-5 {
    width: 61.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-6 {
    width: 74.10714286%;
  }
  .h-grid-lg-8 .h-el-lg-7 {
    width: 86.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-8 {
    width: 99.10714286%;
  }
  .h-grid-lg-8 .h-el-lg-9 {
    width: 111.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-10 {
    width: 124.10714286%;
  }
  .h-grid-lg-8 .h-el-lg-11 {
    width: 136.60714286%;
  }
  .h-grid-lg-8 .h-el-lg-12 {
    width: 149.10714286%;
  }
  .h-grid-lg-8 .h-off-lg-0 {
    margin-left: 0.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-1 {
    margin-left: 12.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-2 {
    margin-left: 25.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-3 {
    margin-left: 37.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-4 {
    margin-left: 50.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-5 {
    margin-left: 62.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-6 {
    margin-left: 75.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-7 {
    margin-left: 87.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-8 {
    margin-left: 100.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-9 {
    margin-left: 112.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-10 {
    margin-left: 125.44642857%;
  }
  .h-grid-lg-8 .h-off-lg-11 {
    margin-left: 137.94642857%;
  }
  .h-grid-lg-8 .h-off-lg-12 {
    margin-left: 150.44642857%;
  }
  .h-grid:not([class*='h-grid-lg-']) {
    /* max 1680 */
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-0 {
    display: none !important;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-1 {
    width: 7.73809524%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-2 {
    width: 16.07142857%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-3 {
    width: 24.4047619%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-4 {
    width: 32.73809524%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-5 {
    width: 41.07142857%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-6 {
    width: 49.4047619%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-7 {
    width: 57.73809524%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-8 {
    width: 66.07142857%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-9 {
    width: 74.4047619%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-10 {
    width: 82.73809524%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-11 {
    width: 91.07142857%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-el-lg-12 {
    width: 99.4047619%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-0 {
    margin-left: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-1 {
    margin-left: 8.63095238%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-2 {
    margin-left: 16.96428571%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-3 {
    margin-left: 25.29761905%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-4 {
    margin-left: 33.63095238%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-5 {
    margin-left: 41.96428571%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-6 {
    margin-left: 50.29761905%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-7 {
    margin-left: 58.63095238%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-8 {
    margin-left: 66.96428571%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-9 {
    margin-left: 75.29761905%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-10 {
    margin-left: 83.63095238%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-11 {
    margin-left: 91.96428571%;
  }
  .h-grid:not([class*='h-grid-lg-']) .h-off-lg-12 {
    margin-left: 100.29761905%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid-lg-4 {
    width: 560px;
    max-width: 32.94117647%;
  }
  .h-grid-lg-4 [class*='h-el-lg'] {
    margin-right: 0.89285714%;
  }
  .h-grid-lg-4 [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.89285714%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid-lg-5 {
    width: 700px;
    max-width: 41.17647059%;
  }
  .h-grid-lg-5 [class*='h-el-lg'] {
    margin-right: 0.71428571%;
  }
  .h-grid-lg-5 [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.71428571%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid-lg-6 {
    width: 840px;
    max-width: 49.41176471%;
  }
  .h-grid-lg-6 [class*='h-el-lg'] {
    margin-right: 0.5952381%;
  }
  .h-grid-lg-6 [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.5952381%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid-lg-7 {
    width: 980px;
    max-width: 57.64705882%;
  }
  .h-grid-lg-7 [class*='h-el-lg'] {
    margin-right: 0.51020408%;
  }
  .h-grid-lg-7 [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.51020408%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid-lg-8 {
    width: 1120px;
    max-width: 65.88235294%;
  }
  .h-grid-lg-8 [class*='h-el-lg'] {
    margin-right: 0.44642857%;
  }
  .h-grid-lg-8 [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.44642857%;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .h-grid:not([class*='h-grid-lg-']) {
    width: 1680px;
    max-width: 98.82352941%;
  }
  .h-grid:not([class*='h-grid-lg-']) [class*='h-el-lg'] {
    margin-right: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-lg-']) [class*='h-el-lg']:not([class*='h-off-lg']) {
    margin-left: 0.29761905%;
  }
}
/*  =========================================================
large scaling in tiny grid
========================================================= */
@media all and (max-width: 700px) {
  /* grid elements */
  .h-el-lg-0 {
    display: none !important;
  }
  .h-el-lg-1 {
    width: 8.33333333%;
  }
  .h-el-lg-2 {
    width: 16.66666667%;
  }
  .h-el-lg-3 {
    width: 25%;
  }
  .h-el-lg-4 {
    width: 33.33333333%;
  }
  .h-el-lg-5 {
    width: 41.66666667%;
  }
  .h-el-lg-6 {
    width: 50%;
  }
  .h-el-lg-7 {
    width: 58.33333333%;
  }
  .h-el-lg-8 {
    width: 66.66666667%;
  }
  .h-el-lg-9 {
    width: 75%;
  }
  .h-el-lg-10 {
    width: 83.33333333%;
  }
  .h-el-lg-11 {
    width: 91.66666667%;
  }
  .h-el-lg-12 {
    width: 100%;
  }
  /* offsets */
  .h-off-lg-0 {
    margin-left: 0%;
  }
  .h-off-lg-1 {
    margin-left: 8.33333333%;
  }
  .h-off-lg-2 {
    margin-left: 16.66666667%;
  }
  .h-off-lg-3 {
    margin-left: 25%;
  }
  .h-off-lg-4 {
    margin-left: 33.33333333%;
  }
  .h-off-lg-5 {
    margin-left: 41.66666667%;
  }
  .h-off-lg-6 {
    margin-left: 50%;
  }
  .h-off-lg-7 {
    margin-left: 58.33333333%;
  }
  .h-off-lg-8 {
    margin-left: 66.66666667%;
  }
  .h-off-lg-9 {
    margin-left: 75%;
  }
  .h-off-lg-10 {
    margin-left: 83.33333333%;
  }
  .h-off-lg-11 {
    margin-left: 91.66666667%;
  }
  .h-off-lg-12 {
    margin-left: 100%;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
define grid elements and offsets
medium scaling in tiny grid
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
define grid elements and offsets
========================================================= */
@media all and (min-width: 701px) and (max-width: 1400px) {
  /* generic widths */
  /* generic offsets */
  /* generic grid elements */
  /* grid part dependend calls */
  .h-grid-md-4 {
    /* max 1680 */
  }
  .h-grid-md-4 .h-el-md-0 {
    display: none !important;
  }
  .h-grid-md-4 .h-el-md-1 {
    width: 23.21428571%;
  }
  .h-grid-md-4 .h-el-md-2 {
    width: 48.21428571%;
  }
  .h-grid-md-4 .h-el-md-3 {
    width: 73.21428571%;
  }
  .h-grid-md-4 .h-el-md-4 {
    width: 98.21428571%;
  }
  .h-grid-md-4 .h-el-md-5 {
    width: 123.21428571%;
  }
  .h-grid-md-4 .h-el-md-6 {
    width: 148.21428571%;
  }
  .h-grid-md-4 .h-el-md-7 {
    width: 173.21428571%;
  }
  .h-grid-md-4 .h-el-md-8 {
    width: 198.21428571%;
  }
  .h-grid-md-4 .h-el-md-9 {
    width: 223.21428571%;
  }
  .h-grid-md-4 .h-el-md-10 {
    width: 248.21428571%;
  }
  .h-grid-md-4 .h-el-md-11 {
    width: 273.21428571%;
  }
  .h-grid-md-4 .h-el-md-12 {
    width: 298.21428571%;
  }
  .h-grid-md-4 .h-off-md-0 {
    margin-left: 0.89285714%;
  }
  .h-grid-md-4 .h-off-md-1 {
    margin-left: 25.89285714%;
  }
  .h-grid-md-4 .h-off-md-2 {
    margin-left: 50.89285714%;
  }
  .h-grid-md-4 .h-off-md-3 {
    margin-left: 75.89285714%;
  }
  .h-grid-md-4 .h-off-md-4 {
    margin-left: 100.89285714%;
  }
  .h-grid-md-4 .h-off-md-5 {
    margin-left: 125.89285714%;
  }
  .h-grid-md-4 .h-off-md-6 {
    margin-left: 150.89285714%;
  }
  .h-grid-md-4 .h-off-md-7 {
    margin-left: 175.89285714%;
  }
  .h-grid-md-4 .h-off-md-8 {
    margin-left: 200.89285714%;
  }
  .h-grid-md-4 .h-off-md-9 {
    margin-left: 225.89285714%;
  }
  .h-grid-md-4 .h-off-md-10 {
    margin-left: 250.89285714%;
  }
  .h-grid-md-4 .h-off-md-11 {
    margin-left: 275.89285714%;
  }
  .h-grid-md-4 .h-off-md-12 {
    margin-left: 300.89285714%;
  }
  .h-grid-md-5 {
    /* max 1680 */
  }
  .h-grid-md-5 .h-el-md-0 {
    display: none !important;
  }
  .h-grid-md-5 .h-el-md-1 {
    width: 18.57142857%;
  }
  .h-grid-md-5 .h-el-md-2 {
    width: 38.57142857%;
  }
  .h-grid-md-5 .h-el-md-3 {
    width: 58.57142857%;
  }
  .h-grid-md-5 .h-el-md-4 {
    width: 78.57142857%;
  }
  .h-grid-md-5 .h-el-md-5 {
    width: 98.57142857%;
  }
  .h-grid-md-5 .h-el-md-6 {
    width: 118.57142857%;
  }
  .h-grid-md-5 .h-el-md-7 {
    width: 138.57142857%;
  }
  .h-grid-md-5 .h-el-md-8 {
    width: 158.57142857%;
  }
  .h-grid-md-5 .h-el-md-9 {
    width: 178.57142857%;
  }
  .h-grid-md-5 .h-el-md-10 {
    width: 198.57142857%;
  }
  .h-grid-md-5 .h-el-md-11 {
    width: 218.57142857%;
  }
  .h-grid-md-5 .h-el-md-12 {
    width: 238.57142857%;
  }
  .h-grid-md-5 .h-off-md-0 {
    margin-left: 0.71428571%;
  }
  .h-grid-md-5 .h-off-md-1 {
    margin-left: 20.71428571%;
  }
  .h-grid-md-5 .h-off-md-2 {
    margin-left: 40.71428571%;
  }
  .h-grid-md-5 .h-off-md-3 {
    margin-left: 60.71428571%;
  }
  .h-grid-md-5 .h-off-md-4 {
    margin-left: 80.71428571%;
  }
  .h-grid-md-5 .h-off-md-5 {
    margin-left: 100.71428571%;
  }
  .h-grid-md-5 .h-off-md-6 {
    margin-left: 120.71428571%;
  }
  .h-grid-md-5 .h-off-md-7 {
    margin-left: 140.71428571%;
  }
  .h-grid-md-5 .h-off-md-8 {
    margin-left: 160.71428571%;
  }
  .h-grid-md-5 .h-off-md-9 {
    margin-left: 180.71428571%;
  }
  .h-grid-md-5 .h-off-md-10 {
    margin-left: 200.71428571%;
  }
  .h-grid-md-5 .h-off-md-11 {
    margin-left: 220.71428571%;
  }
  .h-grid-md-5 .h-off-md-12 {
    margin-left: 240.71428571%;
  }
  .h-grid-md-6 {
    /* max 1680 */
  }
  .h-grid-md-6 .h-el-md-0 {
    display: none !important;
  }
  .h-grid-md-6 .h-el-md-1 {
    width: 15.47619048%;
  }
  .h-grid-md-6 .h-el-md-2 {
    width: 32.14285714%;
  }
  .h-grid-md-6 .h-el-md-3 {
    width: 48.80952381%;
  }
  .h-grid-md-6 .h-el-md-4 {
    width: 65.47619048%;
  }
  .h-grid-md-6 .h-el-md-5 {
    width: 82.14285714%;
  }
  .h-grid-md-6 .h-el-md-6 {
    width: 98.80952381%;
  }
  .h-grid-md-6 .h-el-md-7 {
    width: 115.47619048%;
  }
  .h-grid-md-6 .h-el-md-8 {
    width: 132.14285714%;
  }
  .h-grid-md-6 .h-el-md-9 {
    width: 148.80952381%;
  }
  .h-grid-md-6 .h-el-md-10 {
    width: 165.47619048%;
  }
  .h-grid-md-6 .h-el-md-11 {
    width: 182.14285714%;
  }
  .h-grid-md-6 .h-el-md-12 {
    width: 198.80952381%;
  }
  .h-grid-md-6 .h-off-md-0 {
    margin-left: 0.5952381%;
  }
  .h-grid-md-6 .h-off-md-1 {
    margin-left: 17.26190476%;
  }
  .h-grid-md-6 .h-off-md-2 {
    margin-left: 33.92857143%;
  }
  .h-grid-md-6 .h-off-md-3 {
    margin-left: 50.5952381%;
  }
  .h-grid-md-6 .h-off-md-4 {
    margin-left: 67.26190476%;
  }
  .h-grid-md-6 .h-off-md-5 {
    margin-left: 83.92857143%;
  }
  .h-grid-md-6 .h-off-md-6 {
    margin-left: 100.5952381%;
  }
  .h-grid-md-6 .h-off-md-7 {
    margin-left: 117.26190476%;
  }
  .h-grid-md-6 .h-off-md-8 {
    margin-left: 133.92857143%;
  }
  .h-grid-md-6 .h-off-md-9 {
    margin-left: 150.5952381%;
  }
  .h-grid-md-6 .h-off-md-10 {
    margin-left: 167.26190476%;
  }
  .h-grid-md-6 .h-off-md-11 {
    margin-left: 183.92857143%;
  }
  .h-grid-md-6 .h-off-md-12 {
    margin-left: 200.5952381%;
  }
  .h-grid-md-7 {
    /* max 1680 */
  }
  .h-grid-md-7 .h-el-md-0 {
    display: none !important;
  }
  .h-grid-md-7 .h-el-md-1 {
    width: 13.26530612%;
  }
  .h-grid-md-7 .h-el-md-2 {
    width: 27.55102041%;
  }
  .h-grid-md-7 .h-el-md-3 {
    width: 41.83673469%;
  }
  .h-grid-md-7 .h-el-md-4 {
    width: 56.12244898%;
  }
  .h-grid-md-7 .h-el-md-5 {
    width: 70.40816327%;
  }
  .h-grid-md-7 .h-el-md-6 {
    width: 84.69387755%;
  }
  .h-grid-md-7 .h-el-md-7 {
    width: 98.97959184%;
  }
  .h-grid-md-7 .h-el-md-8 {
    width: 113.26530612%;
  }
  .h-grid-md-7 .h-el-md-9 {
    width: 127.55102041%;
  }
  .h-grid-md-7 .h-el-md-10 {
    width: 141.83673469%;
  }
  .h-grid-md-7 .h-el-md-11 {
    width: 156.12244898%;
  }
  .h-grid-md-7 .h-el-md-12 {
    width: 170.40816327%;
  }
  .h-grid-md-7 .h-off-md-0 {
    margin-left: 0.51020408%;
  }
  .h-grid-md-7 .h-off-md-1 {
    margin-left: 14.79591837%;
  }
  .h-grid-md-7 .h-off-md-2 {
    margin-left: 29.08163265%;
  }
  .h-grid-md-7 .h-off-md-3 {
    margin-left: 43.36734694%;
  }
  .h-grid-md-7 .h-off-md-4 {
    margin-left: 57.65306122%;
  }
  .h-grid-md-7 .h-off-md-5 {
    margin-left: 71.93877551%;
  }
  .h-grid-md-7 .h-off-md-6 {
    margin-left: 86.2244898%;
  }
  .h-grid-md-7 .h-off-md-7 {
    margin-left: 100.51020408%;
  }
  .h-grid-md-7 .h-off-md-8 {
    margin-left: 114.79591837%;
  }
  .h-grid-md-7 .h-off-md-9 {
    margin-left: 129.08163265%;
  }
  .h-grid-md-7 .h-off-md-10 {
    margin-left: 143.36734694%;
  }
  .h-grid-md-7 .h-off-md-11 {
    margin-left: 157.65306122%;
  }
  .h-grid-md-7 .h-off-md-12 {
    margin-left: 171.93877551%;
  }
  .h-grid-md-8 {
    /* max 1680 */
  }
  .h-grid-md-8 .h-el-md-0 {
    display: none !important;
  }
  .h-grid-md-8 .h-el-md-1 {
    width: 11.60714286%;
  }
  .h-grid-md-8 .h-el-md-2 {
    width: 24.10714286%;
  }
  .h-grid-md-8 .h-el-md-3 {
    width: 36.60714286%;
  }
  .h-grid-md-8 .h-el-md-4 {
    width: 49.10714286%;
  }
  .h-grid-md-8 .h-el-md-5 {
    width: 61.60714286%;
  }
  .h-grid-md-8 .h-el-md-6 {
    width: 74.10714286%;
  }
  .h-grid-md-8 .h-el-md-7 {
    width: 86.60714286%;
  }
  .h-grid-md-8 .h-el-md-8 {
    width: 99.10714286%;
  }
  .h-grid-md-8 .h-el-md-9 {
    width: 111.60714286%;
  }
  .h-grid-md-8 .h-el-md-10 {
    width: 124.10714286%;
  }
  .h-grid-md-8 .h-el-md-11 {
    width: 136.60714286%;
  }
  .h-grid-md-8 .h-el-md-12 {
    width: 149.10714286%;
  }
  .h-grid-md-8 .h-off-md-0 {
    margin-left: 0.44642857%;
  }
  .h-grid-md-8 .h-off-md-1 {
    margin-left: 12.94642857%;
  }
  .h-grid-md-8 .h-off-md-2 {
    margin-left: 25.44642857%;
  }
  .h-grid-md-8 .h-off-md-3 {
    margin-left: 37.94642857%;
  }
  .h-grid-md-8 .h-off-md-4 {
    margin-left: 50.44642857%;
  }
  .h-grid-md-8 .h-off-md-5 {
    margin-left: 62.94642857%;
  }
  .h-grid-md-8 .h-off-md-6 {
    margin-left: 75.44642857%;
  }
  .h-grid-md-8 .h-off-md-7 {
    margin-left: 87.94642857%;
  }
  .h-grid-md-8 .h-off-md-8 {
    margin-left: 100.44642857%;
  }
  .h-grid-md-8 .h-off-md-9 {
    margin-left: 112.94642857%;
  }
  .h-grid-md-8 .h-off-md-10 {
    margin-left: 125.44642857%;
  }
  .h-grid-md-8 .h-off-md-11 {
    margin-left: 137.94642857%;
  }
  .h-grid-md-8 .h-off-md-12 {
    margin-left: 150.44642857%;
  }
  .h-grid:not([class*='h-grid-md-']) {
    /* max 1680 */
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-0 {
    display: none !important;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-1 {
    width: 7.73809524%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-2 {
    width: 16.07142857%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-3 {
    width: 24.4047619%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-4 {
    width: 32.73809524%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-5 {
    width: 41.07142857%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-6 {
    width: 49.4047619%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-7 {
    width: 57.73809524%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-8 {
    width: 66.07142857%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-9 {
    width: 74.4047619%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-10 {
    width: 82.73809524%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-11 {
    width: 91.07142857%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-el-md-12 {
    width: 99.4047619%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-0 {
    margin-left: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-1 {
    margin-left: 8.63095238%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-2 {
    margin-left: 16.96428571%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-3 {
    margin-left: 25.29761905%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-4 {
    margin-left: 33.63095238%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-5 {
    margin-left: 41.96428571%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-6 {
    margin-left: 50.29761905%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-7 {
    margin-left: 58.63095238%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-8 {
    margin-left: 66.96428571%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-9 {
    margin-left: 75.29761905%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-10 {
    margin-left: 83.63095238%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-11 {
    margin-left: 91.96428571%;
  }
  .h-grid:not([class*='h-grid-md-']) .h-off-md-12 {
    margin-left: 100.29761905%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid-md-4 {
    width: 560px;
    max-width: 32.94117647%;
  }
  .h-grid-md-4 [class*='h-el-lg'],
  .h-grid-md-4 [class*='h-el-md'] {
    margin-right: 0.89285714%;
  }
  .h-grid-md-4 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-4 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.89285714%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid-md-5 {
    width: 700px;
    max-width: 41.17647059%;
  }
  .h-grid-md-5 [class*='h-el-lg'],
  .h-grid-md-5 [class*='h-el-md'] {
    margin-right: 0.71428571%;
  }
  .h-grid-md-5 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-5 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.71428571%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid-md-6 {
    width: 840px;
    max-width: 49.41176471%;
  }
  .h-grid-md-6 [class*='h-el-lg'],
  .h-grid-md-6 [class*='h-el-md'] {
    margin-right: 0.5952381%;
  }
  .h-grid-md-6 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-6 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.5952381%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid-md-7 {
    width: 980px;
    max-width: 57.64705882%;
  }
  .h-grid-md-7 [class*='h-el-lg'],
  .h-grid-md-7 [class*='h-el-md'] {
    margin-right: 0.51020408%;
  }
  .h-grid-md-7 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-7 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.51020408%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid-md-8 {
    width: 1120px;
    max-width: 65.88235294%;
  }
  .h-grid-md-8 [class*='h-el-lg'],
  .h-grid-md-8 [class*='h-el-md'] {
    margin-right: 0.44642857%;
  }
  .h-grid-md-8 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid-md-8 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.44642857%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) and (min-width: 1001px) {
  .h-grid:not([class*='h-grid-md-']) {
    width: 1680px;
    max-width: 98.82352941%;
  }
  .h-grid:not([class*='h-grid-md-']) [class*='h-el-lg'],
  .h-grid:not([class*='h-grid-md-']) [class*='h-el-md'] {
    margin-right: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-md-']) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']),
  .h-grid:not([class*='h-grid-md-']) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']) {
    margin-left: 0.29761905%;
  }
}
/*  =========================================================
medium scaling in tiny grid
========================================================= */
@media all and (max-width: 700px) {
  /* grid elements */
  .h-el-md-0 {
    display: none !important;
  }
  .h-el-md-1 {
    width: 8.33333333%;
  }
  .h-el-md-2 {
    width: 16.66666667%;
  }
  .h-el-md-3 {
    width: 25%;
  }
  .h-el-md-4 {
    width: 33.33333333%;
  }
  .h-el-md-5 {
    width: 41.66666667%;
  }
  .h-el-md-6 {
    width: 50%;
  }
  .h-el-md-7 {
    width: 58.33333333%;
  }
  .h-el-md-8 {
    width: 66.66666667%;
  }
  .h-el-md-9 {
    width: 75%;
  }
  .h-el-md-10 {
    width: 83.33333333%;
  }
  .h-el-md-11 {
    width: 91.66666667%;
  }
  .h-el-md-12 {
    width: 100%;
  }
  /* offsets */
  .h-off-md-0 {
    margin-left: 0%;
  }
  .h-off-md-1 {
    margin-left: 8.33333333%;
  }
  .h-off-md-2 {
    margin-left: 16.66666667%;
  }
  .h-off-md-3 {
    margin-left: 25%;
  }
  .h-off-md-4 {
    margin-left: 33.33333333%;
  }
  .h-off-md-5 {
    margin-left: 41.66666667%;
  }
  .h-off-md-6 {
    margin-left: 50%;
  }
  .h-off-md-7 {
    margin-left: 58.33333333%;
  }
  .h-off-md-8 {
    margin-left: 66.66666667%;
  }
  .h-off-md-9 {
    margin-left: 75%;
  }
  .h-off-md-10 {
    margin-left: 83.33333333%;
  }
  .h-off-md-11 {
    margin-left: 91.66666667%;
  }
  .h-off-md-12 {
    margin-left: 100%;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
define grid elements and offsets
small scaling in tiny grid
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
define grid elements and offsets
========================================================= */
@media all and (min-width: 701px) and (max-width: 1000px) {
  /* generic widths */
  /* generic offsets */
  /* generic grid elements */
  /* grid part dependend calls */
  .h-grid-sm-4 {
    /* max 1680 */
  }
  .h-grid-sm-4 .h-el-sm-0 {
    display: none !important;
  }
  .h-grid-sm-4 .h-el-sm-1 {
    width: 23.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-2 {
    width: 48.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-3 {
    width: 73.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-4 {
    width: 98.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-5 {
    width: 123.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-6 {
    width: 148.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-7 {
    width: 173.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-8 {
    width: 198.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-9 {
    width: 223.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-10 {
    width: 248.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-11 {
    width: 273.21428571%;
  }
  .h-grid-sm-4 .h-el-sm-12 {
    width: 298.21428571%;
  }
  .h-grid-sm-4 .h-off-sm-0 {
    margin-left: 0.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-1 {
    margin-left: 25.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-2 {
    margin-left: 50.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-3 {
    margin-left: 75.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-4 {
    margin-left: 100.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-5 {
    margin-left: 125.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-6 {
    margin-left: 150.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-7 {
    margin-left: 175.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-8 {
    margin-left: 200.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-9 {
    margin-left: 225.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-10 {
    margin-left: 250.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-11 {
    margin-left: 275.89285714%;
  }
  .h-grid-sm-4 .h-off-sm-12 {
    margin-left: 300.89285714%;
  }
  .h-grid-sm-5 {
    /* max 1680 */
  }
  .h-grid-sm-5 .h-el-sm-0 {
    display: none !important;
  }
  .h-grid-sm-5 .h-el-sm-1 {
    width: 18.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-2 {
    width: 38.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-3 {
    width: 58.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-4 {
    width: 78.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-5 {
    width: 98.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-6 {
    width: 118.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-7 {
    width: 138.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-8 {
    width: 158.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-9 {
    width: 178.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-10 {
    width: 198.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-11 {
    width: 218.57142857%;
  }
  .h-grid-sm-5 .h-el-sm-12 {
    width: 238.57142857%;
  }
  .h-grid-sm-5 .h-off-sm-0 {
    margin-left: 0.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-1 {
    margin-left: 20.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-2 {
    margin-left: 40.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-3 {
    margin-left: 60.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-4 {
    margin-left: 80.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-5 {
    margin-left: 100.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-6 {
    margin-left: 120.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-7 {
    margin-left: 140.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-8 {
    margin-left: 160.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-9 {
    margin-left: 180.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-10 {
    margin-left: 200.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-11 {
    margin-left: 220.71428571%;
  }
  .h-grid-sm-5 .h-off-sm-12 {
    margin-left: 240.71428571%;
  }
  .h-grid-sm-6 {
    /* max 1680 */
  }
  .h-grid-sm-6 .h-el-sm-0 {
    display: none !important;
  }
  .h-grid-sm-6 .h-el-sm-1 {
    width: 15.47619048%;
  }
  .h-grid-sm-6 .h-el-sm-2 {
    width: 32.14285714%;
  }
  .h-grid-sm-6 .h-el-sm-3 {
    width: 48.80952381%;
  }
  .h-grid-sm-6 .h-el-sm-4 {
    width: 65.47619048%;
  }
  .h-grid-sm-6 .h-el-sm-5 {
    width: 82.14285714%;
  }
  .h-grid-sm-6 .h-el-sm-6 {
    width: 98.80952381%;
  }
  .h-grid-sm-6 .h-el-sm-7 {
    width: 115.47619048%;
  }
  .h-grid-sm-6 .h-el-sm-8 {
    width: 132.14285714%;
  }
  .h-grid-sm-6 .h-el-sm-9 {
    width: 148.80952381%;
  }
  .h-grid-sm-6 .h-el-sm-10 {
    width: 165.47619048%;
  }
  .h-grid-sm-6 .h-el-sm-11 {
    width: 182.14285714%;
  }
  .h-grid-sm-6 .h-el-sm-12 {
    width: 198.80952381%;
  }
  .h-grid-sm-6 .h-off-sm-0 {
    margin-left: 0.5952381%;
  }
  .h-grid-sm-6 .h-off-sm-1 {
    margin-left: 17.26190476%;
  }
  .h-grid-sm-6 .h-off-sm-2 {
    margin-left: 33.92857143%;
  }
  .h-grid-sm-6 .h-off-sm-3 {
    margin-left: 50.5952381%;
  }
  .h-grid-sm-6 .h-off-sm-4 {
    margin-left: 67.26190476%;
  }
  .h-grid-sm-6 .h-off-sm-5 {
    margin-left: 83.92857143%;
  }
  .h-grid-sm-6 .h-off-sm-6 {
    margin-left: 100.5952381%;
  }
  .h-grid-sm-6 .h-off-sm-7 {
    margin-left: 117.26190476%;
  }
  .h-grid-sm-6 .h-off-sm-8 {
    margin-left: 133.92857143%;
  }
  .h-grid-sm-6 .h-off-sm-9 {
    margin-left: 150.5952381%;
  }
  .h-grid-sm-6 .h-off-sm-10 {
    margin-left: 167.26190476%;
  }
  .h-grid-sm-6 .h-off-sm-11 {
    margin-left: 183.92857143%;
  }
  .h-grid-sm-6 .h-off-sm-12 {
    margin-left: 200.5952381%;
  }
  .h-grid-sm-7 {
    /* max 1680 */
  }
  .h-grid-sm-7 .h-el-sm-0 {
    display: none !important;
  }
  .h-grid-sm-7 .h-el-sm-1 {
    width: 13.26530612%;
  }
  .h-grid-sm-7 .h-el-sm-2 {
    width: 27.55102041%;
  }
  .h-grid-sm-7 .h-el-sm-3 {
    width: 41.83673469%;
  }
  .h-grid-sm-7 .h-el-sm-4 {
    width: 56.12244898%;
  }
  .h-grid-sm-7 .h-el-sm-5 {
    width: 70.40816327%;
  }
  .h-grid-sm-7 .h-el-sm-6 {
    width: 84.69387755%;
  }
  .h-grid-sm-7 .h-el-sm-7 {
    width: 98.97959184%;
  }
  .h-grid-sm-7 .h-el-sm-8 {
    width: 113.26530612%;
  }
  .h-grid-sm-7 .h-el-sm-9 {
    width: 127.55102041%;
  }
  .h-grid-sm-7 .h-el-sm-10 {
    width: 141.83673469%;
  }
  .h-grid-sm-7 .h-el-sm-11 {
    width: 156.12244898%;
  }
  .h-grid-sm-7 .h-el-sm-12 {
    width: 170.40816327%;
  }
  .h-grid-sm-7 .h-off-sm-0 {
    margin-left: 0.51020408%;
  }
  .h-grid-sm-7 .h-off-sm-1 {
    margin-left: 14.79591837%;
  }
  .h-grid-sm-7 .h-off-sm-2 {
    margin-left: 29.08163265%;
  }
  .h-grid-sm-7 .h-off-sm-3 {
    margin-left: 43.36734694%;
  }
  .h-grid-sm-7 .h-off-sm-4 {
    margin-left: 57.65306122%;
  }
  .h-grid-sm-7 .h-off-sm-5 {
    margin-left: 71.93877551%;
  }
  .h-grid-sm-7 .h-off-sm-6 {
    margin-left: 86.2244898%;
  }
  .h-grid-sm-7 .h-off-sm-7 {
    margin-left: 100.51020408%;
  }
  .h-grid-sm-7 .h-off-sm-8 {
    margin-left: 114.79591837%;
  }
  .h-grid-sm-7 .h-off-sm-9 {
    margin-left: 129.08163265%;
  }
  .h-grid-sm-7 .h-off-sm-10 {
    margin-left: 143.36734694%;
  }
  .h-grid-sm-7 .h-off-sm-11 {
    margin-left: 157.65306122%;
  }
  .h-grid-sm-7 .h-off-sm-12 {
    margin-left: 171.93877551%;
  }
  .h-grid-sm-8 {
    /* max 1680 */
  }
  .h-grid-sm-8 .h-el-sm-0 {
    display: none !important;
  }
  .h-grid-sm-8 .h-el-sm-1 {
    width: 11.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-2 {
    width: 24.10714286%;
  }
  .h-grid-sm-8 .h-el-sm-3 {
    width: 36.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-4 {
    width: 49.10714286%;
  }
  .h-grid-sm-8 .h-el-sm-5 {
    width: 61.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-6 {
    width: 74.10714286%;
  }
  .h-grid-sm-8 .h-el-sm-7 {
    width: 86.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-8 {
    width: 99.10714286%;
  }
  .h-grid-sm-8 .h-el-sm-9 {
    width: 111.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-10 {
    width: 124.10714286%;
  }
  .h-grid-sm-8 .h-el-sm-11 {
    width: 136.60714286%;
  }
  .h-grid-sm-8 .h-el-sm-12 {
    width: 149.10714286%;
  }
  .h-grid-sm-8 .h-off-sm-0 {
    margin-left: 0.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-1 {
    margin-left: 12.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-2 {
    margin-left: 25.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-3 {
    margin-left: 37.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-4 {
    margin-left: 50.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-5 {
    margin-left: 62.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-6 {
    margin-left: 75.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-7 {
    margin-left: 87.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-8 {
    margin-left: 100.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-9 {
    margin-left: 112.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-10 {
    margin-left: 125.44642857%;
  }
  .h-grid-sm-8 .h-off-sm-11 {
    margin-left: 137.94642857%;
  }
  .h-grid-sm-8 .h-off-sm-12 {
    margin-left: 150.44642857%;
  }
  .h-grid:not([class*='h-grid-sm-']) {
    /* max 1680 */
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-0 {
    display: none !important;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-1 {
    width: 7.73809524%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-2 {
    width: 16.07142857%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-3 {
    width: 24.4047619%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-4 {
    width: 32.73809524%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-5 {
    width: 41.07142857%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-6 {
    width: 49.4047619%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-7 {
    width: 57.73809524%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-8 {
    width: 66.07142857%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-9 {
    width: 74.4047619%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-10 {
    width: 82.73809524%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-11 {
    width: 91.07142857%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-el-sm-12 {
    width: 99.4047619%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-0 {
    margin-left: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-1 {
    margin-left: 8.63095238%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-2 {
    margin-left: 16.96428571%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-3 {
    margin-left: 25.29761905%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-4 {
    margin-left: 33.63095238%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-5 {
    margin-left: 41.96428571%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-6 {
    margin-left: 50.29761905%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-7 {
    margin-left: 58.63095238%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-8 {
    margin-left: 66.96428571%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-9 {
    margin-left: 75.29761905%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-10 {
    margin-left: 83.63095238%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-11 {
    margin-left: 91.96428571%;
  }
  .h-grid:not([class*='h-grid-sm-']) .h-off-sm-12 {
    margin-left: 100.29761905%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid-sm-4 {
    width: 560px;
    max-width: 32.94117647%;
  }
  .h-grid-sm-4 [class*='h-el-lg'],
  .h-grid-sm-4 [class*='h-el-md'],
  .h-grid-sm-4 [class*='h-el-sm'] {
    margin-right: 0.89285714%;
  }
  .h-grid-sm-4 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-4 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-4 [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.89285714%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid-sm-5 {
    width: 700px;
    max-width: 41.17647059%;
  }
  .h-grid-sm-5 [class*='h-el-lg'],
  .h-grid-sm-5 [class*='h-el-md'],
  .h-grid-sm-5 [class*='h-el-sm'] {
    margin-right: 0.71428571%;
  }
  .h-grid-sm-5 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-5 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-5 [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.71428571%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid-sm-6 {
    width: 840px;
    max-width: 49.41176471%;
  }
  .h-grid-sm-6 [class*='h-el-lg'],
  .h-grid-sm-6 [class*='h-el-md'],
  .h-grid-sm-6 [class*='h-el-sm'] {
    margin-right: 0.5952381%;
  }
  .h-grid-sm-6 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-6 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-6 [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.5952381%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid-sm-7 {
    width: 980px;
    max-width: 57.64705882%;
  }
  .h-grid-sm-7 [class*='h-el-lg'],
  .h-grid-sm-7 [class*='h-el-md'],
  .h-grid-sm-7 [class*='h-el-sm'] {
    margin-right: 0.51020408%;
  }
  .h-grid-sm-7 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-7 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-7 [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.51020408%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid-sm-8 {
    width: 1120px;
    max-width: 65.88235294%;
  }
  .h-grid-sm-8 [class*='h-el-lg'],
  .h-grid-sm-8 [class*='h-el-md'],
  .h-grid-sm-8 [class*='h-el-sm'] {
    margin-right: 0.44642857%;
  }
  .h-grid-sm-8 [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-8 [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid-sm-8 [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.44642857%;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) and (min-width: 701px) {
  .h-grid:not([class*='h-grid-sm-']) {
    width: 1680px;
    max-width: 98.82352941%;
  }
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-lg'],
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-md'],
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-sm'] {
    margin-right: 0.29761905%;
  }
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-lg']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-md']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']),
  .h-grid:not([class*='h-grid-sm-']) [class*='h-el-sm']:not([class*='h-off-lg']):not([class*='h-off-md']):not([class*='h-off-sm']) {
    margin-left: 0.29761905%;
  }
}
/*  =========================================================
small scaling in tiny grid
========================================================= */
@media all and (max-width: 700px) {
  /* grid elements */
  .h-el-sm-0 {
    display: none !important;
  }
  .h-el-sm-1 {
    width: 8.33333333%;
  }
  .h-el-sm-2 {
    width: 16.66666667%;
  }
  .h-el-sm-3 {
    width: 25%;
  }
  .h-el-sm-4 {
    width: 33.33333333%;
  }
  .h-el-sm-5 {
    width: 41.66666667%;
  }
  .h-el-sm-6 {
    width: 50%;
  }
  .h-el-sm-7 {
    width: 58.33333333%;
  }
  .h-el-sm-8 {
    width: 66.66666667%;
  }
  .h-el-sm-9 {
    width: 75%;
  }
  .h-el-sm-10 {
    width: 83.33333333%;
  }
  .h-el-sm-11 {
    width: 91.66666667%;
  }
  .h-el-sm-12 {
    width: 100%;
  }
  /* offsets */
  .h-off-sm-0 {
    margin-left: 0%;
  }
  .h-off-sm-1 {
    margin-left: 8.33333333%;
  }
  .h-off-sm-2 {
    margin-left: 16.66666667%;
  }
  .h-off-sm-3 {
    margin-left: 25%;
  }
  .h-off-sm-4 {
    margin-left: 33.33333333%;
  }
  .h-off-sm-5 {
    margin-left: 41.66666667%;
  }
  .h-off-sm-6 {
    margin-left: 50%;
  }
  .h-off-sm-7 {
    margin-left: 58.33333333%;
  }
  .h-off-sm-8 {
    margin-left: 66.66666667%;
  }
  .h-off-sm-9 {
    margin-left: 75%;
  }
  .h-off-sm-10 {
    margin-left: 83.33333333%;
  }
  .h-off-sm-11 {
    margin-left: 91.66666667%;
  }
  .h-off-sm-12 {
    margin-left: 100%;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage grid
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
grid elements
grid offsets
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
grid elements
========================================================= */
@media all and (max-width: 700px) {
  .h-el-ty-0 {
    display: none !important;
  }
  .h-el-ty-1 {
    width: 8.33333333%;
  }
  .h-el-ty-2 {
    width: 16.66666667%;
  }
  .h-el-ty-3 {
    width: 25%;
  }
  .h-el-ty-4 {
    width: 33.33333333%;
  }
  .h-el-ty-5 {
    width: 41.66666667%;
  }
  .h-el-ty-6 {
    width: 50%;
  }
  .h-el-ty-7 {
    width: 58.33333333%;
  }
  .h-el-ty-8 {
    width: 66.66666667%;
  }
  .h-el-ty-9 {
    width: 75%;
  }
  .h-el-ty-10 {
    width: 83.33333333%;
  }
  .h-el-ty-11 {
    width: 91.66666667%;
  }
  .h-el-ty-12 {
    width: 100%;
  }
}
/*  =========================================================
grid offsets margin
========================================================= */
@media all and (max-width: 700px) {
  .h-off-ty-0 {
    margin-left: 0%;
  }
  .h-off-ty-1 {
    margin-left: 8.33333333%;
  }
  .h-off-ty-2 {
    margin-left: 16.66666667%;
  }
  .h-off-ty-3 {
    margin-left: 25%;
  }
  .h-off-ty-4 {
    margin-left: 33.33333333%;
  }
  .h-off-ty-5 {
    margin-left: 41.66666667%;
  }
  .h-off-ty-6 {
    margin-left: 50%;
  }
  .h-off-ty-7 {
    margin-left: 58.33333333%;
  }
  .h-off-ty-8 {
    margin-left: 66.66666667%;
  }
  .h-off-ty-9 {
    margin-left: 75%;
  }
  .h-off-ty-10 {
    margin-left: 83.33333333%;
  }
  .h-off-ty-11 {
    margin-left: 91.66666667%;
  }
  .h-off-ty-12 {
    margin-left: 100%;
  }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Jun 19, 2017, 9:19:48 AM
    Author     : Matthias Kracke <kracke@infomax-it.de>
*/
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
grid elements
========================================================= */
@media all and (max-width: 400px) {
  .h-el-uty-0 {
    display: none !important;
  }
  .h-el-uty-1 {
    width: 8.33333333%;
  }
  .h-el-uty-2 {
    width: 16.66666667%;
  }
  .h-el-uty-3 {
    width: 25%;
  }
  .h-el-uty-4 {
    width: 33.33333333%;
  }
  .h-el-uty-5 {
    width: 41.66666667%;
  }
  .h-el-uty-6 {
    width: 50%;
  }
  .h-el-uty-7 {
    width: 58.33333333%;
  }
  .h-el-uty-8 {
    width: 66.66666667%;
  }
  .h-el-uty-9 {
    width: 75%;
  }
  .h-el-uty-10 {
    width: 83.33333333%;
  }
  .h-el-uty-11 {
    width: 91.66666667%;
  }
  .h-el-uty-12 {
    width: 100%;
  }
}
/*  =========================================================
grid offsets margin
========================================================= */
@media all and (max-width: 400px) {
  .h-off-uty-0 {
    margin-left: 0%;
  }
  .h-off-uty-1 {
    margin-left: 8.33333333%;
  }
  .h-off-uty-2 {
    margin-left: 16.66666667%;
  }
  .h-off-uty-3 {
    margin-left: 25%;
  }
  .h-off-uty-4 {
    margin-left: 33.33333333%;
  }
  .h-off-uty-5 {
    margin-left: 41.66666667%;
  }
  .h-off-uty-6 {
    margin-left: 50%;
  }
  .h-off-uty-7 {
    margin-left: 58.33333333%;
  }
  .h-off-uty-8 {
    margin-left: 66.66666667%;
  }
  .h-off-uty-9 {
    margin-left: 75%;
  }
  .h-off-uty-10 {
    margin-left: 83.33333333%;
  }
  .h-off-uty-11 {
    margin-left: 91.66666667%;
  }
  .h-off-uty-12 {
    margin-left: 100%;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-08
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageHeader
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  #pageHeader {
    position: fixed;
    left: 0;
    z-index: 3;
    transition: top 0.25s ease;
  }
  #pageHeader:not(.pageHeader--map) {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    background: #fff;
  }
}
@media all and (min-width: 701px) {
  #pageHeader {
    height: 70px;
  }
}
@media all and (max-width: 700px) {
  #pageHeader {
    height: 50px;
  }
}
/* hidden sticky */
@media all {
  #pageHeader:not(.pageHeader--hidden) {
    top: 0;
  }
}
@media all and (min-width: 701px) {
  .pageHeader--hidden {
    top: -70px;
  }
}
@media all and (max-width: 700px) {
  .pageHeader--hidden {
    top: -50px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageHeader
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
single function link
hide specific menü items on specific screen sizes
changed order on specific screen sizes
align everything after pageHeader__functions to the right
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageHeader__functions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
  #pageHeader:not(.pageHeader--map) > #pageHeader__functions {
    -webkit-flex: 0 1;
        -ms-flex: 0 1;
            flex: 0 1;
  }
  .skiptranslate .goog-te-banner-frame {
    top: auto;
    bottom: 0;
  }
}
/*  =========================================================
single function link
========================================================= */
@media all {
  #pageHeader__functions > a {
    position: relative;
    display: table;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    text-align: center;
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) #pageHeader__functions > a {
    background: #48483E;
  }
  html:not(.-css-microsite-gruenkohl) #pageHeader__functions > a.pageHeader__functions__cta {
    background: #bb1f2e;
  }
  html.-css-microsite-gruenkohl #pageHeader__functions > a {
    background: transparent url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
  #pageHeader__functions > a:not(:first-of-type)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
  }
}
@media all and (min-width: 701px) {
  #pageHeader__functions > a {
    width: 80px;
    padding-top: 18px;
  }
}
@media all and (max-width: 700px) {
  #pageHeader__functions > a {
    width: 45px;
  }
}
@media all {
  #pageHeader__functions > a > [class*='icon-'] {
    display: inline-block;
  }
}
@media all and (min-width: 701px) {
  #pageHeader__functions > a > [class*='icon-'] {
    font-size: 27px;
    margin-bottom: 5px;
  }
}
@media all and (max-width: 700px) {
  #pageHeader__functions > a > [class*='icon-'] {
    font-size: 27px;
    line-height: 50px;
  }
}
@media all {
  #pageHeader__functions > a > .text {
    width: 100%;
    font: 400 normal 10px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    line-height: 1em;
  }
}
@media all and (min-width: 701px) {
  #pageHeader__functions > a > .text {
    display: inline-block;
  }
}
@media all and (max-width: 700px) {
  #pageHeader__functions > a > .text {
    display: none;
  }
}
/*  =========================================================
hide specific menü items on specific screen sizes
========================================================= */
/* hide functions on desktop */
@media all and (min-width: 1001px) {
  #pageHeader__functions > #pageHeader__functions__phone {
    display: none;
  }
}
/* hide functions for wide desktops, show aroundMe on 10" tablets */
@media all and (min-width: 1400px) {
  #pageHeader__functions > #pageHeader__functions__aroundMe {
    display: none;
  }
}
/* hide functions on tablet */
@media all and (max-width: 1000px) and (min-width: 701px) {
  #pageHeader__functions > #pageHeader__functions__phone {
    display: none;
  }
}
/* hide functions on smartphone */
@media all and (max-width: 700px) {
  #pageHeader__functions > #pageHeader__functions__map {
    display: none;
  }
}
/*  =========================================================
changed order on specific screen sizes
========================================================= */
@media all and (max-width: 700px) {
  #pageHeader__functions__menu {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  #pageHeader__functions__filter {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  #pageHeader__functions__search {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  #pageHeader__functions__aroundMeMap,
  #pageHeader__functions__aroundMe {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
  #pageHeader__functions__portal {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
  #pageHeader__functions__phone {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
  }
  #pageHeader__functions__events {
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5;
  }
  #pageHeader__functions__hosts {
    -webkit-order: 6;
        -ms-flex-order: 6;
            order: 6;
  }
  #pageHeader__functions__link {
    -webkit-order: 7;
        -ms-flex-order: 7;
            order: 7;
  }
  #pageHeader__functions__map {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}
/*  =========================================================
align everything after pageHeader__functions to the right
========================================================= */
@media all {
  #pageHeader__functions + * {
    margin-left: auto;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2022 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageHeader
 * @author     Andreas Rappel <andreas.rappel@cebesoft.com>
 * @since      24.11.2022
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageHeader__languageSelector {
    position: relative;
    display: table;
    height: 100%;
    box-sizing: border-box;
    color: #48483E;
    text-decoration: none;
    text-align: center;
  }
  #pageHeader__languageSelector > span {
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
  }
  #pageHeader__languageSelector > span.text {
    font: 400 normal 16px/24px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
  }
  #pageHeader__languageSelector > span.toggle {
    font-size: 18px;
  }
  #pageHeader__languageSelector > span.toggle--opened {
    display: none;
  }
  #pageHeader__languageSelector__languages {
    position: absolute;
    right: 0;
    top: -1000px;
    padding: 15px;
    list-style-type: none;
    text-transform: none;
    background-color: #fff;
    border: solid 1px #48483E;
  }
  #pageHeader__languageSelector__languages > li > a {
    text-decoration: none;
    font: 400 normal 14px/32px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 32px;
  }
  #pageHeader__languageSelector__languages > li:not(:last-child) {
    border-bottom: solid 1px #48483E;
  }
  #pageHeader__languageSelector:hover > span.toggle--opened {
    display: table-cell;
  }
  #pageHeader__languageSelector:hover > span.toggle--closed {
    display: none;
  }
  #pageHeader__languageSelector:hover #pageHeader__languageSelector__languages {
    top: 60px;
  }
}
@media all and (min-width: 701px) {
  #pageHeader__languageSelector {
    width: 60px;
  }
}
@media all and (max-width: 700px) {
  #pageHeader__languageSelector {
    width: 45px;
  }
}
@media all and (max-width: 700px) {
  #pageHeader__languageSelector:hover #pageHeader__languageSelector__languages {
    top: 44px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageHeader
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageHeader__logo {
    display: block;
    width: auto;
  }
  #pageHeader__logo img {
    height: 100%;
    width: auto;
  }
  #pageHeader__logo img.logoSmall {
    display: none;
  }
  #pageHeader__logo img.logoBig {
    display: inline-block;
  }
  /* microsite specific */
  .pageHeader--map > #pageHeader__logo .pageHeader__logoLink {
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
  }
}
@media all and (max-width: 500px), all and (min-width: 701px) and (max-width: 1000px) {
  #pageHeader__logo img.logoSmall {
    display: inline-block;
  }
  #pageHeader__logo img.logoBig {
    display: none;
  }
}
@media all and (min-width: 701px) {
  html:not(.-css-microsite-gruenkohl) #pageHeader__logo .pageHeader__logoLink {
    text-align: right;
    height: 45px;
    padding: 13px 20px;
    display: inline-block;
  }
}
@media all and (max-width: 700px) {
  html:not(.-css-microsite-gruenkohl) #pageHeader__logo .pageHeader__logoLink {
    height: 40px;
    padding: 5px 10px;
    display: inline-block;
  }
}
@media all and (min-width: 701px) {
  html.-css-microsite-gruenkohl #pageHeader__logo .pageHeader__logoLink {
    height: 147px;
    padding: 5px;
    display: inline-block;
  }
}
@media all and (max-width: 700px) {
  html.-css-microsite-gruenkohl #pageHeader__logo .pageHeader__logoLink {
    height: 61px;
    padding: 8px 11px;
    display: inline-block;
  }
}
/* hidden sticky */
@media all {
  html.-css-microsite-gruenkohl #pageHeader__logo {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  }
  html.-css-microsite-gruenkohl #pageHeader:not(.pageHeader--hidden) #pageHeader__logo {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
@media all and (min-width: 701px) {
  html.-css-microsite-gruenkohl .pageHeader--hidden #pageHeader__logo {
    -webkit-transform: translateY(-72px);
        -ms-transform: translateY(-72px);
            transform: translateY(-72px);
  }
}
@media all and (max-width: 700px) {
  html.-css-microsite-gruenkohl .pageHeader--hidden #pageHeader__logo {
    -webkit-transform: translateY(-24px);
        -ms-transform: translateY(-24px);
            transform: translateY(-24px);
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-10
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage {
    width: 100%;
    margin: 0;
    position: relative;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
size variant simple
size variant hero
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__mediaContainer {
    overflow: hidden;
    width: 100%;
  }
}
/*  =========================================================
size variant simple
========================================================= */
@media all and (min-width: 701px) {
  .headerImage.headerImage--simple > .headerImage__mediaContainer,
  .headerImage.headerImage--verticalyCropped > .headerImage__mediaContainer {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) {
  .headerImage.headerImage--simple > .headerImage__mediaContainer,
  .headerImage.headerImage--verticalyCropped > .headerImage__mediaContainer {
    height: calc(100% - 100px);
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .headerImage.headerImage--simple > .headerImage__mediaContainer,
  .headerImage.headerImage--verticalyCropped > .headerImage__mediaContainer {
    height: calc(100% - 50px);
  }
}
@media all and (max-width: 700px) {
  .headerImage.headerImage--simple > .headerImage__mediaContainer,
  .headerImage.headerImage--verticalyCropped > .headerImage__mediaContainer {
    height: 185px;
  }
}
/*  =========================================================
size variant hero
========================================================= */
@media all and (min-width: 701px) {
  .headerImage--hero > .headerImage__mediaContainer {
    box-sizing: border-box;
    /* spare some space for the pageHeader */
  }
}
@media all and (min-width: 701px) and (min-width: 701px) {
  .headerImage--hero > .headerImage__mediaContainer {
    height: calc(100vh - 80px);
  }
}
@media all and (min-width: 701px) and (max-width: 700px) {
  .headerImage--hero > .headerImage__mediaContainer {
    height: calc(100vh - 45px);
  }
}
@media all and (min-width: 701px) and (min-width: 701px) {
  .headerImage--hero > .headerImage__mediaContainer.headerImage__mediaContainer--small {
    height: calc(70vh - 80px);
  }
}
@media all and (min-width: 701px) and (max-width: 700px) {
  .headerImage--hero > .headerImage__mediaContainer.headerImage__mediaContainer--small {
    height: calc(70vh - 45px);
  }
}
@media all and (max-width: 700px) {
  .headerImage--hero > .headerImage__mediaContainer {
    height: 75vh;
  }
}
/*  =========================================================
size variant infoscreen

for use on infoscreen microsite only - screen size is static at 1920x1080px - no header
========================================================= */
@media all and (min-width: 701px) {
  .headerImage--infoscreen > .headerImage__mediaContainer {
    box-sizing: border-box;
    height: 25vh;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
cropping
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__mediaContainer picture {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
  }
}
/*  =========================================================
cropping
========================================================= */
/* different behavior on different aspect ratios of the screen compared to the image */
@media all {
  .headerImage__mediaContainer__image:not(.headerImage--verticalyCropped) {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .headerImage__mediaContainer__image.headerImage--verticalyCropped {
    width: 100%;
    height: auto;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      20.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__mediaContainer__pano {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
  }
  .gm-iv-address-link {
    display: none;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
size variant simple
size variant hero
speech booble
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__textContainer {
    display: block;
    width: 100%;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer {
    position: relative;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer > .h-grid {
    max-width: 100%;
  }
}
/*  =========================================================
size variant simple
========================================================= */
@media all and (min-width: 701px) {
  .headerImage:not(.headerImage--hero,.headerImage--infoscreen) > .headerImage__textContainer {
    padding: 185px 0;
  }
}
/*  =========================================================
size variant hero
========================================================= */
@media all and (min-width: 701px) {
  .headerImage--hero > .headerImage__textContainer,
  .headerImage--infoscreen > .headerImage__textContainer {
    position: absolute;
    left: 0;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) {
  .headerImage--hero > .headerImage__textContainer,
  .headerImage--infoscreen > .headerImage__textContainer {
    padding-bottom: 100px;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .headerImage--hero > .headerImage__textContainer,
  .headerImage--infoscreen > .headerImage__textContainer {
    padding-bottom: 50px;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownRight {
    bottom: 70px;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownRight {
    bottom: 50px;
  }
}
@media all and (min-width: 701px) and (min-width: 701px) and (max-width: 1000px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownRight {
    bottom: 25px;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpRight {
    top: 70px;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpRight {
    top: 50px;
  }
}
@media all and (min-width: 701px) and (min-width: 701px) and (max-width: 1000px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpRight,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpRight {
    top: 25px;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownLeft {
    bottom: 70px;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownLeft {
    bottom: 50px;
  }
}
@media all and (min-width: 701px) and (min-width: 701px) and (max-width: 1000px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleDownLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleDownLeft {
    bottom: 25px;
  }
}
@media all and (min-width: 701px) and (min-width: 1401px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpLeft {
    top: 70px;
  }
}
@media all and (min-width: 701px) and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpLeft {
    top: 50px;
  }
}
@media all and (min-width: 701px) and (min-width: 701px) and (max-width: 1000px) {
  .headerImage--hero > .headerImage__textContainer--speechBoobleUpLeft,
  .headerImage--infoscreen > .headerImage__textContainer--speechBoobleUpLeft {
    top: 25px;
  }
}
/*  =========================================================
speech booble
========================================================= */
@media all {
  .headerImage__textContainer__speechBooble {
    position: relative;
    z-index: 1;
    display: inline-block;
    text-align: left;
  }
  .headerImage__textContainer__speechBooble--teaserTextBlockColorDefault,
  .headerImage__textContainer__speechBooble--teaserTextBlockColorYellow {
    color: #000;
  }
  .headerImage__textContainer__speechBooble--teaserTextBlockColorRed {
    color: #fff;
  }
  .headerImage__textContainer__speechBooble > div.heroAuthorStyling::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    display: block;
    width: 25px;
    height: 25px;
    z-index: 20;
    background: linear-gradient(45deg, #d2492a 50%, rgba(255, 255, 255, 0) 51%);
  }
  span.date {
    display: inline-block;
    padding: 15px 25px 0;
    margin: 0;
    background: #fff;
    font: 400 normal 2.5rem/1em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1em;
  }
  span.blogAuthor {
    display: inline-block;
    padding: 5px 25px 17px;
    margin: 0;
    background: #fff;
    font: 400 normal 2.5rem/1em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1em;
  }
  p.heroAuthor {
    background: #d2492a;
    min-height: 134px;
    margin: 0 0 0 91px;
    padding: 15px 25px 20px;
    position: relative;
    font: 400 normal 2rem/1.5em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.5em;
    color: #fff;
  }
  p.heroAuthor::before {
    content: '';
    position: absolute;
    top: 0;
    left: -90px;
    height: 100%;
    width: 91px;
    background: url('../images/headerImage/speechBooble.persona.60c931cd.svg') center left, -webkit-linear-gradient(top, #d2492a 0%, #d2492a 100%) top left, -webkit-linear-gradient(top, #d2492a 0%, #d2492a 100%) bottom left;
    background-size: 91px 134px, 91px calc(50% - 67px), 91px calc(50% - 67px);
    -webkit-background-size: 91px 134px, 91px calc(50% - 66px), 91px calc(50% - 66px);
    background-repeat: no-repeat;
  }
  span.heroAuthorImage {
    border: 3px solid #d2492a;
    position: absolute;
    top: 50%;
    left: -128px;
    margin-top: -62px;
    display: block;
    width: 124px;
    height: 124px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  span.authorDetailDescription {
    display: inline-block;
    font: 400 normal 2.5rem/1.5em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.5em;
    vertical-align: top;
    margin-top: 0;
    background: #fff;
    padding: 15px 25px 20px 25px;
  }
  span.heroAuthorTitle {
    display: inline-block;
    color: #fff;
    background: #d2492a;
    padding: 15px 25px 20px 25px;
    margin: 0;
    font: 300 normal 7rem/1em 'MyriadPro', Arial, sans-serif;
    font-weight: 300;
    font-size: 7rem;
    line-height: 1em;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
background with hole on lg and md
subline
price element
date element
========================================================== */
/*  =========================================================
basic config
========================================================= */
/**
 * oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Sauer <sauer@infomax-it.de>
 * @since      2020-12-03
 */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__textContainer__speechBooble > h1 {
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 7rem;
    line-height: 1em;
  }
  .headerImage__textContainer__speechBooble > h1:not(.speechBooble--withHeadline) {
    padding: 15px 25px 20px 25px;
  }
  .headerImage__textContainer__speechBooble--teaserTextBlockColorDefault.headerImage__textContainer__speechBooble > h1 {
    background: #fff;
  }
  .headerImage__textContainer__speechBooble--teaserTextBlockColorRed.headerImage__textContainer__speechBooble > h1 {
    background: #bb1f2e;
  }
  .headerImage__textContainer__speechBooble--teaserTextBlockColorYellow.headerImage__textContainer__speechBooble > h1 {
    background: #ffcc00;
  }
  .headerImage__textContainer__speechBooble > h1.heroAuthorTitle {
    display: inline-block;
    padding: 15px 25px 20px 25px;
    margin: 0;
    background: #d2492a;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    color: #fff;
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 7rem;
    line-height: 1em;
  }
  .headerImage__textContainer__speechBooble > h1.blogArticleTitle {
    padding: 15px 25px 20px 25px;
    margin: 0;
    background: #fff;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 7rem;
    display: block;
    line-height: 1em;
  }
  .headerImage__textContainer__speechBooble > span.date:first-child {
    padding: 15px 25px 0 25px;
    -webkit-clip-path: polygon(13% 0, 13% 13px, calc(13% + 14px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(13% 0, 13% 13px, calc(13% + 14px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  .headerImage__textContainer__speechBooble__price > div > strong.priceMinMax {
    font-size: 17px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage__textContainer__speechBooble > h1 {
    font-size: 7.77777778rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble > h1 {
    font-size: 7.5rem;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble > h1 {
    font-size: 5.71428571rem;
  }
}
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble > h1 {
    display: inline-block;
  }
}
@media all and (min-width: 701px) {
  .headerImage__textContainer__speechBooble > h1.speechBooble--withHeadline {
    -webkit-clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
    padding: 38px 25px 20px 25px;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble > h1.speechBooble--withHeadline {
    padding: 28px 25px 20px 25px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage__textContainer__speechBooble > h1.heroAuthorTitle {
    font-size: 7.77777778rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble > h1.heroAuthorTitle {
    font-size: 7.5rem;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble > h1.heroAuthorTitle {
    font-size: 5.71428571rem;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer {
    padding-top: 10px;
  }
}
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__price + h1 {
    position: relative;
    min-height: 132px;
    margin-left: 90px;
  }
}
/* inline button */
.headerImage__textContainer__speechBooble > h1 > .button {
  vertical-align: baseline;
  cursor: pointer;
}
/*  =========================================================
background with hole on lg and md
========================================================= */
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__price + h1 {
    -webkit-clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, -90px 100%, -90px 0);
            clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, -90px 100%, -90px 0);
  }
  .headerImage__textContainer__speechBooble__price + h1::before {
    content: '';
    position: absolute;
    top: 0;
    left: -90px;
    height: 100%;
    width: 90px;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorDefault > .headerImage__textContainer__speechBooble__price + h1::before {
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, -moz-linear-gradient(top, #fff 0%, #fff 100%) top left, -moz-linear-gradient(top, #fff 0%, #fff 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, -ms-linear-gradient(top, #fff 0%, #fff 100%) top left, -ms-linear-gradient(top, #fff 0%, #fff 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, -webkit-linear-gradient(top, #fff 0, #fff 100%) top left, -webkit-linear-gradient(top, #fff 0, #fff 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, linear-gradient(top, #fff 0%, #fff 100%) top left, linear-gradient(top, #fff 0%, #fff 100%) bottom left;
    background-size: 90px 132px, 90px 15px, 90px calc(100% - 132px - 15px);
    background-repeat: no-repeat;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorRed > .headerImage__textContainer__speechBooble__price + h1::before {
    background: url('../images/headerImage/speechBooble.headline.info.red.eeef9e87.svg') 0 15px, -moz-linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) top left, -moz-linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.red.eeef9e87.svg') 0 15px, -ms-linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) top left, -ms-linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.red.eeef9e87.svg') 0 15px, -webkit-linear-gradient(top, #bb1f2e 0, #bb1f2e 100%) top left, -webkit-linear-gradient(top, #bb1f2e 0, #bb1f2e 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.red.eeef9e87.svg') 0 15px, linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) top left, linear-gradient(top, #bb1f2e 0%, #bb1f2e 100%) bottom left;
    background-size: 90px 132px, 90px 15px, 90px calc(100% - 132px - 15px);
    background-repeat: no-repeat;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorYellow > .headerImage__textContainer__speechBooble__price + h1::before {
    background: url('../images/headerImage/speechBooble.headline.info.yellow.52d69f9a.svg') 0 15px, -moz-linear-gradient(top, #ffcc00 0%, #ffcc00 100%) top left, -moz-linear-gradient(top, #ffcc00 0%, #ffcc00 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.yellow.52d69f9a.svg') 0 15px, -ms-linear-gradient(top, #ffcc00 0%, #ffcc00 100%) top left, -ms-linear-gradient(top, #ffcc00 0%, #ffcc00 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.yellow.52d69f9a.svg') 0 15px, -webkit-linear-gradient(top, #ffcc00 0, #ffcc00 100%) top left, -webkit-linear-gradient(top, #ffcc00 0, #ffcc00 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.yellow.52d69f9a.svg') 0 15px, linear-gradient(top, #ffcc00 0%, #ffcc00 100%) top left, linear-gradient(top, #ffcc00 0%, #ffcc00 100%) bottom left;
    background-size: 90px 132px, 90px 15px, 90px calc(100% - 132px - 15px);
    background-repeat: no-repeat;
  }
}
/*  =========================================================
subline
========================================================= */
@media all {
  .headerImage__textContainer__speechBooble__subline {
    padding: 15px 25px 15px 25px;
    margin: 0;
    margin-top: -15px;
    background: #fff;
    font: 400 normal 2.5rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1em;
  }
  .headerImage__textContainer__speechBooble__subline > strong {
    font-weight: 600;
  }
}
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__subline {
    display: inline-block;
  }
}
@media all and (min-width: 701px) {
  .headerImage__textContainer__speechBooble__subline.speechBoobleResults {
    margin-top: -12px;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble__subline.speechBoobleResults {
    margin-top: -35px;
  }
}
/*  =========================================================
price element
========================================================= */
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__price {
    position: absolute;
    top: 19px;
    left: -38px;
    margin: 0;
    display: table;
    width: 124px;
    height: 124px;
    overflow: hidden;
    border-radius: 50%;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorDefault .headerImage__textContainer__speechBooble__price {
    background: #fff;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorRed .headerImage__textContainer__speechBooble__price {
    background: #bb1f2e;
  }
  .headerImage__textContainer__speechBooble.headerImage__textContainer__speechBooble--teaserTextBlockColorYellow .headerImage__textContainer__speechBooble__price {
    background: #ffcc00;
  }
  .headerImage__textContainer__speechBooble__price > div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20%;
    font: 300 normal 12px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    line-height: 1em;
    text-align: center;
  }
  .headerImage__textContainer__speechBooble__price > div > strong {
    font-weight: 600;
    font-size: 23px;
    line-height: 1em;
  }
}
@media all and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble__price {
    display: inline-block;
    padding: 26px 25px 0 25px;
    margin: 0;
    background: #fff;
    font: 400 normal 2.5rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1em;
    font-size: 3.5rem;
    -webkit-clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(13% 0, 13% 23px, calc(13% + 27px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}
/*  =========================================================
date element
========================================================= */
@media all {
  .headerImage__textContainer__speechBooble__date {
    display: inline-block;
    padding: 15px 25px 0 25px;
    margin: 0;
    background: #fff;
    font: 400 normal 2.5rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1em;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble__price strong {
    font-size: 4.5rem;
    line-height: 1.5;
  }
  .headerImage__textContainer__speechBooble__price div {
    font-size: 2.5rem;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      19.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
background with hole on lg and md
persona image
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__textContainer__speechBooble__persona {
    position: relative;
    font: 400 normal 2rem/1.5em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    line-height: 1.5em;
    color: #fff;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .headerImage__textContainer__speechBooble__persona {
    font-size: 2.22222222rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble__persona {
    font-size: 2.25rem;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble__persona {
    font-size: 2.57142857rem;
  }
}
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__persona {
    min-height: 134px;
    margin: 0 0 0 91px;
  }
}
@media all and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble__persona {
    margin: 0;
  }
}
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__persona {
    padding: 15px 25px 20px 25px;
  }
}
@media all and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble__persona {
    padding: 15px 5px 20px 5px;
  }
}
/* microsite specific */
@media all {
  html:not(.-css-microsite-gruenkohl) .headerImage__textContainer__speechBooble__persona {
    background: #d2492a;
  }
  html.-css-microsite-gruenkohl .headerImage__textContainer__speechBooble__persona {
    background: transparent url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
}
/* inline button */
@media all {
  .headerImage__textContainer__speechBooble__persona__text > .button {
    margin-top: 15px;
    cursor: pointer;
  }
}
@media all and (max-width: 700px) {
  .headerImage__textContainer__speechBooble__persona__text > .button {
    margin: 0 0 25px 30px;
  }
}
/*  =========================================================
background with hole on lg and md
========================================================= */
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__persona::before {
    content: '';
    position: absolute;
    top: 0;
    left: -90px;
    height: 100%;
    width: 91px;
  }
}
/* microsite specific */
@media all {
  html:not(.-css-microsite-gruenkohl) .headerImage__textContainer__speechBooble__persona::before {
    background: url('../images/headerImage/speechBooble.persona.60c931cd.svg') center left, -moz-linear-gradient(top, #d2492a 0%, #d2492a 100%) top left, -moz-linear-gradient(top, #d2492a 0%, #d2492a 100%) bottom left;
    background: url('../images/headerImage/speechBooble.persona.60c931cd.svg') center left, -webkit-linear-gradient(top, #d2492a 0%, #d2492a 100%) top left, -webkit-linear-gradient(top, #d2492a 0%, #d2492a 100%) bottom left;
    background: url('../images/headerImage/speechBooble.persona.60c931cd.svg') center left, -ms-linear-gradient(top, #d2492a 0%, #d2492a 100%) top left, -ms-linear-gradient(top, #d2492a 0%, #d2492a 100%) bottom left;
    background: url('../images/headerImage/speechBooble.persona.60c931cd.svg') center left, linear-gradient(top, #d2492a 0%, #d2492a 100%) top left, linear-gradient(top, #d2492a 0%, #d2492a 100%) bottom left;
    background-size: 91px 134px, 91px calc(50% - 67px), 91px calc(50% - 67px);
    -webkit-background-size: 91px 134px, 91px calc(50% - 66px), 91px calc(50% - 66px);
    background-repeat: no-repeat;
  }
  html.-css-microsite-gruenkohl .headerImage__textContainer__speechBooble__persona::before {
    background: transparent url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
}
/*  =========================================================
persona image
========================================================= */
@media all and (min-width: 1001px) {
  .headerImage__textContainer__speechBooble__persona__image {
    position: absolute;
    top: 50%;
    left: -128px;
    margin-top: -62px;
    display: block;
    width: 124px;
    height: 124px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    border-radius: 50%;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .headerImage__textContainer__speechBooble__persona__image {
    border: 3px #d2492a solid;
  }
  html.-css-microsite-gruenkohl .headerImage__textContainer__speechBooble__persona__image {
    border: 3px #603c2f solid;
  }
}
@media all and (max-width: 1000px) {
  .headerImage__textContainer__speechBooble__persona__image {
    display: inline-block;
    vertical-align: top;
    width: 103px;
    height: 103px;
    overflow: hidden;
    margin-right: 15px;
    box-sizing: border-box;
    border: 3px #fff solid;
    background: #fff;
    border-radius: 50%;
  }
  /* helper class for text */
  .headerImage__textContainer__speechBooble__persona__text {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 103px - 15px);
  }
}
@media all {
  .headerImage__textContainer__speechBooble__persona__image > img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage headerImage
 * @author     gueldner
 * @since      20.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
cropping
stop button
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .headerImage__videoContainer {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.5s ease, top 0.1s linear;
  }
  .headerImage__videoContainer > iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 100%;
    height: 125%;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    transition: visibility 0.5s, opacity 0.5s linear;
  }
  .headerImage__videoContainer:not(.headerImage__videoContainer--playing) {
    top: 0;
    opacity: 0;
    transition-delay: 0s, 0.5s;
    z-index: 1;
  }
  .headerImage__mediaContainer__image {
    z-index: 3;
    pointer-events: none;
  }
  .headerImage__textContainer {
    z-index: 2;
    pointer-events: none;
  }
  .headerImage__textContainer a {
    pointer-events: all;
  }
  .mainWrapper--brand::after {
    z-index: 4;
    pointer-events: none;
  }
  .headerImage__videoContainer.headerImage__videoContainer--playing {
    top: 0;
    opacity: 1;
    transition-delay: 0.1s, 0s;
  }
  .headerImage .cmplazypreviewiframe {
    background: 0 #fff !important;
    position: absolute;
    height: 200px;
    width: 100% !important;
    top: 25%;
    z-index: 10;
    overflow: hidden;
  }
  .headerImage .cmplazypreviewiframe .cmplazypreviewmsg {
    background: none;
  }
}
@media all and (max-width: 700px) {
  .headerImage__videoContainer {
    height: 95vh;
  }
}
@media all and (min-width: 701px) {
  .headerImage__videoContainer {
    height: 100vh;
    box-sizing: border-box;
    /* spare some space for the pageHeader */
  }
}
@media all and (min-width: 701px) and (min-width: 701px) {
  .headerImage__videoContainer {
    height: calc(100vh - 80px);
  }
}
@media all and (min-width: 701px) and (max-width: 700px) {
  .headerImage__videoContainer {
    height: calc(100vh - 45px);
  }
}
@media all and (max-width: 700px) {
  .headerImage__videoContainer {
    height: 95vh;
  }
}
/*  =========================================================
cropping
========================================================= */
/* different behavior on different aspect ratios of the screen compared to the image */
@media all {
  .headerImage__videoContainer__video:not(.headerImage--verticalyCropped) > img {
    width: auto;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .headerImage__videoContainer__video.headerImage--verticalyCropped > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/*  =========================================================
stop button
========================================================= */
@media all {
  .headerImage__videoContainer__button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }
  .headerImage__videoContainer__button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    display: block;
    width: 50px;
    height: 50px;
    border: 3px rgba(255, 255, 255, 0.75) solid;
    box-sizing: border-box;
    border-radius: 5px;
  }
  .headerImage__videoContainer__button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
  }
  .-js-headerImage__videoContainer--gui > .headerImage__videoContainer__button {
    opacity: 1;
  }
  .headerImage__videoContainer:not(.-js-headerImage__videoContainer--gui) > .headerImage__videoContainer__button {
    opacity: 0;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-10
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage breadcrumb
 * @author     gueldner
 * @since      24.10.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
list
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
@media all {
  #breadcrumb {
    position: absolute;
    z-index: 1;
    display: inline-block;
    box-sizing: border-box;
    padding: 15px;
    border-top: 1px #fff solid;
    color: #fff;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) #breadcrumb {
    background: #48483E;
  }
  html.-css-microsite-gruenkohl #breadcrumb {
    background: #fff url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
}
@media all and (max-width: 700px) {
  #breadcrumb {
    display: none;
  }
}
@media all {
  #breadcrumb > span {
    font: 300 normal 16px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 1em;
  }
}
/*  =========================================================
list
========================================================= */
@media all {
  #breadcrumb > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #breadcrumb > ul > li {
    display: inline-block;
    font: 300 normal 16px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 1em;
  }
  #breadcrumb > ul > li:first-child {
    margin-right: 5px;
  }
  #breadcrumb > ul > li:not(:last-child):not(:first-child)::after {
    content: '>';
    display: inline-block;
    margin: 0 5px;
  }
}
@media all {
  .breadcrumb__link {
    font-weight: 400;
    text-decoration: underline;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Steven Schöning <schoening@infomax-it.de>
 * @since      2016-11-14
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage contentArticle
 * @author     gueldner
 * @since      13.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
headlines
text
lists
tables
module "imageDownload"
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
@media all and (min-width: 1401px) {
  #mainWrapper > section:first-child > .contentArticle:first-child,
  #mainWrapper > #breadcrumb:first-child + section:first-of-type > .contentArticle:first-child {
    padding-top: 70px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  #mainWrapper > section:first-child > .contentArticle:first-child,
  #mainWrapper > #breadcrumb:first-child + section:first-of-type > .contentArticle:first-child {
    padding-top: 50px;
  }
}
@media all and (max-width: 1000px) {
  #mainWrapper > section:first-child > .contentArticle:first-child,
  #mainWrapper > #breadcrumb:first-child + section:first-of-type > .contentArticle:first-child {
    padding-top: 25px;
  }
}
@media all {
  .contentArticle--intro {
    text-align: center;
  }
}
@media all and (min-width: 701px) {
  .contentArticle__columns {
    -webkit-column-count: 2;
            column-count: 2;
    -moz-column-count: 2;
    -webkit-column-gap: 40px;
            column-gap: 40px;
    -moz-column-gap: 40px;
  }
}
/*  =========================================================
headlines
========================================================= */
@media all {
  .contentArticle h2 {
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 7rem;
    line-height: 1em;
    color: #000;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    margin: 0 0 1em 0;
  }
  .contentArticle h4 {
    font: 300 normal 3rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 3rem;
    line-height: 1em;
    color: #000;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    margin: 0 0 1em 0;
  }
}
@media all {
  .contentArticle h3 {
    font: 400 normal 20px/1.5em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1.5em;
    color: #494949;
    margin: 0 0 15px 0;
  }
  .contentArticle h3 + hr {
    margin: -10px 0 15px 0;
    width: 75%;
  }
}
/*  =========================================================
text
========================================================= */
@media all {
  .contentArticle .subtitle {
    font: 400 normal 3rem/1.66666667em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 1.66666667em;
    color: #000;
    margin: 0;
  }
  .contentArticle h2 + .subtitle {
    margin-top: -6rem;
  }
}
@media all {
  /**  IE8-11 Styling bug fix: without it the before icon will also have underline as text-decoration  **/
  .contactBox__content__text .phoneLink::before,
  .contentArticle p > a.phoneLink::before {
    text-decoration: underline !important;
    display: inline-block !important;
  }
  .contactBox__content__text .phoneLink::before,
  .contentArticle p > a.phoneLink::before {
    text-decoration: none !important;
  }
  .footnote,
  .contentArticle p:not(.subtitle) {
    font: 400 normal 18px/30px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    color: #494949;
    margin: 0 0 30px 0;
  }
  .footnote > a,
  .contentArticle p:not(.subtitle) > a {
    text-decoration: underline;
  }
  .footnote {
    font-size: 10px;
  }
  .contentArticle.longDescription h1 {
    font: 400 normal 2.2rem/1.36363636em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 1.36363636em;
    font-size: 18px;
  }
  .contentArticle.longDescription p:not(.subtitle) {
    font: 400 normal 2.2rem/1.36363636em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 1.36363636em;
    font-size: 18px;
  }
  .imageDetails {
    position: relative;
  }
  .imageDownloadTerms {
    font: 400 normal 2.2rem/1.36363636em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 1.36363636em;
    font-size: 18px;
  }
  input#imageDownloadTerms[type=checkbox]:checked ~ #imageDownloadButton {
    display: inline-block;
    position: relative;
    top: 15px;
  }
  #imageDownloadButton {
    display: none;
  }
  #imageDownloadButton.imageLicenseFree {
    display: inline-block;
    margin-top: 15px;
  }
}
@media all and (min-width: 1001px) {
  .imageDetails {
    top: -23px;
  }
}
@media all and (max-width: 1000px) and (min-width: 701px) {
  .imageDetails {
    top: -35px;
  }
}
@media all and (max-width: 700px) {
  .imageDetails {
    top: -14px;
  }
}
/* specific links */
@media all {
  .contentArticle .phoneLink {
    position: relative;
    padding-left: 33px;
  }
  .contentArticle .phoneLink::before {
    content: '\e906';
    position: absolute;
    top: 0;
    left: 0;
    font: 400 normal 25px 'icomoon';
    color: #494949;
  }
  .contentArticle .mailLink {
    position: relative;
    padding-left: 33px;
  }
  .contentArticle .mailLink::before {
    content: '\e907';
    position: absolute;
    top: 0;
    left: 0;
    font: 400 normal 25px 'icomoon';
    color: #494949;
  }
}
/* buttons */
@media all {
  .contentArticle .button {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
/*  =========================================================
lists
========================================================= */
@media all {
  .contentArticle ul {
    margin: 0 0 20px 0;
    padding: 0;
    font: #494949;
  }
  .contentArticle ul > li {
    font: 400 normal 18px/1.5em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.5em;
    color: #494949;
    display: block;
    padding: 0 0 0 20px;
    margin: 0;
  }
  .contentArticle ul > li.crossout {
    text-decoration: line-through;
  }
  .contentArticle ul > li::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 0 10px 0 -20px;
    border-radius: 50%;
  }
  .contentArticle ul li > p {
    display: inline;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .contentArticle ul > li::before {
    background: #d2492a;
  }
  html.-css-microsite-gruenkohl .contentArticle ul > li::before {
    background: #006b37;
  }
}
/*  =========================================================
tables
========================================================= */
@media all {
  .contentArticle__table {
    text-align: left;
    border-collapse: collapse;
    font: 400 normal 18px/22px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 22px;
    color: #000;
  }
}
@media all and (min-width: 1001px) {
  .contentArticle__table {
    display: inline-table;
  }
}
@media all and (max-width: 1000px) {
  .contentArticle__table {
    display: table;
  }
}
@media all and (max-width: 1000px) {
  .contentArticle__table:not(:last-of-type) {
    margin-bottom: 50px;
  }
}
@media all {
  .contentArticle__table > thead th {
    font-weight: 400;
    position: relative;
  }
  .contentArticle__table > thead th > strong {
    font-weight: 600;
  }
  .contentArticle__table > thead th [class*='icon-'] {
    font-size: 20px;
    vertical-align: middle;
  }
  .contentArticle__table > thead th::after {
    content: '';
    position: static;
    bottom: 10px;
    height: 1px;
    background: #000;
    display: block;
    margin: 15px 0;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .contentArticle__table > thead th > div.closed {
    color: #d2492a;
  }
  html.-css-microsite-gruenkohl .contentArticle__table > thead th > div.closed {
    color: #603c2f;
  }
  html:not(.-css-microsite-gruenkohl) .contentArticle__table > thead th > div.open {
    color: #006b37;
  }
  html.-css-microsite-gruenkohl .contentArticle__table > thead th > div.open {
    color: #006b37;
  }
}
@media all {
  .contentArticle__table > tbody td {
    padding: 5px 0;
    min-width: 100px;
  }
}
/* flow text */
@media all {
  u {
    text-decoration: underline;
  }
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
}
/* social share */
@media all {
  .contentArticle__share > p {
    font: 400 normal 20px/30px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    color: #000;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  .contentArticle__share > a {
    display: inline-block;
    font-size: 16px;
    height: 20px;
    margin: -15px 0 0 5px;
    text-decoration: none;
    vertical-align: middle;
  }
  .contentArticle__share > a > span {
    font-size: 26px;
    border: 2px solid #494949;
    color: #494949;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 2px;
  }
  .contentArticle__share > a > span:hover {
    color: #ffa100;
    border: 2px solid #ffa100;
  }
  .contentArticle__parkingInfo {
    font: 400 normal 17px/22px 'MyriadPro', Arial, sans-serif;
    padding-bottom: 25px;
  }
  .contentArticle__parkingInfo span {
    padding-right: 10px;
    padding-left: 10px;
  }
  .contentArticle__parkingInfo span.parkingFreePlaces,
  .contentArticle__parkingInfo span.parkingFull,
  .contentArticle__parkingInfo span.parkingClosed,
  .contentArticle__parkingInfo span.parkingOpen {
    padding-right: 0;
    padding-left: 0;
  }
  .contentArticle__parkingInfo span.lastUpdate {
    padding-left: 0;
  }
  .contentArticle__parkingInfo span.parkingFull,
  .contentArticle__parkingInfo span.parkingClosed {
    color: #d2492a;
  }
  .contentArticle__parkingInfo span.parkingFreePlaces,
  .contentArticle__parkingInfo span.parkingOpen {
    color: #04b431;
    padding-right: 10px;
  }
  h2.horizontalAlign.openingTimesTitle {
    margin: 0 0 30px 0;
  }
}
@media all and (min-width: 701px) {
  .contentArticle__share > a[data-network='whatsapp'] {
    display: none;
  }
}
.contentArticle__aboveText {
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 701px) {
  .contentArticle__aboveText .contentArticle__badges {
    right: 0;
    position: absolute;
    top: -20px;
  }
}
@media (max-width: 400px) {
  .contentArticle__aboveText .contentArticle__badges {
    margin-top: 20px;
  }
}
.contentArticle__aboveText .contentArticle__badges .contentArticle__badges__badge {
  height: 65px;
}
/*  =========================================================
video
========================================================= */
.contentArticle .video > iframe {
  max-width: 100%;
}
/*  =========================================================
opening times state
========================================================= */
.contentArticle .state {
  position: relative;
}
.contentArticle .state.textBlock__dateInfo {
  margin: 0;
}
.contentArticle .state strong::before {
  width: 10px;
  height: 10px;
  text-align: center;
  border-radius: 100px;
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
}
.contentArticle .state .closed,
.contentArticle .state .opened {
  margin-left: 15px;
}
.contentArticle .state .closed {
  color: #d2492a;
}
.contentArticle .state .opened {
  color: #006b37;
}
.contentArticle .state .opened::before {
  background-color: #006b37;
}
.contentArticle .state .closed::before {
  background-color: #d2492a;
}
/*  =========================================================
module "imageDownload"
========================================================= */
@media all and (min-width: 1001px) {
  .contentArticle[data-module='imageDownload'] {
    margin: -62px auto;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2017 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2017-03-04
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage jumpToTop
 * @author     bruetsch
 * @since      11.01.2016
 * @version    $Id$
 **/
/*  =========================================================
jump to top
========================================================= */
/*  =========================================================
jump to top
========================================================= */
@media all {
  #jumpToTop {
    position: fixed;
    bottom: 40px;
    right: 6%;
    padding: 14px 26px 14px 20px;
    height: 50px;
  }
  #jumpToTop > [class*="icon-"] {
    right: 7px;
    line-height: 42px;
  }
}
@media all and (max-width: 1760px) {
  #jumpToTop {
    right: 4%;
  }
}
@media all and (max-width: 1700px) {
  #jumpToTop {
    right: 20px;
  }
}
@media all and (max-width: 1400px) {
  #jumpToTop {
    right: 10px;
  }
  #jumpToTop > [class*="icon-"] {
    line-height: 45px;
    right: 11px;
  }
}
@media all and (max-width: 1024px) {
  #jumpToTop {
    right: 0;
  }
}
/*  =========================================================
ghostbuttons
========================================================= */
/* default settings */
@media all {
  .ghost-button {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    height: 62px;
    max-width: 100%;
    font: 400 22px/30px 'SourceSansPro', 'Arial', 'Helvetica', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    margin: 0 10px 10px 0;
    border: 3px solid;
    margin-left: 1px;
  }
}
@media all and (max-width: 1400px) {
  .ghost-button {
    border-width: 2px;
    height: 56px;
    padding: 0 21px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 26px;
  }
}
/* inline icon */
@media all {
  .ghost-button > [class*='icon-'] {
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 30px;
    line-height: 60px;
    color: inherit;
  }
}
@media all and (max-width: 1400px) {
  .ghost-button > [class*='icon-'] {
    font-size: 23px;
    line-height: 50px;
  }
}
/* version with icon or no icon */
@media all {
  .ghost-button:not(.ghost-button--noIcon) {
    padding: 14px 80px 14px 20px;
  }
  .ghost-button.ghost-button--noIcon {
    padding: 14px 20px 14px 20px;
  }
}
/* gray or white version */
@media all {
  .ghost-button {
    color: #fff;
    border-color: #fff;
  }
  .ghost-button.ghost-button--grey {
    color: #545454;
    border-color: #545454;
  }
  .ghost-button.ghost-button--brown {
    color: #fff;
    background: #8e947d;
    border-color: #8e947d;
  }
}
/* smaller text inlay */
@media all {
  .ghost-button > small {
    font: 400 14px 'SourceSansPro', 'Arial', 'Helvetica', sans-serif;
    margin-left: 7px;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-08
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      09.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  html.-css-microsite-gruenkohl #pageFooter {
    padding: 50px 0;
    background: linear-gradient(top, #006b37 0%, #092f19 100%) top left;
    background: -moz-linear-gradient(top, #006b37 0%, #092f19 100%) top left;
    background: -webkit-linear-gradient(top, #006b37 0%, #092f19 100%) top left;
  }
  html:not(.-css-microsite-gruenkohl) #pageFooter,
  html:not(.-css-microsite-gruenkohl) #pageFooter .sectionBackground.sectionBackground--noBubbles {
    background-color: #48483E;
  }
}
@media all and (min-width: 1001px) {
  html:not(.-css-microsite-gruenkohl) #pageFooter {
    padding-bottom: 75px;
  }
}
@media all and (max-width: 1000px) {
  html:not(.-css-microsite-gruenkohl) #pageFooter {
    padding-bottom: 25px;
  }
}
@media all {
  #pageFooter hr {
    width: 100%;
    border-color: #fff;
    opacity: 0.2;
  }
  html.-css-microsite-gruenkohl #pageFooter hr {
    opacity: 0.5;
  }
}
@media all and (min-width: 701px) {
  #pageFooter hr {
    margin: 50px 0;
  }
}
@media all and (max-width: 700px) {
  #pageFooter hr {
    margin: 25px 0;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
text elements
========================================================== */
/*  =========================================================
basic config
========================================================= */
/**
 * oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Sauer <sauer@infomax-it.de>
 * @since      2020-12-03
 */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageFooter__contact {
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 25px 30px;
    background: #fff;
    text-align: left;
    color: #000;
    -webkit-clip-path: polygon(13% 0, 13% 23px, calc(13% + 23px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(13% 0, 13% 23px, calc(13% + 23px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__contact {
    margin-bottom: 60px;
  }
}
/*  =========================================================
text elements
========================================================= */
@media all {
  #pageFooter__contact > h2 {
    font: 300 normal 6.2rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 6.2rem;
    line-height: 1em;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  #pageFooter__contact > h2 {
    font-size: 5.625rem;
  }
}
@media all and (max-width: 700px) {
  #pageFooter__contact > h2 {
    font-size: 5rem;
  }
}
@media all {
  #pageFooter__contact > p {
    font: 400 normal 18px/25px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 25px;
    margin: 5px 0 5px 0;
  }
  #pageFooter__contact > p > strong {
    font: 600 normal 20px/25px 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 25px;
  }
}
@media all {
  #pageFooter__contact > a {
    position: relative;
    margin-right: 20px;
    font: 400 normal 18px/25px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 25px;
    text-decoration: underline;
  }
  #pageFooter__contact > a [class^="icon-"] + span,
  #pageFooter__contact > a [class*=" icon-"] + span {
    padding-left: 25px;
  }
  #pageFooter__contact > a > span[class^="icon-"],
  #pageFooter__contact > a > span[class*=" icon-"] {
    position: absolute;
    top: 2.5px;
    left: 0;
    font-size: 20px;
    text-decoration: none;
  }
  #pageFooter__logos {
    float: right;
    display: inline-block;
  }
  #pageFooter__logos .pageFooter__logos__otm {
    height: 110px;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__contact > a {
    display: block;
    margin: 5px 0;
  }
}
@media all and (max-width: 1500px) {
  #pageFooter__logos {
    width: 100%;
    position: relative;
    top: 35px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
links
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all and (min-width: 1001px) {
  #pageFooter__languageSetter {
    margin-top: 110px;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__languageSetter {
    text-align: center;
  }
}
/*  =========================================================
links
========================================================= */
@media all {
  #pageFooter__languageSetter a {
    position: relative;
    font: 400 normal 18px/1.25em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.25em;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__languageSetter a {
    margin-right: 35px;
    padding-left: 40px;
    text-decoration: underline;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__languageSetter a {
    display: inline-block;
    background: #48483E;
    padding: 3px 5px 3px 45px;
    margin: 2.5px;
    text-decoration: none;
  }
}
@media all and (min-width: 1001px) {
  html:not(.-css-microsite-gruenkohl) #pageFooter__languageSetter a {
    color: #000;
  }
  html.-css-microsite-gruenkohl #pageFooter__languageSetter a {
    color: #fff;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__languageSetter > a {
    color: #fff;
  }
}
@media all {
  #pageFooter__languageSetter ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pageFooter__languageSetter ul > li {
    display: inline-block;
  }
  #pageFooter__languageSetter a img {
    position: absolute;
    font-size: 20px;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__languageSetter a img {
    top: 2.5px;
    left: 0;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__languageSetter a img {
    top: 5.5px;
    left: 5px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
links
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageFooter__metaNavi ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pageFooter__metaNavi ul > li {
    display: inline-block;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__metaNavi {
    margin-top: 0;
  }
}
@media all and (max-width: 1000px) and (min-width: 701px) {
  #pageFooter__metaNavi {
    margin-top: 45px;
  }
}
@media all and (max-width: 700px) {
  #pageFooter__metaNavi {
    margin-top: 20px;
  }
}
@media all and (min-width: 1001px) {
  html.-css-microsite-gruenkohl #pageFooter__metaNavi {
    margin-top: 110px;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__metaNavi {
    text-align: center;
  }
  html:not(.-css-microsite-gruenkohl) #pageFooter__metaNavi {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  html.-css-microsite-gruenkohl #pageFooter__metaNavi {
    margin-bottom: 35px;
  }
}
/*  =========================================================
links
========================================================= */
@media all {
  #pageFooter__metaNavi a {
    font: 400 normal 14px/1.25em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.25em;
    text-decoration: underline;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__metaNavi a {
    position: relative;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__metaNavi a {
    display: inline-block;
    padding: 3px 5px;
    margin: 2.5px;
  }
}
@media all and (min-width: 1001px) {
  html:not(.-css-microsite-gruenkohl) #pageFooter__metaNavi a {
    color: #fff;
  }
  html.-css-microsite-gruenkohl #pageFooter__metaNavi a {
    color: #fff;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__metaNavi a {
    color: #fff;
  }
  #pageFooter__languageSetter a > span {
    color: #fff;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__metaNavi li:not(:last-child) {
    margin-right: 10px;
  }
  #pageFooter__metaNavi li:not(:last-child)::after {
    font: 400 normal 20px/30px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    content: '-';
    margin-left: 10px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
text elements
formular
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageFooter__newsletter {
    text-align: center;
  }
}
@media all and (min-width: 1001px) {
  html:not(.-css-microsite-gruenkohl) #pageFooter__newsletter {
    padding-top: 43px;
  }
}
/*  =========================================================
text elements
========================================================= */
@media all {
  #pageFooter__newsletter > h2 {
    font: 300 normal 6rem/0.85714286em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 6rem;
    line-height: 0.85714286em;
    color: #fff;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  #pageFooter__newsletter > h2 {
    font-size: 5.625rem;
  }
}
@media all and (max-width: 700px) {
  #pageFooter__newsletter > h2 {
    font-size: 5rem;
  }
}
@media all {
  #pageFooter__newsletter > p {
    font: 400 normal 2.5rem/1.33333333em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1.33333333em;
    color: #fff;
    margin: 0 0 70px 0;
  }
}
@media all and (max-width: 700px) {
  #pageFooter__newsletter > p {
    font-size: 2.85714286rem;
  }
}
/*  =========================================================
formular
========================================================= */
@media all {
  #pageFooter__newsletter > form > input {
    display: inline-block;
    vertical-align: top;
    height: 40px;
    box-sizing: border-box;
    padding: 0 15px;
    border: none;
    background: #fff;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #494949;
  }
  html.-css-microsite-gruenkohl #pageFooter__newsletter > form > .button {
    background: #48483E;
  }
}
@media all and (min-width: 701px) {
  #pageFooter__newsletter > form > input {
    width: 305px;
    margin-right: 10px;
  }
}
@media all and (max-width: 700px) {
  #pageFooter__newsletter > form > input {
    width: 100%;
    margin-bottom: 10px;
  }
}
/**
 * oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      23.09.20
 */
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
#pageFooter__payment {
  padding-top: 10px;
}
#pageFooter__payment h4 {
  font: 400 normal 18px/25px 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 25px;
  color: #494949;
  padding: 0;
  margin: 0;
}
#pageFooter__payment img {
  width: 50px;
}
#pageFooter__payment .pageFooter__payment__content {
  text-align: center;
  white-space: nowrap;
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage pageFooter
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
links
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  #pageFooter__socialLinks {
    vertical-align: middle;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__socialLinks {
    text-align: right;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__socialLinks {
    text-align: center;
  }
}
@media all and (min-width: 1001px) {
  html[data-microsite='otm'] #pageFooter__socialLinks,
  html[data-microsite='gruenkohl'] #pageFooter__socialLinks {
    text-align: left;
  }
}
@media all and (max-width: 1000px) {
  html[data-microsite='otm'] #pageFooter__socialLinks,
  html[data-microsite='gruenkohl'] #pageFooter__socialLinks {
    text-align: center;
  }
}
/*  =========================================================
links
========================================================= */
@media all {
  #pageFooter__socialLinks > a {
    display: inline-block;
    vertical-align: top;
    width: 45px;
    height: 45px;
    text-decoration: none;
    text-align: center;
  }
  #pageFooter__socialLinks > a > span {
    font-size: 45px;
    line-height: 45px;
  }
  html:not(.-css-microsite-gruenkohl) #pageFooter__socialLinks > a {
    color: #ffcc00;
  }
  html.-css-microsite-gruenkohl #pageFooter__socialLinks > a {
    color: #ffcc00;
  }
}
@media all and (min-width: 1001px) {
  #pageFooter__socialLinks > a {
    margin: 0 0 15px 35px;
  }
}
@media all and (max-width: 1000px) {
  #pageFooter__socialLinks > a {
    margin: 0 18px 22px 18px;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-08
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
different width settings
general scroll area
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    height: 100%;
    overflow: hidden;
    background: #fff;
    transition: margin 0.5s ease, width 0.5s ease;
  }
  /* visible flag  */
  .offCanvas--visible {
    margin-left: 0;
    z-index: 21;
  }
  #offCanvas--filter {
    z-index: 3;
  }
}
/*  =========================================================
different width settings
========================================================= */
@media all and (min-width: 1401px) {
  .offCanvas {
    width: 41.42857143%;
    /* only show shadow on part screen offCanvas */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5) inset;
  }
  .offCanvas:not(.offCanvas--visible) {
    margin-left: -41.42857143%;
  }
}
@media all and (max-width: 1400px) {
  .offCanvas {
    width: 100%;
  }
  .offCanvas:not(.offCanvas--visible) {
    margin-left: -100%;
  }
}
/*  =========================================================
general scroll area
========================================================= */
@media all {
  .offCanvas__scrollArea {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    /* remember to add some paddings on specific class, to spare space for functions and tabs if needed */
  }
  #offCanvas--eventsearch .offCanvas__scrollArea {
    padding-bottom: 30px;
  }
  #offCanvas--filter .offCanvas__scrollArea {
    padding-bottom: 80px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__article__headerImage__image {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
  }
}
/*  =========================================================
cropping
========================================================= */
/* different behavior on different aspect ratios of the screen compared to the image */
@media all {
  .offCanvas__article__headerImage__image:not(.headerImage--verticalyCropped) > img {
    width: auto;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .offCanvas__article__headerImage__image.headerImage--verticalyCropped > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
different height settings
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__article__headerImage {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 50px 0;
  }
}
/*  =========================================================
different height settings
========================================================= */
@media all and (min-width: 1401px) {
  .offCanvas__article__headerImage {
    height: 0;
    padding-bottom: 104.16666667%;
  }
}
@media all and (max-width: 1400px) and (orientation: portrait) {
  .offCanvas__article__headerImage {
    height: 0;
    padding-bottom: 104.16666667%;
  }
}
@media all and (max-width: 1400px) and (orientation: landscape) {
  .offCanvas__article__headerImage {
    height: 0;
    padding-bottom: 43.1547619%;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__article__headerImage__pano {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
text
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  /* make sure, that the scrollbar overlaps the google pano */
  .offCanvas__article > .ps-scrollbar-y-rail {
    z-index: 1;
  }
}
/*  =========================================================
text
========================================================= */
@media all and (min-width: 1401px) {
  .offCanvas__article__text {
    padding-left: 10.63218391%;
    padding-right: 10.63218391%;
  }
}
@media all and (max-width: 1400px) {
  .offCanvas__article__text {
    padding-left: 4.4047619%;
    padding-right: 4.4047619%;
  }
}
@media all {
  .offCanvas__article__text > h2 {
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 7rem;
    line-height: 1em;
    color: #000;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
}
@media all {
  .offCanvas__article__text > h3 {
    font: 300 normal 5rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 5rem;
    line-height: 1em;
    color: #000;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
}
@media all {
  .offCanvas__article__text > .subtitle {
    color: #000;
    margin: 0 0 2rem 0;
  }
  .offCanvas__article__text > h2 + .subtitle {
    font: 400 normal 3rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 1em;
  }
  .offCanvas__article__text > h3 + .subtitle {
    font: 400 normal 2.5rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1em;
  }
}
@media all {
  .offCanvas__article__text > p:not(.subtitle) {
    font: 400 normal 2rem/1.5em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    line-height: 1.5em;
    color: #000;
    margin: 0 0 2rem 0;
  }
  .offCanvas__article__text li {
    font: 400 normal 2.2rem/1.36363636em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 1.36363636em;
    color: #494949;
    padding: 0 0 0 20px;
    margin: 0 30px 0 0;
  }
  .offCanvas__article__text li::before {
    content: '';
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 0 10px 0 -20px;
    border-radius: 50%;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      22.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
button
link
text container
speech booble
headline
subtitle
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer,
  .offCanvas__article__teaser {
    display: table;
    position: relative;
  }
}
@media all and (max-width: 1000px) {
  .offCanvas__article__teaser__speechBooble__price {
    display: inline-block;
    padding: 15px 25px 0 25px;
    margin: 0;
    background: #fff;
    font: 400 normal 2.5rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
    line-height: 1em;
  }
}
@media all and (min-width: 1001px) {
  .offCanvas__article__teaser__text__speechBooble > .offCanvas__article__teaser__speechBooble__price + h2 {
    position: relative;
    min-height: 132px;
    margin-left: 90px;
    padding: 15px 15px 3px 15px;
  }
}
@media all and (min-width: 1401px) {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer,
  .offCanvas__article__teaser {
    width: 100%;
    height: 0;
    padding-bottom: 71.16788321%;
    margin-bottom: 1.82481752%;
  }
}
@media all and (max-width: 1400px) and (min-width: 701px) {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer {
    width: 100%;
  }
  .offCanvas__article__teaser {
    width: 49.67362924%;
    height: 0;
    padding-bottom: 34.82142857%;
    margin-bottom: 0.5952381%;
  }
  .offCanvas__article__teaser:nth-child(odd) {
    margin-right: 0.32637076%;
  }
  .offCanvas__article__teaser:nth-child(even) {
    margin-left: 0.32637076%;
  }
}
@media all and (max-width: 700px) {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer,
  .offCanvas__article__teaser {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media all and (max-width: 700px) and (orientation: landscape) {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer,
  .offCanvas__article__teaser {
    height: 0;
    padding-bottom: 44.67084639%;
  }
}
@media all and (max-width: 700px) and (orientation: portrait) {
  .autocomplete .item.type-article,
  .autocomplete .item.type-offer,
  .offCanvas__article__teaser {
    height: 0;
    padding-bottom: 105.83333333%;
  }
}
/*  =========================================================
button
========================================================= */
@media all {
  .offCanvas__article__teaser > .button {
    position: absolute;
  }
}
@media all and (min-width: 1401px) {
  .offCanvas__article__teaser > .button {
    bottom: 30px;
    right: 30px;
  }
}
@media all and (max-width: 1400px) {
  .offCanvas__article__teaser > .button {
    bottom: 20px;
    right: 20px;
  }
}
@media all and (max-width: 1000px) {
  .offCanvas__article__teaser > .button {
    display: none;
  }
}
/*  =========================================================
link
========================================================= */
@media all {
  .offCanvas__article__teaser > a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -100%;
  }
}
/*  =========================================================
image
========================================================= */
@media all {
  .offCanvas__article__teaser__image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .offCanvas__article__teaser__image > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/*  =========================================================
text container
========================================================= */
@media all {
  .offCanvas__article__teaser__text {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    text-align: left;
  }
}
@media all and (min-width: 1001px) {
  .offCanvas__article__teaser__text {
    bottom: 50px;
  }
}
@media all and (max-width: 1000px) {
  .offCanvas__article__teaser__text {
    bottom: 25px;
  }
}
@media all and (min-width: 1401px) {
  .offCanvas__article__teaser__text {
    padding: 30px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .offCanvas__article__teaser__text {
    padding: 20px;
  }
}
@media all and (max-width: 1000px) {
  .offCanvas__article__teaser__text {
    padding: 15px;
  }
}
/*  =========================================================
speech booble
========================================================= */
@media all {
  .offCanvas__article__teaser__text__speechBooble {
    position: relative;
    display: inline-block;
    color: #000;
  }
}
/* add this little funnny thing to make the box look like a speeachBooble */
@media all {
  .offCanvas__article__teaser__text__speechBooble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #fff 50%, rgba(255, 255, 255, 0) 51%);
  }
}
/*  =========================================================
headline
========================================================= */
@media all {
  .offCanvas__article__teaser__text__speechBooble > h2 {
    padding: 10px 15px 8px 15px;
    margin: 0;
    background: #fff;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    font: 300 normal 5rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 5rem;
    line-height: 1em;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .offCanvas__article__teaser__text__speechBooble > h2 {
    font-size: 4.44444444rem;
  }
}
/*  =========================================================
subtitle
========================================================= */
@media all {
  .offCanvas__article__teaser__text__speechBooble > .subtitle {
    padding: 5px 15px 3px 15px;
    margin: 0;
    background: #fff;
    font: 400 normal 2rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    line-height: 1em;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .offCanvas__article__teaser__text__speechBooble > .subtitle {
    font-size: 1.77777778rem;
  }
}
/*  =========================================================
background with hole on lg and md
========================================================= */
@media all and (min-width: 1001px) {
  .offCanvas__article__teaser__speechBooble__price + h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -90px;
    height: 100%;
    width: 90px;
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, -ms-linear-gradient(top, #fff 0, #fff 100%) top left, -ms-linear-gradient(top, #fff 0, #fff 100%) bottom left;
    background: url('../images/headerImage/speechBooble.headline.info.98c6f86c.svg') 0 15px, linear-gradient(top, #fff 0, #fff 100%) top left, linear-gradient(top, #fff 0, #fff 100%) bottom left;
    background-size: 90px 132px, 90px 15px, 90px calc(100% - 132px - 15px);
    background-repeat: no-repeat;
  }
}
/*  =========================================================
price element
========================================================= */
@media all and (min-width: 1001px) {
  .offCanvas__article__teaser__speechBooble__price {
    position: absolute;
    top: 19px;
    left: -38px;
    margin: 0;
    display: table;
    width: 124px;
    height: 124px;
    overflow: hidden;
    background: #fff;
    border-radius: 50%;
  }
  .offCanvas__article__teaser__speechBooble__price > div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20%;
    font: 300 normal 12px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    line-height: 1em;
    text-align: center;
  }
  .offCanvas__article__teaser__speechBooble__price > div > strong {
    font-weight: 600;
    font-size: 35px;
    line-height: 1em;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      27.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
buttons
fieldsets
input groups
checklist
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__filter {
    position: relative;
    height: calc(100% - 96px);
    margin-top: 96px;
  }
  .offCanvas__tabs + .offCanvas__filter {
    height: calc(100% - 166px);
    margin-top: 166px;
  }
}
/*  =========================================================
buttons
========================================================= */
@media all {
  .offCanvas__filter_buttons {
    position: absolute;
    bottom: 20px;
    right: 26px;
    z-index: 1;
  }
  .offCanvas__filter_buttons__submit {
    display: inline-block;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }
  .offCanvas__filter_buttons__submit > span {
    font-size: 20px;
    line-height: 62px;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .offCanvas__filter_buttons__submit {
    background: #bb1f2e;
  }
  html.-css-microsite-gruenkohl .offCanvas__filter_buttons__submit {
    background: #fff url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
}
@media all {
  .offCanvas__filter div:not(.offCanvas__search__fieldset__fulltextSearch) button[type="submit"] {
    float: right;
    margin-bottom: 50px;
  }
}
/*  =========================================================
fieldsets
========================================================= */
@media all {
  .offCanvas__filter__fieldset {
    margin: 0;
    padding: 0;
    border: none;
    display: block;
    height: 100%;
  }
  .offCanvas__filter__fieldset > legend {
    display: none;
  }
  main#fullMap ~ #offCanvas--filter .offCanvas__filter__fieldset {
    height: 60vh;
  }
}
@media all {
  .offCanvas__tabs + .offCanvas__filter > .offCanvas__filter__fieldset.active {
    display: block;
  }
  .offCanvas__tabs + .offCanvas__filter > .offCanvas__filter__fieldset:not(.active) {
    display: none;
  }
}
/*  =========================================================
input groups
========================================================= */
@media all {
  .offCanvas__filter__inputGroup {
    position: relative;
  }
  .offCanvas__filter__inputGroup:not(:last-child) {
    border-bottom: 1px #d6d3d2 solid;
  }
}
@media all {
  .offCanvas__filter__inputGroup > input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
@media all {
  .offCanvas__filter__inputGroup > label {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px 20px 72px;
    font: 300 normal 25px/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
    line-height: 1em;
    color: #000;
    cursor: pointer;
  }
  .offCanvas__filter__inputGroup > label::before {
    margin: 0 12px 0 -20px;
    display: inline-block;
    vertical-align: baseline;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 3px;
    font: 400 normal 14px/20px 'icomoon';
    color: #fff;
    text-align: center;
  }
}
@media all {
  .offCanvas__filter__inputGroup > input[type=checkbox]:not(:checked) + label::before {
    content: '';
    border: 1px #d6d3d2 solid;
  }
  .offCanvas__filter__inputGroup > input[type=checkbox]:checked + label::before {
    content: '\e911';
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .offCanvas__filter__inputGroup > input[type=checkbox]:checked + label::before {
    background: #48483E;
  }
  html.-css-microsite-gruenkohl .offCanvas__filter__inputGroup > input[type=checkbox]:checked + label::before {
    background: #006b37;
  }
}
/*  =========================================================
checklist
========================================================= */
@media all {
  .offCanvas__filter__checkbox {
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
  }
}
@media all {
  .offCanvas__filter__checkbox > input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
@media all {
  .offCanvas__filter__checkbox > label {
    display: block;
    padding: 0 10px;
    border-radius: 5px;
    font: 600 normal 18px/35px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 35px;
    color: #fff;
    cursor: pointer;
  }
  .offCanvas__filter__checkbox > input:not(:checked) + label {
    background: #48483E;
  }
  .offCanvas__filter__checkbox > input:checked + label {
    background: #ffa100;
  }
}
.offCanvas__filter__group h3 {
  font: 600 normal 18px/35px 'HalvarEngschrift', Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 18px;
  line-height: 35px;
  color: #494949;
  margin-top: 0;
  margin-bottom: 10px;
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
buttons
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__functions {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 96px;
    box-sizing: border-box;
    text-align: right;
    transition: margin 0.5s ease;
  }
}
@media all and (min-width: 701px) {
  .offCanvas__functions {
    padding: 19px 25px;
  }
}
@media all and (max-width: 700px) {
  .offCanvas__functions {
    padding: 19px 20px;
  }
}
/*  =========================================================
buttons
========================================================= */
@media all {
  .offCanvas__functions > a {
    display: inline-block;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }
  .offCanvas__functions > a > span {
    font-size: 20px;
    line-height: 58px;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .offCanvas__functions > a {
    background: #48483E;
  }
  html.-css-microsite-gruenkohl .offCanvas__functions > a {
    background: #006b37;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      27.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
tab row
tab element
slider buttons
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__tabs {
    position: absolute;
    top: 96px;
    left: 0;
    z-index: 1;
    height: 70px;
    width: 100%;
    background: #48483E;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .offCanvas__tabs {
    background: #48483E;
  }
  html.-css-microsite-gruenkohl .offCanvas__tabs {
    background: #006b37;
  }
}
/*  =========================================================
tab row
========================================================= */
@media all {
  .offCanvas__tabs__row {
    height: 70px;
    overflow: hidden;
    position: relative;
  }
  .offCanvas__tabs--buttons > .offCanvas__tabs__buttonLeft ~ .offCanvas__tabs__row {
    margin-left: 40px;
  }
  .offCanvas__tabs--buttons > .offCanvas__tabs__buttonRight ~ .offCanvas__tabs__row {
    margin-right: 40px;
  }
}
@media all {
  .offCanvas__tabs__row__collection {
    white-space: nowrap;
    display: table;
    height: 70px;
  }
}
/*  =========================================================
tab element
========================================================= */
@media all {
  .offCanvas__tabs__row__collection__element {
    position: relative;
    display: inline-block;
    padding: 0 0 0 25px;
    box-sizing: border-box;
    height: 70px;
    font: 300 normal 20px/70px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 70px;
    color: #fff;
    cursor: pointer;
  }
  .offCanvas__tabs__row__collection__element:last-child {
    padding-right: 25px;
  }
  .offCanvas__tabs__row__collection__element:not(:last-child)::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 50px;
    margin: 0 0 0 25px;
    background: rgba(255, 255, 255, 0.25);
  }
}
@media all {
  .offCanvas__tabs__row__collection__element.active {
    border-bottom: 5px #fff solid;
  }
}
@media all {
  .offCanvas__tabs__row__collection__element__counter {
    position: absolute;
    top: 6px;
    right: 9px;
    padding: 2px 7px;
    border: 1px #fff solid;
    border-radius: 10px;
    font: 700 normal 13px/1.25em 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    line-height: 1.25em;
    color: #fff;
    background: #bb1f2e;
  }
}
/*  =========================================================
slider buttons
========================================================= */
@media all {
  .offCanvas__tabs__buttonLeft,
  .offCanvas__tabs__buttonRight {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-align: center;
  }
  .offCanvas__tabs__buttonLeft::after,
  .offCanvas__tabs__buttonRight::after {
    font: 400 normal 20px/70px 'icomoon';
    color: #fff;
  }
  .offCanvas__tabs:not(.offCanvas__tabs--buttons) > .offCanvas__tabs__buttonLeft,
  .offCanvas__tabs:not(.offCanvas__tabs--buttons) > .offCanvas__tabs__buttonRight {
    display: none;
  }
  .offCanvas__tabs__buttonLeft {
    left: 0;
  }
  .offCanvas__tabs__buttonLeft::after {
    content: '\e913';
  }
  .offCanvas__tabs__buttonRight {
    right: 0;
  }
  .offCanvas__tabs__buttonRight::after {
    content: '\e912';
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
navi group
sub group
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__navi {
    padding-top: 96px;
  }
}
/*  =========================================================
navi group
========================================================= */
@media all {
  .offCanvas__navi__group {
    padding-bottom: 25px;
  }
  .offCanvas__navi__group:first-child {
    padding-top: 0;
  }
  .offCanvas__navi__group:not(:first-child) {
    padding-top: 30px;
  }
  .offCanvas__navi__group:not(:first-child) {
    border-top: 1px #d6d3d2 solid;
  }
}
/* different paddings for full screen and part screen offCanvas */
@media all and (min-width: 1401px) {
  .offCanvas__navi__group {
    padding-left: 10.05747126%;
    padding-right: 10.05747126%;
  }
}
@media all and (max-width: 1400px) {
  .offCanvas__navi__group {
    padding-left: 4.16666667%;
    padding-right: 4.16666667%;
  }
}
/* main link */
@media all {
  .offCanvas__navi__group > a {
    font: 300 normal 40px/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 40px;
    line-height: 1em;
    color: #494949;
    text-decoration: none;
  }
}
/*  =========================================================
sub group
========================================================= */
@media all {
  .offCanvas__navi__group__sub {
    margin-top: 5px;
  }
}
/* sub links */
@media all {
  html.no-touchevents .offCanvas__navi__group__sub > a {
    font: 400 normal 24px/1.25em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1.25em;
    color: #494949;
    text-decoration: underline;
    display: inline-block;
    padding: 5px 0;
    margin-bottom: 10px;
  }
  html.no-touchevents .offCanvas__navi__group__sub > a:not(:last-child) {
    margin-right: 25px;
  }
}
@media all {
  html.touchevents .offCanvas__navi__group__sub > a {
    display: inline-block;
    padding: 5px 15px;
    margin-bottom: 10px;
    font: 400 normal 26px/1.25em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    line-height: 1.25em;
    text-decoration: none;
    color: #494949;
    background: #ececec;
  }
  html.touchevents .offCanvas__navi__group__sub > a:not(:last-child) {
    margin-right: 10px;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage offCanvas
 * @author     gueldner
 * @since      21.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
fieldset
fulltext search
autocomplete
inputset
button area
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
/* the main container */
@media all {
  .offCanvas__search {
    padding-top: 96px;
  }
  .offCanvas__searchHint {
    padding-top: 50px;
    margin-left: 4.4047619%;
    margin-bottom: -50px;
    font: 300 normal 22px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 22px;
    line-height: 1em;
    width: 70%;
  }
}
/*  =========================================================
fieldset
========================================================= */
@media all {
  .offCanvas__search__fieldset {
    margin: 0;
    padding-top: 0;
    border: none;
  }
  .offCanvas__search__fieldset > legend {
    display: none;
  }
}
@media all and (min-width: 1401px) {
  .offCanvas__search__fieldset {
    padding-left: 10.63218391%;
    padding-right: 10.63218391%;
  }
}
@media all and (max-width: 1400px) {
  .offCanvas__search__fieldset {
    padding-left: 4.4047619%;
    padding-right: 4.4047619%;
  }
}
@media all {
  .offCanvas__search__fieldset > h3 {
    font: 300 normal 40px/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 40px;
    line-height: 1em;
    color: #494949;
    margin: 0 0 35px 0;
  }
}
/*  =========================================================
fulltext search
========================================================= */
@media all {
  .offCanvas__search__fieldset__fulltextSearch {
    border-bottom: 1px #d6d3d2 solid;
  }
}
@media all {
  .offCanvas__search__fieldset__fulltextSearch > input[type=text] {
    border: none;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    padding-right: 55px;
    margin-right: -55px;
    font: 300 normal 35px/55px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 35px;
    line-height: 55px;
    color: #494949;
  }
}
@media all {
  .offCanvas__search__fieldset__fulltextSearch > input[type=text] + button {
    border: none;
    height: 55px;
    width: 45px;
    background: transparent;
    text-align: center;
  }
  .offCanvas__search__fieldset__fulltextSearch > input[type=text] + button > span {
    line-height: 55px;
    font-size: 30px;
    color: #494949;
  }
}
/*  =========================================================
autocomplete
========================================================= */
@media all {
  .autocomplete a.item {
    padding: 15px 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media all {
  .autocomplete a.item > div:first-child {
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
    font: 300 normal 22px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 22px;
    line-height: 1em;
    color: #000;
    text-align: left;
  }
  .autocomplete a.item > div:first-child > strong {
    font-weight: 400;
  }
}
@media all {
  .autocomplete a.item > div:last-child {
    font: 300 normal 18px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 1em;
    color: #000;
    text-align: right;
  }
}
/*  =========================================================
inputset
========================================================= */
@media all {
  .offCanvas__search__fieldset__inputSet {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px #d6d3d2 solid;
  }
}
@media all {
  .offCanvas__search__fieldset__inputSet[class*='icon-']::before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    padding-right: 5px;
    font-size: 25px;
    line-height: 40px;
    color: #494949;
  }
}
/*  =========================================================
text inputs
========================================================= */
/* input */
@media all {
  .offCanvas__search__fieldset__inputSet > input[type=text] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 3px;
    border: none;
    background: #fff;
    font: 700 normal 18px/40px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #494949;
  }
}
/* label */
@media all {
  .offCanvas__search__fieldset__inputSet > input[type=text] + label {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    padding: 0 10px;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  }
  /* microsite specific */
  html:not(.-css-microsite-gruenkohl) .offCanvas__search__fieldset__inputSet > input[type=text] + label {
    background: #d2492a;
  }
  html.-css-microsite-gruenkohl .offCanvas__search__fieldset__inputSet > input[type=text] + label {
    background: #fff url('../images/_branding/background_microsite1.a4cf9239.jpg') 0 0 repeat;
  }
  /* use 1% and 101% instead of 0% and 100% because of crappy browser rendering (blitzer) */
  .offCanvas__search__fieldset__inputSet > input[type=text]:focus + label {
    -webkit-transform: translateX(1%);
        -ms-transform: translateX(1%);
            transform: translateX(1%);
  }
  .offCanvas__search__fieldset__inputSet > input[type=text]:not(:focus) + label {
    -webkit-transform: translateX(101%);
        -ms-transform: translateX(101%);
            transform: translateX(101%);
  }
}
/* datepicker */
@media all {
  #offCanvas--eventsearch .searchForm__form__inputSet.firstDateInput > input[type="text"] {
    padding-left: 14px;
  }
}
/*  =========================================================
selectbox
========================================================= */
/* sourounding helper box */
@media all {
  .offCanvas__search__select {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
  }
}
/* selectbox itself */
@media all {
  .offCanvas__search__select > select {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: #fff;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #494949;
  }
}
/* label */
@media all {
  .offCanvas__search__select > label {
    display: block;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px;
    background: #fff;
    font-size: 12px;
    color: #494949;
    line-height: 48px;
  }
}
/*  =========================================================
button area
========================================================= */
/* half background */
@media all {
  .offCanvas__search__buttonArea {
    border-top: 1px solid #E5E5E6;
    background: #fff;
    bottom: 0;
    min-height: 60px;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 20px;
  }
  .offCanvas__search__buttonArea .button + .button {
    margin-left: 10px;
  }
}
@media all {
  .offCanvas__search__buttonArea > .h-grid > [class*='h-el'] {
    text-align: right;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-15
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage searchForm
 * @author     gueldner
 * @since      14.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
background
headline
inputgroup
inputset
text inputs
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
@media all {
  .searchForm {
    width: 100%;
    padding: 140px 0 170px 0;
  }
}
@media all {
  .searchForm__form {
    position: relative;
  }
}
/*  =========================================================
background
========================================================= */
@media all {
  .searchForm__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .searchForm__bg > div.searchForm__bg__lg,
  .searchForm__bg > div.searchForm__bg__md,
  .searchForm__bg > div.searchForm__bg__sm,
  .searchForm__bg > div.searchForm__bg__ty {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}
@media all and (min-width: 1401px) {
  .searchForm__bg__lg {
    display: block;
  }
}
@media all and (max-width: 1400px) {
  .searchForm__bg__lg {
    display: none;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .searchForm__bg__md {
    display: block;
  }
}
@media all and (min-width: 1401px), all and (max-width: 1000px) {
  .searchForm__bg__md {
    display: none;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .searchForm__bg__sm {
    display: block;
  }
}
@media all and (min-width: 1001px), all and (max-width: 700px) {
  .searchForm__bg__sm {
    display: none;
  }
}
@media all and (max-width: 700px) {
  .searchForm__bg__ty {
    display: block;
  }
}
@media all and (min-width: 701px) {
  .searchForm__bg__ty {
    display: none;
  }
}
/*  =========================================================
headline
========================================================= */
@media all {
  .searchForm__form > h2 {
    font: 300 normal 7rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 7rem;
    line-height: 1em;
    color: #fff;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
}
@media all {
  .searchForm__form > p {
    font: 400 normal 3rem/1.33333333em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 1.33333333em;
    color: #fff;
    margin: 0;
  }
}
/*  =========================================================
inputgroup
========================================================= */
@media all {
  .searchForm__form__inputGroup {
    padding-top: 60px;
  }
  .searchForm__form__inputGroup .heading {
    font: 400 normal 18px/20px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    display: block;
    padding-bottom: 5px;
  }
}
@media all and (max-width: 700px) {
  .searchForm__form__inputGroup {
    text-align: center;
  }
}
/*  =========================================================
inputset
========================================================= */
@media all {
  .searchForm__form__inputSet,
  .datepicker-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
  }
  .offCanvas__search__fieldset .datepicker-container,
  .offCanvas__search__fieldset .searchForm__form__inputSet {
    position: relative;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: top;
    margin-bottom: 10px;
  }
  .offCanvas__search__fieldset .searchForm__form__inputSet.firstDateInput {
    width: 25%;
  }
  .datepicker-container:not(.offerRequestDate) {
    overflow: visible;
  }
  .offCanvas__search__fieldset .searchForm__form__inputSet.icon-calender {
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
  }
}
@media all and (min-width: 701px) {
  .searchForm__form__inputSet,
  .datepicker-container {
    margin-right: 5px;
  }
}
@media all and (min-width: 701px) {
  .offCanvas__search__fieldset .datepicker-container,
  .offCanvas__search__fieldset .searchForm__form__inputSet {
    margin-left: -4px;
  }
}
@media all and (max-width: 700px) {
  .offCanvas__search__fieldset .datepicker-container,
  .offCanvas__search__fieldset .searchForm__form__inputSet {
    margin-left: -5px;
  }
}
@media all and (max-width: 1400px) and (min-width: 1000px) {
  .offCanvas__search__fieldset .searchForm__form__inputSet.firstDateInput {
    width: 11%;
  }
}
@media all and (max-width: 1000px) and (min-width: 701px) {
  .offCanvas__search__fieldset .searchForm__form__inputSet.firstDateInput {
    width: 15%;
  }
}
@media all and (max-width: 430px) {
  .offCanvas__search__fieldset .searchForm__form__inputSet.firstDateInput {
    width: 57%;
  }
}
@media all {
  .searchForm__form__inputSet[class*='icon-']::before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    padding-right: 5px;
    font-size: 25px;
    line-height: 40px;
    color: #494949;
  }
}
/*  =========================================================
text inputs
========================================================= */
/* input */
@media all {
  .searchForm__form__inputSet > input[type=date],
  .searchForm__form__inputSet > input[type=text] {
    height: 40px;
    box-sizing: border-box;
    padding: 0 15px;
    border: none;
    background: #fff;
    font: 700 normal 18px/40px 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #494949;
  }
}
@media all and (max-width: 700px) {
  .searchForm__form__inputSet > input[type=date],
  .searchForm__form__inputSet > input[type=text] {
    min-width: 205px;
  }
}
/* specific lengths */
@media all and (min-width: 701px) {
  .searchForm__form__inputSet > input[name='city'] {
    width: 170px;
  }
  .searchForm__form__inputSet > input[name='date'] {
    width: 255px;
  }
}
@media all and (max-width: 700px) {
  .searchForm__form__inputSet.dateMiddle {
    display: none;
  }
}
@media all and (max-width: 340px) {
  .offCanvas__search__fieldset .searchForm__form__inputSet.dateMiddle {
    display: none;
  }
  .offCanvas__search__fieldset .searchForm__form__inputSet.icon-calender {
    -webkit-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
  }
}
/* label */
@media all {
  .searchForm__form__inputSet > input[type=text] + label {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    padding: 0 10px;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    background: #d2492a;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  }
  /* use 1% and 101% instead of 0% and 100% because of crappy browser rendering (blitzer) */
  .searchForm__form__inputSet > input[type=text]:focus + label {
    -webkit-transform: translateX(1%);
        -ms-transform: translateX(1%);
            transform: translateX(1%);
  }
  .searchForm__form__inputSet > input[type=text]:not(:focus) + label {
    -webkit-transform: translateX(101%);
        -ms-transform: translateX(101%);
            transform: translateX(101%);
  }
  .dateMiddle {
    width: 15px;
    background: #fff;
    color: #373737;
    height: 34px;
    display: inline-block;
    vertical-align: top;
    font: 400 normal 22px 'Trebuchet MS', Trebuchet, Arial, sans-serif;
    margin: 0 -3px 0 -75px;
    padding: 6px 40px 0 12px;
  }
  .date-background::before {
    bottom: 100%;
    left: 50%;
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 0 100% 0;
    -ms-transform-origin: 0 100% 0;
    transform-origin: 0 100% 0;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-bottom-color: white;
    border-width: 20px;
    margin-left: -20px;
    z-index: 0;
    background: white;
    margin-top: -10px;
  }
  .pikaday-placeholder {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
  .date-background {
    position: relative;
  }
  .hidden {
    visibility: hidden;
  }
  .searchForm__form__inputSet > [type=text] + label.moveLabelinput {
    -webkit-transform: translateX(0%) !important;
    -ms-transform: translateX(0%) !important;
    transform: translateX(0%) !important;
  }
  .searchForm__form__inputSet input {
    height: 35px;
    font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 40px;
    padding-left: 15px;
  }
}
/*  =========================================================
select inputs
========================================================= */
.searchForm__form__inputSet > select {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 0 0 15px;
  border: none;
  background: #fff;
  font: 700 normal 18px/40px 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  line-height: 40px;
  color: #494949;
}
/*  =========================================================
counter inputs
========================================================= */
.searchForm__form__inputSet.searchForm__form__inputSet--count input {
  width: 60px;
}
.searchForm__form__inputSet.searchForm__form__inputSet--count button {
  background: #fff;
  line-height: 26px;
  cursor: pointer;
  padding: 8px 0 6px;
  margin: 0;
  text-align: center;
  width: 40px;
  border: none;
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-09-02
 * @version    $$Id$$
 **/
/**

Navigation:
A.

**/
/*  =========================================================
 =A.
========================================================= */
/**
 * bsu
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2019 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      02.05.19
 */
/*  =========================================================
basic config
general structure setup
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* corporate design */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/*  =========================================================
general structure setup
========================================================= */
.datepicker-container .icon-close {
  cursor: pointer;
  position: absolute;
  right: 45px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.datepicker-container input[data-toggle]:placeholder-shown + .icon-close {
  display: none;
}
.datepicker-container input[data-toggle] {
  min-width: 280px;
  width: 100%;
}
.datepicker-container[data-show-nights] input[data-toggle] {
  min-width: 350px;
}
/*  =========================================================
flatpickr
========================================================= */
.flatpickr-calendar {
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  max-width: 534px;
  /* positioning */
  /* hidden state */
}
.flatpickr-calendar.inline {
  position: relative;
  top: 2px;
}
@media (min-width: 1001px) {
  .flatpickr-calendar:not(.inline) {
    position: absolute;
    top: 45px !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    right: initial !important;
  }
}
@media (max-width: 1000px) {
  .flatpickr-calendar:not(.inline) {
    position: absolute;
    top: 45px !important;
    left: -10px !important;
    right: -10px !important;
  }
}
.flatpickr-calendar:not(.open):not(.inline) {
  display: none;
  opacity: 0;
  visibility: hidden;
}
/* inline placed state */
.flatpickr-calendar.inline {
  display: block;
  opacity: 1;
  visibility: visible;
}
/* static placed state */
.flatpickr-calendar.static {
  position: absolute;
  top: calc(102%);
}
/*  =========================================================
open state
========================================================= */
.flatpickr-calendar.open {
  opacity: 1;
  visibility: visible;
  /* static / not static */
}
.flatpickr-calendar.open:not(.static) {
  display: inline-block;
  z-index: 99999;
  padding-bottom: 15px;
}
@media (max-width: 1000px) {
  .flatpickr-calendar.open:not(.static) {
    padding-bottom: 5px;
  }
}
.flatpickr-calendar.open.static {
  display: block;
  z-index: 999;
}
/* open animation */
@media (min-width: 1001px) {
  .flatpickr-calendar.animate.open {
    -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
            animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
}
/*  =========================================================
keyframe animation
========================================================= */
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -20px, 0);
            transform: translate3d(-50%, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -20px, 0);
            transform: translate3d(-50%, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}
/**
 * Romantischer Rhein - Endkundenportal 2018
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2018 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage datepicker.default
 * @author     gueldner
 * @since      21.06.2018
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure setup
month container
year changer
switch months arrows
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure setup
========================================================= */
.flatpickr-months {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/*  =========================================================
month container
========================================================= */
/* single month container */
.flatpickr-month {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  padding: 6px 0;
  overflow: hidden;
  border-bottom: 1px #fff solid;
  color: #fff;
  background: #ffa100;
  text-align: center;
}
/* wrapper for single month (used to keep space to prev/next arrows) */
.flatpickr-current-month {
  display: inline-block;
}
/* this single month itself */
.flatpickr-current-month span.cur-month {
  display: inline-block;
  font: 400 normal 14px/30px 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
}
/*  =========================================================
year changer
========================================================= */
.flatpickr-current-month .numInputWrapper {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
.flatpickr-current-month input.cur-year {
  display: inline-block;
  height: 30px;
  width: 4ch;
  margin: 0 0 0 10px;
  padding: 0;
  font: 400 normal 14px/30px 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  cursor: text;
}
/* arrows */
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  position: absolute;
  right: 0;
  height: 50%;
  width: 14px;
  line-height: 50%;
}
.flatpickr-current-month .numInputWrapper .arrowUp::after,
.flatpickr-current-month .numInputWrapper .arrowDown::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin: 25% 0;
}
.flatpickr-current-month .numInputWrapper:not(:hover):not(:active):not(:focus) .arrowUp::after,
.flatpickr-current-month .numInputWrapper:not(:hover):not(:active):not(:focus) .arrowDown::after {
  display: none;
}
.flatpickr-current-month .numInputWrapper:hover .arrowUp::after,
.flatpickr-current-month .numInputWrapper:active .arrowUp::after,
.flatpickr-current-month .numInputWrapper:focus .arrowUp::after,
.flatpickr-current-month .numInputWrapper:hover .arrowDown::after,
.flatpickr-current-month .numInputWrapper:active .arrowDown::after,
.flatpickr-current-month .numInputWrapper:focus .arrowDown::after {
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper .arrowUp {
  top: 0;
}
.flatpickr-current-month .numInputWrapper .arrowUp::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}
.flatpickr-current-month .numInputWrapper .arrowDown {
  top: 50%;
}
.flatpickr-current-month .numInputWrapper .arrowDown::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
/*  =========================================================
switch months arrows
========================================================= */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: 3%;
  color: #fff;
  font-size: 30px;
}
.flatpickr-months .flatpickr-prev-month {
  left: 2%;
}
.flatpickr-months .flatpickr-next-month {
  right: 2%;
}
.flatpickr-months .flatpickr-prev-month.disabled,
.flatpickr-months .flatpickr-next-month.disabled {
  display: none;
}
/**
 * Romantischer Rhein - Endkundenportal 2018
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2018 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage datepicker.default
 * @author     gueldner
 * @since      21.06.2018
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure setup
weekday row
actual weeks/days
additional content
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure setup
========================================================= */
.flatpickr-innerContainer {
  overflow: hidden;
}
/*  =========================================================
weekday row (Mo, Di, Mi, Do, Fr, Sa, So)
========================================================= */
.flatpickr-weekdays {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  overflow: hidden;
}
/* wrapper for weekdays of a single month */
.flatpickr-weekdaycontainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px 0;
}
@media (min-width: 701px) {
  .flatpickr-weekdaycontainer {
    margin: 0 22px;
  }
}
/* single weekday */
.flatpickr-weekday {
  display: block;
  width: 70px;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font: 400 normal 14px/15px 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 15px;
  color: #000;
}
@media (max-width: 700px) {
  .flatpickr-weekday {
    width: calc(14.28571429% - 1px);
  }
}
/*  =========================================================
actual weeks/days
========================================================= */
.flatpickr-days {
  position: relative;
  width: 100% !important;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (min-width: 701px) {
  .flatpickr-days {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (max-width: 700px) {
  .flatpickr-days {
    display: block;
  }
}
/* wrapper for days of a single month */
.dayContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media (min-width: 701px) {
  .dayContainer {
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
    margin: 0 22px;
  }
}
/* single actual day element */
.flatpickr-day {
  display: inline-block;
  margin: 1px 1px 0 0;
  width: calc(14.28571429% - 1px);
  height: 30px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  max-width: 70px;
  font: 400 normal 14px/30px 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 30px;
  color: #494949;
  background: #fff;
}
/* active color variant */
.flatpickr-day.inRange,
.flatpickr-day.inRange.prevMonthDay,
.flatpickr-day.inRange.nextMonthDay,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  background: rgba(255, 121, 0, 0.4);
  color: #494949;
}
.dayContainer .flatpickr-day.startRange,
.dayContainer .flatpickr-day.startRange:focus,
.dayContainer .flatpickr-day.startRange:hover,
.dayContainer .flatpickr-day.startRange.inRange,
.dayContainer .flatpickr-day.startRange.prevMonthDay,
.dayContainer .flatpickr-day.startRange.nextMonthDay,
.dayContainer .flatpickr-day.endRange,
.dayContainer .flatpickr-day.endRange:focus,
.dayContainer .flatpickr-day.endRange:hover,
.dayContainer .flatpickr-day.endRange.inRange,
.dayContainer .flatpickr-day.endRange.prevMonthDay,
.dayContainer .flatpickr-day.endRange.nextMonthDay {
  background: #ff7900;
  color: #fff;
}
/* today color variant */
.flatpickr-day.today,
.flatpickr-day.today:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today.inRange,
.flatpickr-day.today.inRange.prevMonthDay,
.flatpickr-day.today.inRange.nextMonthDay {
  color: #d2492a;
  background: #fff;
}
/* softened days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  opacity: 0.25;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  cursor: not-allowed;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
@media all {
  .offCanvas__search__fieldset__inputSet > input[type="text"].qty {
    border: 0 none;
    text-align: center;
    width: 25px;
  }
  .searchForm__form__inputSet {
    width: auto !important;
  }
  .searchForm__form__inputSet > input[type="text"].qty {
    width: 60px;
  }
  .searchForm__form__inputSet button.qtyBtn {
    background: #fff;
    line-height: 26px;
    cursor: pointer;
    padding: 8px 0 6px;
    margin: 0;
    text-align: center;
    width: 40px;
    border: none;
  }
  .searchForm__form__inputSet.icon-people::before {
    padding-right: 35px;
    pointer-events: none;
  }
}
@media all and (max-width: 700px) {
  .searchForm__form__inputSet > input[type="text"].qty {
    width: 125px;
  }
}
/*! otm, Compiled at 2023-10-24 10:53:06 */
/* perfect-scrollbar v0.7.1 */
.ps {
  -ms-touch-action: auto;
  touch-action: auto;
  overflow: hidden !important;
  -ms-overflow-style: none;
}
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.ps.ps--active-x > .ps__scrollbar-x-rail,
.ps.ps--active-y > .ps__scrollbar-y-rail {
  display: block;
  background-color: transparent;
}
.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail {
  background-color: #eee;
  opacity: 0.9;
}
.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  background-color: #999;
  height: 11px;
}
.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail {
  background-color: #eee;
  opacity: 0.9;
}
.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  background-color: #999;
  width: 11px;
}
.ps > .ps__scrollbar-x-rail {
  display: none;
  position: absolute;
  /* please don't change 'position' */
  opacity: 0;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  bottom: 0px;
  /* there must be 'bottom' for ps__scrollbar-x-rail */
  height: 15px;
}
.ps > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  position: absolute;
  /* please don't change 'position' */
  background-color: #aaa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out;
  -moz-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out, -moz-border-radius 0.2s ease-in-out;
  -o-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out, -moz-border-radius 0.2s ease-in-out;
  bottom: 2px;
  /* there must be 'bottom' for ps__scrollbar-x */
  height: 6px;
}
.ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x,
.ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
  height: 11px;
}
.ps > .ps__scrollbar-y-rail {
  display: none;
  position: absolute;
  /* please don't change 'position' */
  opacity: 0;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  right: 0;
  /* there must be 'right' for ps__scrollbar-y-rail */
  width: 15px;
}
.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  position: absolute;
  /* please don't change 'position' */
  background-color: #aaa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out;
  -moz-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out, -moz-border-radius 0.2s ease-in-out;
  -o-transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out, -webkit-border-radius 0.2s ease-in-out, -moz-border-radius 0.2s ease-in-out;
  right: 2px;
  /* there must be 'right' for ps__scrollbar-y */
  width: 6px;
}
.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y,
.ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
  width: 11px;
}
.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail {
  background-color: #eee;
  opacity: 0.9;
}
.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  background-color: #999;
  height: 11px;
}
.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail {
  background-color: #eee;
  opacity: 0.9;
}
.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  background-color: #999;
  width: 11px;
}
.ps:hover > .ps__scrollbar-x-rail,
.ps:hover > .ps__scrollbar-y-rail {
  opacity: 0.6;
}
.ps:hover > .ps__scrollbar-x-rail:hover {
  background-color: #eee;
  opacity: 0.9;
}
.ps:hover > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x {
  background-color: #999;
}
.ps:hover > .ps__scrollbar-y-rail:hover {
  background-color: #eee;
  opacity: 0.9;
}
.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
  background-color: #999;
}