@import url("reset.css");
@import url("typo.css");
@import url("grid.css");

/*|-------------------------------------------------------------------------------|*/
/*| Hintergründe & Farben                                                         |*/
/*|-------------------------------------------------------------------------------|*/

.bg--white   { background: #f6f6f6; color: #111111; }
.bg--black   { background: #111111; color: #f6f6f6; }
.bg--ltgrey  { background: #d2d2d2; color: #111111; }
.bg--sltgrey { background: #ededed; color: #111111; }
.bg--dkgrey  { background: #969696; color: #111111; }
.bg--green   { background: #c4cc3c; color: #111111; }

.color--black { color: #111111; }
.color--white { color: #f6f6f6; }
.color--green { color: #c4cc3c; }



/*|-------------------------------------------------------------------------------|*/
/*| Abstände von Containern und Elementen zueinander                              |*/
/*|-------------------------------------------------------------------------------|*/

/* Margin */
/* 0px */
.m0  { margin:        0; }
.mb0 { margin-bottom: 0; }

/* 10px */
.mt1 { margin-top:    0.625rem; }
.mr1 { margin-right:  0.625rem; }
.mb1 { margin-bottom: 0.625rem; }

/* 20px */
.mt2 { margin-top:    1.25rem; }
.mr2 { margin-right:  1.25rem; }
.mb2 { margin-bottom: 1.25rem; }
.ml2 { margin-left:   1.25rem; }

/* 40px */
.mt3 { margin-top:    2.5rem; }
.mb3 { margin-bottom: 2.5rem; }

/* 60px */
.mt4 { margin-top:    3.75rem; }
.mb4 { margin-bottom: 3.75rem; }

/* 80px */
.mt5 { margin-top:    5rem; }
.mb5 { margin-bottom: 5rem; }

/* Negative Margin -- Zur Verwendung im Grid-System */
.mxn-mini { margin-left: -0.3125em; margin-right: -0.3125em; }    /* -5px  */
.mxn1     { margin-left: -0.625rem; margin-right: -0.625rem; }    /* -10px */
.mxn2     { margin-left: -1.25rem;  margin-right: -1.25rem;  }    /* -20px */
.mxn3     { margin-left: -2.5rem;   margin-right: -2.5rem;   }    /* -40px */

/* Automatisches Margin (.mt-auto/.mb-auto setzen einen Flex-Container voraus.) */
.m-auto  { margin:        auto; }
.mt-auto { margin-top:    auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left:   auto; }
.mx-auto { margin-left:   auto; margin-right: auto; }


/* Padding */
/* 5px */
.p-mini  { padding: 0.3125em; }
.py-mini { padding-top: 0.3125em;  padding-bottom: 0.3125em; }

/* 10px */
.p1  { padding: 0.625rem; }
.px1 { padding-left: 0.625rem; padding-right:  0.625rem; }
.py1 { padding-top:  0.625rem; padding-bottom: 0.625rem; }

/* 20px */
.p2  { padding: 1.25rem; }
.px2 { padding-left: 1.25rem; padding-right:  1.25rem; }
.py2 { padding-top:  1.25rem; padding-bottom: 1.25rem; }

/* 40px */
.p3  { padding: 2.5rem; }
.px3 { padding-left: 2.5rem; padding-right:  2.5rem; }
.py3 { padding-top:  2.5rem; padding-bottom: 2.5rem; }

/* 60px */
.py4 { padding-top:  3.75rem; padding-bottom: 3.75rem; }

/* 80px */
.py5 { padding-top:  5.5rem; padding-bottom: 5.5rem; }

/* 160px */
.quote-padding {
    padding-top:    10rem;
    padding-bottom: 10rem;
}




/*|-------------------------------------------------------------------------------|*/
/*| Rahmen                                                                        |*/
/*|-------------------------------------------------------------------------------|*/

.border        { border:        thin solid; }
.border-top    { border-top:    thin solid; }
.border-bottom { border-bottom: thin solid; }


/* Trennstrich nach Überschriften */
.separator:after {
    font-size: 1.5rem;
    content: "—";
    display: block;
}

    /* Trennstrich nach Überschriften innerhalb von Slides und Hero-Headern */
    .separator--opener:after {
        line-height: 0.5;
        margin-bottom: 0.25em;
    }

@media screen and (min-width: 40rem)     { .separator:after { font-size: 1.75rem; } }
@media screen and (min-width: 60.625rem) { .separator:after { font-size: 2rem;    } }
@media screen and (min-width: 75rem)     { .separator:after { font-size: 2.5rem;  } }




/*|-------------------------------------------------------------------------------|*/
/*| Maximal mögliche Breite & Höhe (abhängig vom direkten Eltern-Element)         |*/
/*|-------------------------------------------------------------------------------|*/

.full-height { height: 100%; }
.full-width  { width:  100%; }




/*|-------------------------------------------------------------------------------|*/
/*| Status-Klassen                                                                |*/
/*|-------------------------------------------------------------------------------|*/

/* Vereinzelt wird auch .hidden benutzt [?] */
.is-hidden {
    display: none;
    visibility: hidden;
}

.is-collapsed {
    max-height: 0;
    overflow: hidden;
}




/*----------------------------------------------------------------------------*/
/* Elemente verstecken. Versteckte Elemente werden weiterhin durch Goggle     */
/* und Screenreader "gesehen". !important, um wirklich alle anderen Stile     */
/* überbieten zu können.                                                      */
/*----------------------------------------------------------------------------*/

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    margin:  0 !important;
    padding: 0 !important;
    height: 1px !important;
    white-space: nowrap;
    width:  1px !important;
    overflow: hidden;
}

body:hover .visually-hidden a, body:hover .visually-hidden input,
body:hover .visually-hidden button { display: none !important; }




/*|-------------------------------------------------------------------------------|*/
/*| Flexible Boxen                                                                |*/
/*|-------------------------------------------------------------------------------|*/

/* Das muss in irgendeiner Form besser standardisiert werden. */

.flex       { display: flex; flex-direction: column; flex: 0 1 auto; }
.flex--row  { flex-direction: row; }
.flex--wrap { flex-wrap: wrap; }

/* Flex-Items automatisch den zur Verfügung stehenden Raum nutzen lassen. */
/* Orientiert sich an der Main-Axis. */
.flex__auto { flex: 1 1 auto; }

/* Flex-Items entlang der Cross-Axis ausrichten */
.cross--center   { align-items: center;     }
.cross--start    { align-items: flex-start; }
.cross--end      { align-items: flex-end;   }

/* Flex-Items entlang der Main-Axis ausrichten */
.main--justify { justify-content: space-between; }
.main--center  { justify-content: center;        }
.main--start   { justify-content: flex-start;    }
.main--end     { justify-content: flex-end;      }

/* Einzelne Flex-Items einer Gruppe entlang der Main-Axis ausrichten */
.self--center { align-self: center;     }
.self--start  { align-self: flex-start; }
.self--end    { align-self: flex-end;   }
.self--stretch { align-self: stretch; }

.self--noshrink { flex-shrink: 0; }

/* Flex-Items sortieren */
.o1 { order: 1; }
.o2 { order: 2; }
.o3 { order: 3; }
.o4 { order: 4; }
.o5 { order: 5; }

@media screen and (min-width: 40rem) {
    .sm-flex { display: flex; }
    .flex { flex-direction: row; }
    .sm-flex--column { flex-direction: column; }

    .sm-flex__standard { flex: 0 1 auto; }

    .sm-cross--center   { align-items: center;     }
    .sm-cross--start    { align-items: flex-start; }
    .sm-cross--end      { align-items: flex-end;   }

    .sm-main--justify { justify-content: space-between; }
    .sm-main--center  { justify-content: center;        }
    .sm-main--start   { justify-content: flex-start;    }
    .sm-main--end     { justify-content: flex-end;      }

    .sm-self-center { align-self: center;     }
    .sm-self--start { align-self: flex-start; }
    .sm-self--end   { align-self: flex-end;   }

    .sm-o1 { order: 1; }
    .sm-o2 { order: 2; }
    .sm-o3 { order: 3; }
    .sm-o4 { order: 4; }
    .sm-o5 { order: 5; }
}

@media screen and (min-width: 60.625rem) {
    .md-o1 { order: 1; }
    .md-o2 { order: 2; }
}


@media screen and (min-width: 60.625em) {
    .columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .columns > * {
        display: inline-block;
    }
}




/*|-------------------------------------------------------------------------------|*/
/*| Listen                                                                        |*/
/*|-------------------------------------------------------------------------------|*/

ul:not([class]),
ol:not([class]) {
    padding-left: 1.25rem;
}

.list--blank {
    list-style: none;
}

.list--line > li {
    border-top: thin solid;
    padding: 0.3125em 0;
}

    .list--line > li:last-child {
        border-bottom: thin solid;
    }

.list--network {
    list-style: none;
    padding-left: 2.5em;
}

    .list--network > li {
        position: relative;
    }

    .list--network > li:before {
        border-radius: 50%;
        content: "";
        width:  1rem;
        height: 1rem;
        display: block;
        position: absolute;
        left: -2.25em;
        top: 0.25em;
    }

    .list--network > li:nth-child(1):before { background: #b2b200; }
    .list--network > li:nth-child(2):before { background: #f5e300; }
    .list--network > li:nth-child(3):before { background: #79a479; }
    .list--network > li:nth-child(4):before { background: #838b67; }

    /* Große Zahlen neben Listenpunkten in fe-ergonomics.php */
    .big-number {
        font-size: 3em;
        margin-right: 3.5vw;
        line-height: 0.75;
    }




/*|-------------------------------------------------------------------------------|*/
/*| User-Interface: Buttons, Links & Formulare                                    |*/
/*|-------------------------------------------------------------------------------|*/

/*--- Buttons ---*/
.btn {
	border: thin solid #969696;
    border-radius: 0; /* überschreibt Bootstrap Core */
	cursor: pointer;
    display: inline-block;
	padding: 0.25em 1.25em;
	text-align: center;
}

	.btn::-moz-focus-inner {
		border:  0;
		padding: 0;
	}

    .btn.bg--black:hover,
    .btn.bg--black:focus {
        color: #f6f6f6;
    }

    .btn.bg--white:hover,
    .btn.bg--white:focus {
        color: #111111;
    }

    .btn[disabled] {
        opacity: 0.5;
    }

    .btn:focus {
        border-color: #111111;
    }

    .btn--circle {
        background: #f6f6f6;
        border: 0;
        border-radius: 50%;
        padding: 0;
        margin: 0;
        width:  10px;
        height: 10px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    }

    .btn--circle.dark {
        background: #969696;
        box-shadow: none;
    }

    .btn--arrow {
        background: #f6f6f6 url("../../pic/system/breadcrumb.svg") calc(100% - 0.5rem) center/0.4rem no-repeat;
        padding-left: 0.75em;
        padding-right: 2.25rem;
        text-align: left;
        display: inline-block;
        min-width: 10rem;
    }

    .btn--arrow.dark {
        background: #111111 url("../../pic/system/breadcrumb--inverted.svg") calc(100% - 0.5rem) center/0.4rem no-repeat;
    }

    .btn--toggle {
        border: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2.5em;
        padding-right: 2.5em;
    }

    .btn--toggle > img[src*=".svg"] {
        width: auto;
    }

    [data-canexpand="false"] ~ div > .btn--toggle {
        opacity: 0.5;
    }

    a.color--white:hover,
    a.color--white:focus {
        color: #f6f6f6;
    }

/*--- Links ---*/
.clean-link,
.clean-link:hover {
    text-decoration: none;
}

.block {
    display: block;
}


a.cta, a.cta2 {
    background-color: #c4cc3c;
    color: #111;
    display: inline-block;
    padding: .75em 1.5em;
    text-align: center;
    text-decoration: none;
}

a.cta2 {
    background-color: #d2d2d2;
    text-decoration: underline;
}

/*--- Icons ---*/
.icon {
    display: block;
    height: 4em;
    width:  4em;
}

.icon--small {
    height: 1.875rem;
    width:  1.875rem;
}

.icon--video {
    margin-left: auto;
    margin-right: auto;
}

.icon--social,
.icon--upwards,
.icon--video-small {
    width:  1.25rem;
    height: 1.25rem;
}




/*|-------------------------------------------------------------------------------|*/
/*| Horizontale Navigation (Breadcrumbs)                                          |*/
/*|-------------------------------------------------------------------------------|*/

/* Überschreibt den Bootstrap Core (Socialhub) */
.nav {
    list-style: none;
    padding-left: 0;
}

.nav > li, .nav__item {
    display: inline-block;
}

.nav > li > a, .nav__item a {
    display: inline;
    text-decoration: none;
    padding: 0;
}

.nav > li > a:hover, nav > li > a:focus {
    background-color: transparent;
}

.sep2 + .sep2::before {
    content: url("../../pic/system/breadcrumb.svg");
    display: inline-block;
    margin-right: .24em;
    width: .5rem;
    height: 1rem;
}

.bg--black .sep2 + .sep2::before {
    content: url("../../pic/system/breadcrumb--inverted.svg");
}




/*|-------------------------------------------------------------------------------|*/
/*| .media-container                                                              |*/
/*|-------------------------------------------------------------------------------|*/

.media {
    overflow: hidden;
    position: relative;
    width:  100%;
    height: 100vh;
    transform: translateZ(0);
}

    /* Das ist ein schmaler Teaser (rider-hynek.php/rider-cfet.php) */
    .media--narrow {
        height: 0;
        padding-bottom: 100%;
    }

    .media__background {
        width:  100%;
        height: 100%;
    }

    .media__content {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
    }

    /* IE 11 Fix */
    .media__content.container {
        width: 100%;
        left: 50%;
        transform: translatex(-50%);
    }

    .media--narrow .media__background,
    .media--capped .media__background {
        position: absolute;
    }

    .media .video-wrapper {
        position: absolute;
    }

@media screen and (min-width: 40rem) {
    .media--fluid .media__content {
        position: absolute;
    }

    .media--narrow {
        padding-bottom: 75%;
    }

    .sm-media {
        overflow: hidden;
        position: relative;
        width:  100%;
        height: 100vh;
    }

    .sm-media__background {
        width:  100%;
        height: 100%;
    }

    .sm-media__content {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
    }
}

@media screen and (min-width: 60.625rem) {
    .media--narrow {
        padding-bottom: 33.33%;
    }
}




/*---------------------------------------------------------------------------*/
/* Galerien                                                                  */
/*---------------------------------------------------------------------------*/

.galerie {
    position: relative;
    overflow: hidden;
}

.galerie--fullscreen {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
}

    .galerie--fullscreen > .galerie__content-wrapper {
        height: 100%;
    }

    .galerie--fullscreen > .galerie__thumbs {
        position: absolute;
        bottom: 0;
        left:   50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }

    .galerie--fullscreen .galerie__thumbs--nowrap {
        width: 100%;
    }

    .galerie--fullscreen .thumbnails__item {
        flex: 0 0 auto;
        width: 70px;
    }


    @media screen and (max-width: 40rem) {
        .galerie--fullscreen .control-arrows {
            display: none;
        }
    }

    .galerie--fullscreen .galerie__slide > div {
        height: 100%;
    }

    .galerie--fullscreen .slide-img {
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        top:  50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

    .galerie--fullscreen[data-thumbs="false"] .slide-img {
        top:  50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

    /* /!\ Magic Number: 70px /!\ */
    .galerie--fullscreen[data-thumbs="true"] .slide-img {
        top: calc(50% - (70px + 1.25em));
        left: 50%;
        max-height: calc(100% - (70px + 1.25em));
        -webkit-transform: translateX(-50%) translateY(-50%) translateY(70px) translateY(-1.25em);
                transform: translateX(-50%) translateY(-50%) translateY(70px) translateY(-1.25em);
    }

.galerie__content-wrapper {
    position: relative;
}

    .galerie__content-wrapper.light {
        background-color: #f6f6f6;
        color: #111111;
    }

    .galerie__content-wrapper.dark {
        background-color: #111111;
        color: #f6f6f6;
    }

.galerie__img { display: block; }

.galerie__content {
    background-color: inherit;
    position: relative;
    max-width: 2400px;
    margin:  0 auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

    .galerie__content--fullscreen {
        background-color: #f6f6f6;
        color: #111111;
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .galerie__content.is-zoomable:hover {
        cursor: zoom-in;
    }

.galerie__content::before {
    content: "";
    display: block;
}

.galerie__content.xs-square::before {
    padding-bottom: 100%;
}

.galerie__content.xs-rect::before {
    padding-bottom: 150%;
}

@media screen and (min-width: 40rem) {
    .galerie__content.sm-square::before {
        padding-bottom: 100%;
    }

    .galerie__content.sm-rect::before {
        padding-bottom: 56.25%;
    }

    .galerie__content.sm-rect--wide::before {
        padding-bottom: 42.64%;
    }
}




/*---------------------------------------------------------------------------*/
/* Slides und deren Inhalt einer Galerie                                     */
/*---------------------------------------------------------------------------*/

.galerie__slide {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    will-change: left;
}

.galerie__slide.current {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.galerie__slide.transition {
    -webkit-transition: left 500ms 0ms ease;
            transition: left 500ms 0ms ease;
}

.galerie__slide picture {
    max-width: 100%;
}

.slide-img {
    margin: 0 auto;
}

.slide-txt {
    padding-top:    1.25em;
    padding-bottom: 1.25em;

    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;

    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.slide-txt.bottom {
    bottom: 56px;
}

.slide-txt.center {
    bottom: auto;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.slide-txt.center-vertical {
    bottom: auto;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

@media screen and (min-width: 40rem) {
    .slide-txt {
        padding-top: 2.5em;
    }

    .slide-txt.top { top: 0; }
    .slide-txt.bottom { bottom: 56px; }
}




/*---------------------------------------------------------------------------*/
/* Kontroll-Elemente einer Galerie                                           */
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/* Kontroll-Wrapper                                                          */
/*---------------------------------------------------------------------------*/

.galerie__controls {
    max-width: 2400px;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
}

.galerie__controls.border { border: 0; } /* => Besser: .border aus dem Markup entfernen */
.galerie__controls button { pointer-events: all; }

.control-arrows,
.control-buttons {
    list-style: none;
    position: absolute;
    width: 100%;
}




/*---------------------------------------------------------------------------*/
/* Kontroll-Pfeile                                                           */
/*---------------------------------------------------------------------------*/

.control-arrows {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    left: 0;
    top: 0;
}

.control-arrows > li {
    padding: 0 0.625em;
}

.control-arrows > li:first-child {
    margin-left: -0.625em;
}

.control-arrows > li:last-child  {
    margin-right: -0.625em;
}

@media screen and (min-width: 40rem) {
    .sm-rect ~ .galerie__controls > .control-arrows > li {
        height: 80%;
    }

    .sm-square ~ .galerie__controls > .control-arrows > li {
        height: 40%;
    }
}

.btn--control-arrow {
    border: 0;
    margin:  0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: none;
}


.btn--control-arrow.border {
    border: 0;
    padding: 0 1.25em;
}

.btn--control-arrow.disabled {
    display: none;
    visibility: hidden;
}

.btn--control-arrow.video-playing {
    opacity: .25;
}

.btn--control-arrow > span {
    background-color: #f6f6f6;
    border-radius: 50%;
    color: #111;
    display: block;
    opacity: .5;
}

.btn--control-arrow:hover > span {
    opacity: 1;
}

.icon--gallery-btn {
    width:  1.875em;
    height: 1.875em;
    margin: 0 auto;
}

@media screen and (min-width: 40rem) {
    .btn--control-arrow.video-playing:hover {
        opacity: 1;
    }

    .btn--control-arrow {
        display: block;
    }
}

@media screen and (min-width: 60.625rem) {
    .icon--gallery-btn {
        width:  2.8125em;
        height: 2.8125em;
        margin: 0 auto;
    }
}




/*---------------------------------------------------------------------------*/
/* Kontroll-Pfeile                                                           */
/*---------------------------------------------------------------------------*/

.control-buttons {
    max-width: 83.25rem;
    padding-left:  1.25em;
    padding-right: 1.25em;
    text-align: center;
    bottom: 40px;
    left:   50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.control-buttons > li {
    display: inline-block;
    margin: 0 0.125rem;
    vertical-align: middle;
}


.btn--control-jump {
    background: transparent;
    border: 0;
    font-size: 0;
    vertical-align: middle;
    padding: 0;
    width:  1rem;
    height: 1rem;
    opacity: 0.5;
    text-align: center;
}


.btn--control-jump > span {
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 1px 1px 1px rgba(17,17,17,0.5);
    width:  0.625rem;
    height: 0.625rem;
}

.light .btn--control-jump > span {
    background-color: #969696;
    box-shadow: none;
}

.dark .btn--control-jump > span {
    background-color: #f6f6f6
}

.btn--control-jump.current {
    opacity: 1;
}

/* Auswahl von Bildern innerhalb von Galerien stoppen */
.galerie img {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/*---------------------------------------------------------------------------*/
/* Thumbnails                                                                */
/*---------------------------------------------------------------------------*/

.galerie__thumbs--nowrap .thumbnails {
    flex-flow: row nowrap;
    overflow: hidden;
}

.galerie__thumbs--nowrap .thumbnails:hover {
    cursor: grab;
}

.thumbnails.grabbing:hover {
    cursor: grabbing;
}

.container.px2 .galerie__thumbs {
    margin-left:  -1.25em;
    margin-right: -1.25em;
}

.thumbnails {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    list-style: none;
    margin: -.625rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.thumbnails__item {
    flex: 0 0 16.666%;
    width: 16.666%;
    min-width: 70px;
    padding: 0.625rem;
    position: relative;
}

.galerie__thumbs--nowrap .thumbnails__item:first-child { margin-left: auto; }
.galerie__thumbs--nowrap .thumbnails__item:last-child { margin-right: auto; }


/* Thumbnail-Bilder */
.thumbnail {
    position: relative;
    opacity: 0.5;
    overflow: hidden;
}

.thumbnail:hover,
.thumbnail.current {
    opacity: 1;
}

.thumbnail::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.thumbnail__img {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}




/*|-------------------------------------------------------------------------------|*/
/*| Schatten auf Bildern und Containern anzeigen                                  |*/
/*|-------------------------------------------------------------------------------|*/

.pic-shadow > div {
    z-index: 1;
}

.pic-shadow:after {
    background: linear-gradient(to top, rgba(17,17,17,0.4) 20%, transparent);
    content: "";
    display: block;
    position: absolute;
    top:    0;
    left:   0;
    bottom: 0;
    right:  0;
}

.pic-shadow--white:after {
    background: linear-gradient(360deg, rgba(246,246,246,0.4) 20%, transparent);
}

.pic-shadow--left:after {
    background: linear-gradient(to right, rgba(17,17,17,0.4) 20%, transparent);
}

@media screen and (min-width: 40rem) {
    .pic-shadow:after {
        background: linear-gradient(to top, rgba(17,17,17,0.4) 20%, transparent);
    }

    .pic-shadow--right:after {
        background: linear-gradient(-90deg, rgba(17,17,17,0.4) 20%, transparent);
    }

    .pic-shadow--xs-only:after {
        background: transparent;
    }
}

.zoombox {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.zoombox.hidden {
    display: none;
}

.zoombox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}




/*|-------------------------------------------------------------------------------|*/
/*| Special Snowflake Galerien / Legacy-Code                                      |*/
/*|-------------------------------------------------------------------------------|*/

.ms-gallery { position: relative; }

.ms-gallery--slideshow {
    display: inline-block;
    width: 100%;
}

.ms-gallery__content {
    font-size: 0;   /* Entfernt Margin des Inline-Blocks.*/
    overflow: hidden;
    white-space: nowrap;
}

.ms-gallery__content__item {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    vertical-align: middle;
    white-space: normal;
}

.ms-slideshow-control {
    pointer-events: none;
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    z-index: 2;
}

.ms-slideshow-control.container {
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
}

.ms-slideshow-control button { pointer-events: all;  }

.ms-slideshow-jump-container {
    position: absolute;
    bottom: 0;
    left:  1.25em;
    right: 1.25em;
}

.ms-slideshow__jump {
    opacity: 0.5;
    display: inline-block;
    margin: 0 0.125rem;
    padding: 0;
    vertical-align: middle;
}

.ms-slideshow__jump.current { opacity: 1; }

.ms-slideshow__jump.line {
    opacity: 1;
    margin: 0;
}

.ms-slideshow__jump.line > button {
    border: 0;
}

.ms-slideshow__jump.line.current > button {
    border-bottom: medium solid #c4cc3c;
}

.ms-slideshow-control .ms-btn--gallery { height: 50%; }

.ms-btn--gallery img { width: 25%;  margin: auto; max-width: 1.25em; }
.ms-btn--gallery img.p-mini { padding: 3px; }

.ms-btn--gallery {
    border: 0;
    margin:  0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.ms-btn--gallery > span {
    display: block;
    color: inherit;
    margin: 0 auto;
}

.ms-btn--gallery > span {
    display: block;
    color: inherit;
}

.ms-btn--gallery.noborder > span {
    border: 0;
    box-shadow: none
}


.ms-btn--gallery:hover > span {
    background-color: #f6f6f6;
    color: #111111;
    opacity: 1;
}

.ms-btn--gallery.noborder:hover > span {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
}

.ms-btn--gallery[data-dir="l"] span {
    float: left;
}

.ms-btn--gallery[data-dir="r"] span {
    float: right;
}




/*-------------------------------------------------------------------*/
/* Custom Video Player                                               */
/*-------------------------------------------------------------------*/
.video {
    background-color: #111111;
    color: #f6f6f6;
    position: relative;
    overflow: hidden;
}

.video.is-fullscreen {
    position: fixed;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
}

/* Fix für -webkit- Browser */
.video.is-fullscreen:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

.video.is-fullscreen .video__poster img,
.video.is-fullscreen .video__player > video {
    width: 100%;
    height: 100%;
    max-width: none;
}


.video__player > video {
    position: absolute;
    top:   50%;
    left:  50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.video__poster {
    position: relative;
    margin-left:  auto;
    margin-right: auto;
}

.video__poster.is-hidden {
    display: block;
    visibility: visible;
    opacity: 0;
}

.video__poster:hover {
    cursor: pointer;
}

.video__poster > div {
    color: white;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.video__poster.is-hidden:hover + .video__controls,
.video__controls:hover {
    bottom: 0;
}

.video__controls {
    background-color: rgba(17,17,17,0.5);
    color: #d2d2d2;
    font-size: 75%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0.3125rem;
    position: absolute;
    left:   0;
    right:  0;
    bottom: -2.125rem;
    transition: bottom 100ms 0ms linear;
}


/* Einzele Video-Buttons */
.toggle-container,
.mute-container,
.volume-container,
.seek-container,
.time-container,
.fullscreen-container {
    padding: 0 5px;
    vertical-align: middle;
}

.volume-container {
    display: flex;
    flex-flow: column nowrap;
}

.time-container {
    display: flex;
    flex-flow: row nowrap;
}


/* Buttons */
.vbtn__toggle,
.vbtn__mute {
    display: block;
    width: 20px;
    height: 20px;
    overflow: hidden;
}


/* Progress-Leiste */
.seek-container { flex: 1 1 auto; }

.seek-container > div {
    background-color: #111111;
    border-radius: 4px;
    color: #f6f6f6;
    height: 0.666em;
    position: relative;
}

.seek-container:hover { cursor: pointer; }

.vbtn__seek,
.vbtn__buffer {
    border-radius: 4px;
    position: absolute;
    top:    0;
    left:   0;
    bottom: 0;
    pointer-events: none;
}

.vbtn__seek   { background-color: #c4cc3c; }
.vbtn__buffer { background-color: #969696; }

.volume-container {
    flex: 0 0 60px;
    width: 60px;
}


/* Video-Embed, das die Privatssphäre respektiert. */
.video-embed {
    background-color: black;
    color: white;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
}

.video-embed::after {
    background-color: rgba(0, 0, 0, 0.25);
    content: "";
    position: absolute;
    width: 100%; height: 100%;
}

.video-embed.is-playing::after {
    display: none;
}

.video-embed__controls {
    display: flex;
    flex-direction: column-reverse;
    max-width: 40em;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.video-embed__controls[hidden] {
    display: none;
}

.video-embed__controls > button {
    background-color: transparent;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    margin-bottom: 0.625em;
    padding: 0;
    text-align: inherit;
}

.video-embed__controls svg {
    display: inline-block;
}

.video-embed > img,
.video-embed > iframe {
    border: 0;
    position: absolute;
    width: 100%; height: 100%;
}

.video-embed > img {
    object-fit: cover;
}



/*|-------------------------------------------------------------------------------|*/
/*| Bilder ineinander überblenden                                                 |*/
/*|-------------------------------------------------------------------------------|*/
/*
    .img-fader: fe-ergonomics.php
    .image-fader: rider-rickus.php; article-be3.php
*/

.img-fader,
.image-fader {
    position: relative;
}

.img-fader > img {
    transition: opacity .9s 0s linear;
}

.img-fader > img:not(:first-child) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.image-fader > img {
    transition: opacity 10s ease-in;
}

.image-fader__top {
    position: absolute;
    top:  0;
    left: 0;
    -webkit-animation: imgFadeAnimation 10s ease-in infinite alternate;
            animation: imgFadeAnimation 10s ease-in infinite alternate;
}

@-webkit-keyframes imgFadeAnimation {
    0%   { opacity:1; }
    45%  { opacity:1; }
    55%  { opacity:0; }
    100% { opacity:0; }
}

@keyframes imgFadeAnimation {
    0%   { opacity:1; }
    45%  { opacity:1; }
    55%  { opacity:0; }
    100% { opacity:0; }
}




/*|-------------------------------------------------------------------------------|*/
/*| Tab-Widget                                                                    |*/
/*|-------------------------------------------------------------------------------|*/

.tab-list { background: transparent; }

.tab-list__item { display: block; background: #ededed; }

.tab-list__item[data-tab-active] { background: #c4cc3c; }
.tab-list__item--vertical[data-tab-active] { background: transparent; }

.tab-list__item--vertical[data-tab-active] h3,
.tab-list__item--nostripe[data-tab-active] h3 {
    color: #c4cc3c;
}

.tab-list__link {
    display: block;
    padding: 0.625em 1.25em;
    text-decoration: none;
}

.tab-list__link:focus { outline: none; }

.tab-panel { background: #ededed; }
.tab-panel[aria-hidden='true'] { display: none; }

@media screen and (min-width: 800px) {
    .tab-list__item,
    .tab-list__link {
        display: inline-block;
    }

    .tab-list__item { background: transparent; }
    .tab-list__item[data-tab-active] {
        background: #ededed;
        box-shadow: 0 3px 0 #c4cc3c inset;
    }

    .tab-list__item--vertical[data-tab-active],
    .tab-list__item--nostripe[data-tab-active] {
        background: transparent;
        box-shadow: none;
    }
}


.xs-hide { display: none; }

.md-show { display: none; }

@media screen and (min-width: 40em) {
    .xs-hide { display: block; }
    .sm-hide { display: none; }
}

@media screen and (min-width: 60.625em) {
    .md-show { display: block; }
}



/*|-------------------------------------------------------------------------------|*/
/*| Generelles Modal => wird nicht mehr verwendet [?]                             |*/
/*|-------------------------------------------------------------------------------|*/

.modal,
.modal__background {
    position: fixed;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
}

.modal { z-index: 2000; }
.modal__background {
    background: rgba(0,0,0,0.5);
}

.modal,
.modal__content {
    display: none;
}

.modal.is-visible,
.modal__content.is-visible {
    display: block;
}

.modal-wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    max-width: 1280px;
    transform: translate(-50%, -50%);
    width: calc(100% - 2.5em);
}

.modal-close-btn {
    color: #f6f6f6;
    text-align: right;
    font-size: 2.5em;
    line-height: 1;
    width: 100%;
}

.is-blurry {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}




/*|-------------------------------------------------------------------------------|*/
/*| Seiten-Header & -Navigation                                                   |*/
/*|-------------------------------------------------------------------------------|*/

/* Hamburger Button */
.btn--hamburger {
    border: 0;
    width:  2.5em;
    height: 2.5em;
    padding: 0.3125em;
}

.btn--hamburger.is-open {
    position: relative;
}

.bg--white .btn--hamburger.is-open {
    background: #d2d2d2;
    color: #111111;
}

.bg--black .btn--hamburger.is-open {
    background: #f6f6f6;
    color: #111111;
}

.btn--hamburger.is-open:after {
    border-left:  0.625em solid transparent;
    border-right: 0.625em solid transparent;
    content: "";
    display: block;
    position: absolute;
    top:  100%;
    left: 50%;
    width:  0;
    height: 0;
    z-index: 4;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.btn--shop-now {
    float: right;
    padding: 0.3125em 0.625em;
}

.bg--white .btn--shop-now {
    background-color: #111111;
    color: #f6f6f6;
}

.bg--black .btn--shop-now {
    background-color: #f6f6f6;
    color: #111111;
}

.bg--white .btn--shop-now:hover,
.bg--white .btn--shop-now > a:hover {
    color: #f6f6f6;
}

.bg--white .btn--hamburger.is-open:after { border-top: 0.625em solid #d2d2d2; }
.bg--black .btn--hamburger.is-open:after { border-top: 0.625em solid #f6f6f6; }

/* Seitenheader */
.page-header {
    background: inherit;
    position: relative;
    overflow: visible;

    /* Bootstrap Core (Socialhub) überschreiben */
    border: 0;
    padding-top:    0;
    padding-bottom: 0;
}

/* Seitenheader -- Logo */
.page-header__logo {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-bottom: 1.25em;
}

/* .is-prepared wird beim Laden der Seite via Script hinzugefügt.  */
.page-header__nav.is-prepared {
    display: none;
    padding-top:    1.25em;
    padding-bottom: 1.25em;
}

@media screen and (max-width: 39.9375rem) {
    .bg--white .page-header__nav { background: #f6f6f6; color: #111111; }
    .bg--black .page-header__nav { background: #111111; color: #f6f6f6; }

    .page-header__nav.is-prepared  ul:first-of-type > .page-nav__item:first-child > a{ border-top: 0; }
    .page-header__nav.is-visible { display: block; }

    /* Furchtbar unelegant */
    .page-header.mt3 { margin-top: 1.25rem; }
    .page-header.mb2 { margin-bottom: 0;    }
}

/* Seitennavigation -- Hauptnavigation */
.page-nav {
    padding-bottom: 1.25em;
}

.page-nav__item > a {
    border-top: thin solid;
    display: block;
    padding-top:    0.3125em;
    padding-bottom: 0.3125em;
    letter-spacing: 0.0625em;
    text-decoration: none;
    text-transform: uppercase;
}

.page-nav ul:last-child > .page-nav__item:last-child > a {
    border-bottom: thin solid;
}

/* Seitennavigation -- Sprachwahl & German Innovation Logo */
.page-lang {
    align-items: flex-end;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-bottom: 0.625em;
}

.page-lang__nav > li { display: inline; }
.page-lang__nav > li + li::before { content: " / "; }

.page-lang--tert {
    justify-content: flex-end;
}


/* Social Media Links */
.social-nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

.social-nav:after {
    content: "";
    clear: both;
    display: block;
}

.social-nav > li + li {
    margin-left: 0.3125em;
}


/* Media-Queries */
@media screen and (min-width: 40rem) {
    .page-header__nav {
        margin-top: calc(4% - 1.25em);
    }

    .page-header__nav--tert {
        margin-top: 0;
    }

    .page-header__nav.is-prepared {
        display: block;
        position: relative;
        width: calc(9/12 * 100%);
        top:   0;
        right: 0;
        padding-top: 0;
    }
}

@media screen and (min-width: 40rem) and (max-width: 60.625rem) {
    .page-lang {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-lang > img {
        padding-bottom: 0.625em;
    }

    .social-nav {
        justify-content: flex-start;
    }

    .btn--shop-now {
        float: left;
    }
}

@media screen and (min-width: 60.625rem) {
    .page-nav ul > .page-nav__item:last-child > a {
        border-bottom: thin solid;
    }
}




/*|-------------------------------------------------------------------------------|*/
/*| Seiten-Footer                                                                 |*/
/*|-------------------------------------------------------------------------------|*/

.page-footer > li {
    width: 50%;
}

.page-footer--tert > li > div {
    border-top: 1px solid;
    padding: 0.3125em 0.625em;
}

.page-footer--tert > li:nth-last-child(-n + 2) > div {
    border-bottom: 1px solid;
}

.page-footer--tert > li.is-empty {
    display: none;
}

@media screen and (min-width: 30rem) {
    .page-footer > li {
        width: 33.333%;
    }

    .page-footer--tert > li:nth-last-child(-n + 3) > div {
        border-bottom: 1px solid;
    }
}

@media screen and (min-width: 40rem) {
    .page-footer > li {
        width: 25%;
    }

    .page-footer--tert > li:nth-last-child(-n + 4) > div {
        border-bottom: 1px solid;
    }

    .page-footer--tert > li.is-empty:nth-child(4) {
        display: block;
    }
}

@media screen and (min-width: 60.625rem) {
    .page-footer > li {
        width: 16.666%;
    }

    .page-footer--tert > li:nth-last-child(-n + 6) > div {
        border-bottom: 1px solid;
    }

    .page-footer--tert > li.is-empty {
        display: block;
    }
}

.tert-footer svg {
    display: block;
    width: 100%;
    height: auto;
}

.tert-footer li > div {
    width: 100%;
}

.tert-footer li:nth-child(-n+2) > div {
    border-top: 1px solid;
}

.tert-footer li.is-empty {
    display: none;
}

@media screen and (min-width: 40em) {
    .tert-footer li:nth-child(-n+4) > div {
        border-top: 1px solid;
    }

    .tert-footer li.is-empty:nth-child(4) {
        display: flex;
    }
}

@media screen and (min-width: 60.625em) {
    .tert-footer li:nth-child(-n+7) > div {
        border-top: 1px solid;
    }

    .tert-footer li.is-empty:nth-child(n+4):nth-child(-n+7) {
        display: flex;
    }
}




/*|-------------------------------------------------------------------------------|*/
/*| Sub-/In-Page Navigation                                                       |*/
/*|-------------------------------------------------------------------------------|*/

.page-subnav {
    background: #c4cc3c;
    border-bottom: 1px solid;
    color: #222222;
    display: none;
}

.page-subnav.dark {
    background-color: #111111;
    border-bottom: 1px solid #999999;
    color: #f6f6f6;
}

.page-subnav ul {
    display: none;
    margin-left:  -0.625em;
    margin-right: -0.625em;
    margin-bottom: 0;
}

.page-subnav select {
    background-color: transparent;
    background-image: url("../../pic/system/select-arrow.svg");
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0.625em 0;
}

.page-subnav.dark select {
    background-image: url("../../pic/system/select-arrow.svg");
}

.page-subnav__item > a {
    display: block;
    padding: 0.625em;
    text-decoration: none;
}

.page-subnav__item:first-child > a {
    font-weight: 700;
    letter-spacing: 0.0625em;
    padding: .625em 0;
}


.page-subnav--tert,
.page-subnav.sticky {
    position: fixed;
    top:   0;
    left:  0;
    right: 0;
    z-index: 1000;
    display: block;
}


@media screen and (min-width: 48.125em) {
    .page-subnav select { display: none; }

    .page-subnav {
        background-color: #f6f6f6;
        color: inherit;
    }

    .page-subnav  ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

    .page-subnav__item {
        display: flex;
        align-items: center;
    }

    .page-subnav__item.current {
        box-shadow: 0 3px 0 0 #c4cc3c inset;
    }

    .page-subnav__item:first-child { padding-left: 10px; }
    .page-subnav__item:first-child + li { margin-left: auto; }

    .page-subnav__item:last-child { margin-right: 0.625em; }
}




/*|-------------------------------------------------------------------------------|*/
/*| RIDER                                                                         |*/
/*|-------------------------------------------------------------------------------|*/

/* .rider-grid wird auch auf der Startseite (index.php) verwendet ... */
.rider-grid {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.rider-grid__item {
    flex: 0 0 auto;
    flex-direction: row;
    width: 50%;
}

.rider-grid__item.big {
    flex: 0 0 auto;
    width: 100%;
    min-height: 18rem;
}

.team-grid__item {
    flex: 0 0 auto;
    flex-flow: column wrap;
    width: 100%;
}

.team-grid__item > figure {
    width: 100%;
}

@media screen and (min-width: 640px) {
    .rider-grid__item {
        flex: 0 0 auto;
        width: 33.333%;
    }

    .rider-grid__item.big {
        flex: 0 0 auto;
        width: 66.666%;
    }

    .team-grid__item {
        flex: 0 0 auto;
        width: 50%;
    }
}


/*-- Rennkalendar & Flaggen --*/
.country-flag {
    display: inline-block;
    width: 2.625rem;
}

@media screen and (max-width: 60.625rem) {
    .race-calendar td:first-of-type:before { content: "Datum: "; font-weight: 700; letter-spacing: 0.025em; }
    .race-calendar td:nth-child(2):before  { content: "Name: ";  font-weight: 700; letter-spacing: 0.025em; }
    .race-calendar td:last-of-type:before  { content: "Land: ";  font-weight: 700; letter-spacing: 0.025em; }

    .race-calendar thead {
        display: none;
    }

    .race-calendar tr {
        display: block;
        padding-bottom: .625rem;
    }

    .race-calendar tr + tr {
        padding-top: .625rem;
    }

    .race-calendar td {
        border-bottom: 0;
        display: block;
    }
}

@media screen and (max-width: 30em) {
    .race-calendar td::before {
        display: block;
    }
}

/* Fahrer-Portraits & Logos */
.rider-portrait {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.rider-logo {
    position: absolute;
    top:  1.25rem;
    left: 1.25rem;
}

/* News-Modul TERT */
.news {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    margin: -.625em;
}

.news__item {
    display: flex;
    flex-direction: row;
    padding: .625em;
}

.news__article {
    display: flex;
    flex-direction: column;
    margin: -.625em;
}

.news__article > * {
    padding: .625em;
}

.news__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news__content p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.news__content a {
    margin-top: auto;
    margin-left: auto;
}

/* @media screen and (min-width: 40em) {
    .news--archive .news__item,
    .news__item:first-child {
        flex: 0 0 100%;
    }

    .news--archive .news__article,
    .news__item:first-child .news__article {
        flex-direction: row;
    }

    .news--archive .news__img,
    .news__item:first-child .news__img {
        flex: 0 0 50%;
    }

    .news--archive .news__content,
    .news__item:first-child .news__content {
        flex: 1;
    }
} */

@media screen and (min-width: 40em) and (max-width: 60.625em) {
    .news__item {
        flex: 1 0 50%;
    }

    .news__item:nth-last-child(n+3) ~ .news__item {
        flex-grow: 0;
    }
}

@media screen and (min-width: 60.625em) {
    .news__item {
        flex: 1 0 25%;
    }

    .news__item:nth-last-child(n+5) ~ .news__item {
        flex-grow: 0;
    }
}

/* Material-Modul TERT */
.tab-list--material {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .0625em;
}

.tab-list__item--material {
    background: #111;
    border: 1px solid;
    color: #fefefe;
    width: 100%;
}

.tab-list__item--material + .tab-list__item--material {
    margin-top: 1.25em;
}

.tab-list__item--material[data-tab-active] {
    background-color: #c4cc3c;
    border-color: #c4cc3c;
    color: #111;
}

.tab-list__item--material a {
    display: block;
    text-decoration: none;
    padding: 1em;
}

.tab-panel--material {
    background-color: #111;
    color: #fefefe;
}

@media screen and (min-width: 40em) {
    .tab-list--material {
        display: flex;
    }

    .tab-list__item--material {
        flex: 1 1 10em;
        width: auto;
    }

    .tab-list__item--material + .tab-list__item--material {
        margin-top: 0;
        margin-left: 1.25em;
    }
}

.bike-specs {
    margin-top: 1.25em;
}

.bike-specs h3 {
    font-weight: 700;
    letter-spacing: .0625em;
    text-transform: uppercase;
}

.bike-specs dl {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.bike-specs dt {
    letter-spacing: .0625em;
    font-weight: 700;
    padding-top: .625em;
}

.bike-specs dd {
    letter-spacing: .0625em;
    text-transform: uppercase;
    padding-bottom: .625em;
}

.bike-specs dt::after { content: ": "; }
.bike-specs dd + dt { border-top: 1px solid; }

.spec-btn {
    border: 1px solid;
    display: inline-block;
    padding: 1em;
    text-transform: uppercase;
    letter-spacing: .0625em;
}

.spec-container__img {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 40em) {
    .bike-specs dl {
        background-image: linear-gradient(to bottom, transparent calc(2em - 1px), white 0);
        background-size: 100% 2em;
        border-bottom: 0;
        line-height: 2;
    }

    .bike-specs dt,
    .bike-specs dd {
        display: inline;
    }

    .bike-specs dd + dt {
        border: 0;
    }

    .bike-specs dd + dt::before {
        content: "\A";
        white-space: pre;
    }
}

@media screen and (min-width: 60.625em) {
    .bike-specs {
        margin: 0;
        padding: 1.5em;
        position: absolute;
        top: 50%; left: 1.5em; right: 1.5em;
        transform: translateY(-50%);
    }

    .spec-btn {
        border: 0;
        padding: 0;
        float: right;
    }

    .spec-container {
        position: relative;
    }

    .spec-container__list {
        clear: both;
        background-color: rgba(0, 0, 0, .5);
        border: 1px solid;
        padding: 1em;
        position: absolute;
        top: 0; right: 0;
        transition: all .4s;
    }

    .spec-container__list.is-open {
        width: 100%;
        height: 100%;
        bottom: 0;
    }
}



/*|-------------------------------------------------------------------------------|*/
/*| ERGONOMIE                                                                     |*/
/*|-------------------------------------------------------------------------------|*/

.ergo-size-select {
    border: thin solid;
    border-radius: 50%;
    color: #111111;
    display: inline-block;
    font-size: 2em;
    width: 1.8em;
    height: 1.8em;
    margin: 0 1rem;
}

    .ergo-size-select.is-active {
        background:   #111111;
        border-color: #111111;
        color: #f6f6f6;
    }

.ergonomics-header {
    background: #111111 center center/cover no-repeat;
    color: #f6f6f6;
}

.ergonomics-header > div {
    margin: auto;
    max-width: 50.75em;
    padding: 14em 1.25em;
    text-align: center;
}

.ergonomics-header > h2 {
    margin: auto;
    max-width: 14.5em;
    padding: 4em 1.25em;
    text-align: center;
}

@media screen and (min-width: 40em) {
    .ergonomics-bg-video {
        position: absolute;
        top:  0;
        left: 0;
        width:  100%;
        height: 100%;
    }
}

/* Saddle Selector Online Teaser */
.sso {
    text-align: center;
    position: relative;
    overflow: visible;
}

.sso > div {
    position: absolute;
    top: 0; right: 0; left: 0;
}

.sso h1 {
    padding-top: 2em;
}

@media screen and (min-width: 710px) {
    .sso::before,
    .sso::after {
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .sso::before {
        background-image: url("../../pic/content/ergonomie/sso-l.jpg");
        background-position: top right;
        left: -100%;
    }

    .sso::after {
        background-image: url("../../pic/content/ergonomie/sso-r.jpg");
        left: 100%;
    }
}




/*|-------------------------------------------------------------------------------|*/
/*| SERVICE                                                                       |*/
/*|-------------------------------------------------------------------------------|*/

.google-map {
    background: #d2d2d2;
    position: relative;
    width: 100%;
    height: 35rem;
}

.google-map__loader {
    background: transparent;
    border: 4px solid;
    border-radius: 50%;
    border-color: transparent #fff #fff;
    width: 3.125em;
    height: 3.125em;
    position: absolute;
    top:  50%;
    left: 50%;
    -webkit-transform: translate(-50% -50%);
            transform: translate(-50% -50%);
    -webkit-animation: map-loader 1s infinite linear;
            animation: map-loader 1s infinite linear;
}

@-webkit-keyframes map-loader {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@keyframes map-loader {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

#contact h1 > img {
    width: auto;
    height: 1em;
    display: inline-block;
}


/*--- Rückmeldung des Kontakt-Formulars über ein kleines Modal-Fenster ---*/
.contact-modal {
    background: #f6f6f6;
    border: thin solid #969696;
    box-shadow: 1px 1px 3px rgba(17,17,17,0.5);
    padding: 1.25rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;

    position: fixed;
    top:  50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    width: 25rem;
    -webkit-animation: display-error 300ms forwards;
            animation: display-error 300ms forwards;
}

    .contact-modal.is-error {
        background: #ffe6e6;
        border: medium solid #cc0033;
    }

    .contact-modal.is-success {
        background: #f6f6f6;
        border: medium solid #969696;
    }


    .contact-modal__content {
        padding-right: 1.25em;
    }

        .contact-modal__content > p { margin: 0; }

    .contact-modal__btn {
        font-size: 2em;
        line-height: 1.25;
    }


@-webkit-keyframes display-error {
    from { -webkit-transform: translateX(-50%) translateY(-50%) scale(2); opacity: 0; }
    to   { -webkit-transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1; }
}

@keyframes display-error {
    from { transform: translateX(-50%) translateY(-50%) scale(2); opacity: 0; }
    to   { transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1; }
}


/*--- Styles für die Tabellen der FAQ ---*/
table.table--faq {
    table-layout: auto;
}

table.table--faq td,
table.table--faq th {
    display: table-cell;
    vertical-align: top;
}


/*--- Iframe der Downloads & FAQ im Service-Bereich ---*/
/* Iframes sollten schnellstmöglich ersetzt werden. */
#download-frame {
    border: 0;
    width: 100%;
    height: 2036px;
}

#faq-frame {
    border: 0;
    width: 100%;
    height: 2080px;
}

@media screen and (min-width: 40rem) {
    #download-frame { height: 1895px; }
    #faq-frame { height: 2000px; }
}

@media screen and (min-width: 60.625rem) {
    #download-frame { height: 1354px; }
    #faq-frame { height: 1420px; }
}


/*--- Position des Intro-Textes der Meilensteine ---*/
.milestone-intro {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 861px;
}




/*|-------------------------------------------------------------------------------|*/
/*| PRODUKTE                                                                      |*/
/*|-------------------------------------------------------------------------------|*/

/*--- Filter-Navigation ---*/
.filter-item {
    border: 0;
    display: block;
    padding: 0.25em;
    text-align: center;
    text-decoration: none;
}

.filter-item.is-disabled {
    background: #ececec;
    color: #969696;
}

.filter-item.is-active,
.filter-item:hover,
.filter-item:focus {
    background-color: #c4cc3c;
    color: #111111;
    cursor: pointer;
}

/*--- Überschreibt Stufe1-Padding und -Margin des Produktfilters. ---*/
.product-filter .px1 {
    padding-left:  5px;
    padding-right: 5px;
}

.product-filter .mxn1 {
    margin-left:  -5px;
    margin-right: -5px;
}

.product-filter .mb2 {
    margin-bottom: 10px;
}

/*--- Detail-Ansichten ---*/
.detail-toggle {
    display: inline-block;
    padding: 0.3125em;
}

.detail-toggle > span {
    pointer-events: none;
}

.detail-toggle::-moz-focus-inner {
    padding: 0;
    margin: 0;
    border: 0;
}

.detail-toggle.is-active {
    background: #c4cc3c;
    color: #111111;
}

.detail-toggle.is-inactive {
    background: #ececec;
    color: #969696;
}

.product-color {
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    width:  1rem;
    height: 1rem;
    margin: 0.125rem;
    vertical-align: bottom;
}

.detail-toggle.is-active > .product-color,
.detail-toggle.is-inactive > .product-color {
    border: 1px solid #ffffff;
}

/*--- Detail-Ansichten: Tabellen ---*/
table.table--product-details {
    table-layout: auto;
    border-top: thin solid;
    border-bottom: thin solid;
    caption-side: bottom;
}


table.table--product-details td,
table.table--product-details th {
    display: table-cell;
    vertical-align: baseline;
}

table.table--product-details td[class~='no-padding'],
table.table--product-details th[class~='no-padding'] {
    padding-top:    0;
    padding-bottom: 0;
}

table.table--product-details td {
    padding-left:  0.625em;
    padding-right: 0.625em;
}


/*--- Produkt-Farben -- Unifarben ---*/
.product-color--white          { background-color: #f6f6f6; border: thin solid currentColor;}
.product-color--transparent    { background-color: #f6f6f6; border: thin solid currentColor;}
.product-color--grey           { background-color: #cccccc; }
.product-color--frozenstealth  { background-color: #5a595b; }
.product-color--frozenblack    { background-color: #5a595b; }
.product-color--stealth        { background-color: #444444; }
.product-color--black          { background-color: #111111; }
.product-color--blackalcantara { background-color: #111111; }
.product-color--brown          { background-color: #634034; }
.product-color--frozenorange   { background-color: #f8a57e; }
.product-color--orange         { background-color: #ff6600; }
.product-color--red            { background-color: #cc0033; }
.product-color--laserlemon     { background-color: #e1ee1f; }
.product-color--green          { background-color: #c4cc3c; }
.product-color--blue           { background-color: #0099cc; }
.product-color--aquamarine     { background-color: #009999; }
.product-color--purple         { background-color: #6666cc; }
.product-color--bikinipink     { background-color: #ff33cc; }
.product-color--berry          { background-color: #A1274E; }


/*-- Produkt-Farben -- Doppelfarben --*/
.product-color--blacksilver { background: linear-gradient(45deg, #111111 0%, #111111 55%, #d2d2d2 55%, #d2d2d2 100%); }
.product-color--blackblack { background: linear-gradient(45deg, #111111 0%, #111111 50%, #f6f6f6 50%, #f6f6f6 55%, #111111 55%, #111111 100%); }

.product-color--brownsilver { background: linear-gradient(45deg, #85144b 0%, #85144b 55%, #d2d2d2 55%, #d2d2d2 100%); }
.product-color--brownblack { background: linear-gradient(45deg, #85144b 0%, #85144b 50%, #f6f6f6 50%, #f6f6f6 55%, #111111 55%, #111111 100%); }


/*--- Produkt-Farbe -- Text ---*/
.txt-color--white          { color: #f6f6f6; }
.txt-color--grey           { color: #cccccc; }
.txt-color--frozenblack    { color: #5a595b; }
.txt-color--stealth        { color: #444444; }
.txt-color--black          { color: #111111; }
.txt-color--blackalcantara { color: #111111; }
.txt-color--brown          { color: #634034; }
.txt-color--frozenorange   { color: #f8a57e; }
.txt-color--orange         { color: #ff6600; }
.txt-color--red            { color: #cc0033; }
.txt-color--laserlemon     { color: #e1ee1f; }
.txt-color--green          { color: #c4cc3c; }
.txt-color--blue           { color: #0099cc; }
.txt-color--aquamarine     { color: #009999; }
.txt-color--purple         { color: #6666cc; }
.txt-color--bikinipink     { color: #ff33cc; }
.txt-color--berry          { color: #95164b; }


.txt-color--white {
    letter-spacing: 1px;
    text-shadow: 1px 0 0 #111111, 0 1px 0 #111111, -1px 0 0 #111111, 0 -1px 0 #111111;
}
.txt-color--laserlemon {
    letter-spacing: 1px;
    text-shadow: 1px 0 0 #bfca1a, 0 1px 0 #bfca1a, -1px 0 0 #bfca1a, 0 -1px 0 #bfca1a;
}

/*--- Indikator: Neues Produkt ---*/
.new-product {
    background: #c4cc3c;
    color: #f6f6f6;
    float: left;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    font-weight: 700;
    margin-top: 1%;
    margin-right: 0.625em;
    padding: 0.125em 0.35em;
}

.new-product--small {
    font-size: 1rem;
    float: none;
}

/*--- Produkt-Auszeichnungen ---*/
.product-award {
    margin-bottom: 1.25rem;
}

.word-break-all {
    /* Wortumbruch erzwingen */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    white-space: normal;
}

.product-award > p { margin: 0.3125rem 0; }

.product-award cite { quotes: "„" "“"; }
.product-award cite:before { content: open-quote; }
.product-award cite:after  { content: close-quote; }

.product-award__logo { position: relative; }

    .product-award__logo > div {
        position: absolute;
        top:    0;
        left:   0;
        right:  0;
        bottom: 0;
    }

    .product-award__logo img { max-height: 100%; }

    .product-award__logo:before {
        content: "";
        display: block;
    }

    .product-award__logo.large:before {
        padding-bottom: 80%;
    }

    .product-award__logo.small:before {
        padding-bottom: 40%;
    }

    /* Von der großen Box die Höhe einer Zeile + Padding oben/unten abziehen */
    .product-award__logo.medium:before {
        padding-bottom: calc(80% - 1.25em - 0.625rem);
    }




/*|-------------------------------------------------------------------------------|*/
/*| Serien- & Produkt-Teaser                                                      |*/
/*|-------------------------------------------------------------------------------|*/

.product-teaser {
    min-height: 26.25em;
    max-width: 97.125em;
    margin: 0 auto;
    position: relative;
}

.product-teaser > .container {
    min-height: 26.25em;
}

.product-teaser__txt {
    padding-left: 0;
    margin-left: 1.25em;
}

.product-teaser__logo {
    display: inline-block;
    margin-bottom: 1.25em;
}

.product-teaser__logo:not(:last-child) { margin-right: 0.625em; }

@media screen and (min-width: 40rem) {
    .product-teaser--background {
        min-height: 26.25em;
    }
}

@media screen and (min-width: 1332px) {
    .product-teaser__txt {
        margin-left: calc((100% - 83.25em) / 2 + 1.25em);
    }
}

@media screen and (min-width: 1554px) {
    .product-teaser__txt {
        margin-left: calc(1/14 * 100% + 1.25em);
    }
}

.product-teaser__img {
    width: 100%;
}


/* Spezial-Teaser */
/* GD1 Factory Serie */
.teaser-gd1__img-container {
    flex: 1 1 50%;
    position: relative;
}

.teaser-gd1__img {
    max-width: 520px;
    position: absolute;
    width: 70%;
}

.teaser-gd1__img.top {
    right: 5%;
    top: 0;
}

.teaser-gd1__img.bottom {
    bottom: 0;
    left: 3%;
}

.teaser-gd1__images.hide-large {
    display: none;
}

/* SM Woman */
.teaser-sm-women__text {
    max-width: 20em;
    letter-spacing: .0625em;
}

.teaser-sm-women__text > h2 {
    font-size: 1.125em;
    font-weight: bold;
}

/* SR Woman */
.teaser-sr-women-top,
.teaser-sr-women-bottom {
    position: absolute;
}

.teaser-sr-women-top {
    max-width: 61%;
    right: 0;
    top: 0;
}

.teaser-sr-women-bottom {
    left: -35%;
    bottom: 0;
}

@media screen and (max-width: 80em) {
    .teaser-sr-sram__images-small {
        display: block;
    }

    .teaser-sr-sram__images-large {
        display: none;
    }
}

@media screen and (min-width: 80em) {
    .teaser-sr-sram__images-small {
        display: none;
    }

    .teaser-sr-sram__images-large {
        display: flex;
    }
}

@media screen and (max-width: 839px) {
    .teaser-gd1__images.hide-small {
        display: none;
    }

    .teaser-gd1__images.hide-large {
        display: block;
    }
}

/* IP3 */
.teaser-ip3__img {
    padding-top: 2.5em;
}

@media screen and (min-width: 40em) {
    .teaser-ip3__img {
        padding-top: 0;
        position: absolute;
        top: 0;
        right: 0;
    }
}




/*|-------------------------------------------------------------------------------|*/
/*| Saddle Selector V 2.0                                                         |*/
/*|-------------------------------------------------------------------------------|*/

.saddle-selector.hidden,
.saddle-selector-start.hidden {
    display: none;
}

.saddle-selector-start > div {
    background-color: #c4cc3c;
    padding: 1.25em;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.saddle-selector-start button {
    margin-top: 1.25em;
    padding: .75em;
}

.saddle-selector-start h2 {
    margin: 0;
}

@media screen and (min-width: 657px) {
    .saddle-selector-start h2 {
        font-size: 1.25em;
    }

    .saddle-selector-start button {
        margin-top: 0;
    }
}

.saddle-selector__main,
.saddle-selector__results {
    background-color: #ececec;
    color: #111111;
}

.saddle-selector__usage.hidden,
.saddle-selector__hinweis.hidden,
.saddle-selector__results.hidden {
    display: none;
}

.saddle-selector__hinweis {
    background-color: #f6f6f6;
    padding: 1.25em;
}

.saddle-selector__hinweis .saddle-selector__hinweis {
    padding: 0;
}

.saddle-selector__label {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.025em;
    margin-bottom: 5px;
}

.saddle-selector input[type="text"],
.saddle-selector select {
    border-color: #969696;
    transition: border-color 250ms 0ms ease;
}

.saddle-selector input:focus,
.saddle-selector select:focus {
    box-shadow: 0 0 0 2px #c4cc3c;
    border-color: #111111;
    outline: none;
}

.saddle-selector input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding: 0.3125em 0 0.3125em 1.25em;
}

.saddle-selector input[type="checkbox"] + label:before {
    background: #f6f6f6;
    border: 1px solid #969696;
    content: "";
    display: block;
    height: 1em;
    left: 0;
    position: absolute;
    top: 0.4375em;
    width: 1em;
}

.saddle-selector input[type="checkbox"]:checked + label:before {
    background: #f6f6f6 url("../../de/_selector/pic/checkbox--checked.svg") center center/90% 90% no-repeat;
    box-shadow: none;
    content: "";
}

.saddle-selector input[type="checkbox"]:focus + label:before,
.saddle-selector input[type="checkbox"]:checked:focus + label:before {
    border-color: #111111;
    outline: none;
}

.input-addon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.input-addon + .error {
    display: none;
    margin: 0;
}

.input-addon.valid,
.input-addon.invalid {
    padding-left: 2.1875em;
}

.input-addon.valid:before,
.input-addon.invalid:before {
    content: "";
    display: block;
    height: 1.875em;
    left: 0;
    position: absolute;
    top: 50%;
    width: 1.875em;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* Text-Input ist nicht valide */
.input-addon.invalid > input {
    box-shadow: 0 0 0 2px tomato;
}

.input-addon.invalid::before {
    background: transparent url("../../de/_selector/pic/input-invalid.svg") center center/80% 80% no-repeat;
}

.input-addon.invalid + .error {
    display: block;
}

/* Text-Input ist valide */
.input-addon.valid::before {
    background: transparent url("../../de/_selector/pic/checkbox--checked.svg") center center/60% 60% no-repeat;
}

.input-addon__field {
    min-width: 0;
    flex: 1;
}

.input-addon__item {
    flex: 0 1 2em;
    padding-left: 0.3125em;
}

.saddle-selector form h3,
.saddle-selector form h4 {
    font-weight: 700;
}

.saddle-selector form h3 {
    margin-bottom: 5px;
}

@media screen and (min-width: 60.625rem) {
    .saddle-selector form h3,
    .saddle-selector form h4 {
        font-weight: inherit;
    }
}

.result-img {
    position: relative;
}

.result-img > img {
    transition: opacity 250ms 0ms ease;
}

.result-img__product {
    opacity: 1;
}

.result-img__temp {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
}

.result-img__badge {
    position: absolute;
    top: 0.625em;
    right: 0.625em;
    width: 25%;
    height: auto;
    border-radius: 50%;
    transform: rotate(20deg);
}

.result__skala {
    margin-bottom: 0.625em;
}

.skala__sizes {
    flex: 1 1 auto;
    position: relative;
}

.skala__sizes::after {
    content: "";
    clear: both;
    display: block;
}

.skala-size {
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,0.25);
    display: block;
    float: left;
    text-align: center;
}

.skala-size > span {
    position: relative;
    z-index: 1;
}

.skala-indikator {
    box-shadow: inset 0 0 0 0.25em #c4cc3c;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;

    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.skala-indikator:not([style*="width:"]) {
    background: linear-gradient(to right, transparent 0.1875em, #c4cc3c 0.1875em, #c4cc3c 0.4375em, transparent 0.4375em);
    box-shadow: none;
    width: 0.625em;
}

.skala-indikator:after,
.skala-indikator:before {
    border-right: 0.3125em solid transparent;
    border-left: 0.3125em solid transparent;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    width: 0;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
}

.skala-indikator:after {
    border-bottom: 0.3125em solid #c4cc3c;
    bottom: -0.25em;
}

.skala-indikator:before {
    border-top: 0.3125em solid #c4cc3c;
    top: -0.25em;
}



/* Region Selector */
.region-select__content {
    background-color: #f6f6f6;
    color: #111;
    margin-right: auto;
    margin-left: auto;
    max-width: 51.25em;
}

.region-select__head {
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.region-select__head h2 {
    font-size: 1rem;
    margin-left: auto;
}

.region-select__head img {
    max-width: 8em;
}

.region-select__body {
    margin-right: auto;
    margin-left: auto;

    max-width: 27.5em;

    padding: 2.5rem 1.25rem;
}

.region-select__body fieldset {
    column-gap: 1.25em;
    column-width: 15em;


}

.region-select__label {
    border: 1px solid #c4cc3c;
    cursor: pointer;
    display: inline-block;
    padding: 1rem;
    width: 100%;
}

/* Überschreibt den normalen Custom-Style von Radio-Buttons */
input[type="radio"] + .region-select__label::before {
    display: none;
}

input[type="radio"]:checked + .region-select__label {
    background-color: #c4cc3c;
}

.region-select__footer {
    text-align: center;
}

.region-select__footer p {
    text-align: left;
}

.region-select__accept {
    background-color: #d2d2d2;
    color: #111;
    padding: 1rem;
}

@media screen and (min-width: 46.875em) {
    .region-select {
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
        z-index: 10;
    }

    .region-select__content {
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 51.25rem;
        max-height: calc(100vh - 2.5em);
        overflow-y: auto;
    }

    .region-select__head {
        display: block;
    }

    .region-select__head h2 {
        font-size: 2em;
        margin-left: calc((100% - 25rem) / 2);
    }

    .region-select__head img {
        display: none;
    }
}



/*|-------------------------------------------------------------------------------|*/
/*| Temporäre Fixes und Anderes                                                   |*/
/*|-------------------------------------------------------------------------------|*/


/* Versteckt _ALLE_ Standard-Video-Controls auf einem IPhone. _Kein_ Standard. */
/*noinspection ALL*/
.hide-iphone-controls::-webkit-media-controls {
    display: none !important;
}

/* ARTICLE: SMC4 */
.druckmessung {
    position: relative;
    overflow: visible;
}

.druckmessung:before,
.druckmessung:after {
    content: "";
    width:  100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.druckmessung:before {
    background: url("../../pic/content/article/smc4/extend-l.png") right top repeat-x;
    left: -100%;
}

.druckmessung:after {
    background: url("../../pic/content/article/smc4/extend-r.png") left top repeat-x;
    left: 100%;
}

/* Overflow links und rechts eines Elementes nicht anzeigen. Gemeinsam mit den beiden oberen Klassen verwenden. */
.hide-overflow { overflow-x: hidden; }


@media screen and (min-width: 30rem) {
    .sm-absolute-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.img-padding {
    padding-top: 5.25em;
    padding-bottom: 5.25em;
}

.all-mountain-header {
    position: relative;
}

.all-mountain-header img {
    display: block;
    margin-bottom: 1.25em;
}

.all-mountain-section {
    margin-top: 5.25em;
}

.all-mountain-section__heading {
    padding-top: 5.25rem;
}

@media screen and (min-width: 40em) {
    .img-padding {
        padding-top: 10.5em;
        padding-bottom: 10.5em;
    }

    .all-mountain-section {
        margin-top: 10.5em;
    }

    .all-mountain-section__heading {
        padding-top: 10.5rem;
    }

    .all-mountain-header img {
        margin-bottom: 0;
    }

    .all-mountain-header p {
        color: #f6f6f6;
        position: absolute;
        top: 1.25rem;
        left: 1.25rem;
    }

    .all-mountain-header span {
        display: block;
    }
}

.iframe-container {
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    overflow: hidden;
    width: 100%;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* RIDER: Canyon SRAM */
.multi-bg {
    background-image: linear-gradient(to right, rgba(158, 4, 86, 0.75), rgba(158, 4, 86, 0.75)), url('../../pic/content/rider/canyon_sram/biketour2.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    padding: 2.5rem 0;
}

/* Vorschau-Container */
.preview {
    background-color: #111111;
    color: #f6f6f6;
    display: block;
    text-align: center;
    text-decoration: none;
    position: relative;
}

.preview::after {
    background: linear-gradient(to top, rgba(17,17,17,0.4) 20%, transparent);
    content: "";
    display: block;
    position: absolute;
    top:    0;
    left:   0;
    bottom: 0;
    right:  0;
}

.preview > span {
    z-index: 1;
    padding: 0 1.25rem;
    position: absolute;
    top: 50%; right: 0; left: 0;
    transform: translateY(-50%);
}

.preview:focus,
.preview:hover {
    color: #f6f6f6;
}

.preview strong {
    display: block;
    font-weight: inherit;
}

.preview strong::after {
    content: "\A—\A";
    white-space: pre;
}

.tester {
    border: thin solid;
    padding: 1.25em;
}

.tester h2 {
    font-weight: 700;
}

.tester h2::before {
    content: "Ergon-Tester\A";
    font-weight: 300;
    white-space: pre;
}

.tester dd {
    font-size: 1.25em;
}

.tester dd + dt {
    border-top: thin solid;
    margin-top: 0.625em;
    padding-top: 0.625em;
}

.tester-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tester-nav > li:nth-child(2) {
    order: -1;
}

form[name="cookie-notice"] {
    background-color: #111111;
    background-color: rgba(17, 17, 17, 0.75);
    color: #f6f6f6;
    position: fixed;
    right: 0; bottom: 0; left: 0;
    z-index: 1;
}

form[name="cookie-notice"] > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

form[name="cookie-notice"] p,
form[name="cookie-notice"] button {
    display: inline-block;
    vertical-align: baseline;
}

form[name="cookie-notice"] p {
    margin: 0 1.25em 0 0;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

form[name="cookie-notice"] button {
    background-color: #f6f6f6;
    border: thin solid #969696;
    color: #111111;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0.5em 1em;
}

form[name="cookie-notice"] a {
    color: inherit;
}



#privacy-policy address {
    font-style: inherit;
}

#privacy-policy h2,
#privacy-policy h3,
#privacy-policy h4 {
    font-size: inherit;
    font-weight: bold;
}

#privacy-policy h2 {
    margin-top: 40px;
}

#privacy-policy ul {
    margin: 1.25rem 0;
}

#privacy-policy a + ol,
#privacy-policy li + li {
    margin-top: 0.625em;
}

#privacy-policy dl {
    display: grid;
    grid-gap: 0 0.5em;
    grid-template-columns: auto 1fr;
}

#privacy-policy dt {
    grid-column: 1;
}

#privacy-policy dd {
    grid-column: 2;
}




















.award-card {
    display: flex;
    flex-direction: column;
    padding: 1.25em;
}

.award-card__awards {
    margin-top: auto;
}

.award-card a {
    text-decoration: none;
}

.award-card__awards {
    display: flex;
    flex-wrap: wrap;
    margin: -0.625em;
}

.award-card__awards > * {
    flex: 1 0 auto;
    margin: 0.625em;
}





/*
.award-card__awards > div {
    width: 50%;
    padding: .25em;
}
*/

/*
@media screen and (min-width: 30em) {
    .award-card__awards > div {
        width: 33.33%;
    }
}
*/

@media screen and (min-width: 60em) {
    .award-card a {
        font-size: 1.5rem;
    }

    /*
    .award-card__awards > div {
        width: 25%;
    }
    */
}

@media screen and (min-width: 75em) {
    .award-card a {
        font-size: 2rem;
    }
}



/*
@supports (display: grid) {
    .award-card,
    .award-card__awards {
        display: grid;
    }

    .award-card {
        grid-template-rows: min-content minmax(100px, auto) minmax(85px, auto);
        grid-gap: .5em;
        max-height: 40.375em;
        padding: 1em;
    }

    .award-card__awards {
        grid-template-columns: repeat(2, minmax(45px, 1fr));
        grid-auto-rows: minmax(80px, auto);
        grid-gap: .5em;
    }

    .award-card a {
        text-decoration: none;
    }

    .award-card__awards > div {
        width: auto;
        padding: 0;
    }

    .award-card strong::after {
        content: "\A";
        white-space: pre;
    }

    @media screen and (min-width: 30em) {
        .award-card__awards {
            grid-template-columns: repeat(3, minmax(45px, 1fr));
        }
    }

    @media screen and (min-width: 60em) {
        .award-card a {
            font-size: 1.5em;
        }

        .award-card__awards {
            grid-template-columns: repeat(4, minmax(45px, 1fr));
        }
    }

    @media screen and (min-width: 75em) {
        .award-card a {
            font-size: 2em;
        }

        .award-card__img,
        .award-card__awards img {
            justify-self: center;
            height: 100%; width: auto;
        }
    }

    .award-card__awards img {
        height: 100%;
        object-fit: contain;
    }

    .award-card strong {
        font-weight: 300;
    }

    .award-card span {
        font-weight: 600;
    }
}
*/