.page_timeline {
  padding: 40px 0;

  .inner_wrapper {
    @include clearfix;
    position: relative;
  }

  .time_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    box-sizing: content-box;

    background: linear-gradient(to bottom, $color-main, $color-accent);

    &:after {
      position: absolute;
      top: -3px;
      bottom: -3px;
      left: -3px;
      right: -3px;
      background: linear-gradient(to bottom, $light, $grey);
      content: "";
      z-index: -1;
      border-radius: 3px;
    }
  }
}

.dmos10_timeline {
  clear: both;
  margin-bottom: $gutter;

  @media screen and (min-width: $break_timeline_2col) {
    margin-bottom: 0;

    &:not(:first-child) {
      margin-top: -30px;
    }

    &:nth-of-type(2n) {
      float: left;
      margin-left: calc(50% + 10px);
    }

    &:nth-of-type(2n-1) {
      float: right;
      margin-right: calc(50% + 10px);
    }

    .content_background {
      width: 45vw;
    }
  }

  .content_background {
    @include border-gradient;
    @include background-gradient-bright;
    padding: $gutter;
    position: relative;
    z-index: 2;

    @media screen and (min-width: $break_wide) {
      width: 4*$column_width + 3*$gutter;

      &.hervorgehoben {
        width: 4*$column_width + 6*$gutter;
      }
    }

    &.vergangen {
      border-image: linear-gradient(to bottom, #e5e6d3, $grey) 2 repeat;
    }

    &.hervorgehoben {
      @include background-gradient;
      border: 0;
    }
  }

  .zeitraum {
    font-weight: bold;
  }

  h2.no_text {
    font-size: 1em;
    padding: 0;
  }
}