/**
 * @package ista Internet Relaunch
 *
 * Frontend Refactor
 * @author Matthias Becker <matthias.becker@twt.de>
 *
 * Content:
 *  mediaQuery
 *  box-sizing
 *  background-gradient
 *  background-size
 *  border-radius
 *  box-shadow
 *  transform
 *  transform-style
 *  transition
 *  perspective
 *  perspective-origin
 *  keyframe
 *  animation
 *  flex-flow
 *  flexbox
 *  flex
 *  order
 *
 */
.clearfix:after, .grid:after {
  display: block;
  clear: both;
  content: ''; }

/**
 * @package ista Internet Relaunch
 *
 * Frontend Refactor
 * @author Matthias Becker <matthias.becker@twt.de>
 *
 */
/**
 * @package ista Internet Relaunch
 *
 * Frontend Refactor
 * @author Matthias Becker <matthias.becker@twt.de>
 *
 * Content:
 *  Grid
 *
 */
/* grid klassen */
.grid {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1240px;
  padding: 10px 20px;
  margin: 0 auto 56px auto; }
  .grid.visible-overflow {
    overflow: visible; }
  .grid.teaser-slider-33, .grid.teaser-slider-25 {
    margin-bottom: 41px; }
    @media only screen and (max-width: 1023px) {
      .grid.teaser-slider-33, .grid.teaser-slider-25 {
        margin-bottom: 15px; } }
  @media only screen and (max-width: 1023px) {
    .grid {
      margin-bottom: 30px; }
      .grid:not(.grid-background) > div:not(.grid):last-child {
        margin-bottom: 0; } }
  @media only screen and (max-width: 767px) {
    .grid {
      padding: 10px 0px; } }
  .grid .grid {
    max-width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 0; }
  .grid > h1,
  .grid > h2,
  .grid > h3,
  .grid > h4,
  .grid > h5,
  .grid > h6,
  .grid > div.looks_like_a_headline {
    padding: 0 15px; }
  .grid > div:not(.grid) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 10px 15px 0 15px; }

.grid-20 {
  width: 20%; }

.grid-25 {
  width: 25%; }

.grid-33 {
  width: 33.3333333333%; }

.grid-50 {
  width: 50%; }

.grid-66 {
  width: 66%; }

.grid-75 {
  width: 75%; }
  .grid-75 > div:not(.csc) {
    padding-left: 15px;
    padding-right: 15px; }
    @media only screen and (max-width: 767px) {
      .grid-75 > div:not(.csc) {
        padding-left: 0;
        padding-right: 0; } }
  .grid-75 > .csc {
    padding-left: 30px;
    padding-right: 30px; }
    @media screen and (max-width: 1260px) {
      .grid-75 > .csc {
        padding-right: 30px; } }
    @media only screen and (max-width: 767px) {
      .grid-75 > .csc {
        padding-left: 15px;
        padding-right: 15px; } }

@media only screen and (max-width: 767px) {
  .grid-20,
  .grid-25,
  .grid-33,
  .grid-50,
  .grid-66,
  .grid-75 {
    width: 100%; } }

.grid-100,
.userroles .grid-20,
.teaser-slider-25 .grid-25,
.teaser-slider-33 .grid-33 {
  width: 100%; }

.outer-grid {
  padding: 0;
  margin-bottom: 0; }
  .outer-grid > div:not(.grid) {
    padding: 0 30px 0 15px; }
    @media screen and (max-width: 1170px) and (min-width: 1024px) {
      .outer-grid > div:not(.grid) {
        padding: 0 30px; } }
    @media only screen and (max-width: 767px) {
      .outer-grid > div:not(.grid) {
        padding: 0; } }
  .outer-grid > .grid-100 > .csc,
  .outer-grid > .grid-100 .group,
  .outer-grid > .grid-75 > .csc,
  .outer-grid > .grid-75 .group {
    margin-bottom: 56px; }
    .outer-grid > .grid-100 > .csc > .grid,
    .outer-grid > .grid-100 .group > .grid,
    .outer-grid > .grid-75 > .csc > .grid,
    .outer-grid > .grid-75 .group > .grid {
      margin-bottom: 0; }
    @media only screen and (max-width: 1023px) {
      .outer-grid > .grid-100 > .csc,
      .outer-grid > .grid-100 .group,
      .outer-grid > .grid-75 > .csc,
      .outer-grid > .grid-75 .group {
        margin-bottom: 30px; } }
  @media only screen and (min-width: 768px) {
    .outer-grid > div.grid-100 {
      padding: 0 30px; } }
  @media screen and (max-width: 1170px) and (min-width: 1024px) {
    .outer-grid > div.grid-100 {
      padding: 0 15px; } }
  @media only screen and (max-width: 767px) {
    .outer-grid > div.grid-100 {
      padding: 0 15px; } }
  .outer-grid > div.grid-25 {
    padding-left: 35px;
    padding-right: 0; }
  .outer-grid > div.grid-75 {
    padding: 0; }
  @media only screen and (max-width: 1023px) {
    .outer-grid > div {
      padding-top: 0;
      padding-bottom: 0; }
    .outer-grid > .grid-25 {
      display: none; }
    .outer-grid > div.grid-75 {
      width: 100%;
      padding: 0; } }

.outer-grid .grid.grid-background {
  width: 100%;
  background-color: #e6e9ef;
  position: relative;
  display: table;
  overflow: visible;
  padding: 45px 15px 70px 15px; }
  @media only screen and (max-width: 767px) {
    .outer-grid .grid.grid-background {
      display: inline-block; }
      .outer-grid .grid.grid-background.teaser-slider-25, .outer-grid .grid.grid-background.teaser-slider-33, .outer-grid .grid.grid-background.userroles {
        padding: 10px 0 60px 0; }
      .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) {
        padding: 10px 0 0 0; } }
  .outer-grid .grid.grid-background .grid-25,
  .outer-grid .grid.grid-background .grid-33,
  .outer-grid .grid.grid-background .grid-50,
  .outer-grid .grid.grid-background .grid-66 {
    background: transparent; }
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 > .csc,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 > .csc,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 > .csc,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 > .csc,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 > .csc {
    background: #fff; }
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 .button-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 .button-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 .button-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .button-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 .button-wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 .left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 .right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 .intext-left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-25 .intext-right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 .left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 .right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 .intext-left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-33 .intext-right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 .left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 .right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 .intext-left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-50 .intext-right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .intext-left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .intext-right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 .left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 .right-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 .intext-left-image + .content-wrapper,
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-100 .intext-right-image + .content-wrapper {
    padding-top: 1.5em; }
  .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-left-image p {
    padding-left: 20px; }
  @media only screen and (min-width: 768px) {
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .aboveleft-image + .content-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .aboveleft-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .abovecenter-image + .content-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .abovecenter-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-left-image + .content-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-left-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-right-image + .content-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-right-image ~ .button-wrapper {
      padding-left: 20px;
      padding-right: 20px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .aboveleft-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .abovecenter-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-left-image ~ .button-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-right-image ~ .button-wrapper {
      margin-bottom: 15px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .csc {
      padding: 30px 30px 15px 30px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .button-wrapper {
      margin-bottom: 15px; } }
  @media only screen and (max-width: 767px) {
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .content-wrapper,
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .button-wrapper {
      padding-left: 15px;
      padding-right: 15px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .intext-left-image p {
      padding-left: 15px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .button-wrapper {
      margin-bottom: 15px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .csc {
      padding: 15px; }
    .outer-grid .grid.grid-background:not(.teaser-slider-25):not(.teaser-slider-33):not(.userroles) .grid-66 .button-wrapper {
      margin-bottom: 15px; } }
  .outer-grid .grid.grid-background > .grid-empty {
    background-color: #e6e9ef; }

.outer-grid > .grid-100 .grid-background {
  padding: 45px 0 70px 0; }
  .outer-grid > .grid-100 .grid-background:after, .outer-grid > .grid-100 .grid-background:before {
    background-color: #e6e9ef;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 0;
    top: 0;
    display: block; }
  .outer-grid > .grid-100 .grid-background:before {
    right: 100%; }
  .outer-grid > .grid-100 .grid-background:after {
    left: 100%; }

.grid-extra-padding {
  padding-top: 80px;
  padding-bottom: 80px; }

.grid-margin-top {
  margin-top: 66px; }

.content .redesign-content-header a.buttonlink.getsSticky .getsStickyLinkText,
.content .redesign-media-stage a.buttonlink.getsSticky .getsStickyLinkText,
.content > a.buttonlink.getsSticky .getsStickyLinkText {
  display: none;
  text-transform: none; }

@keyframes FadeGetsSticky {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; } }

.small-header .content .redesign-content-header a.buttonlink.getsSticky, .small-header
.content .redesign-media-stage a.buttonlink.getsSticky, .small-header
.content > a.buttonlink.getsSticky {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 99;
  max-width: 1920px;
  padding-right: 75px;
  padding-left: 75px;
  text-align: right;
  animation: FadeGetsSticky 1s ease-in-out;
  border-bottom: 1px solid #ced4e0; }
  @media only screen and (max-width: 1450px) {
    .small-header .content .redesign-content-header a.buttonlink.getsSticky, .small-header
    .content .redesign-media-stage a.buttonlink.getsSticky, .small-header
    .content > a.buttonlink.getsSticky {
      padding-right: 35px;
      padding-left: 35px; } }
  @media only screen and (max-width: 767px) {
    .small-header .content .redesign-content-header a.buttonlink.getsSticky, .small-header
    .content .redesign-media-stage a.buttonlink.getsSticky, .small-header
    .content > a.buttonlink.getsSticky {
      padding-right: 15px;
      padding-left: 15px;
      top: 65px; } }
  @media only screen and (max-width: 1023px) {
    .small-header .content .redesign-content-header a.buttonlink.getsSticky, .small-header
    .content .redesign-media-stage a.buttonlink.getsSticky, .small-header
    .content > a.buttonlink.getsSticky {
      top: 65px; } }
  .small-header .content .redesign-content-header a.buttonlink.getsSticky:after, .small-header
  .content .redesign-media-stage a.buttonlink.getsSticky:after, .small-header
  .content > a.buttonlink.getsSticky:after {
    right: 78px; }
    @media only screen and (max-width: 1450px) {
      .small-header .content .redesign-content-header a.buttonlink.getsSticky:after, .small-header
      .content .redesign-media-stage a.buttonlink.getsSticky:after, .small-header
      .content > a.buttonlink.getsSticky:after {
        right: 38px; } }
    @media only screen and (max-width: 767px) {
      .small-header .content .redesign-content-header a.buttonlink.getsSticky:after, .small-header
      .content .redesign-media-stage a.buttonlink.getsSticky:after, .small-header
      .content > a.buttonlink.getsSticky:after {
        right: 13px; } }
  .small-header .content .redesign-content-header a.buttonlink.getsSticky .getsStickyLinkText, .small-header
  .content .redesign-media-stage a.buttonlink.getsSticky .getsStickyLinkText, .small-header
  .content > a.buttonlink.getsSticky .getsStickyLinkText {
    display: block;
    float: left; }
    @media only screen and (max-width: 767px) {
      .small-header .content .redesign-content-header a.buttonlink.getsSticky .getsStickyLinkText, .small-header
      .content .redesign-media-stage a.buttonlink.getsSticky .getsStickyLinkText, .small-header
      .content > a.buttonlink.getsSticky .getsStickyLinkText {
        display: none; } }
  .small-header .content .redesign-content-header a.buttonlink.getsSticky .linkText, .small-header
  .content .redesign-media-stage a.buttonlink.getsSticky .linkText, .small-header
  .content > a.buttonlink.getsSticky .linkText {
    display: block;
    padding-right: 35px; }
    @media only screen and (max-width: 767px) {
      .small-header .content .redesign-content-header a.buttonlink.getsSticky .linkText, .small-header
      .content .redesign-media-stage a.buttonlink.getsSticky .linkText, .small-header
      .content > a.buttonlink.getsSticky .linkText {
        padding-right: 30px; } }

.content > a.buttonlink.getsSticky {
  display: none; }
  .small-header .content > a.buttonlink.getsSticky {
    display: block; }