@charset "UTF-8";

/*---------------------------*/
/* Universal                 */
/*---------------------------*/
*,
*::after,
*::before {
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

:lang(de) { quotes: "\201e" "\201c" "\201a" "\2018"; }
:lang(en) { quotes: "\201c" "\201d" "\2018" "\2019"; }

::placeholder {
    color: #cccccc;
}
/**/










/*---------------------------*/
/* Document                  */
/*---------------------------*/
html {
    font: 400 100%/1.5 "Helvetica Neue", "Helvetica", sans-serif;
}
/**/










/*---------------------------*/
/* Section & Structure       */
/*---------------------------*/
header, footer, nav, main, article, aside, section,
blockquote, figure, figcaption, address, summary, details {
    display: block;
}

nav ul,
nav ol:not([type]) {
    list-style: none;
}

nav a:hover {
    text-decoration: none;
}

blockquote, q {
    quotes: none;
}

blockquote::after,
blockquote::before {
    content: "";
}
/**/










/*---------------------------*/
/* Headings                  */
/*---------------------------*/
h1, h2, h3, h4, h5, h6, p {
	margin-bottom: 1.25rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}
/**/










/*---------------------------*/
/* Lists                     */
/*---------------------------*/
ul,
ol {
    list-style: none;
}

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

ul:not([class]) {
    list-style: disc;
}

ol:not([class]) {
    list-style: decimal;
}

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

.list--line {
    border-style: solid;
    border-width: thin 0;
}

.list--line > * {
    padding: 0.3125em 0;
}

.list--line > * + * {
    border-top: thin solid;
}

.list--network > * {
    align-items: center;
    display: flex;
}

.list--network > *::before {
    background: currentcolor;
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 1em;
    margin: 0.25em 1em auto 0;
    width: 1em;
}

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

.list--numbered {
    counter-reset: numbered;
}

.list--numbered > * {
    align-items: center;
    counter-increment: numbered;
    display: flex;
}

.list--numbered > *::before {
    content: counter(numbered);
    color: #f6f6f6;
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 0.75;
    margin: 0 3.5vw auto 0;
}

@media (min-width: 40em) {
    .list--numbered > *::before {
        font-size: 5.25rem;
    }
}

@media (min-width: 60em) {
    .list--numbered > *::before {
        font-size: 6rem;
    }
}

@media (min-width: 75em) {
    .list--numbered > *::before {
        font-size: 7.5rem;
    }
}
/**/










/*---------------------------*/
/* Media                     */
/*---------------------------*/
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
}

img, svg, video, canvas {
    height: auto;
}

img, iframe {
    border: 0;
}

.video {
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video > video,
.video > iframe {
    height: 100%;
    left: 0;
    max-width: none;
    position: absolute;
    top: 0;
    width: 100%;
}

/**
 * POLYFILL-STYLES
 * Regeln für Object-Fit-Polyfill
 * (js/assets/_object-fit.js)
 */
[data-object-fit="contain"] {
    -o-object-fit: contain;
       object-fit: contain;
}

[data-object-fit="cover"] {
    -o-object-fit: cover;
       object-fit: cover;
}
/**/










/*---------------------------*/
/* Forms                     */
/*---------------------------*/
button,
input,
select,
textarea {
    color: currentcolor;
    font: inherit;
}

input,
select,
textarea {
    padding: 0.25em 0.5em;
}

input,
select,
textarea {
    background-color: #f6f6f6;
	border: thin solid;
    border-radius: 0;
    vertical-align: middle;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

fieldset,
button {
    border: 0;
}

button,
[role="button"] {
    cursor: pointer;
}

textarea {
    min-height: 8em;
    resize: vertical;
}

input[required]:invalid,
select[required]:invalid {
    box-shadow: none;
    outline: none;
}

select,
input[type="text"],
input[type="search"],
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
    background-color: #f6f6f6;
}

select,
input[type="search"] {
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: 2.25em;
    width: 100%;
}

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

input[type="search"] {
    -webkit-appearance: none;
    background-image: url("../../pic/system/search.svg");
}

input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    margin:  0;
    padding: 0;
    height: 1px;
    width:  1px;
    overflow: hidden;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
    border: thin solid;
    content: "";
    display: inline-block;
    height: 0.75em;
    margin-right: 0.25em;
    vertical-align: baseline;
    width: 0.75em;
}

input[type="radio"] + label:before {
    border-radius: 50%;
}

input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
    outline: thin dotted #969696;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    background: #111111;
    box-shadow: inset 0 0 0 3px #f6f6f6;
}

input:disabled {
    background-color: #d2d2d2;
    cursor: not-allowed;
    pointer-events: none;
}
/**/










/*---------------------------*/
/* Tables                    */
/*---------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

tr:not(:first-child) {
    border-top: thin solid;
}

th, td {
    padding: 0.3125em 0;
    text-align: left;
}

th { display: none;  }
td { display: block; }

table[id="js--map-results"] {
    table-layout: auto;
}

table[id="js--map-results"] col {
    width: auto;
}

table[id="js--map-results"] col:last-child {
    width: 1em;
}

table[id="js--map-results"] th:last-child,
table[id="js--map-results"] td:last-child {
    text-align: center;
}

table[id="js--map-results"] td[data-label] {
    text-align: left;
}

table[id="js--map-results"] td[data-label]::before {
    font-weight: bold;
    content: attr(data-label)": ";
}

@media (min-width: 50em) {
    tr { border: 0; }

    th, td {
        border-bottom: thin solid;
        display: table-cell;
    }

    table[id="js--map-results"] td[data-label]::before {
        display: none;
    }

    table[id="js--map-results"] td[data-label] {
        text-align: center;
    }
}
/**/










/*---------------------------*/
/* Phrasing                  */
/*---------------------------*/
a {
    background: rgba(0, 0, 0, 0);
    color: currentcolor;
}

a.back {
    text-decoration: none;
}

a.back::before {
    border-style: solid;
    content: "";
    display: inline-block;
    height: 0.4em;
    position: relative;
    top: -0.125em;
    transform: rotate(45deg);
    width: 0.4em;
    border-width: 0 0 thin thin;
    margin-right: 0.25em;
}

cite {
    font-style: normal;
}
/**/










/*---------------------------*/
/* Misc.                     */
/*---------------------------*/
hr {
    border-style: solid;
    border-width: thin 0 0;
    color: currentcolor;
    margin: 1.25rem 0;
    opacity: 0.3;
}
/**/










/*---------------------------*/
/* Modules                   */
/*---------------------------*/
/**
 * Pullquotes
 */
.quote-padding {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.pullquote {
    max-width: 50rem;
    text-align: center;
}

.pullquote > * + * {
    margin-top: 1.5rem;
}

.pullquote > :first-child {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 40em) {
    .pullquote > :first-child {
        font-size: 1.5625rem;
    }
}




/**
 * Tiny Underlines
 * Kurzer Trennstrich zwischen zwei Elementen.
 * Normalerweise zwischen Überschrift und Fließtext.
 */
.separator:after {
    font-size: 1.5rem;
    content: "—";
    display: block;
}

.separator--opener:after {
    line-height: 0.5;
    margin-bottom: 0.25em;
}

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

/**
 * Breadcrumbs
 * Trennzeichen zwischen ausgewählten Elementen.
 */
.sep2 + .sep2::before {
    border-style: solid;
    border-width: thin thin 0 0;
    content: "";
    display: inline-block;
    height: 0.4em;
    position: relative;
    top: -0.125em;
    transform: rotate(45deg);
    width: 0.4em;
    margin-right: 0.5em;
}

/**
 * Horizontale Navigation
 * Für Breadcrumbs oder ähnliches.
 */
.nav {
    list-style: none;
    padding-left: 0;
}

.nav__item {
    display: inline-block;
}

.nav__item > a {
    text-decoration: none;
}


/**
 * Icons
 */
.icon {
    display: block;
    flex-shrink: 0;
    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;
}

.country-flag {
    display: inline-block;
    width: 2.625rem;
}



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

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

/**
 * Buttons & Call-To-Actions
 */
.btn, a.cta, a.cta3 {
    display: inline-block;
    text-align: center;
}

.btn {
    border: thin solid #757575;
    cursor: pointer;
    padding: 0.25em 1.25em;
}

a.cta,
a.cta3,
a.cta3:hover,
a.cta3:focus,
.btn--shop-now {
    background-color: #c4cc3c;
    color: #111111;
}

a.cta,
a.cta3 {
    padding: 0.75em 1.5em;
    text-decoration: none;
}

a.cta3 {
    font-weight: 400;
    line-height: 1.5;
    padding: 1em
}

a.cta3::after,
.btn--arrow::after {
    border-style: solid;
    border-width: thin thin 0 0;
    content: "";
    display: inline-block;
    height: 0.4em;
    position: relative;
    top: -0.125em;
    transform: rotate(45deg);
    width: 0.4em;
    margin-left: 0.25em;
}

.btn.bg--black,
.btn.bg--black:hover,
.btn.bg--black:focus,
.btn--arrow.dark,
.btn--arrow.dark:hover,
.btn--arrow.dark:focus {
    background: #111111;
    border-color: rgb(0, 0, 0, 0);
    color: #f6f6f6;
}

.btn.bg--white,
.btn.bg--white:hover,
.btn.bg--white:focus,
.btn--circle,
.btn--arrow,
.btn--arrow:hover,
.btn--arrow:focus {
    background-color: #f6f6f6;
    color: #111111;
}

.btn.disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn--arrow {
    align-items: center;
    display: inline-flex;
    justify-content: space-between;
    min-width: 10rem;
    padding-left: 0.75em;
    padding-right: 0.75em;
    text-align: left;
}

.btn--arrow.light {
    border-color: #969696;
}

.btn--arrow::after {
    top: auto;
    flex-shrink: 0;
}

.btn--shop-now {
    border: 0.125em solid transparent;
    font-size: 0.875rem;
    padding: 0.25em 1.5em;
}

/* Legacy - DO NOT USE! */
.btn--circle {
    border: 0;
    border-radius: 50%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    height: 0.625rem;
    margin: 0;
    padding: 0;
    width: 0.625rem;
}

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


/**
 * Input-Addons
 * Eingabefelder mit zusätzlichen Texten und/oder Grafiken.
 */
.input-addon {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

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

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

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

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

.input-addon.invalid > input {
    box-shadow: 0 0 0 2px #ff6347;
}

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

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

.input-addon.valid::before {
    background-image: url("../../de/_selector/pic/checkbox--checked.svg");
    background-size: 60% 80%;
}

.input-addon.invalid::before {
    background-image: url("../../de/_selector/pic/input-invalid.svg");
    background-size: 80% 80%;
}



/**
 * Image-Fader
 * Grafiken ineinander überblenden.
 *
 * .img-fader wird in fe-ergonomics.php benutzt.
 * .image-fader wird in rider-rickus.php und article-be3.php benutzt.
 */
.img-fader,
.image-fader {
    position: relative;
}

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

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

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

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

.image-fader__top {
    animation: imgFadeAnimation 10s ease-in infinite alternate;
}

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



/**
 * Media-Container
 * Enthalten eine Hintergrund-Grafik und Text.
 * Normalerweise bildschirmfüllend.
 */
.media,
.media__content,
.media__background,
.media__content.container {
    width: 100%;
}

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

.media--narrow {
    height: 0;
    padding-bottom: 100%;
}

.media__content,
.media__background {
    height: 100%;
}

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

.media__content {
    left: 0;
    top: 0;
}

.media__content.container {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

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

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

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

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

    .sm-media__content,
    .sm-media__content.container {
        left: 0;
        max-width: none;
        position: absolute;
        top: 0;
    }
}

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



/*
 * Vorschau-Container
 * Querverweis zu relevanten redaktionellen Artikeln.
 * Normalerweise am Ende einer Seite zu finden.
 */
.preview,
.preview:focus,
.preview:hover {
    color: #f6f6f6;
}

.preview {
    background: #111111;
    display: block;
    position: relative;
    text-align: center;
}

.preview > a,
.preview > span,
.preview::after,
.preview > a::after {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.preview::after,
.preview > a::after {
    content: "";
}

.preview::after {
    background: linear-gradient(
        to top,
        rgba(17, 17, 17, 0.15) 20%,
        rgba(0, 0, 0, 0)
    );
}

.preview > a,
.preview > span {
    padding: 0 1.25rem;
    text-decoration: none;
    z-index: 1;
}

.preview > span {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

.preview strong:not([class]) {
    font-weight: inherit;
}

.preview strong::after {
    content: "—";
    display: block;
    margin-top: -0.5em;
    margin-bottom: -0.125em;
    white-space: pre;
}

[data-content-slider] .preview strong {
    display: block;
    max-width: 50rem;
    margin: auto;
}

[data-content-slider] .preview span {
    display: block;
    max-width: 70rem;
    margin: auto;
}

.tile,
.tile > img {
    display: block;
}

.tile {
    border-bottom: thin solid;
    padding-bottom: 1.25rem;
    text-decoration: none;
}

.tile > img {
    margin-bottom: 1.25rem;
    max-width: none;
    width: 100%;
}

/**
 * Featured-Grid
 * Redaktionell ausgewählte Artikel in einem Raster.
 * Bis zu Zwei (2) oder Drei (3) Spalten möglich.
 * Große Teile des Layouts werden über Utility-Klassen gesteuert.
 */
.team-grid__item {
    flex: 0 0 auto;
}

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

.team-grid__item {
    flex-flow: column wrap;
}

@media (min-width: 40em) {
    .team-grid__item {
        flex: 0 0 auto;
    }

    .team-grid__item {
        width: 50%;
    }
}

.tile-grid > * {
    margin: 0 auto;
    max-width: 25em;
}

.tile-grid > * + * {
    margin-top: 1.25rem;
}

.tile-grid > .highlight {
    min-height: 20rem;
}

@supports (display: grid) and (--custom: "properties") {
    .tile-grid {
        --columns: 2;
        display: grid;
        gap: 1.25rem;
        grid-auto-flow: row dense;
        grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
        -webkit-hyphens: auto;
                hyphens: auto;
    }

    .tile-grid > * {
        display: flex;
        justify-content: stretch;
        margin-top: 0;
        max-width: none;
    }

    .tile-grid > .highlight {
        grid-column-end: span 2;
        width: 100%;
    }

    @media (min-width: 50em) {
        .tile-grid {
            --columns: 3;
        }
    }
}

/**
 * Formular zur Regionen-Auswahl.
 */
.region-select {
    position: relative;
}

.region-select > * + * {
    margin-top: 1.25rem;
}

.region-select__text {
    display: block;
    padding-right: 3.125rem;
}

.region-select__close {
    margin: 0;
    position: absolute;
    right: 1.875rem;
    top: 1.375rem;
}

.region-select__input {
    display: flex;
    margin-left:  -0.5rem;
    margin-right: -0.5rem;
}

.region-select__input > * {
    margin: 0 0.5rem;
}

@media (min-width: 60em) {
    .region-select {
        align-items: center;
        display: flex;
    }

    .region-select > * + * {
        margin-top: 0;
    }

    .region-select__text {
        flex: 1;
        padding-right: 1.25em;
    }

    .region-select__input {
        min-width: 25rem;
    }

    .region-select__close {
        position: static;
        margin-left: 1em;
    }
}
/**/










/*---------------------------*/
/* Widgets                   */
/*---------------------------*/
/**
 * Content-Slider
 * Inhalte entlang der X-Achse bewegen.
 * Zugehörige PHP-Funktion: html_gallery()
 * Zugehörige JavaScript-Datei: slider.js
 * Legacy. DO NOT USE!
 */
.galerie,
.galerie__content,
.galerie__content-wrapper {
    position: relative;
}

.galerie {
    overflow: hidden;
}

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

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

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

.galerie__img,
.galerie__content::before {
    display: block;
}

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

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

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

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

.galerie__slide,
.galerie__controls {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.galerie__slide {
    display: none;
    will-change: left;
}

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

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

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

.galerie__controls {
    margin: 0 auto;
    max-width: 2400px;
    pointer-events: none;
}

.galerie__controls.border {
    border: 0;
}

.galerie__controls button {
    pointer-events: all;
}

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

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

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

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

.galerie img {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* Content-Slider: Slides & Inhalt */
.slide-img {
    margin: 0 auto;
}

.slide-txt,
.slide-txt.center,
.slide-txt.center-vertical {
    width: 100%;
}

.slide-txt.center,
.slide-txt.center-vertical {
    bottom: auto;
    top: 50%;
}

/**
 * 1. Quick-Fix:
 * Mittlerweile hat sich die Kaskade geändert,
 * sodass die ".container", die Position und Breite von".slide-txt" überschreibt.
 * Das hier "fixt" dieses Problem mit erhöhter Spezifität.
 *
 * ToDo: Fix it properly.
 */
.slide-txt,
.slide-txt.container {
    position: absolute; /* 1 */
    width: 100%; /* 1 */
}

.slide-txt {
    bottom: 0;
    left: 50%;
    padding-bottom: 1.25em;
    padding-top: 1.25em;
    transform: translateX(-50%);
}

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

.slide-txt.center {
    transform: translate(-50%, -50%);
}

.slide-txt.center-vertical {
    left: 0;
    transform: translateY(-50%);
}

/* Content-Slider: Kontroll-Elemente */
.control-arrows,
.control-buttons {
    list-style: none;
    position: absolute;
    width: 100%;
}

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

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

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

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

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

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

.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.grabbing:hover {
    cursor: grabbing;
}

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

/* Content-Slider: Buttons & Thumbnails */
.btn--control-arrow,
.btn--control-arrow.border {
    border: 0;
}

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

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

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

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

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

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

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

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

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

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

.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;
    transform: translateY(-50%);
}

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

/* Content-Slider: Grafiken schattieren */
.pic-shadow > div {
    z-index: 1;
}

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

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

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

/* Content-Slider: Zoom-Ansicht */
.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;
}

.galerie--fullscreen,
.galerie--fullscreen .slide-img,
.galerie--fullscreen .galerie__thumbs {
    position: absolute;
}

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

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

.galerie--fullscreen {
    left: 0;
    top: 0;
}

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

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

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

.galerie__content--fullscreen {
    max-width: none;
}

.galerie--fullscreen .slide-img {
    max-height: 100%;
    max-width: 100%;
}

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

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

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

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

    .slide-txt {
        padding-top: 2.5em;
    }

    .slide-txt.top {
        top: 0;
    }

    .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%;
    }

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

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

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

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

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

/**
 * Tabboxen
 * Zugehörige JavaScript-Datei: tab-widget.js
 */
.tab-list,
.tab-list__item[data-tab-active],
.tab-list__item--vertical[data-tab-active] {
    background: rgba(0, 0, 0, 0);
}

.tab-list--material {
    letter-spacing: 0.0625em;
    text-align: center;
    text-transform: uppercase;
}

.tab-list__item,
.tab-list__link {
    display: block;
}

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

.tab-list__item--material,
.tab-panel--material {
    background: #111111;
    color: #fefefe;
}

.tab-list__item--material {
    border: thin solid;
    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: rgba(0, 0, 0, 0);
    color: #111111;
}

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

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

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

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

@media (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;
    }
}

@media (min-width: 50em) {
    .tab-list__item,
    .tab-list__link {
        display: inline-block;
    }

    .tab-list__item,
    .tab-list__item--vertical[data-tab-active],
    .tab-list__item--nostripe[data-tab-active] {
        background: rgb(0, 0, 0, 0);
    }

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

    .tab-list__item--material[data-tab-active] {
        background-color: #c4cc3c;
        border-color: rgba(0, 0, 0, 0);
        color: #111111;
    }

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



/**
 * Video-Embed
 * Der Video-Frame wird erst auf Wunsch via JavaScript geladen.
 * Zugehörige PHP-Funktion: video_embed()
 * Zugehörige JavaScript-Datei: video-embed.js
 */
[data-embed] {
    background: black;
    color: white;
    padding-top: 56.25%;
    position: relative;
}

[data-embed] p {
    padding: 1.25rem;
}

[data-embed] img,
[data-embed] button,
[data-embed] .video {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

[data-embed] button {
    background: rgba(0, 0, 0, 0.6);
    border: 0;
    color: inherit;
    height: 0;
    padding: 56.25% 0 0;
}

[data-embed] button::after,
[data-embed] button::before {
    content: "";
    height: 5rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
}

[data-embed] button::after {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M40 1C18.461 1 1 18.461 1 40s17.461 39 39 39 39-17.461 39-39S61.539 1 40 1zM28.75 60V20L60 40 28.75 60z'/></svg>") no-repeat;
}

@media (min-width: 60em) {
    [data-embed] p {
        left: 50%;
        max-width: 30em;
        padding: 0;
        position: absolute;
        text-align: center;
        top: calc(50% + 5rem);
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 1;
    }
}

/*---------------------------*/
/* Seitenbereiche            */
/*---------------------------*/

/* Suche */
.site-search {
    max-width: 100%;
    min-width: 10rem;
    width: calc((500px - 100vw) * 999);
}

.site-search__form {
    border-bottom: thin solid;
    display: flex;
}

.site-search__form:focus-within {
    box-shadow: 0 0.0625rem 0 currentcolor;
}

.site-search__form > input,
.site-search__form > button {
    background: rgb(0, 0, 0, 0);
    border: 0;
    color: currentcolor;
    padding: 0.625rem 0;
}

.site-search__form > input {
    min-width: 0;
    padding-right: 0.625rem;
}

.site-search:not(.is-ready) > * > .icon {
    display: none;
}

.site-search.is-ready {
    margin-top: 0;
}

/* Navigation */
.site-nav :link {
    display: block;
    text-decoration: none;
}

.site-nav [data-accordion] [aria-expanded] {
    padding: 0;
}

.site-nav [data-accordion] [aria-expanded]::after {
    right: 0.625rem;
}

.site-nav__firstlevel > * + * {
    margin-top: 1.5rem;
}

.site-nav__firstlevel :link.select {
    border: thin solid;
    font-size: 0.8125rem;
    padding: 0.25rem 1.5rem;
    text-align: center;
}

.site-nav__firstlevel > * > a,
.site-nav__firstlevel > * > strong {
    font-size: 1.25rem;
    font-weight: 700;
}

.site-nav__secondlevel,
.site-nav__secondlevel > * + *,
.site-nav__thirdlevel,
.site-nav__thirdlevel > * + * {
    margin-top: 0.75rem;
}

.site-nav__thirdlevel {
    font-weight: 300;
}

/* Header */
.site-header {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    position: relative;
}

.site-header > * {
    order: 5;
}

.site-header > * + * {
    margin-top: 1.5rem;
}

.site-header img {
    width: 100%;
}

.site-header__logo {
    display: block;
    margin: 0 auto 0 0;
    order: 0;
    width: 50%;
}

.site-header__nav,
.site-header__search {
    flex-basis: 100%;
}

.site-header__controls {
    margin: 0;
}

.site-header__controls > [aria-expanded] {
    padding: 0.625rem;
}

.site-header__controls > [aria-expanded] .close,
.site-header__controls > [aria-expanded="true"] .open {
    display: none;
}

.site-header__controls > [aria-expanded="true"] .close {
    display: block;
}

@media (min-width: 31.25em) {
    .site-header__logo {
        flex: 0 0 12rem;
    }

    .site-header__search {
        flex-basis: auto;
        margin: 0 0 0 auto;
        order: 0;
    }
}

@media (min-width: 55em) {
    .site-header {
        align-items: center;
    }

    .site-header__nav,
    .site-header__search {
        margin: 0.95rem 0 0;
    }

    .site-header__nav {
        flex-basis: auto;

        margin-left: auto;
        order: 0;
    }

    .site-nav [data-accordion] [aria-expanded]::after {
        margin-left: 0.3125em;
        right: 0;
    }

    .site-nav [data-accordion] [data-panel] {
        position: relative;
    }

    .site-nav [data-accordion] [data-panel] > .content {
        background: #f6f6f6;
        position: absolute;
        top: 100%;
        left: -1.5em;
        z-index: 2;
        padding: 1.5em;
    }

    .site-nav__firstlevel {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        margin: -0.625rem;
    }

    .site-nav__firstlevel > * {
        margin: 0.625rem;
    }

    .site-nav__firstlevel > * > a,
    .site-nav__firstlevel > * > strong,
    .site-nav__firstlevel > [data-accordion] [data-panel] > :first-child {
        font-size: 1rem;
    }

    .site-nav__secondlevel {
        margin: 0;
    }
}

@media (min-width: 65em) {
    .site-header::after {
        background: url("../../pic/content/logos/brand/logo_gi.svg") center/contain no-repeat;
        content: "";
        display: block;
        flex: 0 0 6rem;
        height: 17px;
        margin: 0.95rem 0 0 1.5rem;
        width: 96px;
    }

    .bg--black .site-header::after {
        background-image: url("../../pic/content/logos/brand/logo_gi--inverted.svg");
    }
}

/* Social-Links */
.social-nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: -0.625rem;
}

.social-nav > * {
    margin: 0.625rem;
}

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

.social-nav > * > a {
    display: block;
    padding: 0.5rem;
    border: 0.125em solid;
    border-radius: 50%;
}


/**
 * In-Page-Navigation
 */
.page-subnav,
.page-subnav ul {
    display: none;
}

.page-subnav {
    background: #c4cc3c;
    border-bottom: thin solid;
    color: #111111;
}

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

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

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

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

.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: 0.625em 0;
}

@media (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;
    }
}
/**/










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

.ergo-size-select.is-active {
    background: #111111;
    border-color: rgba(0, 0, 0, 0);
    color: #f6f6f6;
}

.ergonomics-header { /* auch in article-fittingbox.php */
    background: #111111 center center/cover no-repeat;
    color: #f6f6f6;
}

.ergonomics-header > h2,
.ergonomics-header > div {
    text-align: center;
}

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

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

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

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

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

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

@media (min-width: 710px) {
    .sso::before,
    .sso::after {
        background-repeat: no-repeat;
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 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.php */
.google-map {
    background: #d2d2d2 url('../../pic/system/standort.jpg') center center/cover no-repeat;
    position: relative;
    width: 100%;
    height: 35rem;
}

.google-map__notice {
    background-color: rgba(246, 246, 246, 0.9);
    box-shadow:
		0 6px 10px 0 rgb(0 0 0 / 0.2),
		0 2px 2px 0 rgb(0 0 0 / 0.1);
}

.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%;
    transform: translate(-50% -50%);
    animation: map-loader 1s infinite linear;
}

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

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

/* Rückmeldung des Kontakt-Formulars über ein kleines Modal-Fenster */
.contact-modal {
    align-items: flex-start;
    background: #f6f6f6;
    border: thin solid #969696;
    box-shadow: 1px 1px 3px rgba(17,17,17,0.5);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    left: 50%;
    padding: 1.25rem;
    position: fixed;
    top:  50%;
    width: 25rem;
    transform: translate(-50%, -50%);
    animation: display-error 300ms forwards;
}

.contact-modal.is-error,
.contact-modal.is-success {
    border-style: solid;
    border-width: medium;
}

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

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

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

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

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

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





.about-milestones {
    background: url("../../pic/content/about/ms-background.jpg") center/cover no-repeat;
}

/* Hacking the display of thumbnails. */
.about-milestones[id] .thumbnails > :first-child {
    display: none;
}

.about-milestones[id] .thumbnails button {
    height: 100px;
    width: 100px;
}

.about-milestones[id] .thumbnails img {
    -o-object-fit: contain;
       object-fit: contain;
}




/* product.php & saddle-selector.php */
/* Start-Teaser auf Produktseite */
.saddle-selector.hidden,
.saddle-selector-start.hidden {
    display: none;
}

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

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

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

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

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

/* eigentlicher Saddle Selector */
.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 form h3,
.saddle-selector form h4 {
    font-weight: 700;
}

.saddle-selector form h3 {
    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;
}

.saddle-selector .detail-toggle {
    margin: 0.25rem 0;
}

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

/* Saddle Selector: Ergebnis-Bild */
.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 {
    border-radius: 50%;
    height: auto;
    position: absolute;
    right: 0.625em;
    top: 0.625em;
    transform: rotate(20deg);
    width: 25%;
}

/* Saddle Selector: Ergebnis-Skala (Größen) */
.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: thin 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,
        rgba(0, 0, 0, 0) 0.1875em,
        #c4cc3c 0.1875em,
        #c4cc3c 0.4375em,
        rgba(0, 0, 0, 0) 0.4375em
    );
    box-shadow: none;
    width: 0.625em;
}

.skala-indikator:after,
.skala-indikator:before {
    border-right: 0.3125em solid rgba(0, 0, 0, 0);
    border-left: 0.3125em solid rgba(0, 0, 0, 0);
    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;
}



/* article-smc4.php */
.druckmessung {
    position: relative;
    overflow: visible;
}

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

.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%;
}



/* article-all-mountain-series.php */
.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;
}

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

@media (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;
    }
}



/* rider-canyon-sram.php */
.multi-bg {
    background:
    linear-gradient(
        rgba(158, 4, 86, 0.75),
        rgba(158, 4, 86, 0.75)
    ),
    url("../../pic/content/rider/canyon_sram/biketour2.jpg") center/cover no-repeat;
    padding: 2.5rem 0;
}



/**
 * Bike-Specs (cape-epic-2017.php / rider-tert.php)
 */
.bike-specs {
    margin-top: 1.25rem;
}

.bike-specs h3,
.bike-specs dt,
.bike-specs dd {
    letter-spacing: 0.0625em;
}

.bike-specs h3,
.bike-specs dt {
    font-weight: 700;
}

.bike-specs h3,
.bike-specs dd {
    text-transform: uppercase;
}

.bike-specs dl {
    border-style: solid;
    border-width: thin 0;
}

.bike-specs dt {
    padding-top: 0.625em;
}

.bike-specs dt::after {
    content: ": ";
}

.bike-specs dd {
    padding-bottom: 0.625em;
}

.bike-specs dd + dt {
    border-top: thin solid;
}

/* cape-epic + rider tert */
.spec-btn {
    border: thin solid;
    display: inline-block;
    letter-spacing: 0.0625em;
    padding: 1em;
    text-transform: uppercase;
}

/* cape-epic, rider canyon-sram, rider tert */
.spec-container__img {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 40em) {
    .bike-specs dl {
        background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) calc(2em - 1px),
            #f6f6f6 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 (min-width: 60.625em) {
    .bike-specs {
        margin: 0;
        left: 1.5em;
        padding: 1.5em;
        position: absolute;
        right: 1.5em;
        top: 50%;
        transform: translateY(-50%);
    }

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

    .spec-container {
        position: relative;
    }

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

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



/* privacy-policy.php / privacy-policy-tert.php */
#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;
}
/**/










/*---------------------------*/
/* Utility                   */
/*---------------------------*/
/**
 * Layout-Raster
 * Basiert auf Bootstrap's Grid-System
 */
.container {
    width: auto;
    max-width: 83.25rem;
    margin-left:  auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
}

.container--fluid {
    max-width: none;
}

.container--wide {
    /* max-width: 97.125rem; */
    overflow: visible;
}

.cf::after, .row::after {
    content: "";
    clear: both;
    display: block;
}

.col {
    position: relative;
    float: left;
    width: 100%;
}

.col-reverse {
    float: right;
    width: 100%;
}

.col-1  { width: 8.33%;  }  .push-1  { left: 8.33%;  }  .pull-2  { left: -8.33%;  }
.col-2  { width: 16.66%; }  .push-2  { left: 16.66%; }  .pull-2  { left: -16.66%; }
.col-3  { width: 25%;    }  .push-3  { left: 25%;    }  .pull-3  { left: -25%;    }
.col-4  { width: 33.33%; }  .push-4  { left: 33.33%; }  .pull-4  { left: -33.33%; }
.col-5  { width: 41.66%; }  .push-5  { left: 41.66%; }  .pull-5  { left: -41.66%; }
.col-6  { width: 50%;    }  .push-6  { left: 50%;    }  .pull-6  { left: -50%;    }
.col-7  { width: 58.33%; }  .push-7  { left: 58.33%; }  .pull-7  { left: -58.33%; }
.col-8  { width: 66.66%; }  .push-8  { left: 66.66%; }  .pull-8  { left: -66.66%; }
.col-9  { width: 75%;    }  .push-9  { left: 75%;    }  .pull-9  { left: -75%;    }
.col-10 { width: 83.33%; }  .push-10 { left: 83.33%; }  .pull-10 { left: -83.33%; }
.col-11 { width: 91.66%; }  .push-11 { left: 91.66%; }  .pull-11 { left: -91.66%; }
.col-12 { width: 100%;   }  .push-12 { left: 100%;   }  .pull-12 { left: -100%;   }

/* Sonderfälle ... */
.col-special   { width: 20%;    }
.col-special-7 { width: 14.28%; }

/* >= 480px */
@media (min-width: 30em) {
    .xs-col-1  { width: 8.33%;  }  .xs-push-1  { left: 8.33%;  }  .xs-pull-2  { left: -8.33%;  }
    .xs-col-2  { width: 16.66%; }  .xs-push-2  { left: 16.66%; }  .xs-pull-2  { left: -16.66%; }
    .xs-col-3  { width: 25%;    }  .xs-push-3  { left: 25%;    }  .xs-pull-3  { left: -25%;    }
    .xs-col-4  { width: 33.33%; }  .xs-push-4  { left: 33.33%; }  .xs-pull-4  { left: -33.33%; }
    .xs-col-5  { width: 41.66%; }  .xs-push-5  { left: 41.66%; }  .xs-pull-5  { left: -41.66%; }
    .xs-col-6  { width: 50%;    }  .xs-push-6  { left: 50%;    }  .xs-pull-6  { left: -50%;    }
    .xs-col-7  { width: 58.33%; }  .xs-push-7  { left: 58.33%; }  .xs-pull-7  { left: -58.33%; }
    .xs-col-8  { width: 66.66%; }  .xs-push-8  { left: 66.66%; }  .xs-pull-8  { left: -66.66%; }
    .xs-col-9  { width: 75%;    }  .xs-push-9  { left: 75%;    }  .xs-pull-9  { left: -75%;    }
    .xs-col-10 { width: 83.33%; }  .xs-push-10 { left: 83.33%; }  .xs-pull-10 { left: -83.33%; }
    .xs-col-11 { width: 91.66%; }  .xs-push-11 { left: 91.66%; }  .xs-pull-11 { left: -91.66%; }
    .xs-col-12 { width: 100%;   }  .xs-push-12 { left: 100%;   }  .xs-pull-12 { left: -100%;   }

    /* Sonderfälle ... */
    .xs-col-special   { width: 20%;    }
    .xs-col-special-7 { width: 14.28%; }
}

/* >= 640px */
@media (min-width: 40em) {
    .sm-col-1  { width: 8.33%;  }  .sm-push-1  { left: 8.33%;  }  .sm-pull-2  { left: -8.33%;  }
    .sm-col-2  { width: 16.66%; }  .sm-push-2  { left: 16.66%; }  .sm-pull-2  { left: -16.66%; }
    .sm-col-3  { width: 25%;    }  .sm-push-3  { left: 25%;    }  .sm-pull-3  { left: -25%;    }
    .sm-col-4  { width: 33.33%; }  .sm-push-4  { left: 33.33%; }  .sm-pull-4  { left: -33.33%; }
    .sm-col-5  { width: 41.66%; }  .sm-push-5  { left: 41.66%; }  .sm-pull-5  { left: -41.66%; }
    .sm-col-6  { width: 50%;    }  .sm-push-6  { left: 50%;    }  .sm-pull-6  { left: -50%;    }
    .sm-col-7  { width: 58.33%; }  .sm-push-7  { left: 58.33%; }  .sm-pull-7  { left: -58.33%; }
    .sm-col-8  { width: 66.66%; }  .sm-push-8  { left: 66.66%; }  .sm-pull-8  { left: -66.66%; }
    .sm-col-9  { width: 75%;    }  .sm-push-9  { left: 75%;    }  .sm-pull-9  { left: -75%;    }
    .sm-col-10 { width: 83.33%; }  .sm-push-10 { left: 83.33%; }  .sm-pull-10 { left: -83.33%; }
    .sm-col-11 { width: 91.66%; }  .sm-push-11 { left: 91.66%; }  .sm-pull-11 { left: -91.66%; }
    .sm-col-12 { width: 100%;   }  .sm-push-12 { left: 100%;   }  .sm-pull-12 { left: -100%;   }

    /* Sonderfälle ... */
    .sm-col-special   { width: 20%;    }
    .sm-col-special-7 { width: 14.28%; }
}

/* >= 970 */
@media (min-width: 60.625em) {
    .md-col-1  { width: 8.33%;  }  .md-push-1  { left: 8.33%;  }  .md-pull-2  { left: -8.33%;  }
    .md-col-2  { width: 16.66%; }  .md-push-2  { left: 16.66%; }  .md-pull-2  { left: -16.66%; }
    .md-col-3  { width: 25%;    }  .md-push-3  { left: 25%;    }  .md-pull-3  { left: -25%;    }
    .md-col-4  { width: 33.33%; }  .md-push-4  { left: 33.33%; }  .md-pull-4  { left: -33.33%; }
    .md-col-5  { width: 41.66%; }  .md-push-5  { left: 41.66%; }  .md-pull-5  { left: -41.66%; }
    .md-col-6  { width: 50%;    }  .md-push-6  { left: 50%;    }  .md-pull-6  { left: -50%;    }
    .md-col-7  { width: 58.33%; }  .md-push-7  { left: 58.33%; }  .md-pull-7  { left: -58.33%; }
    .md-col-8  { width: 66.66%; }  .md-push-8  { left: 66.66%; }  .md-pull-8  { left: -66.66%; }
    .md-col-9  { width: 75%;    }  .md-push-9  { left: 75%;    }  .md-pull-9  { left: -75%;    }
    .md-col-10 { width: 83.33%; }  .md-push-10 { left: 83.33%; }  .md-pull-10 { left: -83.33%; }
    .md-col-11 { width: 91.66%; }  .md-push-11 { left: 91.66%; }  .md-pull-11 { left: -91.66%; }
    .md-col-12 { width: 100%;   }  .md-push-12 { left: 100%;   }  .md-pull-12 { left: -100%;   }

    /* Sonderfälle ... */
    .md-col-special    { width: 20%;    }
    .md-col-special-7  { width: 14.28%; }
    .md-col-special-13 { width: 7.69%;  }
}

/* >= 1200 */
@media (min-width: 75rem) {
    .lg-col-1  { width: 8.33%;  }  .lg-push-1  { left: 8.33%;  }  .lg-pull-2  { left: -8.33%;  }
    .lg-col-2  { width: 16.66%; }  .lg-push-2  { left: 16.66%; }  .lg-pull-2  { left: -16.66%; }
    .lg-col-3  { width: 25%;    }  .lg-push-3  { left: 25%;    }  .lg-pull-3  { left: -25%;    }
    .lg-col-4  { width: 33.33%; }  .lg-push-4  { left: 33.33%; }  .lg-pull-4  { left: -33.33%; }
    .lg-col-5  { width: 41.66%; }  .lg-push-5  { left: 41.66%; }  .lg-pull-5  { left: -41.66%; }
    .lg-col-6  { width: 50%;    }  .lg-push-6  { left: 50%;    }  .lg-pull-6  { left: -50%;    }
    .lg-col-7  { width: 58.33%; }  .lg-push-7  { left: 58.33%; }  .lg-pull-7  { left: -58.33%; }
    .lg-col-8  { width: 66.66%; }  .lg-push-8  { left: 66.66%; }  .lg-pull-8  { left: -66.66%; }
    .lg-col-9  { width: 75%;    }  .lg-push-9  { left: 75%;    }  .lg-pull-9  { left: -75%;    }
    .lg-col-10 { width: 83.33%; }  .lg-push-10 { left: 83.33%; }  .lg-pull-10 { left: -83.33%; }
    .lg-col-11 { width: 91.66%; }  .lg-push-11 { left: 91.66%; }  .lg-pull-11 { left: -91.66%; }
    .lg-col-12 { width: 100%;   }  .lg-push-12 { left: 100%;   }  .lg-pull-12 { left: -100%;   }

    /* Sonderfälle ... */
    .lg-col-special   { width: 20%;    }
    .lg-col-special-7 { width: 14.28%; }
}



/**
 * Flex-Layout
 */
.flex {
    display: flex;
    flex: 0 1 auto;
    flex-flow: column nowrap;
}

.flex__auto { flex: 1 1 auto; }
.flex--row  { flex-direction: row; }
.flex--wrap { flex-wrap: wrap; }

/* align cross-axis */
.cross--center { align-items: center;     }
.cross--end    { align-items: flex-end;   }
.cross--start  { align-items: flex-start; }

/* align main-axis */
.main--center  { justify-content: center;        }
.main--end     { justify-content: flex-end;      }
.main--start   { justify-content: flex-start;    }
.main--justify { justify-content: space-between; }

/* align individuel items */
.self--center   { align-self: center;     }
.self--end      { align-self: flex-end;   }
.self--start    { align-self: flex-start; }
.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: 40em) {
    .flex { flex-direction: row; }

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

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

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

    /* align individuel items */
    .sm-self--center   { align-self: center;     }
    .sm-self--end      { align-self: flex-end;   }
    .sm-self--start    { align-self: flex-start; }
    .sm-self--stretch  { align-self: stretch;    }
    .sm-self--noshrink { flex-shrink: 0; }

    /* item order */
    .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.625em) {
    /* item order */
    .md-o1 { order: 1; }
    .md-o2 { order: 2; }
    .md-o3 { order: 3; }
    .md-o4 { order: 4; }
    .md-o5 { order: 5; }

    /* multi-column layout */
    .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;
        width: 100%;
    }
}


/**
 * Außen- und Innenabstände
 */
/* 0px */
.m0, .my0, .mt0 { margin-top:    0.000rem; }  .p0, .py0, .pt0 { padding-top:    0.000rem; }
.m0, .mx0, .mr0 { margin-right:  0.000rem; }  .p0, .px0, .pr0 { padding-right:  0.000rem; }
.m0, .my0, .mb0 { margin-bottom: 0.000rem; }  .p0, .py0, .pb0 { padding-bottom: 0.000rem; }
.m0, .mx0, .ml0 { margin-left:   0.000rem; }  .p0, .px0, .pl0 { padding-left:   0.000rem; }

/* 10px */
.m1, .my1, .mt1 { margin-top:    0.625rem; }  .p1, .py1, .pt1 { padding-top:    0.625rem; }
.m1, .mx1, .mr1 { margin-right:  0.625rem; }  .p1, .px1, .pr1 { padding-right:  0.625rem; }
.m1, .my1, .mb1 { margin-bottom: 0.625rem; }  .p1, .py1, .pb1 { padding-bottom: 0.625rem; }
.m1, .mx1, .ml1 { margin-left:   0.625rem; }  .p1, .px1, .pl1 { padding-left:   0.625rem; }

/* 20px */
.m2, .my2, .mt2 { margin-top:    1.250rem; }  .p2, .py2, .pt2 { padding-top:    1.250rem; }
.m2, .mx2, .mr2 { margin-right:  1.250rem; }  .p2, .px2, .pr2 { padding-right:  1.250rem; }
.m2, .my2, .mb2 { margin-bottom: 1.250rem; }  .p2, .py2, .pb2 { padding-bottom: 1.250rem; }
.m2, .mx2, .ml2 { margin-left:   1.250rem; }  .p2, .px2, .pl2 { padding-left:   1.250rem; }

/* 40px */
.m3, .my3, .mt3 { margin-top:    2.500rem; }  .p3, .py3, .pt3 { padding-top:    2.500rem; }
.m3, .mx3, .mr3 { margin-right:  2.500rem; }  .p3, .px3, .pr3 { padding-right:  2.500rem; }
.m3, .my3, .mb3 { margin-bottom: 2.500rem; }  .p3, .py3, .pb3 { padding-bottom: 2.500rem; }
.m3, .mx3, .ml3 { margin-left:   2.500rem; }  .p3, .px3, .pl3 { padding-left:   2.500rem; }

/* 60px */
.m4, .my4, .mt4 { margin-top:    3.750rem; }  .p4, .py4, .pt4 { padding-top:    3.750rem; }
.m4, .mx4, .mr4 { margin-right:  3.750rem; }  .p4, .px4, .pr4 { padding-right:  3.750rem; }
.m4, .my4, .mb4 { margin-bottom: 3.750rem; }  .p4, .py4, .pb4 { padding-bottom: 3.750rem; }
.m4, .mx4, .ml4 { margin-left:   3.750rem; }  .p4, .px4, .pl4 { padding-left:   3.750rem; }

/* 80px */
.m5, .my5, .mt5 { margin-top:    5.000rem; }  .p5, .py5, .pt5 { padding-top:    5.000rem; }
.m5, .mx5, .mr5 { margin-right:  5.000rem; }  .p5, .px5, .pr5 { padding-right:  5.000rem; }
.m5, .my5, .mb5 { margin-bottom: 5.000rem; }  .p5, .py5, .pb5 { padding-bottom: 5.000rem; }
.m5, .mx5, .ml5 { margin-left:   5.000rem; }  .p5, .px5, .pl5 { padding-left:   5.000rem; }

.p-mini, .py-mini, .pt-mini { padding-top:    0.3125em; }
.p-mini, .px-mini, .pr-mini { padding-right:  0.3125em; }
.p-mini, .py-mini, .pb-mini { padding-bottom: 0.3125em; }
.p-mini, .px-mini, .pl-mini { padding-left:   0.3125em; }

/* negative margins */
/* 10px */
.mn1, .myn1, .mtn1 { margin-top:    -0.625rem; }
.mn1, .mxn1, .mrn1 { margin-right:  -0.625rem; }
.mn1, .myn1, .mbn1 { margin-bottom: -0.625rem; }
.mn1, .mxn1, .mln1 { margin-left:   -0.625rem; }

/* 20px */
.mn2, .myn2, .mtn2 { margin-top:    -1.250rem; }
.mn2, .mxn2, .mrn2 { margin-right:  -1.250rem; }
.mn2, .myn2, .mbn2 { margin-bottom: -1.250rem; }
.mn2, .mxn2, .mln2 { margin-left:   -1.250rem; }

/* 40px */
.mn3, .myn3, .mtn3 { margin-top:    -2.500rem; }
.mn3, .mxn3, .mrn3 { margin-right:  -2.500rem; }
.mn3, .myn3, .mbn3 { margin-bottom: -2.500rem; }
.mn3, .mxn3, .mln3 { margin-left:   -2.500rem; }

/* 60px */
.mn4, .myn4, .mtn4 { margin-top:    -3.750rem; }
.mn4, .mxn4, .mrn4 { margin-right:  -3.750rem; }
.mn4, .myn4, .mbn4 { margin-bottom: -3.750rem; }
.mn4, .mxn4, .mln4 { margin-left:   -3.750rem; }

/* 80px */
.mn5, .myn5, .mtn5 { margin-top:    -5.000rem; }
.mn5, .mxn5, .mrn5 { margin-right:  -5.000rem; }
.mn5, .myn5, .mbn5 { margin-bottom: -5.000rem; }
.mn5, .mxn5, .mln5 { margin-left:   -5.000rem; }

/* automatic margins */
.m-auto, .my-auto, .mt-auto { margin-top:    auto; }
.m-auto, .mx-auto, .mr-auto { margin-right:  auto; }
.m-auto, .my-auto, .mb-auto { margin-bottom: auto; }
.m-auto, .mx-auto, .ml-auto { margin-left:   auto; }



/**
 * Block-Utility
 */
.border, .border-top    { border-top:    thin solid; }
.border, .border-right  { border-right:  thin solid; }
.border, .border-bottom { border-bottom: thin solid; }
.border, .border-left   { border-left:   thin solid; }

.hide-overflow { overflow-x: hidden; }

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

.block { display: block; }

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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



/**
 * Inline-Utility
 */
/* Ausrichtung und Auszeichnung */
.txt--left   { text-align: left;   }
.txt--right  { text-align: right;  }
.txt--center { text-align: center; }

.txt--uppercase, .uppercase {
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.txt--bold, h5, h6, strong, b {
    font-weight: 700;
}

.txt--italic, em, i {
    font-style: italic;
}

.txt-caption {
    font-size: 0.875rem;
    margin-top: 0.625rem;
}

.txt-shadow {
    text-shadow: 3px 3px 5px hsla(0, 0%, 0%, 0.5);
}

.word-break-all {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
    white-space: normal;
}

.clean-link,
.clean-link:hover,
.clean-link:focus {
    text-decoration: none;
}

/* Schriftgrößen */
h1, .alpha, .sg1         { font-size: 2.00rem; font-weight: 300; line-height: 1.25; }
h2, .beta                { font-size: 1.75rem; font-weight: 300; line-height: 1.25; }
h3, .gamma, .sg2         { font-size: 1.50rem; font-weight: 300; line-height: 1.25; }
h4, .delta               { font-size: 1.25rem; font-weight: 300; line-height: 1.25; }
h5, .epsilon, .sg3, .sg4 { font-size: 1.00rem; }
h6, small, .zeta, .milli { font-size: 0.875rem; }

@media screen and (min-width: 40rem) {
    .sg1 { font-size: 2.50rem; }
    .sg2 { font-size: 1.75rem; }
}

@media screen and (min-width: 60.625rem) {
    .sg1 { font-size: 3.50rem; }
    .sg2 { font-size: 2.00rem; }
    .sg3 { font-size: 1.25rem; font-weight: 300; line-height: 1.25; }
}

@media screen and (min-width: 75rem) {
    .sg1 { font-size: 4.5rem; }
    .sg2 { font-size: 2.5rem; }
}



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

.bg--white,
.bg--sltgrey,
.bg--ltgrey,
.bg--dkgrey,
.bg--green {
    color: #111111;
}

.bg--black {
    color: #f6f6f6;
}

/* Product-Colors */
/* Indikator für Produktfarbe */
.product-color {
    background-clip: content-box;
    border: 0.125em solid #d2d2d2;
    border-radius: 50%;
    display: inline-block;
    height: 2em;
    padding: 0.125em;
    width: 2em;
}

.product-color--white          { background-color: #f6f6f6; }
.product-color--transparent    { background-color: #f6f6f6; }
.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--frozenorange   { background-color: #f8a57e; }
.product-color--orange         { background-color: #ff6600; }
.product-color--red            { background-color: #cc0033; }
.product-color--berry          { background-color: #A1274E; }
.product-color--brown          { background-color: #634034; }
.product-color--laserlemon     { background-color: #e1ee1f; }
.product-color--green          { background-color: #c4cc3c; }
.product-color--aquamarine     { background-color: #009999; }
.product-color--blue           { background-color: #0099cc; }
.product-color--purple         { background-color: #6666cc; }
.product-color--bikinipink     { background-color: #ff33cc; }

/* New for 2020 */
.product-color--riskyred      { background-color: #cb323c; }
.product-color--juicyorange   { background-color: #fc7033; }
.product-color--sandstorm     { background-color: #b39c7a; }
.product-color--yellowmellow  { background-color: #fec600; }
.product-color--deepmoss      { background-color: #565c46; }
.product-color--midsummerblue { background-color: #195e9a; }
.product-color--nightrideblue { background-color: #2d4661; }
.product-color--purplereign   { background-color: #6d3e5b; }

.product-color--oilslick {
    background-image: linear-gradient(
        45deg,
        #6d3e5b,
        #fc7033,
        #195d99
    )
}

.product-color--deepmossoilslick {
    background-image:
        linear-gradient(
            45deg,
            #565c46 50%,
            rgba(0, 0, 0, 0) 0
        ),
        linear-gradient(
            90deg,
            #6d3e5b,
            #fc7033,
            #195d99
        );
}

.product-color--stealthoilslick,
.product-color--frozenstealthoilslick,
.product-color--fmdracingoilslick {
    background-image:
        linear-gradient(
            45deg,
            #5a595b 50%,
            rgba(0, 0, 0, 0) 0
        ),
        linear-gradient(
            90deg,
            #6d3e5b,
            #fc7033,
            #195d99
        );
}

.product-color--frozenmossoilslick {
    background-image:
        linear-gradient(
            45deg,
            #898f7b 50%,
            rgba(0, 0, 0, 0) 0
        ),
        linear-gradient(
            90deg,
            #6d3e5b,
            #fc7033,
            #195d99
        );
}

.product-color--white,
.product-color--transparent {
    border: thin solid currentcolor;
}

/*-- 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%
    );
}

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

.txt-color--white          { color: #f6f6f6; }
.txt-color--grey           { color: #cccccc; }
.txt-color--frozenblack    { color: #5a595b; }
.txt-color--frozenstealth  { 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; }

/* New for 2020 */
.txt-color--riskyred      { color: #cb323c; }
.txt-color--juicyorange   { color: #fc7033; }
.txt-color--sandstorm     { color: #b39c7a; }
.txt-color--yellowmellow  { color: #fec600; }
.txt-color--deepmoss      { color: #565c46; }
.txt-color--frozenmoss    { color: #898f7b; }
.txt-color--midsummerblue { color: #195d99; }
.txt-color--nightrideblue { color: #2d4661; }
.txt-color--purplereign   { color: #6d3e5b; }

@supports (-webkit-background-clip: text)
       or (background-clip: text) {
    .txt-color--stealthoilslick,
    .txt-color--frozenmossoilslick,
    .txt-color--oilslick {
        -webkit-background-clip: text;
                background-clip: text;
        background-image: linear-gradient(
            45deg,
            #6d3e5b,
            #fc7033,
            #195d99
        );
        color: rgba(0, 0, 0, 0);
    }
}

.txt-color--white,
.txt-color--laserlemon {
    letter-spacing: 1px;
}

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

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



/**
 * Status
 */
[hidden] {
    display: none !important;
}

.is-hidden,
.xs-hide,
.md-show {
    display: none;
}

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

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

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

/**
 * Hide elements only on certain viewport widths.
 *
 * An element with a class value of "xs-hide"
 * should be visible at a viewport width of 40em.
 * We can't use "max-width: 40em", because that's inclusive
 * and would result in the element still being hidden
 * at a viewport width of exactly 40em.
 * So we have to use a value slightly smaller than 40em ...
 */
 @media (max-width: 39.999em) {
    .xs-hide {
        display: none !important;
    }
}

@media (min-width: 40em) and (max-width: 59.999em) {
    .sm-hide {
        display: none !important;
    }
}

@media (min-width: 60em) and (max-width: 79.999em) {
    .md-hide {
        display: none !important;
    }
}

@media (min-width: 80em) {
    .lg-hide {
        display: none !important;
    }
}

.visually-hidden, ._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; }