/*! otm, Compiled at 2025-09-05 09:02:45 */
/**
 * Oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2016 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @author     Matthias Kracke <kracke@infomax-it.de>
 * @since      2016-11-28
 * @version    $$Id$$
 **/
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage teaserGroup
 * @author     gueldner
 * @since      12.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/* dimensions */
/* ultra tiny introduced for iPhone 5s */
/* corporate design */
/* @see src/portal/assets/styles/_brand for css variables */
/* other colors */
/* percentage dimensions */
/* percentage margins */
/* percentage paddings */
/* default font settings */
/* vertical aligns */
.verticalAlignHelper {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin: 0;
}
/*  =========================================================
general structure
========================================================= */
@media all {
  .teaserGroup {
    overflow: hidden;
  }
}
@media all {
  .teaserGroupSubGroup {
    clear: both;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage teaserGroup
 * @author     gueldner
 * @since      13.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
button
link
price element
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .teaserGroup__element {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5952381%;
  }
}
/* portrait or normal version */
@media all and (min-width: 1401px) {
  .teaserGroup__element {
    /* had to decrease the height by 0.1px for the calculation because of weird browser rendering */
  }
  .teaserGroup__element:not(.teaserGroup__element--portrait) {
    height: 0;
    padding-bottom: 23.21428571%;
  }
  .teaserGroup__element.teaserGroup__element--portrait {
    height: 0;
    padding-bottom: 47.01785714%;
  }
}
@media all and (min-width: 701px) and (max-width: 1400px) {
  .teaserGroup__element:not(.teaserGroup__element--portrait) {
    height: 0;
    padding-bottom: 34.82142857%;
  }
  .teaserGroup__element.teaserGroup__element--portrait {
    height: 0;
    padding-bottom: 70.23809524%;
  }
}
@media all and (max-width: 700px) and (orientation: landscape) {
  .teaserGroup__element {
    height: 0;
    padding-bottom: 44.67084639%;
  }
}
@media all and (max-width: 700px) and (orientation: portrait) {
  .teaserGroup__element {
    height: 0;
    padding-bottom: 105.83333333%;
  }
}
@media all {
  .teaserGroup__element--portrait:first-child {
    float: left;
  }
  .teaserGroup__element--portrait:not(:first-child) {
    float: right;
  }
}
/*  =========================================================
button
========================================================= */
@media all {
  .teaserGroup__element > .button {
    position: absolute;
  }
  .teaserGroup__element:active .button,
  .teaserGroup__element:focus .button,
  .teaserGroup__element:hover .button {
    z-index: 1;
  }
}
@media all and (min-width: 1401px) {
  .teaserGroup__element > .button {
    bottom: 30px;
    right: 30px;
  }
}
@media all and (max-width: 1400px) {
  .teaserGroup__element > .button {
    bottom: 20px;
    right: 20px;
  }
}
@media all and (max-width: 1000px) {
  .teaserGroup__element > .button {
    display: none;
  }
}
/*  =========================================================
link
========================================================= */
@media all {
  .teaserGroup__element > a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -100%;
  }
}
/*  =========================================================
price element
========================================================= */
@media all {
  .teaserGroup__element__price {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    display: table;
    width: 114px;
    height: 114px;
    overflow: hidden;
    background: rgb(var(--color-white));
    border-radius: 50%;
  }
  .teaserGroup__element__price > div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 15%;
    font: 300 normal 10px/1em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 10px;
    line-height: 1em;
    text-align: center;
  }
  .teaserGroup__element__price > div > strong {
    font-weight: 600;
    font-size: 30px;
    line-height: 1em;
  }
  .teaserGroup__element:active .teaserGroup__element__price,
  .teaserGroup__element:focus .teaserGroup__element__price,
  .teaserGroup__element:hover .teaserGroup__element__price {
    z-index: 1;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage teaserGroup
 * @author     gueldner
 * @since      13.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .teaserGroup__element picture {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .teaserGroup__element picture > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage teaserGroup
 * @author     gueldner
 * @since      13.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
========================================================== */
/*  =========================================================
basic config
========================================================= */
/*  =========================================================
general structure
========================================================= */
@media all {
  .teaserGroup__element__mercury {
    position: absolute;
    display: block;
    transition: opacity 0.5s ease, width 0.5s ease, height 0.5s ease, margin 0.5s ease;
  }
  .teaserGroup__element__mercury:not(.verticalyCropped) {
    width: auto;
  }
  .teaserGroup__element__mercury:not(.verticalyCropped):not(.visible) {
    height: 100vh;
  }
  .teaserGroup__element__mercury:not(.verticalyCropped).visible {
    height: 105vh;
  }
  .teaserGroup__element__mercury.verticalyCropped {
    height: auto;
  }
  .teaserGroup__element__mercury.verticalyCropped:not(.visible) {
    width: 100vw;
  }
  .teaserGroup__element__mercury.verticalyCropped.visible {
    width: 105vw;
  }
  .teaserGroup__element__mercury:not(.visible) {
    opacity: 0;
  }
  .teaserGroup__element__mercury.visible {
    opacity: 1;
    margin-top: -2.5vh;
    margin-left: -2.5vw;
  }
}
/**
 * OTM - Hauptportal 2016
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage teaserGroup
 * @author     gueldner
 * @since      13.09.2016
 * @version    $Id$
 **/
/*  =========================================================
basic config
general structure
speech booble
headline
subtitle
========================================================== */
/*  =========================================================
basic config
========================================================= */
/**
 * oldenburg
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2020 infomax websolutions GmbH
 * @link       https://www.infomax-online.de
 * @author     Florian Sauer <sauer@infomax-it.de>
 * @since      2020-12-03
 */
/*  =========================================================
general structure
========================================================= */
@media all {
  .teaserGroup__element__text {
    position: absolute;
    box-sizing: border-box;
  }
  /* show the text on the active teaser */
  .teaserGroup__element:active .teaserGroup__element__text,
  .teaserGroup__element:focus .teaserGroup__element__text,
  .teaserGroup__element:hover .teaserGroup__element__text {
    z-index: 1;
  }
  /* different position versions for the textNode */
  .teaserGroup__element__text.teaserGroup__element__text--topLeft {
    text-align: left;
    top: 0;
    left: 0;
  }
  .teaserGroup__element__text.teaserGroup__element__text--topRight {
    text-align: right;
    top: 0;
    right: 0;
  }
  .teaserGroup__element__text.teaserGroup__element__text--bottomLeft {
    text-align: left;
    bottom: 0;
    left: 0;
  }
  .teaserGroup__element__text.teaserGroup__element__text--bottomRight {
    text-align: right;
    right: 0;
  }
  .teaserGroup__element__text.teaserGroup__element__text--bottomLeft,
  .teaserGroup__element__text.teaserGroup__element__text--bottomRight {
    /* no need to spare some extra space on small screens when there is no more button */
  }
}
@media all and (min-width: 1401px) {
  .teaserGroup__element__text {
    padding: 30px;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .teaserGroup__element__text {
    padding: 20px;
  }
}
@media all and (max-width: 1000px) {
  .teaserGroup__element__text {
    padding: 15px;
  }
}
@media all and (min-width: 1001px) {
  .teaserGroup__element__text.teaserGroup__element__text--bottomLeft,
  .teaserGroup__element__text.teaserGroup__element__text--bottomRight {
    bottom: 50px;
  }
}
@media all and (max-width: 1000px) {
  .teaserGroup__element__text.teaserGroup__element__text--bottomLeft,
  .teaserGroup__element__text.teaserGroup__element__text--bottomRight {
    bottom: 0;
  }
}
/*  =========================================================
speech booble
========================================================= */
@media all {
  .teaserGroup__element__text__speechBooble {
    position: relative;
    display: inline-block;
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorDefault,
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorYellow {
    color: rgb(var(--color-black));
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorRed {
    color: rgb(var(--color-white));
  }
  .teaserGroup__element__text .teaserGroup__element__text__speechBooble:not(.teaserGroup__element__text__speechBooble--cutout) > span.date:first-of-type {
    padding: 16px 15px 5px;
  }
  html.-css-microsite-club .teaserGroup__element__text .teaserGroup__element__text__speechBooble:not(.teaserGroup__element__text__speechBooble--cutout) > span.date:first-of-type {
    padding-top: 5px;
  }
  .teaserGroup__element__text .teaserGroup__element__text__speechBooble:not(.teaserGroup__element__text__speechBooble--cutout) > span.subtitle:first-of-type {
    padding: 18px 15px 3px 15px;
  }
  html.-css-microsite-club .teaserGroup__element__text .teaserGroup__element__text__speechBooble:not(.teaserGroup__element__text__speechBooble--cutout) > span.subtitle:first-of-type {
    padding-top: 5px;
  }
  html:not(.-css-microsite-club) .teaserGroup__element__text .teaserGroup__element__text__speechBooble.teaserGroup__element__text__speechBooble--cutout > h3,
  html:not(.-css-microsite-club) .teaserGroup__element__text .teaserGroup__element__text__speechBooble:not(.teaserGroup__element__text__speechBooble--cutout) > span:first-of-type {
    -webkit-clip-path: polygon(13% 0, 13% 13px, calc(13% + 14px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(13% 0, 13% 13px, calc(13% + 14px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}
@media all and (min-width: 701px) {
  .teaserGroup__element__text .teaserGroup__element__text__speechBooble.teaserGroup__element__text__speechBooble--cutout > h3 {
    padding: 30px 55px 20px 25px;
  }
  html.-css-microsite-club .teaserGroup__element__text .teaserGroup__element__text__speechBooble.teaserGroup__element__text__speechBooble--cutout > h3 {
    padding: 5px 45px 5px 15px;
  }
}
@media all and (max-width: 700px) {
  .teaserGroup__element__text .teaserGroup__element__text__speechBooble.teaserGroup__element__text__speechBooble--cutout > h3 {
    padding: 20px 55px 20px 25px;
  }
  html.-css-microsite-club .teaserGroup__element__text .teaserGroup__element__text__speechBooble.teaserGroup__element__text__speechBooble--cutout > h3 {
    padding: 5px 45px 5px 15px;
  }
}
/*  =========================================================
headline
========================================================= */
@media all {
  .teaserGroup__element__text__speechBooble > h3 {
    position: relative;
    padding: 10px 45px 8px 15px;
    margin: 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    font: 400 normal 4rem/1em 'HalvarEngschrift', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    line-height: 1em;
  }
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > h3 {
    font: 600 normal 3.5rem/1.2em 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 3.5rem;
    line-height: 1.2em;
    padding-top: 8px;
  }
  .teaserGroup__element__text__speechBooble > h3 > span {
    font-size: 17px;
    position: absolute;
    right: 0;
    padding: 0 15px 14px 0;
    bottom: 0;
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorDefault.teaserGroup__element__text__speechBooble > h3 {
    background: rgb(var(--color-white));
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorRed.teaserGroup__element__text__speechBooble > h3 {
    background: rgb(var(--color-cdRed1));
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorYellow.teaserGroup__element__text__speechBooble > h3 {
    background: rgb(var(--color-cdYellow1));
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .teaserGroup__element__text__speechBooble > h3 {
    font-size: 3.88888889rem;
  }
}
@media all and (max-width: 700px) {
  .teaserGroup__element__text__speechBooble > h3 {
    font-size: 4rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  .teaserGroup__element__text__speechBooble > h3 {
    font-size: 3.5rem;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > h3 {
    font-size: 3.55555556rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > h3 {
    font-size: 3.75rem;
  }
}
@media all and (max-width: 700px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > h3 {
    font-size: 4rem;
  }
}
/*  =========================================================
subtitle
========================================================= */
@media all {
  .teaserGroup__element__text__speechBooble > .subtitle {
    display: block;
    padding: 5px 15px 3px 15px;
    margin: 0;
    position: relative;
    bottom: -1px;
    font: 400 normal 2rem/1em 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    line-height: 1em;
  }
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > .subtitle {
    font: 300 normal 1.4rem/1.5em 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.5em;
    padding-top: 2px;
    padding-bottom: 0;
    margin-bottom: -10px;
    z-index: 1;
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorDefault.teaserGroup__element__text__speechBooble > .subtitle {
    background: rgb(var(--color-white));
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorRed.teaserGroup__element__text__speechBooble > .subtitle {
    background: rgb(var(--color-cdRed1));
  }
  .teaserGroup__element__text__speechBooble--teaserTextBlockColorYellow.teaserGroup__element__text__speechBooble > .subtitle {
    background: rgb(var(--color-cdYellow1));
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  .teaserGroup__element__text__speechBooble > .subtitle {
    font-size: 1.77777778rem;
  }
}
@media all and (min-width: 1001px) and (max-width: 1400px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > .subtitle {
    font-size: 1.55555556rem;
  }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > .subtitle {
    font-size: 1.75rem;
  }
}
@media all and (max-width: 700px) {
  html.-css-microsite-club .teaserGroup__element__text__speechBooble > .subtitle {
    font-size: 2rem;
  }
}
/*  =========================================================
author & date
========================================================= */
@media all {
  .teaserGroup__element__text__speechBooble > span.blogAuthor {
    padding: 3px 15px 5px;
    margin: 0;
    background: #fff;
    font: 400 normal 2rem/1em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1em;
  }
  .teaserGroup__element__text__speechBooble > span.date {
    padding: 3px 15px 5px;
    margin: 0;
    background: #fff;
    font: 400 normal 2rem/1em MyriadPro, Arial, sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1em;
  }
}