/*! nts, Compiled at 2022-04-01 16:26:15 */
/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage header styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/
/*  =========================================================
basic config
functions
statics
offCanvas navi
offCanvas filter and forms
offCanvas autocomplete
offCanvas mapInfoBoard
request offer form
========================================================== */
/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteHeader {
    width: 100%;
    height: 85px;
    background: #274533;
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0px;
    left: 0px;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
  }
  /*general offCanvas Styles*/
  .siteHeader__offCanvas {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    display: none;
    background: #fff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  input:checked ~ .siteHeader__offCanvas,
  *.active > .siteHeader__offCanvas {
    display: block;
  }
}
@media screen and (max-width: 1000px) {
  #siteHeader {
    height: 75px;
  }
}
@media screen and (max-width: 775px) {
  #siteHeader.mobile {
    height: 50px;
  }
}
@media screen and (max-width: 450px) {
  #siteHeader {
    position: relative;
    padding-top: 50px;
    margin-top: -100px;
  }
  #siteHeader.fixed {
    position: fixed;
    margin-top: -50px;
  }
}
/*  =========================================================
functions
========================================================= */
@media screen {
  #siteHeader__functions {
    float: left;
  }
  #siteHeader__functions > ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
  }
  #siteHeader__functions > ul > li {
    display: inline-block;
    vertical-align: top;
  }
  #siteHeader__functions > ul > li > .siteHeader__function {
    cursor: pointer;
    display: block;
    height: 65px;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
  }
  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle {
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
    margin: 0px 20px 0px -20px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span {
    display: inline-block;
    vertical-align: middle;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText {
    font: 700 italic 18px/20px 'Max', Arial, sans-serif;
    text-align: left;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]) {
    font: 400 normal 30px/40px 'Max', Arial, sans-serif;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-'] {
    font-size: 50px;
  }
  /*hover states*/
  #siteHeader__functions > ul > li > input:active + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:focus + label.siteHeader__function,
  #siteHeader__functions > ul > li > input:hover + label.siteHeader__function,
  #siteHeader__functions > ul > li > a.siteHeader__function:active,
  #siteHeader__functions > ul > li > a.siteHeader__function:focus,
  #siteHeader__functions > ul > li > a.siteHeader__function:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function {
    background: rgba(64, 131, 90, 0.9) !important;
  }
  #siteHeader__functions > ul > li > input:checked + .siteHeader__function > [class^='icon-']:before {
    content: '\e606';
  }
}
@media screen and (max-width: 1000px) {
  #siteHeader__functions > ul > li > .siteHeader__function {
    height: 55px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText {
    font-size: 16px;
    line-height: 18px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]) {
    font-size: 20px;
    line-height: 25px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-'] {
    font-size: 40px;
  }
}
@media screen and (max-width: 775px) {
  #siteHeader__functions > ul > li > .siteHeader__function {
    height: 40px;
    padding: 5px 8px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .smallText {
    display: none;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > :not([class]) {
    display: none;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > [class^='icon-'] {
    font-size: 30px;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > .icon-gps {
    padding-top: 5px;
  }
  #siteHeader__functions > ul > li:not(:first-of-type) > .siteHeader__function > .verticalAlignMiddle {
    margin: 0px 10px 0px -10px;
  }
}
/*  =========================================================
statics
========================================================= */
@media screen {
  #siteHeader__statics {
    float: right;
  }
  #siteHeader__statics > a.logo {
    height: 39px;
    margin: 10px 0px;
    padding: 13px 25px;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }
  #siteHeader__statics > a.logo > img {
    width: auto;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  #siteHeader__fulltextsearch {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    padding: 0px;
  }
  #siteHeader__fulltextsearch > form {
    height: 40px;
    padding: 23px 25px 22px 25px;
  }
  #siteHeader__fulltextsearch > form:hover {
    background: #fff;
  }
  #siteHeader__fulltextsearch > form > input {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 225px;
    height: 100%;
    padding: 0px 50px 0px 10px;
    border: none;
    font: 400 italic 20px 'Max', Arial, sans-serif;
    background: #fff;
    color: #274533;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
    vertical-align: middle;
  }
  #siteHeader__fulltextsearch > form > button {
    border: none;
    background: none;
    height: 100%;
    vertical-align: middle;
    width: 50px;
    margin-left: -50px;
  }
  #siteHeader__fulltextsearch > form > button > span {
    font-size: 35px;
    color: #274533;
  }
  /*hide button in desktop screen*/
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] {
    display: none;
    color: #fff;
  }
  /*hover states*/
  #siteHeader__statics__search:active + label,
  #siteHeader__statics__search:focus + label,
  #siteHeader__statics__search:hover + label {
    background: rgba(255, 255, 255, 0.5);
  }
  #siteHeader__statics__search:checked + label {
    background: #fff;
    color: #274533;
  }
}
@media screen and (max-width: 1000px) {
  #siteHeader__statics > a.logo {
    height: 29px;
  }
  #siteHeader__fulltextsearch > form {
    position: absolute;
    left: 0;
    top: 100%;
    width: 90%;
    padding: 20px 5%;
    background: #fff;
    display: none;
  }
  #siteHeader__statics__search:checked ~ form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  #siteHeader__fulltextsearch > form > input {
    width: 100%;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] {
    display: block;
    height: 55px;
    padding: 10px 20px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-'] {
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
  }
}
@media screen and (max-width: 775px) {
  #siteHeader__statics > a.logo {
    margin: 5px 0px;
    height: 24px;
    padding: 8px 15px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] {
    height: 40px;
    padding: 5px 8px;
  }
  #siteHeader__fulltextsearch > [for='siteHeader__statics__search'] > [class^='icon-'] {
    font-size: 30px;
  }
}
@media screen and (max-width: 450px) {
  #siteHeader__statics {
    float: left;
    border-left: 1px rgba(255, 255, 255, 0.2) solid;
  }
  #siteHeader__statics > a.logo {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 8px 0px 10px 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
  }
}
/*  =========================================================
offCanvas navi
========================================================= */
@media screen {
  #mainNavi {
    padding: 30px 0px;
    text-align: left;
    overflow-y: auto!important;
  }
  #mainNavi a {
    text-decoration: none;
  }
  #mainNavi ul {
    list-style: none;
  }
  .mainNavi__firstLayer {
    padding: 0px;
  }
  .mainNavi__firstLayer > li > a {
    font: 700 normal 25px 'Max';
    color: #274533;
    display: block;
    padding: 10px 0px;
  }
  .mainNavi__secondLayer {
    padding: 0px;
    margin-bottom: 20px;
  }
  .mainNavi__secondLayer > li {
    border-top: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .mainNavi__secondLayer > li > a::before {
    width: 20px;
    height: 100%;
    display: inline-block;
    font: 400 normal 16px 'icomoon';
    font-variant: normal;
    text-transform: none;
    color: #274533;
    content: '\e602';
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    -moz-transition: -moz-transform 0.25s ease;
    -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
  }
  .mainNavi__secondLayer > li > a {
    font: 400 italic 20px 'Max', Arial, sans-serif;
    color: #274533;
    display: block;
    padding: 15px 0px 15px 20px;
  }
  .mainNavi__thirdLayer {
    padding-left: 20px;
    margin-left: 20px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1s linear;
    -moz-transition: max-height 1s linear;
    -webkit-transition: max-height 1s linear;
  }
  .mainNavi__thirdLayer > li {
    border-top: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .mainNavi__thirdLayer > li:first-of-type {
    margin-left: -20px;
    padding-left: 20px;
  }
  .mainNavi__thirdLayer > li > a {
    display: block;
    padding: 10px 0px;
    font: 400 italic 16px 'Max', Arial, sans-serif;
    color: #3B664C;
  }
}
@media screen and (min-width: 901px) {
  /*hover states*/
  .no-touch .mainNavi__secondLayer > li > a:active::before,
  .no-touch .mainNavi__secondLayer > li > a:focus::before,
  .no-touch .mainNavi__secondLayer > li:hover > a::before,
  .no-touch .mainNavi__secondLayer > li.active > a::before {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  .no-touch .mainNavi__secondLayer > li > a:active ~ ul,
  .no-touch .mainNavi__secondLayer > li > a:focus ~ ul,
  .no-touch .mainNavi__secondLayer > li:hover > ul,
  .no-touch .mainNavi__secondLayer > li.active > ul {
    max-height: 1000px;
  }
}
@media screen {
  #mainNavi.mobile .mainNavi__secondLayer > li > label::before {
    width: 17px;
    height: 100%;
    display: inline-block;
    font: 400 normal 16px 'icomoon';
    font-variant: normal;
    text-transform: none;
    color: #274533;
    content: '\e602';
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    -moz-transition: -moz-transform 0.25s ease;
    -webkit-transition: -webkit-transform 0.25s ease;
    margin-left: -20px;
    vertical-align: top;
    margin-top: 15px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    padding-left: 0px;
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before {
    display: none;
  }
  #mainNavi.mobile {
    padding: 0px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li {
    margin-left: 20px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    padding-left: 0px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li:first-of-type {
    margin-left: 0px;
    padding-left: 20px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a {
    display: inline-block;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > a::before {
    display: none;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > input[type=checkbox]:checked ~ ul {
    max-height: 1000px;
  }
  #mainNavi.mobile .mainNavi__secondLayer > li > input[type=checkbox]:checked + label:before {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  #mainNavi.mobile .mainNavi__firstLayer > li:not(:first-of-type) {
    border-top: 1px rgba(42, 56, 65, 0.3) solid;
  }
  section.offCanvas--open {
    display: none;
  }
}
/*  =========================================================
offCanvas filter and forms
========================================================= */
@media screen {
  /*basic frame styles*/
  form.siteHeader__offCanvas {
    text-align: left;
  }
  form.siteHeader__offCanvas > fieldset {
    display: block;
    padding: 10px 20px 0px 20px;
    border: none;
  }
  form.siteHeader__offCanvas > fieldset:not(:last-of-type) {
    border-bottom: 1px rgba(11, 51, 68, 0.3) solid;
  }
  form.siteHeader__offCanvas > fieldset > legend {
    display: none;
  }
  form.siteHeader__offCanvas > fieldset > div {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  form.siteHeader__offCanvas > fieldset > div.border {
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px rgba(11, 51, 68, 0.3) solid;
  }
  form.siteHeader__offCanvas > fieldset > span {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 30px 10px 0px;
  }
  form.siteHeader__offCanvas label {
    color: #274533;
  }
  form.siteHeader__offCanvas > fieldset > div > input[type=text].calendar {
    width: 160px;
  }
  #siteHeader__hostSearch {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.35);
            box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.35);
  }
  #siteHeader__hostSearch__city {
    width: 315px;
  }
  #siteHeader__hostSearch__persons,
  #siteHeader__hostSearch__children {
    width: 85px;
  }
  #siteHeader__hostSearch select[name^='childrenAge'] {
    width: 60px;
    margin-right: 5px;
  }
  #siteHeader__filter__priceFrom,
  #siteHeader__filter__priceTo {
    width: 115px;
  }
  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-'] {
    border-color: #333;
  }
  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    background: #333;
    color: #fff;
  }
  form.siteHeader__offCanvas > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    color: #fff;
  }
  /*faked dropdown inputs*/
  form.siteHeader__offCanvas > fieldset > .fakeInput {
    height: 28px;
    padding: 7px 10px 0px;
    border: none;
    margin: 5px 10px 10px 0px;
    cursor: pointer;
    position: relative;
    background: #fff;
    color: #333;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
            box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput.active {
    margin: 0px 5px -20px -5px;
    border: 5px #fff solid;
    border-bottom-width: 20px;
    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35), 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35), 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label {
    font: 400 normal 18px 'Max', Arial, sans-serif;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label > [class^='icon-'] {
    font-size: 14px;
    border: 3px #333 solid;
    margin-left: 5px;
    color: #fff;
    background: #333;
    display: inline-block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked + label > [class^='icon-'] {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div {
    padding: 12px 20px 10px 10px;
    width: 250px;
    display: none;
    background: #fff;
    position: absolute;
    left: -5px;
    top: 40px;
    z-index: 1;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > input[type=checkbox]:checked ~ div {
    display: block;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label {
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #274533;
    display: block;
    margin: 0px 0px 10px 0px;
    padding: 0px 100px 0px 25px;
    position: relative;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > [class^='icon-'] {
    margin-left: -25px;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > input[type=checkbox]:checked + label > [class^='icon-'] {
    color: #fff;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits {
    font: 400 italic 12px 'Max', Arial, sans-serif;
    color: #274533;
    text-align: right;
    position: absolute;
    top: 3px;
    right: 0px;
  }
  /* quick search*/
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type),
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.children-dependant > select:not(:last-of-type) {
    margin-right: 14px;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox] + label > [class^='icon-'],
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox] + label > [class^='icon-'] {
    border-color: #333;
  }
  li.aroundMe > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox]:checked + label > [class^='icon-'],
  li.quickSearch > form.siteHeader__offCanvas > fieldset > div.dateUnknown > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    background: #000;
    color: #fff;
  }
  li.aroundMe > form.siteHeader__offCanvas,
  li.quickSearch > form.siteHeader__offCanvas {
    -webkit-border-bottom-left-radius: 20px;
            border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
            border-bottom-right-radius: 20px;
  }
  /*button styles*/
  form.siteHeader__offCanvas .button {
    border-color: #fff;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 600px) {
  form.siteHeader__offCanvas > fieldset.filterDropDowns {
    padding-right: 120px;
  }
  form.siteHeader__offCanvas .filterDropDowns .button {
    margin-right: -100px;
  }
}
@media screen and (max-width: 1000px) {
  form.siteHeader__offCanvas > fieldset > div.border {
    margin-left: 0px;
    padding-left: 0px;
    border-left: none;
  }
}
@media screen and (max-width: 600px) {
  form.siteHeader__offCanvas > fieldset > div:not([class*='fakeInput']) {
    width: 100%;
  }
  form.siteHeader__offCanvas > fieldset > div > input[type=text] {
    width: 100%!important;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > label {
    font-size: 14px;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div {
    width: 200px;
  }
  form.siteHeader__offCanvas > fieldset > .fakeInput > div > label > .hits {
    display: none;
  }
}
/*  =========================================================
offCanvas autocomplete
========================================================= */
@media screen {
  .autocompleteSuggestions ul > li strong {
    padding: 3px 0 3px 0;
  }
  .autocompleteSuggestions .item.type-suggest,
  .autocompleteSuggestions ul > li {
    font: 400 normal 21px 'Max', Arial, sans-serif;
    color: #2a3841;
  }
  .autocompleteSuggestions ul > li .hits {
    font: 400 italic 14px 'Max', Arial, sans-serif;
  }
  #siteHeader__fulltextsearch > form:hover #siteHeader__fulltextsearch__autocomplete {
    display: block;
  }
  #siteHeader__fulltextsearch__autocomplete {
    text-align: left;
  }
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3 {
    font: 700 normal 25px 'Max';
    color: #274533;
    margin: 20px 0px 15px 0px;
  }
  /*autocomplete teaser*/
  .autocompleteTeaser {
    margin-bottom: 25px;
  }
  .autocompleteTeaser > .image {
    width: 34.66% /*130/375*/;
    height: 0px;
    overflow: hidden;
    padding-bottom: 21.33% /*80/375*/;
    margin-right: 2.66% /*10/375*/;
    display: inline-block;
    vertical-align: top;
  }
  .autocompleteTeaser > .text {
    width: 62.66% /*235/375*/;
    display: inline-block;
    vertical-align: top;
  }
  .autocompleteTeaser > .text a {
    text-decoration: none;
  }
  .autocompleteTeaser h4 {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0px;
  }
  .autocompleteTeaser h5 {
    font: 400 italic 13px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0px;
  }
  /*autocomplete suggestions*/
  .autocompleteSuggestions {
    margin: 0px 0px 25px 0px;
    padding: 7px 10px 10px 10px;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  .autocompleteSuggestions > li:not(:last-of-type) {
    border-bottom: 1px rgba(11, 51, 68, 0.3) solid;
  }
  .autocompleteSuggestions > li {
    display: block;
    position: relative;
    padding: 8px 0px 6px 0px;
    font: 400 normal 21px 'Max', Arial, sans-serif;
    color: #274533;
  }
  .autocompleteSuggestions > li > a {
    text-decoration: none;
    display: block;
    padding-right: 100px;
  }
  .autocompleteSuggestions > li strong {
    font: inherit;
    background: #274533;
    color: #fff;
  }
  .autocompleteSuggestions > li .hits {
    position: absolute;
    top: 12px;
    right: 0px;
    text-align: right;
    font: 400 italic 14px 'Max', Arial, sans-serif;
  }
  .autocompleteSuggestions .type-city.selected,
  .autocompleteSuggestions .type-event.selected,
  .autocompleteSuggestions .type-offer.selected,
  .autocompleteSuggestions .type-suggest.selected {
    background: #3B664C !important;
  }
}
@media screen and (max-width: 1000px) {
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3 {
    margin: 0px 0px 5px 0px;
  }
}
@media screen and (max-width: 600px) {
  #siteHeader__fulltextsearch__autocomplete h3,
  .item.type-title h3 {
    display: none;
  }
  .autocompleteSuggestions > li {
    font-size: 16px;
  }
  .autocompleteSuggestions > li .hits {
    display: none;
  }
}
/*  =========================================================
offCanvas mapInfoBoard
========================================================= */
@media screen {
  #mapInfoBoard {
    overflow-y: auto!important;
  }
}
@media screen and (min-width: 1401px) {
  #mapInfoBoard {
    width: 35%;
  }
}
@media screen and (max-width: 1400px) and (min-width: 901px) {
  #mapInfoBoard {
    width: 50%;
  }
}
@media screen and (max-width: 900px) {
  #mapInfoBoard {
    width: 100%;
  }
}
@media screen {
  #mapInfoBoard > .mapInfoBoard__content {
    width: 88.617% /*545/615*/;
    padding: 50px 5.691% /*35/615*/;
  }
  #mapInfoBoard > .mapInfoBoard__content > h1 {
    font: 700 normal 40px 'Daniel';
    color: #274533;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > p {
    font: 400 italic 18px/30px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0px 0px 20px 0px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
  }
  #mapInfoBoard > .mapInfoBoard__content > .image > img {
    width: 100%;
    height: auto;
  }
}
div.picker {
  font: 400 normal 16px/16px 'Max', Arial, sans-serif;
}
/*  =========================================================
request offer form
========================================================= */
#siteHeader__requestOffer .remember-list li {
  font: 400 normal 21px/24px 'Max';
}
#siteHeader__requestOffer__success p,
#siteHeader__requestOffer .mandatoryFields {
  font: 400 normal 24px/58px 'Max';
}
/*  =========================================================
Around Me
========================================================= */
@media screen and (min-width: 776px) {
  #siteHeader__functions > ul > li > .aroundMeFlag.siteHeader__function > [class^='icon-'] {
    padding-right: 0;
    padding-top: 7px;
  }
  #siteHeader__functions > ul > li > .aroundMeFlag.siteHeader__function > :not([class]) {
    left: -5px;
    position: relative;
  }
}
#siteHeader__functions .aroundMeFlag.siteHeader__function span:not(.icon-gps) {
  display: none;
}
#siteHeader__functions .aroundMe__request {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 95px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: unset;
  z-index: 2;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
#siteHeader__functions .aroundMe__request .aroundMe__request__window {
  font: 400 normal 17px/25px 'Max', Arial, sans-serif;
  color: #fff;
  display: block;
  padding: 30px 0 30px 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  width: 450px;
  height: 80px;
  background: #274533;
  pointer-events: all;
}
@media (max-width: 450px) {
  #siteHeader__functions .aroundMe__request .aroundMe__request__window {
    font-size: 15px;
    width: 325px;
    height: 94px;
  }
}
#siteHeader__functions .aroundMe__request .aroundMe__request__window .aroundMe__request__window__close {
  position: absolute;
  top: 0;
  right: 0;
  background: #3B664C;
  padding: 10px 10px 10px 10px;
}
#siteHeader__functions .aroundMe__request .aroundMe__request__window .aroundMe__request__window__text {
  width: 65%;
  padding: 0 5px 0 0;
}
#siteHeader__functions .aroundMe__request .aroundMe__request__window span {
  float: left;
  padding: 0 20px 0 20px;
}
#siteHeader__functions .aroundMe__request .aroundMe__request__window a {
  background: #FF8A00;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  position: relative;
  top: -10%;
  float: left;
  left: 50%;
  bottom: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
#siteHeader__functions .offCanvas__filter__hidden,
#siteHeader__functions .aroundMe__request__hidden {
  display: none;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
  z-index: 0;
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage keyvisual styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/
/*  =========================================================
basic config
pagination
keyvisual text
breadcrumb navi
========================================================== */
/*  =========================================================
basic config
========================================================= */
@media screen {
  #keyvisual {
    width: 100%;
    height: 690px;
    border-bottom: 5px #274533 solid;
    position: relative;
    background: #7C9988;
  }
  #keyvisual.indexPage {
    height: 950px;
  }
  #keyvisual > .keyvisualCroped {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  #keyvisual > .keyvisualCroped > .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
    -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    display: none;
  }
  /* override top position to spare some space for breadcrumb */
  #keyvisual > .keyvisualCroped > .image > .copyright {
    top: 50px;
  }
  #keyvisual > .keyvisualCroped > .image > picture,
  #keyvisual > .keyvisualCroped > .image > noscript {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
  }
  #keyvisual > .keyvisualCroped > .image > picture > img,
  #keyvisual > .keyvisualCroped > .image > noscript > img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #keyvisual > .keyvisualCroped > .image.positioned {
    transition: left 1s ease;
    -moz-transition: left 1s ease;
    -webkit-transition: left 1s ease;
    transform: scale(0.9) !important;
    -moz-transform: scale(0.9) !important;
    -webkit-transform: scale(0.9) !important;
    -ms-transform: scale(0.9) !important;
  }
  #keyvisual > .keyvisualCroped > .image.left {
    left: -100%;
  }
  #keyvisual > .keyvisualCroped > .image.right {
    left: 100%;
  }
  #keyvisual > .keyvisualCroped > .image.active {
    left: 0%;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    z-index: 1;
  }
  #keyvisual > .keyvisualCroped > .image.last {
    left: 0%;
    opacity: 0.25;
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
  }
  #keyvisual > .keyvisualCroped > .image.left,
  #keyvisual > .keyvisualCroped > .image.right,
  #keyvisual > .keyvisualCroped > .image.active,
  #keyvisual > .keyvisualCroped > .image.last {
    display: block;
  }
  #keyvisual > .keyvisualCroped > .keyvisualVideo .videoPlayButton > img {
    height: 150px;
    margin-left: -40px;
  }
}
@media screen and (max-width: 600px) {
  #breadcrumb + #keyvisual {
    margin-top: 0px;
  }
}
@media screen and (max-height: 500px) {
  #keyvisual.indexPage,
  #keyvisual {
    height: 350px;
  }
}
@media screen and (min-height: 501px) {
  #keyvisual.indexPage,
  #keyvisual {
    height: 450px;
  }
}
@media screen and (min-height: 601px) {
  #keyvisual.indexPage,
  #keyvisual {
    height: 550px;
  }
}
@media screen and (min-height: 701px) {
  #keyvisual.indexPage,
  #keyvisual {
    height: 650px;
  }
}
@media screen and (min-height: 801px) {
  #keyvisual:not(.indexPage) {
    height: 690px;
  }
  #keyvisual.indexPage {
    height: 750px;
  }
}
@media screen and (min-height: 901px) {
  #keyvisual.indexPage {
    height: 850px;
  }
}
@media screen and (min-height: 1000px) {
  #keyvisual.indexPage {
    height: 950px;
  }
}
@media screen and (min-aspect-ratio: 7/3) {
  #keyvisual > .keyvisualCroped > .image > picture img,
  #keyvisual > .keyvisualCroped > .image > noscript img {
    width: 100%;
    height: auto;
    margin: 0px;
  }
}
@media screen {
  #keyvisual > .badge.hotelBadge,
  #keyvisual > .badge {
    bottom: 73px;
    height: 500px;
  }
}
/*  =========================================================
pagination
========================================================= */
@media screen {
  .pagination {
    position: absolute;
    top: 50%;
    z-index: 3;
    margin-top: -42px;
    width: 85px;
    height: 85px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #fff;
    background: rgba(0, 0, 0, 0);
    text-decoration: none;
    text-align: center;
    -webkit-transition: left 0.25s ease, right 0.25s ease;
    transition: left 0.25s ease, right 0.25s ease;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .pagination.pagination--left {
    left: 0;
  }
  .pagination.pagination--right {
    right: -30px;
  }
  .no-touch .pagination.pagination--left:active,
  .no-touch .pagination.pagination--left:focus,
  .no-touch .pagination.pagination--left:hover {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }
  .no-touch .pagination.pagination--right:active,
  .no-touch .pagination.pagination--right:focus,
  .no-touch .pagination.pagination--right:hover {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }
  .pagination > span {
    display: block;
    font-size: 80px;
    line-height: 85px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--left {
    left: -85px;
  }
  #keyvisual.animated > .keyvisualCroped > .pagination.pagination--right {
    right: -85px;
  }
}
@media screen and (max-width: 600px) {
  .pagination {
    display: none;
  }
}
/*  =========================================================
keyvisual text
========================================================= */
/* general styling */
@media screen {
  .keyvisual__image__text {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0px 25px;
  }
  .keyvisualCroped > .keyvisual__image__text {
    z-index: 2;
  }
}
/* title */
@media screen {
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2 {
    font: 400 normal 100px/1.25em 'Daniel';
    letter-spacing: -5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    display: inline-block;
    margin: 0px 0px 35px 0px;
  }
  .keyvisual__image__text > h1 > strong,
  .keyvisual__image__text > h2 > strong {
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1em;
  }
}
@media screen and (max-width: 1200px) {
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2 {
    font-size: 80px;
  }
}
@media screen and (max-width: 1000px) {
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2 {
    font-size: 60px;
  }
}
@media screen and (max-width: 600px) {
  .keyvisual__image__text > h1,
  .keyvisual__image__text > h2 {
    font-size: 40px;
  }
}
/* highlight badge */
@media screen {
  .keyvisual__image__text > h1.highlight:before,
  .keyvisual__image__text > h2.highlight:before {
    content: '';
    display: inline-block;
    width: 88px;
    height: 74px;
    background: url('../images/foehr/environment/logoBadge.a648015e.svg') 0px 0px no-repeat;
    background-size: contain;
    position: relative;
    top: -50px;
    left: -25px;
  }
}
@media screen and (max-width: 900px) {
  .keyvisual__image__text > h1.highlight:before,
  .keyvisual__image__text > h2.highlight:before {
    display: block;
    background-position: 50% 0%;
    width: 100%;
    height: 33px;
    margin-bottom: 20px;
    position: static;
  }
}
/* link with buttonBox */
@media screen {
  .keyvisual__image__text > a {
    text-decoration: none;
  }
}
@media screen {
  .keyvisual__image__text > a {
    position: relative;
    display: block;
    width: 45%;
    margin: 0px 25% 0px 35%;
    font: 400 normal 22px/35px 'Max', Arial, sans-serif;
    text-align: right;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  }
}
@media screen and (max-width: 1000px) {
  .keyvisual__image__text > a > span {
    display: none;
  }
}
@media screen {
  .keyvisual__image__text > a:after {
    content: '\e61d';
    font: 400 normal 30px/45px 'icomoon';
    text-align: center;
    width: 45px;
    height: 45px;
    background: #fff;
    color: #274533;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    text-shadow: none;
  }
}
@media screen and (min-width: 1001px) {
  .keyvisual__image__text > a:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 15px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media screen and (max-width: 1000px) {
  .keyvisual__image__text > a:after {
    display: inline-block;
  }
}
/* simple text */
@media screen {
  .keyvisual__image__text > p {
    font: 400 normal 25px/1.25em 'Max';
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    display: block;
    margin: 0px;
  }
  .keyvisual__image__text > p > [class*='icon'] {
    font-size: 2em;
    margin: 0px 2px;
  }
}
@media screen and (max-width: 600px) {
  .keyvisual__image__text > p {
    font-size: 20px;
  }
  .keyvisual__image__text > p > [class*='icon'] {
    font-size: 1.5em;
  }
}
/* video play button */
@media screen and (max-height: 700px) {
  #keyvisual > .keyvisualCroped > .image .videoPlayButton {
    bottom: initial;
  }
}
/*  =========================================================
breadcrumb navi
========================================================= */
@media screen {
  #breadcrumb {
    width: 100%;
    padding: 20px 0px;
    background: #3B664C;
    text-align: left;
  }
  #keyvisual + #breadcrumb {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: #3B664C;
  }
  #breadcrumb__list {
    margin: 0px;
    padding: 0px 20px;
    list-style: none;
  }
  #breadcrumb__list > li {
    display: inline-block;
    padding: 0px 5px 0px 0px;
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #fff;
  }
}
@media screen and (max-width: 600px) {
  #breadcrumb {
    margin-bottom: 0px;
  }
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage footer styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/
/*  =========================================================
basic config
footer head
footer content
footer bottom
contact area
========================================================== */
/*  =========================================================
basic config
========================================================= */
@media screen {
  #siteFooter {
    position: relative;
  }
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(1) > .innerContent {
    text-align: right;
    margin-right: 15px;
  }
  #siteFooter [class^='g-grid'] > [class^='g-element']:nth-of-type(2) > .innerContent {
    text-align: left;
    margin-left: 40px;
  }
  /*background stuff*/
  #siteFooter__background--left,
  #siteFooter__background--right {
    position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
  }
  #siteFooter__background--left {
    left: 0%;
    background: #3B664C;
  }
  #siteFooter__background--right {
    left: 50%;
    background: #507961;
  }
  #siteFooter__background--helper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  #siteFooter__background--helper * {
    height: 100%;
  }
  #siteFooter__background--leftHelper {
    background: #3B664C;
  }
  #siteFooter__background--rightHelper {
    background: #507961;
  }
}
@media screen and (max-width: 900px) {
  #siteFooter {
    background: #3B664C;
  }
  #siteFooter__background {
    display: none;
  }
  #siteFooter .innerContent {
    margin: 0px !important;
    text-align: center !important;
  }
}
/*  =========================================================
footer head
========================================================= */
@media screen {
  #siteFooter__head {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 0px 20px 0px;
  }
  #siteFooter__head h2 {
    font: 700 normal 30px/37px 'Daniel';
    color: #fff;
    margin: 0px;
  }
}
@media screen and (max-width: 500px) {
  #siteFooter__head {
    padding: 20px 0px 10px 0px;
  }
  #siteFooter__head h2 {
    font-size: 23px;
  }
}
/*  =========================================================
footer content
========================================================= */
@media screen {
  #siteFooter__content {
    position: relative;
    padding: 35px 0px 30px 0px;
  }
  #siteFooter__content .button:not(:first-of-type) {
    margin-left: 10px;
  }
  #siteFooter__content p {
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #fff;
  }
  #siteFooter__content form > div {
    margin: 0px 20px 20px 0px;
    display: inline-block;
  }
  #siteFooter__content label {
    color: #fff;
  }
  #siteFooter__content input[type=text] {
    height: 40px;
  }
  #siteFooter__newsletterForm__firstname,
  #siteFooter__newsletterForm__lastname {
    width: 200px;
  }
  #siteFooter__newsletterForm__email {
    width: 335px;
  }
  #siteFooter__newsletterForm__newsletter:checked + label > [class^='icon-'] {
    color: #507961;
  }
}
@media screen and (max-width: 1000px) {
  #siteFooter__newsletterForm__email {
    width: 250px;
  }
}
@media screen and (max-width: 500px) {
  #siteFooter__content {
    padding: 30px 0px 25px 0px;
  }
}
/*  =========================================================
footer bottom
========================================================= */
@media screen {
  #siteFooter__bottom {
    position: relative;
    background: #274533;
    padding: 25px 0px 20px 0px;
  }
  #siteFooter__bottom a.logo {
    height: 100%;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
  }
  #siteFooter__bottom a.logo > img {
    width: 180px;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
  }
  #siteFooter__bottom a.text {
    font: 300 normal 14px 'Max', Arial, sans-serif;
    color: #fff;
    text-decoration: underline;
    margin-right: 15px;
  }
  #siteFooter__bottom p {
    font: 300 normal 14px 'Max', Arial, sans-serif;
    color: #fff;
    margin: 15px 0px 0px 0px;
  }
}
@media screen and (max-width: 900px) {
  #siteFooter__bottom {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 500px) {
  #siteFooter__bottom {
    padding-bottom: 25px;
  }
  #siteFooter__bottom a.text {
    display: inline-block;
    vertical-align: top;
    width: 46%;
    margin: 0px 2% 10px 2%;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    background: #fff;
    color: #274533;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-border-radius: 5px;
            border-radius: 5px;
  }
}
/*  =========================================================
contact area
========================================================= */
/*basic styling*/
@media screen {
  .contactArea {
    width: 100%;
    background: initial;
  }
}
/*head styling*/
@media screen {
  .contactArea > .head {
    padding: 22px 0;
    background: #4F765E;
  }
  .contactArea > .head h2 {
    font: 700 normal 30px 'Daniel';
    color: #fff;
    margin: 0;
    padding: 0;
  }
}
@media screen and (max-width: 600px) {
  .contactArea > .head h2 {
    font-size: 23px;
    line-height: 32px;
  }
  .contactArea > .head {
    padding: 24px 0;
  }
}
/*basic body styling*/
@media screen {
  .contactArea > .body {
    padding: 20px 0px;
  }
  .contactArea > .body .contactInfos {
    margin-right: 50px;
    padding-right: 10px;
    border-right: 1px rgba(0, 0, 0, 0.3) solid;
  }
}
@media screen and (max-width: 900px) {
  .contactArea > .body .contactInfos {
    margin-right: 10px;
  }
}
@media screen and (max-width: 600px) {
  .contactArea > .body .contactInfos {
    margin-right: 0px;
    border-right: none;
    padding-right: 0px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
  }
}
/*body styling for fonts and links*/
@media screen {
  .contactArea > .body h4 {
    font: 700 normal 22px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 5px 0px 20px 0px;
    padding: 0px;
  }
  .contactArea > .body h5 {
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #274533;
    text-transform: uppercase;
    margin: 5px 0 30px 0;
    padding: 0;
  }
  .contactArea > .body p {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0px;
    padding: 0px;
  }
  .contactArea > .body a {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    color: #274533;
    display: inline-block;
    padding: 5px 0px;
    margin: 10px 0px 0px 5px;
    vertical-align: bottom;
  }
  .contactArea > .body span {
    color: #274533;
    font-size: 30px;
    vertical-align: baseline;
  }
}
@media screen and (max-width: 600px) {
  .contactArea > .body h4,
  .contactArea > .body p,
  .contactArea > .body a {
    font-size: 18px;
  }
  .contactArea > .body h5 {
    font-size: 14px;
  }
}

/**
 * Foehr 2015
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage fonts
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/
/*  =========================================================
Daniel - Regular
Daniel - Bold

Max - Regular
Max - Italic
Max - Bold
Max - Bold Italic
========================================================== */
/*  =========================================================
Daniel - Regular
========================================================= */
@font-face {
  font-family: 'Daniel';
  src: url('../fonts/branding/foehr/Daniel/regular/daniel-webfont.1c1c6dd0.eot');
  src: url('../fonts/branding/foehr/Daniel/regular/daniel-webfont.1c1c6dd0.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Daniel/regular/daniel-webfont.3568bdd4.woff') format('woff'), url('../fonts/branding/foehr/Daniel/regular/daniel-webfont.75710555.ttf') format('truetype'), url('../fonts/branding/foehr/Daniel/regular/daniel-webfont.3e6f320b.svg#danielregular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*  =========================================================
Daniel - Bold
========================================================= */
@font-face {
  font-family: 'Daniel';
  src: url('../fonts/branding/foehr/Daniel/bold/danielbd-webfont.fbae1423.eot');
  src: url('../fonts/branding/foehr/Daniel/bold/danielbd-webfont.fbae1423.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Daniel/bold/danielbd-webfont.b42b10bd.woff') format('woff'), url('../fonts/branding/foehr/Daniel/bold/danielbd-webfont.14430197.ttf') format('truetype'), url('../fonts/branding/foehr/Daniel/bold/danielbd-webfont.365eec89.svg#danielbold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*  =========================================================
Max - Regular
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('../fonts/branding/foehr/Max/regular/MaxWeb.0962658a.eot');
  src: url('../fonts/branding/foehr/Max/regular/MaxWeb.0962658a.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Max/regular/MaxWeb.34429fea.woff') format('woff'), url('../fonts/branding/foehr/Max/regular/MaxWeb.d79ab6ec.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*  =========================================================
Max - Italic
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('../fonts/branding/foehr/Max/italic/MaxWeb-Italic.f1dfe637.eot');
  src: url('../fonts/branding/foehr/Max/italic/MaxWeb-Italic.f1dfe637.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Max/italic/MaxWeb-Italic.ed2d016f.woff') format('woff'), url('../fonts/branding/foehr/Max/italic/MaxWeb-Italic.61b671a5.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/*  =========================================================
Max - Bold
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('../fonts/branding/foehr/Max/bold/MaxWeb-Bold.22173436.eot');
  src: url('../fonts/branding/foehr/Max/bold/MaxWeb-Bold.22173436.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Max/bold/MaxWeb-Bold.1ebdbd52.woff') format('woff'), url('../fonts/branding/foehr/Max/bold/MaxWeb-Bold.dd50ef0d.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*  =========================================================
Max - Bold Italic
========================================================= */
@font-face {
  font-family: 'Max';
  src: url('../fonts/branding/foehr/Max/boldItalic/MaxWeb-BoldItalic.7afb3412.eot');
  src: url('../fonts/branding/foehr/Max/boldItalic/MaxWeb-BoldItalic.7afb3412.eot?#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/Max/boldItalic/MaxWeb-BoldItalic.6b09173e.woff') format('woff'), url('../fonts/branding/foehr/Max/boldItalic/MaxWeb-BoldItalic.fef415eb.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage basic styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/
/*  =========================================================
general Structure Setup
general Font Setup
tools
========================================================== */
/*  =========================================================
general Structure Setup
========================================================= */
@media screen {
  html {
    background: #fff;
  }
  html.imxPortal {
    height: auto;
    font-size: 10px;
  }
  html.imxPortal,
  html.imxPortal body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    margin: 0px;
    border: 0px;
    padding: 0px;
  }
  html.imxPortal body {
    padding-top: 85px;
  }
  html.imxPortal body a img {
    border: 0px none;
  }
  html.imxPortal body > section {
    margin-bottom: 70px;
    position: relative;
  }
  html.imxPortal body > section.colored {
    background: #3B664C;
    padding: 60px 0px 30px 0px;
  }
  section.formular {
    background: none;
    background-size: contain;
    width: 100%;
    content: ' ';
    padding: initial;
    margin-bottom: 100px !important;
    position: relative;
  }
  section.formular > .content:before {
    content: ' ';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: none;
    background-size: contain;
  }
  input::-ms-clear {
    display: none;
  }
  hr {
    border-color: #000;
    border-style: solid none;
    border-width: 1px 0px 0px 0px;
    width: 100%;
    height: 0px;
    line-height: 0px;
    font-size: 0px;
  }
}
@media screen and (max-width: 1000px) {
  html.imxPortal body {
    padding-top: 75px;
  }
}
@media screen and (max-width: 775px) {
  html.imxPortal body {
    padding-top: 50px;
  }
}
@media screen and (max-width: 450px) {
  html.imxPortal body {
    padding-top: 100px;
  }
}
@media screen and (max-width: 600px) {
  html.imxPortal body > section {
    margin-bottom: 50px;
  }
  html.imxPortal body > section.colored {
    padding-top: 30px;
  }
}
@media screen and (min-width: 1600px) {
  html.imxPortal body > section.formular > .content:before {
    background-image: initial;
  }
}
/*  =========================================================
general Font Setup
========================================================= */
@media screen {
  strong {
    font-weight: 600;
  }
  em {
    font-style: italic;
  }
  a {
    cursor: pointer;
    color: inherit;
    font: inherit;
  }
  button {
    cursor: pointer;
  }
  label {
    cursor: pointer;
  }
  .badge svg .dynamicText > text {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
  }
  p > a {
    color: #517068;
    font: italic 400 18px 'Max', Arial, sans-serif;
    position: relative;
    text-decoration: underline;
  }
  p > a[target='_blank']:before {
    content: '\e60e';
    font: 400 18px 'icomoon', Arial, sans-serif;
    left: 0;
    margin-top: -10px;
    position: absolute;
    top: 50%;
  }
  p > a[target='_blank'] {
    padding: 0px 0px 0px 20px;
  }
}
/*  =========================================================
tools
========================================================= */
@media screen {
  .closer {
    clear: both;
    display: block;
    margin: 0px!important;
    padding: 0px!important;
    background: transparent!important;
  }
  .none,
  .hide,
  #print {
    display: none!important;
  }
  .noMargin {
    margin: 0px !important;
  }
  .noPadding {
    padding: 0px !important;
  }
  .noBorder {
    border: 0px none transparent !important;
  }
  .cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  .verticalAlignMiddle {
    display: inline-block;
    height: 100%;
    width: 0px;
    vertical-align: middle;
  }
}
@media screen and (max-width: 900px) {
  [data-onlyVisibleScreensize='dt'] {
    display: none!important;
  }
}
@media screen and (min-width: 901px) and (max-width: 600px) {
  [data-onlyVisibleScreensize='md'] {
    display: none!important;
  }
}
@media screen and (min-width: 601px) {
  [data-onlyVisibleScreensize='sm'] {
    display: none!important;
  }
}

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/branding/foehr/icomoon/icomoon.4b982701.eot?ysxj1f');
  src: url('../fonts/branding/foehr/icomoon/icomoon.4b982701.eot?ysxj1f#iefix') format('embedded-opentype'), url('../fonts/branding/foehr/icomoon/icomoon.994830cb.woff2?ysxj1f') format('woff2'), url('../fonts/branding/foehr/icomoon/icomoon.c25b760b.ttf?ysxj1f') format('truetype'), url('../fonts/branding/foehr/icomoon/icomoon.7183df75.woff?ysxj1f') format('woff'), url('../fonts/branding/foehr/icomoon/icomoon.156fce2c.svg?ysxj1f#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-tickets:before {
  content: "\e902";
}
.icon-arrowDown:before {
  content: "\e600";
}
.icon-arrowLeft:before {
  content: "\e601";
}
.icon-arrowRight:before {
  content: "\e602";
}
.icon-arrowUp:before {
  content: "\e603";
}
.icon-burger:before {
  content: "\e604";
}
.icon-checkmark:before {
  content: "\e605";
}
.icon-close:before {
  content: "\e606";
}
.icon-enlarge:before {
  content: "\e607";
}
.icon-facebook:before {
  content: "\e608";
}
.icon-filter:before {
  content: "\e609";
}
.icon-googlePlus:before {
  content: "\e60a";
}
.icon-host:before {
  content: "\e60b";
}
.icon-infoboard:before {
  content: "\e60c";
}
.icon-letter:before {
  content: "\e60d";
}
.icon-linkExtern:before {
  content: "\e60e";
}
.icon-logo:before {
  content: "\e60f";
}
.icon-map:before {
  content: "\e610";
}
.icon-search:before {
  content: "\e611";
}
.icon-shopping:before {
  content: "\e612";
}
.icon-star:before {
  content: "\e613";
}
.icon-telephone:before {
  content: "\e614";
}
.icon-twitter:before {
  content: "\e615";
}
.icon-world:before {
  content: "\e616";
}
.icon-aroundMe:before {
  content: "\e617";
}
.icon-rss:before {
  content: "\e618";
}
.icon-wordpress:before {
  content: "\e619";
}
.icon-youtube:before {
  content: "\e61a";
}
.icon-listLit:before {
  content: "\e61b";
}
.icon-instagram:before {
  content: "\e61c";
}
.icon-arrowRightBold:before {
  content: "\e61d";
}
.icon-download:before {
  content: "\e900";
}
.icon-gps:before {
  content: "\e901";
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage article and text styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/
/*  =========================================================
article formats
headlines
text styles
article list
pictograms
========================================================== */
/*  =========================================================
article formats
========================================================= */
@media screen {
  article.siteIntro {
    text-align: center;
    padding: 0;
  }
  article.areaIntro {
    text-align: center;
    padding: 0 0 30px 0;
  }
  article.contentText {
    text-align: left;
    padding: 0 0 0 0;
  }
}
@media screen and (max-width: 600px) {
  article.contentText {
    text-align: left;
    padding-bottom: 35px;
  }
}
/*  =========================================================
headlines
========================================================= */
@media screen {
  article.contentText > h1,
  article.siteIntro > h1 {
    font: 700 normal 100px/120px 'Daniel';
    color: #3b664c;
    margin: 0px 0px 30px 0px;
  }
  article.siteIntro > h2 {
    color: #3b664c;
    font: 700 40px/45px 'Daniel';
    margin: 0px 0px 0px 0px;
  }
  article.areaIntro > h1,
  article.areaIntro > h2,
  .areaIntro > h1,
  .areaIntro > h2 {
    font: 700 normal 50px/55px 'Daniel';
    color: #3b664c;
    margin: 0px 0px 10px 0px;
  }
  article.eventLocation > h2,
  article.contentText > h2 {
    font: 700 normal 40px 'Daniel';
    color: #3b664c;
    margin: 0px 0px 15px 0px;
  }
  article.contentText > h3,
  .areaIntro > h3,
  article.eventLocation > h3 {
    font: 700 normal 30px 'Daniel';
    color: #3B664C;
    margin: 0 0 10px;
  }
  article.eventLocation > h4,
  article.contentText > h4 {
    font: 400 normal 25px 'Daniel';
    color: #274533;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h5,
  article.contentText > h5 {
    font: 700 normal 22px 'Max';
    color: #274533;
    margin: 30px 0px 10px 0px;
  }
  article.eventLocation > h6,
  article.contentText > h6 {
    font: 400 normal 18px 'Max';
    color: #274533;
    margin: 30px 0px 10px 0px;
    text-transform: uppercase;
  }
  .colored article.siteIntro > h1,
  .colored article.areaIntro > h1,
  .colored article.areaIntro > h2,
  .colored article.contentText > h2,
  .colored article.contentText > h3 {
    color: #fff;
  }
  article.areaIntro > .date {
    font: 400 normal 30px/30px 'Max';
    color: #274533;
  }
  article.siteIntro > p.subTitleContent {
    font: 400 normal 20px/25px 'Max';
  }
  .priceDescription {
    height: 85px;
  }
  .priceDescription article.contentText > h3 {
    font: 400 bold 35px/30px 'Daniel';
    color: #3B664C;
    margin: 0 0 10px;
  }
  .priceDescription article.contentText > span.icon-tickets {
    font-size: 18px;
    color: #274533;
  }
  .priceDescription article.contentText > p {
    font: 400 normal 18px/25px 'Max';
    padding-left: 25px;
    top: -35px;
    position: relative;
  }
}
@media screen and (max-width: 1300px) {
  article.siteIntro > h1 {
    font-size: 96px;
  }
}
@media screen and (max-width: 1200px) {
  article.siteIntro > h1 {
    font-size: 89px;
  }
}
@media screen and (max-width: 1100px) {
  article.siteIntro > h1 {
    font-size: 81px;
  }
}
@media screen and (max-width: 1000px) {
  article.siteIntro > h1 {
    font-size: 73px;
  }
}
@media screen and (max-width: 900px) {
  article.siteIntro > h2 {
    font: 400 25px/30px 'Daniel';
    margin: 0px 0px 0px 0px;
  }
  article.siteIntro > h1 {
    font-size: 65px;
  }
}
@media screen and (max-width: 800px) {
  article.siteIntro > h1 {
    font-size: 55px;
  }
}
@media screen and (max-width: 700px) {
  article.siteIntro > h1 {
    font-size: 45px;
  }
}
@media screen and (max-width: 600px) {
  article.siteIntro > h1 {
    font-size: 35px;
    line-height: 55px;
    margin: 0px 0px 15px 0px;
  }
  article.siteIntro > h2 {
    font: 400 25px/30px 'Daniel';
    margin: 0px;
  }
  article.areaIntro > h1,
  article.areaIntro > h2 {
    font-size: 40px;
    line-height: 45px;
  }
  article.contentText > h2 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  article.contentText > h3 {
    font-size: 25px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 500px) {
  article.siteIntro > h1 {
    font-weight: bold;
    font-size: 32px;
    line-height: 40px;
  }
  article.siteIntro > p {
    font-size: 18px;
    margin: 0 0 30px 0;
  }
  article.contentText {
    padding-bottom: 0;
    margin-bottom: -50px;
  }
}
@media screen and (max-width: 400px) {
  article.siteIntro > h1 {
    font-weight: bold;
    font-size: 32px;
    line-height: 40px;
  }
  article.siteIntro > p.subTitleContent {
    margin: 0 0 30px 0;
  }
}
@media screen and (max-width: 300px) {
  article.siteIntro > h1 {
    font-size: 16px;
  }
}
/*  =========================================================
text styles
========================================================= */
@media screen {
  article.siteIntro > p {
    font: 400 italic 25px/40px 'Max', Arial, sans-serif;
    color: #333;
    margin: 0px 0px 70px 0px;
  }
  article.siteIntro > p:last-of-type {
    margin-bottom: 10px;
  }
  article.siteIntro > p > [class*='icon'] {
    font-size: 2em;
    margin: 0px 2px;
    color: #274533;
  }
  article.areaIntro > p {
    font: 400 normal 18px/30px 'Max', Arial, sans-serif;
    color: #333;
    margin: 0px 0px 10px 0px;
  }
  article.eventLocation > p,
  article.contentText > p {
    font: 400 normal 16px/30px 'Max', Arial, sans-serif;
    color: #333;
    margin: 0px 0px 15px 0px;
  }
  .colored article.siteIntro > p,
  .colored article.areaIntro > p,
  .colored article.contentText {
    color: #fff;
  }
  article.contentText > p > a {
    color: #274533;
  }
}
@media screen and (max-width: 600px) {
  article.siteIntro > p {
    font-size: 20px;
    line-height: 30px;
    margin: 0 0 30px 0;
  }
  article.areaIntro > p {
    font-size: 16px;
    line-height: 20px;
  }
  article.contentText > p {
    font-size: 16px;
    line-height: 25px;
  }
}
/*  =========================================================
article list
========================================================= */
@media screen {
  .contentText ul {
    margin: 0px 0px 50px 0px;
    padding: 0px;
    list-style: none;
  }
  .contentText ul > li {
    background: initial;
    color: #274533;
    font: 400 normal 16px/30px 'Max', Arial, sans-serif;
    margin-bottom: 25px;
    padding-left: 30px;
  }
  .contentText ul > li:before {
    content: '\e61b';
    font: 400 normal 1em 'icomoon';
    margin-left: -30px;
    margin-right: 10px;
  }
}
/*  =========================================================
table stylings
========================================================= */
@media screen {
  article.contentText table {
    width: 75%!important;
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
  }
  article.contentText table thead tr {
    background: rgba(39, 69, 51, 0.8);
    border-bottom: 1px solid #FFFFFF;
  }
  article.contentText table thead tr th {
    border: none;
    padding: 15px 15px 15px 15px;
    font-family: Max, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
  }
  article.contentText table tbody tr {
    background: rgba(39, 69, 51, 0.2);
    border-bottom: 1px solid #FFFFFF;
  }
  article.contentText table tbody tr td {
    padding: 10px 0 10px 15px;
    border: none;
    font-family: Max, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: rgba(39, 69, 51, 0.8);
  }
  article.contentText table tbody tr td p {
    margin: 0 0 0 0;
  }
}
@media screen and (max-width: 600px) {
  article.contentText table {
    width: 100%!important;
  }
  article.contentText table thead tr th {
    font-size: 12px;
    padding: 10px 0 10px 10px;
  }
  article.contentText table tbody tr td {
    font-size: 10px;
    padding: 10px 0 10px 15px;
  }
}
/*  =========================================================
 guest cards
========================================================= */
@media screen {
  .guestCardTeaser {
    border-bottom: 1px solid #D8DFE3;
    padding-bottom: 10px;
  }
  .guestCardTeasers .guestCardTeaser:first-child {
    display: none;
  }
  .guestCardModule article.siteIntro > h2 {
    font: 700 normal 40px 'Daniel';
    color: #3b664c;
    line-height: 30px;
    text-align: center;
  }
  .guestCardModule .guestCardTeaserDownloads {
    position: relative;
    top: 20px;
    min-height: 100px;
    padding: 0 0 50px 0;
  }
  .guestCardModule .guestCardTeaserDownloads span {
    font: 400 normal 18px 'Max', Arial, sans-serif;
    color: #000000;
    line-height: 25px;
    font-weight: bold;
  }
  .guestCardModule .downloadButton {
    background: #971D6F;
    font: 400 normal 18px 'Max', Arial, sans-serif;
    color: #ffffff;
    line-height: 23px;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    margin-right: 25px;
    position: relative;
    top: 15px;
  }
  .guestCardModule .downloadButton:before {
    font-size: 20px;
  }
  .guestCardModule h3 {
    font: 400 normal 20px 'Max';
    color: #3b664c;
    line-height: 25px;
    font-weight: normal;
  }
  .guestCardModule h3 span {
    font: 400 normal 25px 'Max', Arial, sans-serif;
    line-height: 25px;
    font-weight: normal;
    text-align: center;
    color: #3b664c;
    padding-right: 10px;
  }
  .guestCardModule .guestCardTeaserContent {
    background: #eaeff0;
  }
  .guestCardTeaserContent div p {
    font: 400 normal 18px 'Max';
    color: #3b664c;
    line-height: 20px;
    font-weight: normal;
    padding: 0 0 0 5px;
    margin: 0 0 0 0;
  }
  .guestCardTeaserContent div {
    padding: 5px 5px 5px 5px;
  }
  .guestCardTeaserContent div span {
    font: 400 normal 18px 'Max', Arial, Sans-Serif;
    color: #3b664c;
    line-height: 30px;
    font-weight: bold;
    padding: 5px 5px 5px 5px;
  }
  .guestCardTeaser .moreDetails {
    color: #3b664c;
    text-decoration: none;
    display: block;
    background: #eaeff0;
    width: 100%;
    padding: 15px 0 5px 0;
  }
  .guestCardTeaser .moreDetails span {
    font: 400 normal 18px 'Max';
    color: #3b664c;
    position: relative;
    padding: 15px 15px 5px 10px;
    top: -5px;
  }
  .guestCardTeaser .moreDetails:before {
    font: 400 normal 22px 'icomoon';
    float: right;
    padding: 0 15px 12px 15px;
  }
  .guestCardTeaser .moreDetails.icon-arrowDown:before {
    position: relative;
    top: -5px;
  }
  .guestCardTeaser .moreDetails.icon-arrowDown span.hideDetails,
  .guestCardTeaser .moreDetails.icon-arrowRight span {
    visibility: hidden;
    display: none;
  }
  .guestCardTeaser .moreDetails.icon-arrowRight span.hideDetails {
    visibility: visible;
    display: block;
  }
  .guestCardTeaserContent.guestCardTeaserContentHidden {
    display: none;
  }
  .guestCardModule .guestCardTeaserDownloads span.guestName {
    color: #3b664c;
  }
  .guestCardTeaserContent div.guestCardTeaserArrival,
  .guestCardTeaserContent div.guestCardTeaserAddress {
    border-top: 1px solid #D8DFE3;
    padding: 5px 5px 10px 5px;
  }
}
/*  =========================================================
 pictograms
========================================================= */
@media screen {
  .pictograms {
    width: 100%;
    position: relative;
    height: 40px;
    margin: 10px 0;
  }
  .pictograms .img-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }
  .pictograms .img-icon img {
    width: 100%;
    height: 100%;
  }
}

/**
 * nts
 *
 * 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       https://www.infomax-online.de
 * @author     Florian Müller <mueller@infomax-it.de>
 * @since      2018-04-25
 */
/**

Navigation:
A.

**/
/*  =========================================================
 =A.
========================================================= */
.content .calendar tr td.infocus {
  color: #3B664C;
}
.content .calendar tr td.infocus:hover,
.content .calendar tr td.infocus:active,
.content .calendar tr td.infocus:focus,
.content .calendar {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), #628771;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #628771;
}
.content .calendar tr td.infocus:hover,
.content .calendar tr td.infocus:active,
.content .calendar tr td.infocus:focus {
  background-color: #274533;
  border: 0;
}
.content .calendar tr td.infocus {
  padding: 9px 0;
}
.content .calendar > h3 {
  font: 400 normal 40px 'Daniel';
  color: #3B664C;
  font-weight: bold;
  line-height: 45px;
  text-transform: capitalize;
}
.content .calendar tr td {
  font: 400 20px/1em 'Max', Arial, sans-serif;
  border: 0;
}
.content .calendar .ui-datepicker-title {
  font: 400 20px/1em 'Max', Arial, sans-serif;
  margin-top: 10px;
}
.teaser-text > .text > .date {
  font: 400 normal 20px 'Max';
}
.content .calendar tr td.selected:not(.ui-datepicker-other-month) {
  background-color: #4F765E;
  color: #FFFFFF;
}
.content .calendar tr td.infocus:hover,
.content .calendar tr td.infocus:active,
.content .calendar tr td.infocus:focus {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), #628771;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #628771;
}
.content .calendar .ui-datepicker-header {
  background-color: #4F765E;
  width: 100%;
  border-left: 20px solid;
  border-right: 20px solid;
  position: absolute;
  border-color: #4F765E;
  left: -20px;
  bottom: -20px;
}
@media screen and (max-width: 600px) {
  .content .calendar .ui-datepicker-header {
    margin-bottom: 15px;
  }
}
.content .calendar tr th {
  font: 400 20px/1em 'Aleo', Arial, sans-serif;
  color: #274533;
  line-height: 30px;
  text-align: center;
  padding-bottom: 10px;
}
.content .calendar tr td.ui-datepicker-other-month {
  color: #FFFFFF;
  opacity: 0.5;
}
.content .calendar .ui-datepicker-next.ui-state-disabled span::before,
.content .calendar .ui-datepicker-prev.ui-state-disabled span::before {
  color: #FFFFFF;
}
.content .calendar .ui-datepicker-next span:hover,
.content .calendar .ui-datepicker-prev span:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), #628771;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #628771;
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage elements styles
 * @author     gueldner
 * @since      18.06.2014
 * @version    $Id$
 **/
/*  =========================================================
buttons
checkboxes and radios
inputs and labels
copyright on images
socialShareBanner
socialShareRow
media gallery
content forms
hotel rating iframe
hotel price information
fullscreen map
lottery anwser
========================================================== */
/*  =========================================================
buttons
========================================================= */
@media screen {
  .button {
    display: inline-block;
    height: 45px;
    padding: 10px;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 13px;
            border-radius: 13px;
    font: 700 normal 16px 'Max', Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #274533;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  }
  .button > [class^='icon-'] {
    vertical-align: middle;
    font-size: 25px;
    line-height: 25px;
    text-decoration: none;
  }
  .button--cta {
    background: #ff8a00;
  }
  .button--light {
    background: #fff;
    color: #274533;
  }
  .button--leftText > [class^='icon-'] {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px rgba(255, 255, 255, 0.5) solid;
  }
  .button--rightText > [class^='icon-'] {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px rgba(255, 255, 255, 0.5) solid;
  }
  .button--light > [class^='icon-'] {
    border-color: rgba(42, 56, 65, 0.5);
  }
  .button--noBorder {
    border: none;
  }
}
@media screen and (max-width: 600px) {
  .button {
    font-size: 14px;
  }
}
/*  =========================================================
checkboxes and radios
========================================================= */
@media screen {
  input.hidden[type=checkbox],
  input.hidden[type=radio] {
    opacity: 0;
    position: absolute;
  }
  input.styled[type=checkbox] {
    opacity: 0;
    position: absolute;
  }
  input.styled[type=checkbox] + label {
    display: inline-block;
    padding-left: 25px;
  }
  input.styled[type=checkbox] + label > [class^='icon-'] {
    background: transparent;
    border: 3px #fff solid;
    font-size: 14px;
    color: transparent;
    margin-right: 5px;
    margin-left: -25px;
  }
  input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    background: #fff;
    border-color: #fff;
    color: #333;
  }
  input.styled[type=radio] {
    opacity: 0;
    position: absolute;
  }
  input.styled[type=radio] + label {
    display: inline-block;
    padding-left: 25px;
  }
  input.styled[type=radio] + label:before:not(.lotteryTopicBox) {
    content: ' ';
    display: inline-block;
    vertical-align: bottom;
    width: 12px;
    height: 12px;
    background: transparent;
    border: 4px #fff solid;
    margin-right: 5px;
    margin-left: -25px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
  }
  input.styled[type=radio]:checked + label:before {
    background: #fff;
    border-color: transparent;
  }
}
/*  =========================================================
inputs and labels
========================================================= */
@media screen {
  /* label for text input fields */
  div > label.default {
    font: 400 normal 14px 'Max', Arial, sans-serif;
    display: block;
    margin-bottom: 3px;
    padding-left: 5px;
  }
  /* label for checkboxes and radio buttons */
  span > label.default {
    font: 400 normal 16px 'Max', Arial, sans-serif;
  }
  /*input styles*/
  input[type=text].default,
  select.default,
  textarea.default {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: none;
    font: 400 normal 16px 'Max', Arial, sans-serif;
    background: #fff;
    color: #333;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
            box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
  }
  input[type=email].default {
    -webkit-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
            box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
  }
  input[type=text].default,
  select.default {
    height: 30px;
  }
  input[type=text].default {
    padding: 0px 10px;
  }
  select.default {
    padding: 3px 5px 4px 10px;
  }
  textarea.default {
    padding: 5px 10px;
  }
  input[type=text].calendar {
    background: #fff url('../images/foehr/icons/calendar.f5c8433b.svg') 98% 50% no-repeat;
    background-size: 30px;
  }
  input[type=text].autocomplete {
    background: #fff url('../images/foehr/icons/pencil.154eb004.svg') 98% 50% no-repeat;
    background-size: 25px;
  }
}
@media screen and (max-width: 600px) {
  input[type=text].default,
  select.default,
  textarea.default {
    font-size: 14px;
  }
}
/*  =========================================================
copyright on images
========================================================= */
@media screen {
  .image {
    position: relative;
  }
  .image span.copyright {
    right: 5px;
    font: 400 normal 10px Arial, sans-serif;
  }
  .copyright {
    display: block;
    padding: 1px 3px;
    position: absolute;
    top: -7px;
    right: 10px;
    z-index: 1;
    font: 400 normal 10px Arial, sans-serif;
    text-align: left;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
  }
}
@media screen and (max-width: 1200px) {
  .image span.copyright {
    max-width: 50%;
  }
}
/*  =========================================================
socialShareBanner
========================================================= */
@media screen {
  .socialShareBanner {
    width: 100%;
    background: #3B664C;
    position: relative;
    z-index: 2;
  }
  .socialShareBanner > h2 {
    font: 700 normal 50px/45px 'Daniel';
    color: #fff;
    background: #3B664C;
    padding: 20px;
    margin: -60px 7.8125% /*100/1280*/ 0px 7.8125% /*100/1280*/;
    display: inline-block;
    -webkit-border-top-left-radius: 20px;
            border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
            border-top-right-radius: 20px;
  }
  .socialShareBanner > p {
    font: 400 normal 20px/30px 'Max', Arial, sans-serif;
    color: #fff;
    padding: 0px 7.8125% /*100/1280*/;
    margin: 0px 0px 5px 0px;
  }
  .socialShareBanner > a {
    display: inline-block;
    width: 70px;
    margin: 0px 1px 0px 0px;
    text-decoration: none;
    position: relative;
    top: 30px;
    overflow: hidden;
  }
  .socialShareBanner > a:first-of-type {
    -webkit-border-top-left-radius: 20px;
            border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
            border-bottom-left-radius: 20px;
  }
  .socialShareBanner > a:last-of-type {
    -webkit-border-top-right-radius: 20px;
            border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
            border-bottom-right-radius: 20px;
  }
  .socialShareBanner > a > [class^='icon'] {
    width: 100%;
    height: 0px;
    padding: 21.4285% /*15/70*/ 0px 85.714% /*60/70*/ 0px;
    font-size: 50px;
    color: #274533;
    background: #fff;
    display: block;
    -webkit-transition: background .5s ease, color 0.75s ease;
    transition: background .5s ease, color 0.75s ease;
  }
  .socialShareBanner > a > .counter {
    width: 100%;
    height: 0px;
    padding: 7.142% /*5/70*/ 0px 35.714% /*25/70*/ 0px;
    font: 700 normal 16px Arial, sans-serif;
    color: #fff;
    background: #274533;
    display: block;
  }
  .socialShareBanner > a:active > [class^='icon'],
  .socialShareBanner > a:focus > [class^='icon'],
  .socialShareBanner > a:hover > [class^='icon'] {
    color: #fff;
    background: #274533;
  }
}
@media screen and (max-width: 1000px) {
  .socialShareBanner {
    display: none;
  }
}
/*  =========================================================
socialShareRow
========================================================= */
@media screen {
  .socialShareRow {
    text-align: center;
    width: 100%;
    margin: 50px 0px;
  }
  .socialShareRow > h4 {
    font: 700 normal 35px 'Daniel';
    color: #274533;
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
  }
  .socialShareRow > a {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 0px 5px 10px;
    text-decoration: none;
    background: #274533;
    -webkit-border-radius: 10px;
            border-radius: 10px;
  }
  .socialShareRow > a > [class^='icon'],
  .socialShareRow > a > .counter {
    display: inline-block;
    vertical-align: middle;
  }
  .socialShareRow > a > [class^='icon'] {
    font-size: 35px;
    color: #fff;
    margin: 0px 0px 0px 5px;
  }
  .socialShareRow > a > .counter {
    height: 100%;
    padding: 5px 10px;
    margin: 5px;
    background: #fff;
    color: #274533;
    font: 700 normal 16px Arial, sans-serif;
    -webkit-border-radius: 10px;
            border-radius: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .socialShareRow > h4 {
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  /*  .socialShareRow{ text-align: left;}*/
  .socialShareRow > h4 {
    display: none;
  }
}
/*  =========================================================
media gallery
========================================================= */
@media screen {
  .mediaGallery {
    overflow: hidden;
    position: relative;
    height: 480px;
    margin-bottom: 8.334%;
    /*100/1200*/
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .mediaGallery > .mediaCollection {
    height: 100%;
  }
  .mediaGallery > .mediaCollection > .image {
    float: left;
    height: 100%;
    overflow: hidden;
    text-align: center;
  }
  .mediaGallery > .mediaCollection > .image > picture,
  .mediaGallery > .mediaCollection > .image > noscript {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mediaGallery > .mediaCollection > .image img {
    height: 100%;
    width: auto;
    max-height: 480px;
  }
  .mediaGallery > .mediaCollection > .image > .button {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
}
@media screen and (max-width: 600px) {
  .mediaGallery {
    margin-bottom: 8%;
  }
}
@media screen {
  .mediaGallery__paginationDots {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    text-align: center;
  }
  .mediaGallery__paginationDots > a {
    color: #fff;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    margin: 0px 6px;
    -webkit-transition: font-size 0.25s ease;
    transition: font-size 0.25s ease;
  }
  .mediaGallery__paginationDots > a.active {
    font-size: 25px;
  }
}
/*  =========================================================
content forms
========================================================= */
@media screen {
  .contentForm {
    padding-bottom: 50px;
  }
  .contentForm,
  .contentForm > [class*='g-element'] {
    position: relative;
  }
  .contentForm > .background {
    background: #CDD9CD;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .contentForm fieldset,
  .contentForm div.border {
    border: none;
    margin: 20px 20px 10px 20px;
    padding: 0px;
  }
  .contentForm fieldset.border,
  .contentForm div.border {
    border-top: 1px #fff solid;
    padding-top: 20px;
  }
  .contentForm fieldset > legend {
    display: none;
  }
  .contentForm fieldset > div {
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 20px;
  }
  .contentForm p {
    font: 400 normal 14px 'Max';
    color: #274533;
    margin: 0px;
  }
  .contentForm button[type=submit] {
    float: right;
  }
  .contentForm fieldset > div.half {
    vertical-align: top;
    width: 50%;
  }
  .contentForm fieldset > div.half:nth-of-type(2n) {
    padding-right: 5px;
  }
  .contentForm fieldset > div.half:nth-of-type(2n+1) {
    padding-left: 5px;
  }
  .contentForm fieldset > div.full {
    width: 100%;
  }
  .contentForm fieldset > div.threeQuarter {
    vertical-align: top;
    width: 75%;
    padding-left: 10px;
  }
  .contentForm fieldset > div.quarter {
    vertical-align: top;
    width: 25%;
  }
  .contentForm fieldset > div.eighths {
    vertical-align: top;
    width: 12.5%;
  }
  .contentForm fieldset > div.eighths.rightPadding {
    vertical-align: top;
    width: 12.5%;
    padding-right: 10px;
  }
  .contentForm fieldset > div > label {
    font: 400 normal 14px 'Max';
    display: block;
    margin-bottom: 3px;
    padding-left: 5px;
  }
  .contentForm fieldset label {
    color: #274533;
  }
  .contentForm fieldset > div > input[type=text] {
    height: 40px;
  }
  .contentForm fieldset > div > input[type='text'],
  .contentForm fieldset > div > select,
  .contentForm fieldset > div > textarea {
    width: 100%;
    resize: vertical;
  }
  .contentForm fieldset > div > textarea {
    height: 275px;
  }
  .contentForm fieldset > div > select {
    height: 40px;
    padding-top: 10px;
  }
  .contentForm fieldset .background {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    min-height: 75px;
  }
  .contentForm fieldset .background > p {
    font: 400 normal 16px/20px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0px 0px 5px 0px;
  }
  .contentForm fieldset .background > p > strong {
    font-weight: 700;
  }
  .contentForm input.styled[type=checkbox] + label {
    margin-bottom: 20px;
  }
  .contentForm input.styled[type=checkbox] + label > strong {
    font-weight: 700;
  }
}
@media screen and (max-width: 900px) {
  .contentForm p {
    margin-bottom: 10px;
  }
  .contentForm fieldset > div > textarea {
    height: 400px;
  }
}
@media screen and (max-width: 600px) {
  .contentForm fieldset > div {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 10px;
  }
  .contentForm fieldset > div > textarea {
    height: 200px;
  }
}
/*  =========================================================
hotel rating iframe
========================================================= */
@media screen {
  .ratingiFrame {
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  .ratingiFrame {
    display: none;
  }
}
/*  =========================================================
hotel price information
========================================================= */
@media screen {
  .priceInformation {
    width: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), #628771;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #628771;
    border-bottom: #4F765E 45px solid;
    position: relative;
    z-index: 1;
    padding: 25px 0 15px 0;
  }
  .priceInformation .infoText {
    font: 400 italic 20px/20px 'Max';
    color: #3B664C;
    display: block;
    text-align: center;
    margin: 0;
    text-shadow: none;
  }
  .priceInformation .infoText.smaller {
    font-size: 16px;
  }
  .priceInformation .priceTag {
    font: 700 italic 50px 'Max';
    color: #3B664C;
    letter-spacing: -5px;
    text-align: center;
    margin: 10px 0 5px 0;
    padding: 0;
    text-shadow: none;
  }
  .priceInformationButton {
    text-align: center;
    margin-top: -25px;
    position: relative;
    z-index: 2;
  }
  .priceInformationButton .button {
    padding: 22px 10px 30px 10px;
  }
}
/*  =========================================================
fullscreen map
========================================================= */
@media screen {
  #fullscreenMapContainer {
    width: 100%;
    height: 650px;
    position: relative;
  }
  .mapTypeSwitch {
    top: 20px;
    right: 20px;
    position: absolute;
  }
  .mapTypeSwitch a {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    text-decoration: none;
    padding: 10px;
    margin: 2px;
    background: #fff;
    color: #31483B;
    float: left;
  }
  .mapTypeSwitch a.active {
    border: 2px #fff solid;
    padding: 8px;
    background: transparent;
    color: #fff;
  }
  #fullscreenMapContainer .gmnoprint .gm-style-mtc {
    display: none;
  }
  #fullscreenMap {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 600px) {
  .mapTypeSwitch {
    display: none;
  }
}
@media screen {
  .siteHeader__function.siteHeader__functionFoehr {
    background: #274533;
  }
  #siteHeader__functions > ul > li > a.siteHeader__function:hover.siteHeader__functionFoehr:hover {
    background: #ff8a00;
  }
}
@media screen and (min-width: 1401px) {
  #siteHeader[data-offCanvasVisible='siteHeader__functions__mapInfoboard'] + #fullscreenMapContainer {
    width: 65%;
    margin-left: 35%;
  }
}
@media screen and (max-width: 1400px) and (min-width: 901px) {
  #siteHeader[data-offCanvasVisible='siteHeader__functions__mapInfoboard'] + #fullscreenMapContainer {
    width: 50%;
    margin-left: 50%;
  }
}
@media screen and (max-width: 901px) {
  #siteHeader[data-offCanvasVisible='siteHeader__functions__mapInfoboard'] + #fullscreenMapContainer {
    display: none;
  }
}
/*  =========================================================
lottery anwser
========================================================= */
@media screen {
  #lottery-answer > form {
    background: #3B664C;
  }
}
/* radio buttons */
@media screen {
  #lottery-answer > form > [type='radio'] + label {
    font: 400 normal 20px/24px 'Max';
    color: #fff;
  }
  #lottery-answer > form > [type='radio'] + label {
    font: 400 normal 20px/24px 'Max';
    color: f000;
  }
  #lottery-answer > form > [type='radio'] + label:before {
    color: #3B664C;
    width: 13px;
    height: 13px;
    font: 400 normal 14px/15px 'icomoon';
  }
  #lottery-answer > form > [type='radio']:checked + label:before {
    color: #333;
  }
  .lotteryTopicImages,
  #lottery-answer > form {
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  h1#competitionTitle {
    font-size: 65px;
  }
  span.conditionsSpan {
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #274533;
    cursor: pointer;
  }
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage listelement and text styles
 * @author     bruetsch
 * @since      01.07.2014
 * @version    $Id$
 **/
/*  =========================================================
baselist - general styling
baselist - image container
baselist - text container
baselist - text container - headlines
baselist - text container - content text
basisliste - info element
bestOf liste
columned liste
trustyou
========================================================== */
/*  =========================================================
baselist - general styling
========================================================= */
@media screen {
  .listelement {
    height: auto;
  }
  .listelement .pictograms {
    margin: 10px 0 0 0;
  }
  .listelement .pictograms .img-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 5px 0 0;
  }
  .listelement .pictograms .img-icon img {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 900px) {
  .listelement.g-element-md-6:nth-of-type(2n+1) {
    clear: both;
  }
}
@media screen and (min-width: 421px) {
  .listelement {
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 420px) {
  .listelement {
    margin-bottom: 50px;
  }
}
/*  =========================================================
baselist - image container
========================================================= */
@media screen {
  .listelement > .listelementImage {
    display: inline-block;
  }
}
@media screen and (min-width: 901px) {
  .listelement:not(.g-element-4) > .listelement > .listelementImage {
    width: 31.25% /*375/1200*/;
    margin-right: 2.083%;
  }
  .listelement.g-element-4 > .listelement > .listelementImage {
    width: 100%;
    margin-right: 0%;
  }
}
@media screen and (max-width: 900px) {
  .listelement > .listelementImage {
    margin-right: 3.9%;
    margin-bottom: 15px;
    width: 100%;
  }
}
@media screen and (max-width: 420px) {
  .listelement > .listelementImage {
    margin-top: 45px;
  }
}
/* link styling */
@media screen {
  .listelement > .listelementImage > .image > a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    -webkit-border-radius: 15px;
            border-radius: 15px;
  }
  .listelement > .listelementImage > .image > a > img {
    width: 100%;
    display: block;
  }
}
/*  =========================================================
baselist - text container
========================================================= */
@media screen {
  .listelement > .listelementText {
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  .listelement:not(.g-element-4) > .listelementText {
    width: 64.583% /*775/1200*/;
  }
  .listelement:not(.g-element-4) > .listelementText.listelementText--widthBadges {
    width: -webkit-calc(64.583% - 185px);
    width: calc(64.583% - 185px);
    padding-right: 185px;
  }
  .listelement.g-element-4 > .listelementText {
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  .listelement > .listelementText {
    width: 100%;
    margin-bottom: 15px;
  }
}
/*  =========================================================
baselist - badges container
========================================================= */
@media screen {
  .listelement .listelementText__badges {
    top: 0;
  }
}
@media screen and (max-width: 900px) {
  .listelement .listelementText__badges {
    position: static;
  }
}
/*  =========================================================
baselist - text container - headlines
========================================================= */
@media screen {
  .listelement > .listelementText > h2 {
    font: 700 italic 30px 'Max';
    color: #3B664C;
    margin: 0 0 5px 0;
  }
  .listelement > .listelementText.listelementText--widthBadges > h2 {
    margin-right: 0;
  }
  .listelement > .listelementText > h2 > .info {
    height: 15px;
    width: 106px;
    display: inline-block;
  }
}
@media screen {
  .listelement > .listelementText > h2 > .info > .stars {
    display: inline-block;
    vertical-align: top;
    background: transparent url('../images/foehr/objects/hotelstarsList.a0ba4e9b.svg') 0px 0px no-repeat;
    background-size: cover;
    height: 100%;
    margin: 0px 10px;
  }
  .listelement > .listelementText > h2 > .info > .stars--zero {
    width: 0%;
  }
  .listelement > .listelementText > h2 > .info > .stars--one {
    width: 19%;
  }
  .listelement > .listelementText > h2 > .info > .stars--two {
    width: 41%;
  }
  .listelement > .listelementText > h2 > .info > .stars--three {
    width: 63%;
  }
  .listelement > .listelementText > h2 > .info > .stars--four {
    width: 81%;
  }
  .listelement > .listelementText > h2 > .info > .stars--five {
    width: 100%;
  }
}
/* headline above title */
@media screen {
  .listelement > .listelementText > h3 {
    font: 400 italic 20px 'Max', Arial, sans-serif;
    color: #274533;
    margin: 0 0 3px 0;
  }
  .listelement > .listelementText > h3 > .info {
    height: 10px;
    width: 72px;
    margin-left: 3px;
    display: inline-block;
  }
}
@media screen {
  .listelement > .listelementText > h3 > .info > .stars {
    display: inline-block;
    vertical-align: top;
    background: transparent url('../images/foehr/objects/hotelstarsList.a0ba4e9b.svg') 0 0 no-repeat;
    background-size: cover;
    height: 100%;
    margin: 0px 3px 0 0;
  }
  .listelement > .listelementText > h3 > .info > .stars--zero {
    width: 0%;
  }
  .listelement > .listelementText > h3 > .info > .stars--one {
    width: 19%;
  }
  .listelement > .listelementText > h3 > .info > .stars--two {
    width: 41%;
  }
  .listelement > .listelementText > h3 > .info > .stars--three {
    width: 63%;
  }
  .listelement > .listelementText > h3 > .info > .stars--four {
    width: 81%;
  }
  .listelement > .listelementText > h3 > .info > .stars--five {
    width: 100%;
  }
}
/* headline below title */
@media screen {
  .listelement > .listelementText > h4 {
    font: 700 italic 15px 'Max';
    color: #274533;
    margin: 0px 0px 10px 0px;
  }
}
@media screen and (max-width: 420px) {
  .listelement > .listelementText > h4 {
    font-size: 13px;
  }
}
/*  =========================================================
baselist - text container - content text
========================================================= */
@media screen {
  .listelement > .listelementText > p {
    font: 400 normal 18px/30px 'Max', Arial, sans-serif;
    color: #333;
  }
  .listelement:not(.g-element-4) > .listelementText > p {
    margin: 0px 0px 20px 0px;
  }
  .listelement.g-element-4 > .listelementText > p {
    margin: 0px 0px 10px 0px;
  }
  .listelement span {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 16px;
  }
  .listelement span.icon-locate {
    color: #FF8A00;
    padding: 0 0 10px;
    display: inline-block;
  }
  .bestOfList .bestOfListElement .icon-locate {
    font-size: 15px;
    color: #ffffff;
    position: relative;
    left: 75px;
    bottom: 10px;
  }
  .listelement .distanceCalc.invisible {
    visibility: hidden;
  }
  .listelement span .distance {
    font-family: 'Max';
    color: #000000;
  }
  .bestOfList .bestOfListElement .distanceCalc.invisible {
    visibility: hidden;
  }
  .bestOfList .bestOfListElement .icon-locate .distance {
    font-family: 'Max';
    padding-left: 5px;
  }
}
@media screen and (max-width: 420px) {
  .listelement > .listelementText > p {
    font-size: 16px;
  }
}
/* simple spaceKeeper on normal buttons */
@media screen and (min-width: 901px) {
  .listelement > .listelementText > .buttonspacing {
    margin-left: 2%;
  }
}
@media screen and (max-width: 900px) {
  .listelement > .listelementText > .buttonspacing {
    margin-top: 5px;
  }
}
@media screen and (max-width: 420px) {
  .listelement > .listelementText > .buttonspacing {
    margin-top: 10px;
  }
}
/*Styling for Pressimage*/
.content.pressimage {
  margin-bottom: 10%;
}
.teaser-image.g-element-3.g-element-md-4.g-element-sm-12.pressimages {
  min-height: 100%;
  max-height: 100%;
  margin-bottom: 5%;
}
@media screen and (max-width: 900px) {
  .teaser-image.g-element-3.g-element-md-4.g-element-sm-12.pressimages {
    margin-bottom: 10%;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image.g-element-3.g-element-md-4.g-element-sm-12.pressimages {
    margin-bottom: 15%;
  }
}
#formPressimage:not(.visible) {
  display: none;
}
.teaser-image.g-element-3.g-element-md-4.g-element-sm-12 .pressimages.mediaGallery {
  margin: 0;
  height: auto;
}
.teaser-image.g-element-3.g-element-md-4.g-element-sm-12 .pressimages.mediaGallery > .mediaCollection > .image > img {
  height: auto;
}
.listelement.g-element-3 > .listelementImage,
.listelement.g-element-3 > .listelementText {
  width: 100%;
  margin-right: 0;
}
.listelement.g-element-3 > .listelementText > p {
  margin-bottom: 10px;
}
.listelement.g-element-3 > .listelementButtons > span {
  display: block;
}
.listelement.g-element-3 {
  min-height: 630px;
  margin-bottom: 0;
}
.pressimage.fresco.button.button--light.button--leftText.imageGallery > span {
  border: none;
  margin: 0;
  padding: 0;
}
.listelement.g-element-3 > .listelementButtons {
  width: 100%;
  margin-right: 0%;
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
}
.listelement.pressimages .listelementButtons {
  width: auto;
}
.listelement.g-element-3 > .listelementButtons > span {
  display: block;
}
.listelement.g-element-3 > .listelementButtons > span > label.button {
  background: #31483B;
  border: 1px solid #fff;
  -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font: 400 16px 'Max', Arial, sans-serif;
  height: 50px;
  max-width: 100%;
  overflow: hidden;
  padding: 10px 10px 10px 35px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listelement.g-element-3 > .listelementButtons > a {
  font: 400 15px 'Max', Arial, sans-serif;
  display: block;
  margin-bottom: 10px;
}
.listelement.g-element-3 > .listelementButtons > a:last-of-type {
  margin-bottom: 20px;
}
.listelement.g-element-3 > .listelementButtons > span .icon-checkmark {
  padding-right: 0px;
  font-size: initial;
  margin-left: -20px;
  border-right: 3px #fff solid !important;
  background: transparent;
  border: 3px #fff solid;
  color: transparent;
  margin-right: 5px;
}
.listelement.g-element-3 > .listelementButtons > span > input[type=checkbox]:checked + label > [class^='icon-'] {
  color: initial;
}
/* styling for buttons on prospect listElements */
@media screen {
  .listelement.g-element-4 > .listelementButtons {
    width: 100%;
    margin-right: 0%;
    display: inline-block;
  }
  .listelement.g-element-4 > .listelementButtons > span {
    display: block;
  }
  .listelement.g-element-4 > .listelementButtons > span > label.button {
    background: #31483B;
    border: 1px solid #fff;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font: 400 16px 'Max', Arial, sans-serif;
    height: 50px;
    max-width: 100%;
    overflow: hidden;
    padding: 10px 10px 10px 35px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .listelement.g-element-4 > .listelementButtons > a {
    font: 400 15px 'Max', Arial, sans-serif;
    display: block;
    margin-bottom: 10px;
  }
  .listelement.g-element-4 > .listelementButtons > a:last-of-type {
    margin-bottom: 20px;
  }
  .listelement.g-element-4 > .listelementButtons > span .icon-checkmark {
    padding-right: 0px;
    font-size: initial;
    margin-left: -20px;
    border-right: 3px #fff solid !important;
    background: transparent;
    border: 3px #fff solid;
    color: transparent;
    margin-right: 5px;
  }
  .listelement.g-element-4 > .listelementButtons > span > input[type=checkbox]:checked + label > [class^='icon-'] {
    color: initial;
  }
}
/*  =========================================================
  basisliste - info element
========================================================= */
@media screen {
  .listelement > .listelementImage > .image > .info {
    padding: 8px 0px;
    position: absolute;
    left: -10px;
    top: 25px;
    z-index: 1;
    -webkit-border-top-right-radius: 10px;
            border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
            border-bottom-right-radius: 10px;
    background: #3B664C;
    height: initial;
    width: initial;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }
  .listelement > .listelementImage > .image > .info--green {
    background: #3baa34;
  }
  .teaser-image > a:hover ~ .info {
    opacity: 0;
  }
  .listelement > .listelementImage > .image > .info:before {
    font: 400 normal 15px 'icomoon';
    color: #274533;
    content: '\e600';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    -webkit-transform: rotateZ(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotateZ(-45deg);
    -webkit-transform-origin: -35% 20%;
        -ms-transform-origin: -35% 20%;
            transform-origin: -35% 20%;
  }
  .listelement > .listelementImage > .image > .info > p {
    font-weight: 400;
    font-style: normal;
    font-family: 'Max';
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}
/* info area - price */
@media screen {
  .listelement > .listelementImage > .image > .info > .price {
    font-weight: 700;
    font-size: 18px;
    margin: initial;
  }
}
/* info area - price */
@media screen {
  .listelement > .listelementImage > .image > .info > .onlineBookable {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin: initial;
  }
  .listelement > .listelementImage > .image > .info > .onlineBookable strong {
    display: block;
    font-weight: 700;
    font-size: 18px;
  }
}
/* info area - dates */
@media screen {
  .listelement > .listelementImage > .image > .info > .date {
    font-size: 14px;
    line-height: 1.28em;
    margin: initial;
    padding-top: initial;
  }
  .listelement > .listelementImage > .image > .info > .date > strong {
    font: inherit;
    font-size: 18px;
    font-weight: 700;
  }
}
/* info area - star ratings */
@media screen {
  .listelement > .listelementImage > .image > .info > .stars {
    background: transparent url('../images/objects/hotelstarsTeaser.svg') 0px 0px no-repeat;
    background-size: cover;
    height: 15px;
    margin: 0px 10px;
  }
  .listelement > .listelementImage > .image > .info > .stars--one {
    width: 20px;
  }
  .listelement > .listelementImage > .image > .info > .stars--two {
    width: 43px;
  }
  .listelement > .listelementImage > .image > .info > .stars--three {
    width: 66px;
  }
  .listelement > .listelementImage > .image > .info > .stars--four {
    width: 85px;
  }
  .listelement > .listelementImage > .image > .info > .stars--five {
    width: 106px;
  }
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px) {
  .listelement > .listelementImage > .image > .info > p {
    padding-left: 20px;
  }
  .listelement > .listelementImage > .image > .info {
    top: 25px;
  }
  .listelement > .listelementImage > .image > .info > .price {
    font-size: 16px;
  }
  .listelement > .listelementImage > .image > .info > .date {
    font-size: 10px;
    padding-top: 4px;
  }
  .listelement > .listelementImage > .image > .info > .date > strong {
    font-size: 14px;
  }
}
/*  =========================================================
bestOf liste
========================================================= */
/*basic styling*/
@media screen {
  .bestOfList .bestOfListElement {
    margin-bottom: 30px;
    border: 1px #3B664C solid;
    background: #fff;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 20px;
            border-radius: 20px;
    overflow: hidden;
  }
  #mapInfoBoard .bestOfList .bestOfListElement {
    border: 0;
  }
}
/*listelement head*/
@media screen {
  .bestOfList .bestOfListElement > .headline {
    background: #CDD9CD;
    text-decoration: none;
    display: block;
    position: relative;
    text-align: left;
  }
  .bestOfList .bestOfListElement > .headline > .number {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    font: 700 normal 35px/60px 'Daniel';
    color: #fff;
    text-align: center;
    width: 55px;
    height: 100%;
    background: #CDD9CD;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
    border-right: 1px solid #fff;
  }
  .bestOfList .bestOfListElement > .headline > .title {
    display: block;
    position: relative;
    font: 700 italic 30px/50px 'Max';
    color: #3B664C;
    margin: 0px;
    padding: 5px 0px 0px 75px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 600px) {
  .bestOfList .bestOfListElement > .headline > .number {
    font-size: 30px;
    line-height: 45px;
    width: 45px;
  }
  .bestOfList .bestOfListElement > .headline > .title {
    font-size: 30px;
    line-height: 35px;
    padding-left: 60px;
  }
}
/*listelement body*/
@media screen {
  .bestOfList .bestOfListElement > .body {
    background: #fff;
    text-align: left;
    display: none;
  }
  .bestOfList .bestOfListElement > .body > .image {
    width: 100%;
    height: 0px;
    padding-bottom: 65.21% /*375/575*/;
  }
  .bestOfList .bestOfListElement > .body > .image > img {
    width: 100%;
    height: auto;
  }
  .bestOfList .bestOfListElement > .body > .image > .button {
    position: absolute;
    bottom: 5px;
    z-index: 1;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonLink {
    right: 5px;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonMap {
    left: 5px;
    display: none;
  }
  .bestOfList .bestOfListElement > .body > p {
    font: 400 normal 18px/25px 'Max', Arial, sans-serif;
    color: #31483B;
    margin: 0px;
    padding: 5px 20px;
  }
}
@media screen and (max-width: 600px) {
  .bestOfList .bestOfListElement > .body > p {
    font-size: 16px;
    line-height: 22px;
  }
}
/*active style changes*/
@media screen {
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline {
    background: #274533;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline > .title {
    color: #fff;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .headline > .number {
    background: #274533;
    color: #fff;
  }
  .bestOfList .bestOfListElement > input[type=radio]:checked ~ .body {
    display: block;
  }
}
/*map styling*/
@media screen {
  .bestOfList .bestOfMap {
    width: 100%;
    height: 645px;
    position: relative;
  }
  .bestOfList .bestOfMap > div[id^='bestOfMap'] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .bestOfList .bestOfMap > .button {
    position: absolute;
    bottom: 23px;
    right: 47px;
  }
  .bestOfList .bestOfListElement > .headline > .corner {
    background: #31483B;
  }
}
@media screen and (max-width: 900px) {
  .bestOfList .bestOfMap {
    height: 500px;
    padding-top: 100px;
  }
  .bestOfList .bestOfListElement {
    margin-bottom: 20px;
  }
  .bestOfList .bestOfListElement > .headline > .corner {
    display: none !important;
  }
  .bestOfList .bestOfListElement > .body > .image > .buttonMap {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .bestOfList .bestOfMap {
    height: 300px;
    padding-top: 75px;
  }
  .bestOfList .openBigMap {
    display: none;
  }
}
/*  =========================================================
columned list
========================================================= */
@media screen {
  .columnedList ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
  }
  .columnedList li {
    font: 400 normal 18px 'Max', Arial, sans-serif;
    color: #fff;
    margin-bottom: 20px;
    padding-left: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .columnedList li:before {
    content: '\e61b';
    font: 400 normal 1em 'icomoon';
    margin-left: -30px;
    margin-right: 10px;
  }
  .columnedList .buttonArea {
    margin-top: 50px;
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  .columnedList li {
    font-size: 16px;
  }
}
@media screen and (min-width: 901px) {
  .columnedList li.g-element-3:not(.g-offset-1):nth-of-type(4n+1) {
    clear: both;
  }
  .columnedList li.g-element-3.g-offset-1:nth-of-type(3n+1) {
    clear: both;
  }
}
@media screen and (max-width: 900px) {
  .columnedList li.g-element-3:not(.g-offset-1):nth-of-type(2n+1) {
    clear: both;
  }
  .columnedList li.g-element-3.g-offset-1:nth-of-type(2n+1) {
    clear: both;
  }
}
@media screen {
  section.colored .columnedList li {
    background: none;
    overflow: visible;
    font: 400 normal 18px 'Max', Arial, sans-serif;
  }
}
/*  =========================================================
trustyou
========================================================= */
@media screen {
  /* override javascript set height */
  .trustYouCustom.leftElement {
    height: auto !important;
  }
}
/* rating text above graph */
@media screen {
  .trustYouCustom .ratingText {
    margin: 0px 0px 10px 0px !important;
  }
}
/* rating text below graph */
@media screen {
  /* value rating text below graph */
  .trustYouCustom .overallRating {
    display: inline-block;
    vertical-align: bottom;
    font: 400 normal 14px 'Max';
    color: #274533;
    padding-left: 5px;
    width: 65%;
  }
  /* bigger numeric text element */
  .trustYouCustom .rating {
    font-size: 25px !important;
    display: inline-block;
    margin: 10px 0px 0px 0px !important;
  }
  /* smaller text element */
  .trustYouCustom .overallRating .ratingOf {
    display: inline-block;
    padding: 0px 5px;
    margin-bottom: 0px !important;
  }
  /* small text below numeric rating */
  .trustYouCustom .overallRating .trustyouRating {
    margin: 0px 0px 10px 0px !important;
  }
  /* trustyou link below numeric rating */
  .trustYouCustom .overallRating a {
    color: #274533 !important;
    text-decoration: none;
    font-size: 14px;
  }
  .teaser-text.trustYouCustom > .text > h4 {
    font: 400 normal 22px 'Max', Arial, sans-serif;
  }
}
/* rating graph */
@media screen {
  /* container for the rating stripes */
  .trustYouCustom .ratingGraphContainer {
    display: block;
    width: 100%;
    height: 13px;
    background: #e5e5e5;
    padding-left: 1%;
    padding-top: 2px;
  }
  /* single rating element */
  .trustYouCustom .ratingGraphElement {
    display: inline-block;
    width: 9%;
    height: 11px;
    background: #25a21c;
  }
  .trustYouCustom .ratingGraphElement:not(:last-of-type) {
    margin-right: 1%;
  }
}
/* list elements on right side */
@media screen {
  .trustYouCustom .trustYouListElement:not(:last-of-type) {
    border-bottom: 1px solid #333;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .trustYouCustom .trustYouListElement p {
    display: inline-block;
    font: 400 normal 18px/28px 'Max';
    color: #274533;
    margin: 0px;
  }
  .trustYouCustom .trustYouListElement .score {
    width: 20%;
    display: inline-block;
    vertical-align: top;
  }
  .trustYouCustom .trustYouListElement .firstScore {
    font: 400 normal 40px 'Max';
    color: #274533;
  }
  .trustYouCustom .trustYouListElement .customerRating {
    width: 75%;
    display: inline-block;
    vertical-align: top;
  }
  .trustYouCustom .trustYouListElement .customerRating .customerData {
    font-size: 14px;
    margin: 0px 0px 10px 0px;
  }
  .trustYouCustom .trustYouListElement .customerRating a {
    font: 400 normal 14px 'Max';
    color: #274533;
    margin-top: 10px;
    display: block;
  }
  .trustYouCustom .trustYouListElement .customerRating h2 {
    color: #274533;
    font: 400 30px 'Max';
    margin: 0 0 5px;
  }
  .trustYouCustom.leftElement li {
    background: initial !important;
  }
}
@media screen and (max-width: 320px) {
  .trustYouCustom .trustYouListElement .firstScore {
    font: 400 normal 25px 'Max';
    color: #274533;
  }
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage various teaser styles
 * @author     gueldner
 * @since      23.06.2014
 * @version    $Id$
 **/
/*  =========================================================
teaser-image
teaser-fullWidth
teaser-roomSearch
teaser-text
teaser-map
tour-map
teaser-press
========================================================== */
/*  =========================================================
teaser-image
========================================================= */
/* basic styling */
@media screen {
  .teaser-image {
    margin-bottom: 2.083%;
    position: relative;
  }
  .teaser-image > .badge.badge--videoButton > img {
    width: 41.333%;
  }
  .teaser-image a {
    z-index: 2;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image {
    margin-bottom: 8%;
  }
}
/* button overrides */
@media screen {
  .teaser-image > .image > .button,
  .teaser-image > .button {
    position: absolute;
    bottom: 6px;
    right: 10px;
    padding: 5px;
    height: 33px;
    z-index: 1;
    -webkit-border-radius: 10px;
            border-radius: 10px;
  }
  .teaser-image > .image > .button > [class^='icon-'],
  .teaser-image > .button > [class^='icon-'] {
    font-size: 20px;
    line-height: 23px;
  }
}
/* info area - general styling */
@media screen {
  .teaser-image > .info {
    padding: 20px 0px;
    position: absolute;
    left: -10px;
    top: 45px;
    z-index: 1;
    -webkit-border-top-right-radius: 10px;
            border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
            border-bottom-right-radius: 10px;
    background: #40835A;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }
  .teaser-image > a:hover ~ .info {
    opacity: 0;
  }
  .teaser-image > .info:before {
    font: 400 normal 15px 'icomoon';
    color: #274533;
    content: '\e600';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    -webkit-transform: rotateZ(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotateZ(-45deg);
    -webkit-transform-origin: -35% 20%;
        -ms-transform-origin: -35% 20%;
            transform-origin: -35% 20%;
  }
  .teaser-image > .info > p {
    font-weight: 400;
    font-style: normal;
    font-family: 'Max';
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
  }
}
/* info area - price */
@media screen {
  .teaser-image > .info > .price {
    font-weight: 700;
    font-size: 18px;
  }
}
/* info area - dates */
@media screen {
  .teaser-image > .info > .date {
    font-size: 14px;
    line-height: 1.28em;
  }
  .teaser-image > .info > .date > strong {
    font: inherit;
    font-size: 18px;
    font-weight: 700;
  }
}
/* info area - star ratings */
@media screen {
  .teaser-image > .info > .stars {
    background: transparent url('../images/objects/hotelstarsTeaser.svg') 0px 0px no-repeat;
    background-size: cover;
    height: 15px;
    margin: 0px 10px;
  }
  .teaser-image > .info > .stars--one {
    width: 20px;
  }
  .teaser-image > .info > .stars--two {
    width: 43px;
  }
  .teaser-image > .info > .stars--three {
    width: 66px;
  }
  .teaser-image > .info > .stars--four {
    width: 85px;
  }
  .teaser-image > .info > .stars--five {
    width: 106px;
  }
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px) {
  .teaser-image > .info > p {
    padding-left: 20px;
  }
  .teaser-image > .info {
    top: 25px;
  }
  .teaser-image > .info > .price {
    font-size: 16px;
  }
  .teaser-image > .info > .date {
    font-size: 10px;
    padding-top: 4px;
  }
  .teaser-image > .info > .date > strong {
    font-size: 14px;
  }
}
/* image styling */
@media screen {
  .teaser-image > .image {
    width: 100%;
    height: 0px;
    display: block;
    overflow: hidden;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    /*ranslateZ(0) is needed to prevent showing the corners while transforming*/
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
  }
  .teaser-image > .image > img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  html.no-touch .teaser-image > .image > img {
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
  /*hover states*/
  html.no-touch .teaser-image:active > .image > img,
  html.no-touch .teaser-image:focus > .image > img,
  html.no-touch .teaser-image:hover > .image > img,
  html.no-touch .teaser-image > a:active ~ .image > img,
  html.no-touch .teaser-image > a:focus ~ .image > img,
  html.no-touch .teaser-image > a:hover ~ .image > img {
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
  }
  /*height infos*/
  .teaser-image.g-element-3 > .image {
    padding-bottom: 100%;
  }
  .teaser-image.g-element-6 > .image {
    padding-bottom: 47.82% /*275/575*/;
  }
  .teaser-image.g-element-9 > .image {
    padding-bottom: 31.43% /*275/875*/;
  }
  .teaser-image.g-element-4 > .image {
    padding-bottom: 100%;
  }
  .teaser-image.g-element-8 > .image {
    padding-bottom: 48.38% /*375/775*/;
  }
  .teaser-image.g-element-12 > .image {
    padding-bottom: 31.91% /*375/1175*/;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image > .image {
    padding-bottom: 100%;
  }
}
/* add logo to teaser */
@media screen {
  .teaser-image.teaser-image--highlight > .image:after {
    content: '';
    background: url('../images/foehr/environment/logoBadge.a648015e.svg') 0px 0px no-repeat;
    background-size: contain;
    position: absolute;
    display: inline-block;
  }
}
@media screen and (min-width: 901px) {
  .teaser-image.teaser-image--highlight.g-element-4 > .image:after,
  .teaser-image.teaser-image--highlight.g-element-8 > .image:after,
  .teaser-image.teaser-image--highlight.g-element-12 > .image:after {
    width: 88px;
    height: 74px;
    top: 5px;
    left: 5px;
  }
  .teaser-image.teaser-image--highlight.g-element-3 > .image:after,
  .teaser-image.teaser-image--highlight.g-element-6 > .image:after,
  .teaser-image.teaser-image--highlight.g-element-9 > .image:after {
    width: 56px;
    height: 47px;
    top: 15px;
    left: 15px;
  }
}
@media screen and (max-width: 900px) {
  .teaser-image.teaser-image--highlight > .image:after {
    width: 56px;
    height: 47px;
    top: 15px;
    left: 15px;
  }
}
/* title for text teaser */
@media screen {
  .teaser-image > .image > .text,
  .listelement.pressimages > .listelementImage .image > .text {
    position: absolute;
    bottom: 0px;
    left: 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 18px 60px 12px 20px;
    font: 700 italic 220%/1em 'Max', Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    transform-origin: bottom;
    -moz-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
  }
  /*color stylings*/
  .teaser-image > .image > .text,
  .listelement.pressimages > .listelementImage .image > .text {
    background: rgba(64, 131, 90, 0.9);
  }
  .teaser-image.teaser--normal > .image > .text {
    background: rgba(59, 102, 76, 0.9);
  }
  .teaser-image.teaser--dark > .image > .text {
    background: rgba(39, 69, 51, 0.9);
  }
  /*hover states*/
  .teaser-image:active > .image > .text,
  .teaser-image:focus > .image > .text,
  .teaser-image:hover > .image > .text,
  .teaser-image > a:active ~ .image > .text,
  .teaser-image > a:focus ~ .image > .text,
  .teaser-image > a:hover ~ .image > .text {
    transform: rotate3d(1, 0, 0, 90deg);
    -moz-transform: rotate3d(1, 0, 0, 90deg);
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
    -ms-transform: rotate3d(1, 0, 0, 90deg);
  }
}
@media screen and (max-width: 600px) {
  .teaser-image > .image > .text,
  .listelement.pressimages > .listelementImage .image > .text {
    padding: 10px 75px 10px 10px;
  }
}
/*text overlay*/
@media screen {
  .teaser-image > .overlay,
  .overlay.pressImage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    text-align: center;
    transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out;
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .teaser-image > .overlay,
  .overlay.pressImage {
    background: rgba(64, 131, 90, 0.9);
  }
  .teaser-image.teaser--normal > .overlay {
    background: rgba(59, 102, 76, 0.9);
  }
  .teaser-image.teaser--dark > .overlay {
    background: rgba(39, 69, 51, 0.9);
  }
  .teaser-image > .overlay > .text,
  .overlay.pressImage > .text {
    display: inline-block;
    vertical-align: middle;
    padding: 30px;
    text-align: center;
  }
  .teaser-image > .overlay > .text > h3,
  .overlay.pressImage > .text > h3 {
    font: 700 italic 220% 'Max', Arial, sans-serif;
    color: #fff;
    margin: 0px 0px 20px 0px;
  }
  .teaser-image > .overlay > .text > p,
  .overlay.pressImage > .text > p {
    font: 400 normal 180%/1.38em 'Max', Arial, sans-serif;
    color: #fff;
    margin: 0px;
  }
  .teaser-image > .overlay > .text > *,
  .overlay.pressImage > .text > * {
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
}
/* hover states */
@media screen {
  html.no-touch .listelement.pressimages .image > img {
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
  }
  html.no-touch .listelement.pressimages:active .image > img,
  html.no-touch .listelement.pressimages:focus .image > img,
  html.no-touch .listelement.pressimages:hover .image > img,
  html.no-touch .listelement.pressimages .pressimages.mediaGallery:active ~ .image > img,
  html.no-touch .listelement.pressimages .pressimages.mediaGallery:focus ~ .image > img,
  html.no-touch .listelement.pressimages .pressimages.mediaGallery:hover ~ .image > img {
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
  }
  .listelement.pressimages:active .overlay.pressImage,
  .listelement.pressimages:focus .overlay.pressImage,
  .listelement.pressimages:hover .overlay.pressImage {
    opacity: 1;
  }
  .listelement.pressimages:active .overlay.pressImage .text > *,
  .listelement.pressimages:focus .overlay.pressImage .text > *,
  .listelement.pressimages:hover .overlay.pressImage .text > * {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  .teaser-image:active > .overlay,
  .teaser-image:focus > .overlay,
  .teaser-image:hover > .overlay,
  .teaser-image > a:active ~ .overlay,
  .teaser-image > a:focus ~ .overlay,
  .teaser-image > a:hover ~ .overlay {
    opacity: 1;
  }
  .teaser-image:active > .overlay > .text > *,
  .teaser-image:focus > .overlay > .text > *,
  .teaser-image:hover > .overlay > .text > *,
  .teaser-image > a:active ~ .overlay > .text > *,
  .teaser-image > a:focus ~ .overlay > .text > *,
  .teaser-image > a:hover ~ .overlay > .text > * {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  /*font size settings for different g-element teaser variations*/
  .teaser-image.g-element-3,
  .teaser-image.g-element-6,
  .teaser-image.g-element-9 {
    font-size: 80%;
  }
  .teaser-image.g-element-4,
  .teaser-image.g-element-8,
  .teaser-image.g-element-12 {
    font-size: 100%;
  }
}
@media screen and (max-width: 1100px) {
  .teaser-image.g-element-3 .text > p {
    display: none;
  }
}
@media screen and (max-width: 1000px) and (min-width: 901px) {
  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8,
  .listelement.pressimages.g-element-md-4,
  .listelement.pressimages.g-element-md-8 {
    font-size: 65%;
  }
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12 {
    font-size: 75%;
  }
}
@media screen and (max-width: 900px) {
  .teaser-image.g-element-md-4 > .image,
  .listelement.pressimages.g-element-md-4 > .image {
    padding-bottom: 100%;
  }
  .teaser-image.g-element-md-8 > .image {
    padding-bottom: 48.38% /*375/775*/;
  }
  .teaser-image.g-element-md-6 > .image {
    padding-bottom: 100%;
  }
  .teaser-image.g-element-md-12 > .image {
    padding-bottom: 48.38% /*375/775*/;
  }
  .teaser-image > .overlay > .text > p,
  .overlay.pressImage > .text > p {
    display: block;
  }
  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8,
  .listelement.pressimages.g-element-md-4,
  .listelement.pressimages.g-element-md-8 {
    font-size: 75%;
  }
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12 {
    font-size: 100%;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image[class*='g-element'] > .image {
    padding-bottom: 100%;
  }
}
@media screen and (max-width: 750px) {
  .teaser-image.g-element-md-4 .text > p {
    display: none;
  }
  .teaser-image.g-element-md-4,
  .teaser-image.g-element-md-8m,
  .listelement.pressimages.g-element-md-4,
  .listelement.pressimages.g-element-md-8 {
    font-size: 65%;
  }
  .teaser-image.g-element-md-6,
  .teaser-image.g-element-md-12 {
    font-size: 75%;
  }
}
@media screen and (max-width: 600px) {
  .teaser-image > .overlay > .text > p,
  .overlay.pressImage > .text > p {
    display: block;
  }
  .teaser-image.g-element-sm-12 {
    font-size: 100%;
  }
}
@media screen and (max-width: 400px) {
  .teaser-image.g-element-sm-12 {
    font-size: 75%;
  }
}
/*  =========================================================
teaser-fullWidth
========================================================= */
/*basic styling*/
@media screen {
  .teaser-fullWidth {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .teaser-fullWidth > .content {
    position: relative;
  }
  .teaser-fullWidth .image {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 600px) {
  /*add margin to the bottom to spare place for other fullWidth teaser*/
  .teaser-fullWidth {
    padding-top: 0px;
    margin-bottom: 8%;
  }
  .teaser-fullWidth .image {
    display: none;
  }
}
/*big title*/
@media screen {
  /*big title in image*/
  .teaser-fullWidth > .content > h2 {
    position: absolute;
    bottom: 120px;
    left: 2.5%;
    font: 700 normal 36px/70px 'Daniel';
    color: #fff;
    text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
    text-align: left;
  }
  .teaser-fullWidth > .content > h2 > strong {
    font: inherit;
    font-size: 76px;
    display: block;
    margin-left: 5%;
  }
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px) {
  /*smaller text on smaler displays*/
  .teaser-fullWidth > .content > h2 {
    font-size: 30px;
  }
  .teaser-fullWidth > .content > h2 > strong {
    font-size: 60px;
    line-height: 55px;
  }
}
@media screen and (max-width: 900px) {
  /*reposition title on small screens*/
  .teaser-fullWidth > .content > h2 {
    position: absolute;
    bottom: auto;
    left: 2.5%;
    top: 0px;
  }
}
@media screen and (max-width: 600px) {
  /*big title in image*/
  .teaser-fullWidth > .content > h2 {
    display: none;
  }
}
/* content styles for an article */
@media screen {
  .teaser-fullWidth article {
    padding: 0px 20px 20px 20px;
    margin-top: 65px;
    margin-bottom: 65px;
    position: relative;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    overflow: hidden;
  }
  .teaser-fullWidth article h3:first-of-type {
    font: 700 italic 22px/1em 'Max', Arial, sans-serif;
    color: #fff;
    padding: 20px 75px 17px 20px;
    margin: 0px -20px 20px -20px;
    background: rgba(0, 0, 0, 0.25);
  }
}
@media screen and (min-width: 601px) {
  .teaser-fullWidth article {
    background: rgba(64, 131, 90, 0.9);
  }
  .teaser-fullWidth.teaser--normal article {
    background: rgba(59, 102, 76, 0.9);
  }
  .teaser-fullWidth.teaser--dark article {
    background: rgba(39, 69, 51, 0.9);
  }
}
@media screen and (max-width: 600px) {
  .teaser-fullWidth article {
    background: #40835A;
  }
  .teaser-fullWidth.teaser--normal article {
    background: #3B664C;
  }
  .teaser-fullWidth.teaser--dark article {
    background: #274533;
  }
}
/* headlines */
@media screen {
  .teaser-fullWidth article h3:not(:first-of-type) {
    font: 700 normal 22px/1em 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
    color: #fff;
  }
  .teaser-fullWidth article h4 {
    font: 400 normal 22px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
    color: #fff;
  }
  .teaser-fullWidth article h5 {
    font: 700 normal 20px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
    color: #fff;
  }
  .teaser-fullWidth article h6 {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
    color: #fff;
    text-transform: uppercase;
  }
}
/* text styles */
@media screen {
  .teaser-fullWidth article p {
    font: 400 normal 18px/30px 'Max', Arial, sans-serif;
    margin: 0px 0px 15px 0px;
    color: #fff;
  }
  .teaser-fullWidth article p > a {
    color: inherit;
  }
  .teaser-fullWidth article > .button {
    float: right;
  }
}
/* content styles for a form */
@media screen {
  .teaser-fullWidth form {
    position: relative;
  }
}
/* border radius */
@media screen and (min-width: 601px) {
  .teaser-fullWidth form {
    -webkit-border-top-left-radius: 20px;
            border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
            border-top-right-radius: 20px;
  }
}
@media screen and (max-width: 600px) {
  .teaser-fullWidth form {
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
}
/* background colors */
@media screen and (min-width: 601px) {
  .teaser-fullWidth form {
    background: rgba(64, 131, 90, 0.9);
  }
  .teaser-fullWidth.teaser--normal form {
    background: rgba(59, 102, 76, 0.9);
  }
  .teaser-fullWidth.teaser--dark form {
    background: rgba(39, 69, 51, 0.9);
  }
}
@media screen and (max-width: 600px) {
  .teaser-fullWidth form {
    background: #40835A;
  }
  .teaser-fullWidth.teaser--normal form {
    background: #3B664C;
  }
  .teaser-fullWidth.teaser--dark form {
    background: #274533;
  }
}
/* margins and paddings on different screen sizes */
@media screen {
  .teaser-fullWidth form {
    padding: 0px 20px 20px 20px;
    margin-top: 90px;
  }
  /*hostSearchMinimal margin*/
  .teaser-fullWidth form.minimal {
    margin-top: 250px;
  }
}
@media screen and (max-width: 1100px) {
  .teaser-fullWidth form {
    margin-top: 0px;
  }
}
@media screen and (max-width: 900px) {
  .teaser-fullWidth form {
    padding-top: 0px;
    margin-top: 190px;
  }
}
@media screen and (max-width: 600px) {
  .teaser-fullWidth form {
    padding-top: 0px;
    margin-top: 0px;
  }
  .teaser-fullWidth form.minimal {
    margin-top: 0px;
  }
}
/* title */
@media screen {
  .teaser-fullWidth form h3 {
    font: 700 italic 22px/1em 'Max', Arial, sans-serif;
    color: #fff;
    padding: 20px 75px 17px 20px;
    margin: 0px -20px 20px -20px;
    background: rgba(0, 0, 0, 0.25);
    -webkit-border-top-left-radius: 20px;
            border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
            border-top-right-radius: 20px;
  }
}
@media screen {
  .teaser-fullWidth form > fieldset {
    display: block;
    padding: 0px;
    border: none;
  }
  .teaser-fullWidth form > fieldset:not(:last-of-type) {
    border-bottom: 1px #fff solid;
    margin-bottom: 20px;
  }
  .teaser-fullWidth form > fieldset > legend {
    display: none;
  }
  /*div containers to structure the input fields*/
  .teaser-fullWidth form > fieldset > div {
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 20px;
  }
  .teaser-fullWidth form > fieldset > div.half {
    width: 50%;
    vertical-align: top;
  }
  .teaser-fullWidth form > fieldset > div.half:nth-of-type(2n+1) {
    padding: 0px 5px 0px 0px;
  }
  .teaser-fullWidth form > fieldset > div.half:nth-of-type(2n) {
    padding: 0px 0px 0px 5px;
  }
  .teaser-fullWidth form > fieldset > div.full {
    width: 100%;
  }
  /*sizes of the input fields*/
  .teaser-fullWidth form > fieldset > div > input[type='text'] {
    width: 100%;
  }
  .teaser-fullWidth form > fieldset > div > select {
    width: 100%;
  }
  .teaser-fullWidth form > fieldset > div > select[name='persons'],
  .teaser-fullWidth form > fieldset > div > select[name='children'] {
    width: 75px;
  }
  .teaser-fullWidth form > fieldset > div > select[name^='childrenAge'] {
    width: 55px;
    margin-right: 5px;
  }
  /*label*/
  .teaser-fullWidth form label {
    color: #fff;
  }
  /*faked checkbox styles*/
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox] + label {
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #fff;
    display: block;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 25px;
    position: relative;
  }
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-'] {
    margin-left: -25px;
  }
  .teaser-fullWidth form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    color: #000;
  }
  /*finaly the submit button*/
  .teaser-fullWidth form > fieldset > button {
    float: right;
  }
}
/* wrap input fields on portrait screens */
@media screen and (max-width: 950px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px) {
  .teaser-fullWidth form > fieldset > div.half {
    width: 100%;
    padding: 0px !important;
  }
}
/*  =========================================================
teaser-roomSearch
========================================================= */
@media screen {
  .teaser-roomSearch form {
    padding: 10px 20px 20px 20px;
    margin-top: 190px;
    position: relative;
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .teaser-roomSearch form h3 {
    font: 700 italic 22px/1em 'Max', Arial, sans-serif;
    padding: 20px 75px 17px 20px;
    margin: 0px -20px 20px -20px;
    -webkit-border-top-left-radius: 20px;
            border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
            border-top-right-radius: 20px;
  }
  .teaser-roomSearch form > fieldset {
    display: block;
    padding: 0px;
    border: none;
  }
  .teaser-roomSearch form > fieldset:not(:last-of-type) {
    border-bottom: 1px #a5aaae solid;
    margin-bottom: 20px;
  }
  .teaser-roomSearch form > fieldset > legend {
    display: none;
  }
  /*div containers to structure the input fields*/
  .teaser-roomSearch form > fieldset > div {
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 20px;
  }
  .teaser-roomSearch form > fieldset > div.half {
    width: 50%;
    vertical-align: top;
  }
  .teaser-roomSearch form > fieldset > div.half:nth-of-type(2n+1) {
    padding: 0px 10px 0px 0px;
  }
  .teaser-roomSearch form > fieldset > div.full {
    width: 100%;
  }
  /*sizes of the input fields*/
  .teaser-roomSearch form > fieldset > div > input[type='text'] {
    width: 100%;
  }
  .teaser-roomSearch form > fieldset > div > select[name='persons'],
  .teaser-roomSearch form > fieldset > div > select[name='children'] {
    width: 75px;
  }
  .teaser-roomSearch form > fieldset > div > select[name^='childrenAge'] {
    width: 60px;
    margin-right: 5px;
  }
  /*finaly the submit button*/
  .teaser-roomSearch form > fieldset > button {
    float: right;
  }
  /*remove margins and paddings that kept form inside the teaser in position*/
  .teaser-roomSearch form {
    padding-top: 0px;
    margin-top: 0px;
  }
  /*text elements color set to white*/
  .teaser-roomSearch form h3,
  .teaser-roomSearch form label {
    color: #fff;
  }
  /*handle background colors*/
  .teaser-roomSearch form h3 {
    background: rgba(0, 0, 0, 0.25);
  }
  .teaser-roomSearch form {
    background: #40835A;
  }
  .teaser-roomSearch.teaser--normal form {
    background: #3B664C;
  }
  .teaser-roomSearch.teaser--dark form {
    background: #274533;
  }
  /*the bottom border of the fieldsets is now white*/
  .teaser-roomSearch form > fieldset {
    border: none;
  }
  /*checkbox colors set to white*/
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox] + label > [class^='icon-'] {
    border-color: #fff;
  }
  .teaser-roomSearch form > fieldset > div > input.styled[type=checkbox]:checked + label > [class^='icon-'] {
    color: #41644F;
    background: #fff;
  }
}
@media screen and (max-width: 1025px) and (min-width: 901px), screen and (max-width: 700px) and (min-width: 601px), screen and (max-width: 400px) {
  /*wrap input fields on portrait screens*/
  .teaser-roomSearch form > fieldset > div.half {
    width: 100%;
    padding: 0px !important;
  }
}
/*  =========================================================
teaser-text
========================================================= */
/*basic styling*/
@media screen {
  .teaser-text {
    margin-bottom: 2.083%;
    padding-bottom: 80px;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    overflow: hidden;
  }
  .teaser-text > .text > h2 {
    font: 400 normal 40px 'Daniel';
    color: white;
    margin: 0px 0px 15px 0px;
  }
}
/* button overrides */
@media screen {
  .teaser-text > .button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    top: initial;
    padding: 5px;
    height: 33px;
    z-index: 1;
    -webkit-border-radius: 10px;
            border-radius: 10px;
  }
  .teaser-text > .button.top {
    bottom: initial;
    top: 10px;
  }
  .teaser-text > .button > [class^='icon-'] {
    font-size: 20px;
    line-height: 23px;
  }
  .teaser-text.teaser--white > a.button {
    color: #fff;
    background: #274533;
  }
}
/* text area */
@media screen {
  .teaser-text > .text {
    padding: 0px 20px;
  }
  .teaser-text > .text.socialMedia {
    padding: 0px;
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  .teaser-text > .text.socialMedia > .newsArea {
    -webkit-border-bottom-left-radius: 20px;
            border-bottom-left-radius: 20px;
  }
}
/* title */
@media screen {
  .teaser-text.teaser--event > .text > h3:first-of-type {
    font: 700 italic 22px/1em 'Max', Arial, sans-serif;
  }
  .teaser-text > .text > h3:first-of-type {
    font: bold 20px/30px 'Max', Arial, sans-serif;
    color: #fff;
    padding: 20px 75px 17px 20px;
    margin: 0px -20px 20px -20px;
  }
  .teaser-text.teaser--white > .text > h2 {
    color: #274533;
  }
  .teaser-text.teaser--event:not(.teaser--white) > .text > h3:first-of-type {
    background: #4F765E;
  }
  .teaser-text.teaser--white:not(.teaser--event) > .text > h3:first-of-type {
    background: #274533;
  }
  .teaser-text > .text > h3 > a {
    text-decoration: none;
    display: block;
  }
}
/* headlines */
@media screen {
  .teaser-text:not(.teaser--white) > .text > h3:not(:first-of-type),
  .teaser-text:not(.teaser--white) > .text > h4,
  .teaser-text:not(.teaser--white) > .text > h5,
  .teaser-text:not(.teaser--white) > .text > h6 {
    color: #fff;
  }
  .teaser-text.teaser--white > .text > h3:not(:first-of-type),
  .teaser-text.teaser--white > .text > h4,
  .teaser-text.teaser--white > .text > h5,
  .teaser-text.teaser--white > .text > h6 {
    color: #274533;
  }
  .teaser-text > .text > h3:not(:first-of-type) {
    font: 700 normal 22px/1em 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
  }
  .teaser-text > .text > h4 {
    font: 400 normal 22px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
  }
  .teaser-text > .text > h5 {
    font: 700 normal 20px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
  }
  .teaser-text > .text > h6 {
    font: 400 normal 20px 'Max', Arial, sans-serif;
    margin: 30px 0px 10px 0px;
    text-transform: uppercase;
  }
}
/* text styles */
@media screen {
  .teaser-text:not(.teaser--white) > .text > p,
  .teaser-text:not(.teaser--white) > .text > .bold,
  .teaser-text:not(.teaser--white) > .text > .italic {
    color: #fff;
  }
  .teaser-text.teaser--white > .text > p,
  .teaser-text.teaser--white > .text > .bold,
  .teaser-text.teaser--white > .text > .italic {
    color: #274533;
  }
  .teaser-text > .text > p {
    font: 400 normal 18px/30px 'Max', Arial, sans-serif;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .bold {
    font: 700 normal 18px/30px 'Max', Arial, sans-serif;
    margin: 0px 0px 15px 0px;
  }
  .teaser-text > .text > .italic {
    font: 400 italic 18px/30px 'Max', Arial, sans-serif;
    margin: 0px 0px 15px 0px;
  }
}
/* list styles */
@media screen {
  .teaser-text > .text > ul {
    padding: 0px;
    margin-bottom: 50px;
    list-style-type: none;
  }
  .teaser-text > .text > ul > li {
    background: initial;
    padding-left: 30px;
    font: 400 normal 18px 'Max', Arial, sans-serif;
    margin-bottom: 25px;
  }
  .teaser-text > .text > ul > li:before {
    content: '\e61b';
    font: 400 normal 1em 'icomoon';
    margin-left: -30px;
    margin-right: 10px;
  }
  .teaser-text > .text > p > a {
    color: inherit;
  }
  .teaser-text:not(.teaser--white) > .text > ul > li {
    color: #fff;
  }
  .teaser-text.teaser--white > .text > ul > li {
    color: #274533;
  }
}
/* background color and shit */
@media screen {
  .teaser-text {
    background: #40835A;
  }
  .teaser-text.teaser--normal {
    background: #3B664C;
  }
  .teaser-text.teaser--dark {
    background: #274533;
  }
  .teaser-text.teaser--white {
    background: #fff;
    border: 3px #274533 solid;
  }
  .teaser-text:not(.teaser--white):not(.teaser--event) > .text > h3:first-of-type {
    background: #4F765E;
  }
  .teaser-text:not(.teaser--event).teaser--gray {
    background: #40835A;
  }
  .teaser-text.teaser--event {
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), #628771;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #628771;
  }
  .teaser-text.teaser--event > div.text > .date {
    font: bold 16px 'Max', Arial, sans-serif;
  }
  .teaser-text.teaser--event > div.text > .date ul {
    font-weight: normal;
    line-height: 30px;
  }
  .teaser-text.teaser--event:not(.teaser--white) > .text > p,
  .teaser-text.teaser--event > .text > .date {
    color: #274533;
  }
}
@media screen and (max-width: 600px) {
  .teaser-text {
    margin-bottom: 8%;
  }
}
/*  =========================================================
teaser-map
========================================================= */
@media screen {
  .teaser-map {
    width: 100%;
    height: 400px;
    position: relative;
  }
  [class*='g-element-'] > .teaser-map {
    margin-bottom: 2.083%;
  }
  .teaser-map > [id^='teaserMap'] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .teaser-map > .button {
    position: absolute;
    bottom: 23px;
    right: 47px;
  }
  .teaser-map .content [class*='g-element-'] {
    background: #4F765E;
    color: #fff;
    padding: 20px;
  }
  .teaser-map .content [class*='g-element-'] h2 {
    font: 700 normal 35px/32px 'Daniel';
    color: #fff;
  }
  .teaser-map .content div {
    overflow: hidden;
    word-break: break-word;
  }
  .teaser-map .content [class*='g-element-'] p strong {
    font: 300 normal 16px/20px 'Max', Arial, sans-serif;
  }
  .teaser-map .content [class*='g-element-'] p span,
  .teaser-map .content [class*='g-element-'] p a,
  .teaser-map .content [class*='g-element-'] p {
    font: 300 normal 18px/25px 'Max', Arial, sans-serif;
    color: #fff;
  }
  .teaser-map .content [class*='g-element-'] p > a.address_linkTel {
    top: 5px;
  }
  .teaser-map .content [class*='g-element-'] p > a.address_linkMail {
    top: 10px;
  }
  .teaser-map .content [class*='g-element-'] p > a.address_link {
    top: 15px;
  }
}
@media screen and (min-width: 1780px) {
  .teaser-map {
    left: -60px;
  }
}
@media screen and (min-width: 900px) {
  .teaser-map img {
    margin-left: -890px;
  }
}
@media screen and (max-width: 600px) {
  .teaser-map .openBigMap {
    display: none;
  }
  .teaser-map .content [class*='g-element-'] {
    width: 85%;
  }
}
/*  =========================================================
tour-map
========================================================= */
@media screen {
  .content-map {
    width: 100%;
    height: auto;
    position: relative;
  }
  .content-map > div {
    width: 100%;
    height: 740px;
    margin-bottom: 100px;
  }
  .content-map > .button {
    position: absolute;
    bottom: 15px;
    right: 5px;
  }
}
@media screen {
  .teaser-press > .text > h3 {
    background: #274533 !important;
  }
  .teaser-press .newsArea {
    background: #fff;
    border-bottom: 3px #274533 solid;
    border-right: 4px #274533 solid;
    border-left: 3px #274533 solid;
  }
  .teaser-text.teaser-press {
    -webkit-border-bottom-right-radius: 0px;
            border-bottom-right-radius: 0px;
  }
  .teaser-lottery__text > p {
    font: 400 normal 18px/24px 'Max', Arial, sans-serif;
    color: #fff;
    margin: 0px;
  }
  .teaser-lottery__text {
    background: rgba(65, 99, 113, 0.9);
    color: #fff;
  }
  .teaser-lottery__text p > a {
    color: #fff;
  }
  .teaser-lottery > .image > .text {
    font: italic 700 22px/1em 'Max', Arial, sans-serif;
    color: #fff;
    padding: 20px 75px 17px 20px;
    background-color: #38505A;
  }
  .teaser-lottery__text > [type=radio]:not(:checked) + .button {
    display: inline-block;
    height: 45px;
    padding: 10px;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 13px;
            border-radius: 13px;
    font: 700 16px 'Max', Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #274533;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/**
 * Nordseetourismus 2014
 *
 * 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 offCanvas
 * @author     gueldner
 * @since      03.03.2016
 * @version    $Id$
 **/
/*  =========================================================
frame
opener
========================================================== */
/*  =========================================================
frame
========================================================= */
@media screen {
  #offCanvas {
    position: fixed;
    z-index: 401;
    left: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1001px) {
  #offCanvas {
    top: 85px;
  }
}
@media screen and (max-width: 1000px) {
  #offCanvas {
    top: 75px;
  }
}
@media screen and (max-width: 775px) {
  #offCanvas {
    top: 50px;
  }
}
@media screen {
  #offCanvas > [type='radio'] {
    position: absolute;
    top: 0;
    left: -20px;
    opacity: 0;
  }
}
@media screen {
  .offCanvas__content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #fff;
    border-right: 1px rgba(11, 51, 68, 0.3) solid;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
  }
  #offCanvas > [type='radio']:not(:checked) + div {
    -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
@media screen and (min-width: 601px) {
  .offCanvas__content {
    width: 415px;
    padding: 20px 35px;
  }
}
@media screen and (max-width: 600px) {
  .offCanvas__content {
    width: 300px;
    padding: 15px 20px;
  }
}
/*  =========================================================
opener/closer
========================================================= */
@media screen {
  .opener-offCanvas {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    padding: 10px 1.25em;
    font: 400 normal 16px/18px 'Max', Arial, sans-serif;
    text-align: center;
    color: #fff;
    background: #ff8a00;
  }
  .map-offCanvas-opener > .opener-offCanvas {
    top: 190px !important;
    z-index: 400;
  }
}
@media screen {
  #offCanvas > label {
    position: absolute;
    display: block;
    padding: 10px 1.25em;
    color: #fff;
    background: #ff8a00;
    transition: top 0.5s ease;
    -webkit-transition: top 0.5s ease;
  }
  #offCanvas [type='radio']:not(:checked) + label {
    top: 0;
  }
}
@media screen and (min-width: 601px) {
  #offCanvas > label {
    left: 415px;
  }
}
@media screen and (max-width: 600px) {
  #offCanvas > label {
    left: 300px;
  }
}
@media screen and (min-width: 1001px) {
  #offCanvas [type='radio']:checked + label {
    top: -170px;
  }
}
@media screen and (max-width: 1000px) {
  #offCanvas [type='radio']:checked + label {
    top: -158px;
  }
}
@media screen and (max-width: 775px) {
  #offCanvas [type='radio']:checked + label {
    top: -100px;
  }
}
@media screen and (min-width: 1001px) {
  #offCanvas > label,
  .opener-offCanvas {
    height: 65px;
  }
  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-'] {
    font-size: 50px;
  }
  #offCanvas > label > [class*='icon-'] {
    line-height: 65px;
  }
}
@media screen and (max-width: 1000px) {
  #offCanvas > label,
  .opener-offCanvas {
    height: 55px;
  }
  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-'] {
    font-size: 40px;
  }
  #offCanvas > label > [class*='icon-'] {
    line-height: 55px;
  }
}
@media screen and (max-width: 775px) {
  #offCanvas > label,
  .opener-offCanvas {
    height: 30px;
  }
  .opener-offCanvas {
    font-size: 10px;
    line-height: 12px;
  }
  #offCanvas > label > [class*='icon-'],
  .opener-offCanvas > [class*='icon-'] {
    font-size: 20px;
  }
  #offCanvas > label > [class*='icon-'] {
    line-height: 30px;
  }
}
/*  =========================================================
aroundMe
========================================================= */
.offCanvas__filter__aroundMe {
  font: 400 normal 17px/25px 'Max', Arial, sans-serif;
  color: #274533;
  display: block;
  padding: 30px 0 30px 0;
}
.offCanvas__filter__aroundMe a {
  color: #ffffff;
}
.offCanvas__filter__aroundMe span.icon-locate {
  position: relative;
  bottom: 5px;
}
.offCanvas__filter__aroundMe .offCanvas__filter__aroundMe__text {
  position: relative;
  display: inline-block;
  width: 75%;
  padding-left: 10px;
}
.offCanvas__filter__aroundMe span {
  padding-bottom: 10px;
}
.bestofMapLocationButton {
  position: absolute;
  z-index: 401;
  left: 55px;
  bottom: 595px;
  color: #ffffff;
  background-color: #FF8A00;
  padding: 3px 3px 3px 3px;
  text-decoration: none;
}
@media screen and (max-width: 900px) {
  .bestofMapLocationButton {
    bottom: 550px;
  }
}
@media screen and (max-width: 599px) {
  .bestofMapLocationButton {
    bottom: 325px;
  }
}
.offCanvas__filter__aroundMe a {
  background: #FF8A00;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  position: relative;
  top: 10px;
}
.aroundMe__request {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.aroundMe__request .aroundMe__request__window {
  text-align: center;
  font: 400 normal 17px/25px 'Max', Arial, sans-serif;
  color: #fff;
  display: block;
  padding: 30px 0 30px 0;
  position: absolute;
  left: 40%;
  top: 50%;
  width: 450px;
  height: 80px;
  background: #274533;
  pointer-events: all;
}
@media (max-width: 900px) {
  .aroundMe__request .aroundMe__request__window {
    left: 25%;
  }
}
@media (max-width: 700px) {
  .aroundMe__request .aroundMe__request__window {
    left: 15%;
  }
}
@media (max-width: 450px) {
  .aroundMe__request .aroundMe__request__window {
    left: 0;
  }
}
.aroundMe__request .aroundMe__request__window .aroundMe__request__window__close {
  position: absolute;
  top: 0;
  right: 0;
  background: #3B664C;
  padding: 10px 10px 10px 10px;
}
.aroundMe__request .aroundMe__request__window .aroundMe__request__window__text {
  width: 65%;
  padding: 0 5px 0 0;
}
.aroundMe__request .aroundMe__request__window span {
  float: left;
  padding: 0 20px 0 20px;
}
.aroundMe__request .aroundMe__request__window a {
  background: #FF8A00;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  position: relative;
  top: 10px;
  float: left;
  left: 30%;
}
.offCanvas__filter__hidden,
.aroundMe__request__hidden {
  display: none;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
  z-index: 0;
}

/**
 * Nordseetourismus 2014
 *
 * 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 offCanvas
 * @author     gueldner
 * @since      03.03.2016
 * @version    $Id$
 **/
/*  =========================================================
general structure
checkbox section
input section
========================================================== */
/*  =========================================================
general structure
========================================================= */
@media screen {
  .offCanvas__filter {
    text-align: left;
    position: relative;
  }
  .offCanvas__filter:not(:last-of-type) {
    border-bottom: 1px rgba(42, 56, 65, 0.3) solid;
  }
}
/* label and checkbox for hidding/showing section */
@media screen {
  .offCanvas__filter > [type='checkbox'] {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
  }
  .offCanvas__filter > label {
    font: 700 normal 20px 'Max', Arial, sans-serif;
    color: #274533;
    display: block;
    padding: 15px 0 15px 28px;
  }
  .offCanvas__filter > label:before {
    content: '\e602';
    width: 20px;
    display: inline-block;
    font: 400 normal 18px 'icomoon';
    font-variant: normal;
    text-transform: none;
    color: #274533;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    -moz-transition: -moz-transform 0.25s ease;
    -webkit-transition: -webkit-transform 0.25s ease;
    margin: 0 10px 0 -30px;
  }
  .offCanvas__filter > [type='checkbox'] + label:after {
    display: none;
  }
  .offCanvas__filter > [type='checkbox']:checked + label:before {
    -webkit-transform: rotateZ(90deg);
        -ms-transform: rotate(90deg);
            transform: rotateZ(90deg);
  }
}
@media screen and (max-width: 600px) {
  .offCanvas__filter > label {
    font-size: 16px;
  }
}
/*  =========================================================
checkbox section
========================================================= */
/* general styling */
@media screen {
  .offCanvas__filter__checkbox {
    position: relative;
    margin-bottom: 20px;
  }
}
/* show hide section */
@media screen {
  .offCanvas__filter > [type='checkbox']:not(:checked) ~ .offCanvas__filter__checkbox {
    display: none;
  }
  .offCanvas__filter > [type='checkbox']:checked ~ .offCanvas__filter__checkbox {
    display: block;
  }
}
/* input styling */
@media screen {
  .offCanvas__filter__checkbox > [type='checkbox'] {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    display: none;
  }
}
/*label styling*/
@media screen {
  .offCanvas__filter__checkbox > label {
    padding: 0px 0px 0px 30px;
    display: block;
    margin-bottom: 10px;
    font: 400 normal 16px 'Max', Arial, sans-serif;
    color: #31483B;
  }
  .offCanvas__filter__checkbox > label:before {
    display: inline-block;
    vertical-align: baseline;
    margin: 0px 10px 0px -30px;
    width: 14px;
    height: 14px;
    border: 3px #274533 solid;
    font: 400 normal 14px/14px 'icomoon';
    color: #fff;
  }
  .offCanvas__filter__checkbox > [type*='checkbox']:not(:checked) + label:before {
    background: #fff;
  }
  .offCanvas__filter__checkbox > [type*='checkbox']:checked + label:before {
    background: #274533;
  }
}
@media screen {
  .offCanvas__filter__checkbox > label > span.hits {
    font: 400 italic 12px 'Max', Arial, sans-serif;
    float: right;
    margin-top: 3px;
  }
}
/*  =========================================================
input section
========================================================= */
@media screen {
  .offCanvas__filter__input {
    margin-bottom: 30px;
    margin-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .offCanvas__filter__input > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1;
        -ms-flex: 1 1;
            flex: 1 1;
  }
  .offCanvas__filter__input > div:not(:last-child) {
    margin-right: 10px;
  }
  .offCanvas__filter__input label.default {
    color: #333;
  }
}
@media screen {
  .offCanvas__filter__input input.default {
    height: 30px;
    width: 100%;
    display: block;
  }
}

/**
 * Nordseetourismus 2014
 *
 * 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  2014 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage listelement and text styles
 * @author     bruetsch
 * @since      01.07.2014
 * @version    $Id$
 **/
/*  =========================================================
map
========================================================= */
@media screen {
  .mtk-map .mtk-cluster1,
  .mtk-map .mtk-cluster2,
  .mtk-map .mtk-cluster3,
  .mtk-map .mtk-cluster4 {
    background: url('../images/foehr/map/cluster.ccc4c1e9.svg');
    background-size: cover;
    border: none;
  }
  .mtk-map .mtk-cluster1 > span,
  .mtk-map .mtk-cluster2 > span,
  .mtk-map .mtk-cluster3 > span,
  .mtk-map .mtk-cluster4 > span {
    font-family: 'Max';
    margin-top: 3px;
    font-size: 1em;
  }
  #siteHeader__functions > ul > li > .siteHeader__function > span .map-close {
    font: 700 italic 18px/20px 'Max', Arial, sans-serif;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    padding-top: 9px;
  }
  #mapClose__element > a > span.icon-close {
    margin-top: 3px;
  }
  #siteHeader__functions > ul > li#mapClose__element > .siteHeader__function {
    padding-right: 100px;
  }
}
@media screen and (max-width: 1000px) {
  #siteHeader__functions > ul > li > .siteHeader__function > span .map-close {
    padding-top: 1px;
  }
}
@media screen and (max-width: 775px) {
  #siteHeader__functions > ul > li > .siteHeader__function > span .map-close {
    padding-top: 0px;
    margin-top: -3px;
  }
}
.leaflet-top,
.leaflet-bottom {
  z-index: 400 !important;
}
#siteHeader #mapClose__element .siteHeader__function {
  color: #274533;
}
.siteHeader--map #mapInfoboard__element .siteHeader__function {
  background-color: rgba(250, 245, 237, 0.5);
  color: #274533 !important;
}
.siteHeader--map #mapClose__element {
  background-color: rgba(0, 0, 0, 0) !important;
}

/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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      17.02.20
 */
.openingHours {
  font: 400 16px/30px 'Max', Arial, sans-serif;
}
.openingHours__content__headline {
  font: 700 30px 'Daniel';
  color: #0b3344;
}
.openingHours p {
  font: 400 16px/30px 'Max', Arial, sans-serif;
  color: #0b3344;
}
.openingHoursLive {
  font: 400 16px/30px 'Max', Arial, sans-serif;
}

/**
 * NTS - Nordsee-Tourismus-Service GmbH
 *
 * 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-03-31
 */
/**

/* =========================================================
general Structure Setup
imports
calendar wrapper
title
date picker
chart
========================================================== */
/* =========================================================
general Structure Setup
========================================================== */
/* =========================================================
imports
========================================================== */
/* =========================================================
calendar wrapper
========================================================== */
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper {
    margin: 0 35px 90px 35px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper {
    margin: 0 16px 150px 16px;
  }
}
/* =========================================================
title
========================================================== */
.tidal-calendar-wrapper .title {
  font: 700 40px/45px 'Daniel';
  color: #3b664c;
  margin: 0;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .title {
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .title {
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 400px) {
  .tidal-calendar-wrapper .title {
    font-size: 35px;
  }
}
/* =========================================================
date picker
========================================================== */
.tidal-calendar-wrapper .tidal-calendar__datepicker {
  position: relative;
  border: none;
  display: inline-block;
  padding: 0 0 30px 0;
}
.tidal-calendar-wrapper .tidal-calendar__datepicker .title {
  color: #3b664c;
  font: 400 normal 18px/25px 'Max';
  text-align: left;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .title {
    padding: 0 0 3px 52px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .title {
    padding: 0 0 3px 50px;
  }
}
.tidal-calendar-wrapper .tidal-calendar__datepicker input {
  padding: 11px;
  min-height: 20px;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker input {
    min-width: 268px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker input {
    min-width: 157px;
  }
}
.tidal-calendar-wrapper .tidal-calendar__datepicker .button-subtract,
.tidal-calendar-wrapper .tidal-calendar__datepicker .button-add {
  font-size: 28px;
  cursor: pointer;
  vertical-align: middle;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .button-subtract {
    margin-right: 24px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .button-subtract {
    margin-right: 22px;
  }
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .button-add {
    margin-left: 24px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__datepicker .button-add {
    margin-left: 22px;
  }
}
/* =========================================================
chart
========================================================== */
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper {
  position: relative;
  border-bottom: 1px solid #C5CDD1;
}
@media screen and (min-width: 1301px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper {
    margin-bottom: 90px;
  }
}
@media screen and (max-width: 1300px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper {
    margin-bottom: 200px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper {
    margin-bottom: 150px;
  }
}
.tidal-calendar-wrapper div.headline {
  font: 400 normal 16px/25px 'Max';
  color: #3b664c;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: mixed;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -20px;
  -webkit-transform: translateY(-50%) rotate(180deg);
      -ms-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #F3F5F6), color-stop(50%, #ffffff));
  background: linear-gradient(180deg, #F3F5F6 50%, #ffffff 50%);
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p {
  left: 0;
  position: absolute;
  margin-left: 11px;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline) {
  color: #333;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline) {
    font: 400 normal 16px/25px 'Max';
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline) {
    font: 400 normal 12px/25px 'Max';
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline).high-water {
  bottom: 77%;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline).flood {
  bottom: 52%;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline).ebb {
  bottom: 30%;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .background p:not(.headline).low-water {
  bottom: 10%;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart {
  height: 330px;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart {
    margin-left: 147px;
    margin-right: 143px;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart {
    margin-left: 50px;
    margin-right: 0;
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-chart-line {
  overflow: visible;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-grids {
  display: none;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-series:not(.ct-series-a) {
  display: none;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-series .ct-line {
  stroke: #3b664c;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-series .ct-point {
  stroke: #333;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-series .ct-point:not(.active) {
    opacity: 0;
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-series .ct-point {
    opacity: 0;
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label {
  padding-top: 36px;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label {
    font: 400 normal 18px/25px 'Max';
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label {
    font: 400 normal 14px/25px 'Max';
  }
}
@media screen and (min-width: 1301px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label {
    display: block;
    position: relative;
  }
}
@media screen and (max-width: 1300px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label {
    display: inline-block;
    width: auto !important;
    -webkit-transform: rotate(-44deg) translate(-90%, -76%);
        -ms-transform: rotate(-44deg) translate(-90%, -76%);
            transform: rotate(-44deg) translate(-90%, -76%);
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span {
  color: #333;
  white-space: nowrap;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span {
    display: block;
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span:first-child {
  padding-right: 5px;
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span:first-child {
    font: 400 normal 12px/25px 'Max';
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span:first-child {
    font: 400 normal 10px/25px 'Max';
  }
}
@media screen and (min-width: 901px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span:not(:first-child) {
    font: 400 normal 18px/25px 'Max';
  }
}
@media screen and (max-width: 900px) {
  .tidal-calendar-wrapper .tidal-calendar__chart-wrapper .chart .ct-labels .ct-label span:not(:first-child) {
    font: 400 normal 16px/25px 'Max';
  }
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox {
  position: absolute;
  background-color: #333;
  padding: 4px 10px;
  -webkit-transform: translate(-48%, -128%);
      -ms-transform: translate(-48%, -128%);
          transform: translate(-48%, -128%);
  pointer-events: none;
  -webkit-transition: opacity 250ms ease-in-out 100ms, top 350ms cubic-bezier(0, 1, 0, 1), left 350ms cubic-bezier(0, 1, 0, 1);
  transition: opacity 250ms ease-in-out 100ms, top 350ms cubic-bezier(0, 1, 0, 1), left 350ms cubic-bezier(0, 1, 0, 1);
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox:not(.active) {
  opacity: 0;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #333;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox .status,
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox .time {
  color: #fff;
  margin: 0;
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox .status {
  font: 700 normal 16px/25px 'Max';
}
.tidal-calendar-wrapper .tidal-calendar__chart-wrapper .infobox .time {
  font: 400 normal 16px/25px 'Max';
}