/**
This file holds classes that are necessary only within stage element of plan.de.
Therefore there is a distinct include of this file via Plugin/TS on TYPO3 plan.de!
 */
.o-stage {
  background-repeat: no-repeat;
  background-size: contain;
  position: relative; }
  @media (min-width: 576px) {
    .o-stage {
      background-image: none !important; } }
  @media (min-width: 992px) {
    .o-stage {
      overflow: hidden;
      padding-bottom: 56.25%; } }
  @media (min-width: 1200px) {
    .o-stage {
      min-height: 500px;
      padding-bottom: 0; } }
  @media (max-width: 991px) {
    .o-stage__container--arrow::before, .o-stage__container--arrow::after {
      bottom: 0;
      content: '';
      position: absolute;
      width: 50%;
      z-index: 1; }
    .o-stage__container--arrow::before {
      border-bottom: 1.25rem solid #fff;
      border-right: 1.25rem solid transparent;
      right: 50%; }
    .o-stage__container--arrow::after {
      border-bottom: 1.25rem solid #fff;
      border-left: 1.25rem solid transparent;
      left: 50%; } }
  .o-stage__container--footer {
    margin-top: auto; }
  @media (max-width: 991px) {
    .o-stage__container--header {
      height: 0;
      padding-bottom: 100%;
      position: relative; } }
  @media (max-width: 575px) {
    .o-stage__container--header {
      padding-bottom: 150%; } }
  @media (max-width: 991px) {
    .o-stage__container--overlay {
      bottom: 0;
      left: 0;
      padding-bottom: 25px;
      position: absolute;
      right: 0; } }
  .o-stage__content {
    padding-top: 25px;
    position: relative; }
    .o-stage__content::after {
      display: block;
      clear: both;
      content: ""; }
    @media (min-width: 992px) {
      .o-stage__content {
        max-width: 50%; } }
    .o-stage__content--footer {
      display: flex;
      flex-direction: column; }
      @media (min-width: 992px) {
        .o-stage__content--footer {
          margin-bottom: 25px; } }
    @media (min-width: 576px) and (max-width: 991px) {
      .o-stage__content--header {
        max-width: 75%; } }
    @media (min-width: 576px) {
      .o-stage__content--right {
        float: right; } }
    @media (min-width: 992px) {
      .o-stage__content--white {
        background-color: rgba(255, 255, 255, 0.85);
        padding: 15px; } }
    @media (max-width: 991px) {
      .o-stage__content--white {
        float: none;
        padding-bottom: 25px; } }
    .o-stage__content--white > p:last-child {
      margin-bottom: 0; }
  @media (min-width: 576px) {
    .o-stage__ratio {
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; } }
  @media (min-width: 576px) and (max-width: 991px) {
    .o-stage__ratio {
      background-size: contain; } }
  @media (min-width: 992px) {
    .o-stage__ratio {
      background-position: top right;
      background-size: cover;
      height: 100%;
      justify-content: center; } }
  @media (min-width: 1200px) {
    .o-stage__ratio {
      min-height: 500px;
      position: initial; } }
  @media (max-width: 991px) {
    .o-stage__ratio--large {
      background-image: none !important;
      position: relative; } }
  .o-stage__ratio--large::before {
    content: ' ';
    height: 33%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-image: -owg-linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent); }
    @media (min-width: 992px) {
      .o-stage__ratio--large::before {
        height: 100%;
        width: 62.5%;
        background-image: -owg-linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
        background-image: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
        background-image: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
        background-image: -o-linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent); } }
  .o-stage__ratio--medium {
    height: 100%;
    z-index: -1; }
    @media (max-width: 575px) {
      .o-stage__ratio--medium {
        background-image: none !important;
        display: none; } }
    @media (min-width: 992px) {
      .o-stage__ratio--medium {
        background-image: none !important;
        display: none; } }
  .o-stage__ratio--right::before {
    left: initial;
    right: 0; }
    @media (min-width: 992px) {
      .o-stage__ratio--right::before {
        background-image: -owg-linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
        background-image: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
        background-image: -moz-linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
        background-image: -o-linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent); } }

/*# sourceMappingURL=stage.css.map */