Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Erfahrungsberichte

Verwendung

Zur Darstellung von Kommentaren und Erfahrungsberichten.

Vorschau

HTML

                
                  <div class="container">
  <div class="experience_reports">
    <article class="experience_report">
      <div class="row row-tabled">
        <div class="col-sm-4 col-xs-12 col-tabled col-image">
          <div class="image">
            <img height="169" width="300" src="/img/dummy/300x169.png">
          </div>
          <div class="subtitle">
            Dennis Bauer, DH-Student
          </div>
        </div>
        <div class="col-sm-8 col-xs-12 col-tabled col-content">
          <div class="content quoted_text">
            <p>Vor allem die sehr gute Arbeitsatmosphäre in jeder Abteilung bestätigt mich täglich darin, dass Schöck die richtige Entscheidung war und ist. Man ist vom ersten Tag an Teil des Teams und bekommt, neben dem entgegengebrachten Vertrauen, eine große Verantwortung übertragen. Schöck ist ein innovatives Unternehmen, das stetig wächst. Somit hat man nicht nur gute Übernahmechancen, sondern auch vielfältige Weiterbildungs- und Karrieremöglichkeiten in Zukunft.</p>
          </div>
        </div>
      </div>
    </article>
  </div>

  <br/>
  <br/>
  <h2>Slider</h2>
  <br/>
  <br/>

  <div class="experience_reports">
    <div class="experiencereport_slider_owl slider_controls_above_on_mobile">
      <article class="element_wrapper">
        <div class="row row-tabled">
          <div class="col-sm-4 col-xs-12 col-tabled col-image">
            <div class="image">
              <img height="169" width="300" data-src="/img/dummy/300x169.png" class="owl-lazy" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAJABADAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAB//9k="/>
            </div>
            <div class="subtitle">
              Dennis Bauer, DH-Student
            </div>
          </div>
          <div class="col-sm-8 col-xs-12 col-tabled col-content">
            <div class="content quoted_text">
              <p>Vor allem die sehr gute Arbeitsatmosphäre in jeder Abteilung bestätigt mich täglich darin, dass Schöck die richtige Entscheidung war und ist. Man ist vom ersten Tag an Teil des Teams und bekommt, neben dem entgegengebrachten Vertrauen, eine große Verantwortung übertragen. Schöck ist ein innovatives Unternehmen, das stetig wächst. Somit hat man nicht nur gute Übernahmechancen, sondern auch vielfältige Weiterbildungs- und Karrieremöglichkeiten in Zukunft.</p>
            </div>
          </div>
        </div>
      </article>
      <article class="element_wrapper">
        <div class="row row-tabled">
          <div class="col-sm-4 col-xs-12 col-tabled col-image">
            <div class="image">
              <img height="169" width="300" data-src="/img/dummy/300x169.png" class="owl-lazy" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAJABADAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAB//9k="/>
            </div>
            <div class="subtitle">
              Dennis Bauer, DH-Student
            </div>
          </div>
          <div class="col-sm-8 col-xs-12 col-tabled col-content">
            <div class="content quoted_text">
              <p>Vor allem die sehr gute Arbeitsatmosphäre in jeder Abteilung bestätigt mich täglich darin, dass Schöck die richtige Entscheidung war und ist. Man ist vom ersten Tag an Teil des Teams und bekommt, neben dem entgegengebrachten Vertrauen, eine große Verantwortung übertragen. Schöck ist ein innovatives Unternehmen, das stetig wächst. Somit hat man nicht nur gute Übernahmechancen, sondern auch vielfältige Weiterbildungs- und Karrieremöglichkeiten in Zukunft.</p>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>

CSS

              @charset "UTF-8";
.experience_report {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  border: solid 1px #e6e6e6;
  padding: 40px 90px;
}
@media screen and (max-width: 767px) {
  .experience_report {
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
  }
}
@media screen and (min-width: 768px) {
  .experience_report .row-tabled {
    display: table;
    width: calc(100% + 30px);
    table-layout: fixed;
  }
  .experience_report .row-tabled:before, .experience_report .row-tabled:after {
    content: none;
  }
}
@media screen and (min-width: 768px) {
  .experience_report .col-tabled {
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .experience_report {
    padding: 15px;
  }
}
@media screen and (max-width: 767px) {
  .experience_report .col-image {
    margin-bottom: 15px;
  }
}
.experience_report .image img {
  width: 100%;
  height: auto;
}
.experience_report .header,
.experience_report .subheader {
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 28px;
  line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
  .experience_report .header,
  .experience_report .subheader {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 25px;
    line-height: 1.5625rem;
  }
}
@media screen and (max-width: 400px) {
  .experience_report .header,
  .experience_report .subheader {
    font-size: 19px;
    font-size: 1.1875rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 350px) {
  .experience_report .header,
  .experience_report .subheader {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
.experience_report .teaser {
  margin-top: 15px;
}
.experience_report .link_wrapper {
  margin-top: 5px;
}
.experience_report .subtitle {
  margin-top: 10px;
  text-align: center;
  color: #7c7c7b;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 17px;
  line-height: 1.0625rem;
}
.experience_report .content {
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
}
.experience_report .content .cms_content p {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}
.experience_report .content .cms_content ul,
.experience_report .content .cms_content ol {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}

/* slider */
/* owlcarousel basic styles */
.owl-carousel .owl-item {
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
.owl-carousel .owl-item img {
  height: auto;
  width: 100%;
}
.owl-carousel .owl-controls .owl-nav {
  margin: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  padding: 0;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev,
  .owl-carousel .owl-controls .owl-nav .owl-next {
    transform: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 40px;
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before,
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  color: #fff;
  font-size: 54px;
  line-height: 54px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    transition: none;
  }
}
@media screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel .owl-controls .owl-nav .owl-next:hover {
  background-color: transparent;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover:not(.disabled):before,
.owl-carousel .owl-controls .owl-nav .owl-next:hover:not(.disabled):before {
  color: #f9b200;
}
.owl-carousel .owl-controls .owl-nav .owl-prev.disabled,
.owl-carousel .owl-controls .owl-nav .owl-next.disabled {
  cursor: auto;
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-nav .owl-next {
  right: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-dots {
  margin-top: 40px;
}
@media screen and (max-width: 991px) {
  .owl-carousel .owl-controls .owl-dots {
    margin-top: 20px;
  }
}
.owl-carousel .owl-controls .owl-dots .owl-dot {
  height: 8px;
  width: 8px;
  margin-right: 8px;
}
.owl-carousel .owl-controls .owl-dots .owl-dot:last-child {
  margin-right: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot span {
  height: 8px;
  width: 8px;
  background-color: #b3b3b3;
  border-radius: 50%;
  margin: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot.active span {
  background-color: #0069b4;
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  transition: none;
}

/* schoeck slider */
.schoeck_slider .element_wrapper .image_wrapper span {
  display: block;
  text-align: center;
}
.schoeck_slider .element_wrapper .image_wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
}
.schoeck_slider .element_wrapper .image_wrapper img.lazy-srcset {
  width: 100%;
  height: auto;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) {
  position: relative;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper):before {
  top: 0;
  left: 0;
  display: block;
  padding-top: 56.25%;
  /* this forces 16:9 aspect ratio */
  width: 100%;
  content: '';
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* news slider */
.experience_reports .owl-stage-outer {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  border: solid 1px #e6e6e6;
}
@media print {
  .experience_reports .owl-stage-outer {
    border: none !important;
  }
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-stage-outer {
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
  }
}
.experience_reports .owl-controls .owl-nav .owl-prev,
.experience_reports .owl-controls .owl-nav .owl-next {
  margin-top: -28px;
}
.experience_reports .owl-controls .owl-nav .owl-prev.disabled,
.experience_reports .owl-controls .owl-nav .owl-next.disabled {
  display: none !important;
}
.experience_reports .owl-controls .owl-nav .owl-prev {
  left: 25px;
}
.experience_reports .owl-controls .owl-nav .owl-next {
  right: 25px;
}
.experience_reports .owl-item article {
  padding: 40px 90px;
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-item article {
    padding: 15px;
  }
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-item article .col-image {
    margin-bottom: 15px;
  }
}
.experience_reports .owl-item article .image img {
  width: 100%;
  height: auto;
}
.experience_reports .owl-item article .header {
  margin: 0;
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 28px;
  line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-item article .header {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 25px;
    line-height: 1.5625rem;
  }
}
@media screen and (max-width: 400px) {
  .experience_reports .owl-item article .header {
    font-size: 19px;
    font-size: 1.1875rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 350px) {
  .experience_reports .owl-item article .header {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
.experience_reports .owl-item article .subheader {
  margin: 0;
  color: #f9b200;
  font-size: 18.75px;
  font-size: 1.17188rem;
  line-height: 21.75px;
  line-height: 1.35938rem;
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-item article .subheader {
    font-size: 17.25px;
    font-size: 1.07813rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 400px) {
  .experience_reports .owl-item article .subheader {
    font-size: 16.5px;
    font-size: 1.03125rem;
    line-height: 20.25px;
    line-height: 1.26563rem;
  }
}
@media screen and (max-width: 350px) {
  .experience_reports .owl-item article .subheader {
    font-size: 15.75px;
    font-size: 0.98438rem;
    line-height: 19.5px;
    line-height: 1.21875rem;
  }
}
.experience_reports .owl-item article .teaser {
  margin-top: 15px;
}
.experience_reports .owl-item article .link_wrapper {
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev {
    left: 15px;
  }
}
@media screen and (max-width: 767px) {
  .experience_reports .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    right: 15px;
  }
}

/* controls above on mobile */
@media screen and (max-width: 767px) {
  .owl-carousel.slider_controls_above_on_mobile.has_multiple_articles .owl-item .element_wrapper {
    padding-top: 65px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-dots {
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev {
    left: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    right: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    top: 20px;
    transform: translateY(0);
    margin-top: 0;
    z-index: 10;
    opacity: 1;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next:before {
    color: #b3b3b3;
    font-weight: bold !important;
    font-size: 25px;
    line-height: 25px;
    text-shadow: none;
  }
}

/* quoted text */
@media print, screen and (min-width: 992px) {
  .container.company_container {
    width: 765px;
  }
}
.quote_element .image {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .quote_element .image {
    margin-bottom: 25px;
  }
}
.quote_element .image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.quote_element .content {
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
  margin-bottom: 20px;
}
.quote_element .content .cms_content p {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}
.quote_element .content .cms_content ul,
.quote_element .content .cms_content ol {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}
.quote_element .author {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 17px;
  line-height: 1.0625rem;
  color: #7c7c7b;
}
@media screen and (max-width: 768px) {
  .quote_element .content {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem;
  }
  .quote_element .author {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 17px;
    line-height: 1.0625rem;
  }
  .quote_element .author a {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem;
  }
  .quote_element .author a.caret_link:before {
    top: 0;
    margin-right: 2px;
  }
  .quote_element .author .cms_content p {
    margin: 9px 0 18px;
    margin: 0.5625rem 0 1.125rem;
  }
  .quote_element .author .cms_content ul,
  .quote_element .author .cms_content ol {
    margin: 9px 0 18px;
    margin: 0.5625rem 0 1.125rem;
  }
}

.quoted_text p:first-of-type:before, .quoted_text p:last-of-type:after {
  color: #0069b4;
  display: inline-block;
  font-size: 40px;
  margin-top: -9px;
  position: relative;
  top: 5px;
}
.quoted_text p:first-of-type:before {
  content: '\00AB';
  margin-right: 10px;
}
.quoted_text p:last-of-type:after {
  content: '\00BB';
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .quoted_text p:first-of-type:before, .quoted_text p:last-of-type:after {
    font-size: 35px;
    top: 5px;
    margin-top: -8px;
  }
}

SCSS

              @import "../general/_general";

.experience_report {
  @include border-radius(6px);
  background-color:#fff;
  @include box-shadow(0 2px rgba(0, 0, 0, .05));
  border:solid 1px $lightgrey;

  @media screen and (max-width:$screen-xs-max) {
    @include box-shadow(1px 2px 6px rgba(0, 0, 0, .1));
  }

  .row-tabled {
    @media screen and (min-width:$screen-sm-min) {
      @include row-tabled;
    }
  }

  .col-tabled {
    @media screen and (min-width:$screen-sm-min) {
      @include col-tabled;
    }
  }

  padding:40px 90px;

  @media screen and (max-width:$screen-xs-max) {
    padding:15px;
  }

  .col-image {
    @media screen and (max-width:$screen-xs-max) {
      margin-bottom:15px;
    }
  }

  .image {
    img {
      width:100%;
      height:auto;
    }
  }

  .header,
  .subheader {
    @include rem-font-size(23);
    @include rem-line-height(28);

    @media screen and (max-width:$screen-xs-max) {
      @include rem-font-size(20);
      @include rem-line-height(25);
    }

    @media screen and (max-width:400px) {
      @include rem-font-size(19);
      @include rem-line-height(22);
    }

    @media screen and (max-width:350px) {
      @include rem-font-size(18);
      @include rem-line-height(21);
    }
  }

  .teaser {
    margin-top:15px;
  }

  .link_wrapper {
    margin-top:5px;
  }

  .subtitle {
    margin-top:10px;
    text-align:center;
    color:$darkgrey;

    @include rem-font-size(15);
    @include rem-line-height(17);
  }

  .content {
    @include copy-large;
  }
}

/* slider */
@import "../general/_general";

/* owlcarousel basic styles */
.owl-carousel {

  .owl-item {
    background-color:#fff;

    -webkit-backface-visibility:hidden;
    -webkit-transform:translateZ(0) scale(1.0, 1.0);

    img {
      height:auto;
      width:100%;
    }
  }

  .owl-controls {
    .owl-nav {
      margin:0;

      .owl-prev,
      .owl-next {
        @include autocenterY();
        background-color:transparent;
        padding:0;
        margin:0;

        @media print, screen and (min-width:$screen-sm-min) {
          @include transform(none);
          position:absolute;
          top:0;
          height:100%;
          width:40px;
        }

        &:before {
          color:$white;
          font-size:54px;
          line-height:54px;
          text-shadow:0 1px 10px rgba(0, 0, 0, .6);
          @include linkcolor-transition;

          @media screen and (min-width:$screen-sm-min) {
            @include autocenterXY();
          }
        }

        &:hover {
          background-color:transparent;

          &:not(.disabled) {
            &:before {
              color:$orange;
            }
          }
        }

        &.disabled {
          cursor:auto;
        }
      }

      .owl-prev {
        left:0;
        @include schoeck-icon($icon-arrow-left);
      }

      .owl-next {
        right:0;
        @include schoeck-icon($icon-arrow-right);
      }
    }
    .owl-dots {
      margin-top:40px;

      @media screen and (max-width:$screen-sm-max) {
        margin-top:20px;
      }

      .owl-dot {
        height:8px;
        width:8px;
        margin-right:8px;

        &:last-child {
          margin-right:0;
        }

        span {
          height:8px;
          width:8px;
          background-color:$grey;
          @include border-radius(50%);
          margin:0;
        }

        &.active {
          span {
            background-color:$blue;
          }
        }
      }
    }
  }
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  @include transition(none);
}

/* schoeck slider */

.schoeck_slider {
  .element_wrapper {
    .image_wrapper {
      span {
        display:block;
        text-align:center;
      }

      img {
        width:auto;
        height:auto;
        max-width:100%;
        display:inline-block;

        &.lazy-srcset {
          width:100%;
          height:auto;
        }
      }

      &:not(.play_icon_wrapper) {
        position:relative;

        &:before {
          top:0;
          left:0;
          display:block;
          padding-top:(9 / 16) * 100%; /* this forces 16:9 aspect ratio */
          width:100%;
          content:'';
        }

        img {
          @include autocenterXY();
        }
      }
    }
  }
}

/* news slider */
.experience_reports {
  .owl-stage-outer {
    @include border-radius(6px);
    background-color:#fff;
    @include box-shadow(0 2px rgba(0, 0, 0, .05));
    border:solid 1px $lightgrey;

    @media print {
      border:none !important;
    }

    @media screen and (max-width:$screen-xs-max) {
      @include box-shadow(1px 2px 6px rgba(0, 0, 0, .1));
    }
  }

  .owl-controls {
    .owl-nav {
      .owl-prev,
      .owl-next {
        margin-top:-28px;

        &.disabled {
          display:none !important;
        }
      }
      .owl-prev {
        left:25px;
      }
      .owl-next {
        right:25px;
      }
    }
  }

  .owl-item {
    article {
      padding:40px 90px;

      @media screen and (max-width:$screen-xs-max) {
        padding:15px;
      }

      .col-image {
        @media screen and (max-width:$screen-xs-max) {
          margin-bottom:15px;
        }
      }

      .image {
        img {
          width:100%;
          height:auto;
        }
      }

      .header {
        margin:0;
        @include rem-font-size(23);
        @include rem-line-height(28);

        @media screen and (max-width:$screen-xs-max) {
          @include rem-font-size(20);
          @include rem-line-height(25);
        }

        @media screen and (max-width:400px) {
          @include rem-font-size(19);
          @include rem-line-height(22);
        }

        @media screen and (max-width:350px) {
          @include rem-font-size(18);
          @include rem-line-height(21);
        }
      }

      .subheader {
        $subheader-factor:0.75;

        margin:0;
        color:$orange;
        @include rem-font-size(25 * $subheader-factor);
        @include rem-line-height(29 * $subheader-factor);

        @media screen and (max-width:$screen-xs-max) {
          @include rem-font-size(23 * $subheader-factor);
          @include rem-line-height(28 * $subheader-factor);
        }

        @media screen and (max-width:400px) {
          @include rem-font-size(22 * $subheader-factor);
          @include rem-line-height(27 * $subheader-factor);
        }

        @media screen and (max-width:350px) {
          @include rem-font-size(21 * $subheader-factor);
          @include rem-line-height(26 * $subheader-factor);
        }
      }

      .teaser {
        margin-top:15px;
      }

      .link_wrapper {
        margin-top:5px;
      }
    }
  }
  .owl-carousel {
    &.slider_controls_above_on_mobile {
      .owl-controls {
        .owl-nav {
          .owl-prev {
            @media screen and (max-width:$screen-xs-max) {
              left:15px;
            }
          }
          .owl-next {
            @media screen and (max-width:$screen-xs-max) {
              right:15px;
            }
          }
        }
      }
    }
  }
}

/* controls above on mobile */
.owl-carousel.slider_controls_above_on_mobile {
  @media screen and (max-width:$screen-xs-max) {
    &.has_multiple_articles {
      .owl-item {
        .element_wrapper {
          padding-top:65px;
        }
      }
    }

    .owl-controls {
      .owl-dots {
        margin-top:0;
        @include autocenterX();
        top:28px;
        width:100%;
        padding-left:50px;
        padding-right:50px;
      }

      .owl-nav {
        .owl-prev {
          left:0;
        }
        .owl-next {
          right:0;
        }

        .owl-prev,
        .owl-next {
          top:20px;
          @include translateY(0);
          margin-top:0;
          z-index:10;
          opacity:1;

          &:before {
            color:$grey;
            font-weight:bold !important;
            font-size:25px;
            line-height:25px;
            text-shadow:none;
          }
        }
      }
    }
  }
}

/* quoted text */
@import "../quote/_code";

JavaScript

                jQuery(document).ready(function() {
  jQuery('.experiencereport_slider_owl').each(function() {
    var $owl=jQuery(this),
      hasMultipleArticles=($owl.find('article').length>1);

    if(hasMultipleArticles)
      $owl.addClass('has_multiple_articles');

    $owl.owlCarousel({
      lazyLoad:true,
      items:1,
      nav:(hasMultipleArticles),
      loop:(hasMultipleArticles),
      navText:['', ''],
      dots:(hasMultipleArticles),
      mouseDrag:(hasMultipleArticles),
      touchTrag:(hasMultipleArticles),
      autoHeight:true,
      onResized:function() {
        $owl.data('owlCarousel')._plugins.autoHeight.update();
      },
      responsive:{
        0:{
          margin:15
        },
        768:{
          margin:40
        }
      }
    });
  });
});

Abhängigkeiten

www.owlcarousel2.github.io