@charset "UTF-8";

/*!
 * Web Fonts from Fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2020 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typetype
 * License URL: https://www.fontspring.com/licenses/typetype/webfont
 */

@font-face {
    font-display: swap;
    font-family: "TT Norms";
    src: url("../../fonts/tt_norms_pro_regular-webfont.woff2") format('woff2'),
         url("../../fonts/tt_norms_pro_regular-webfont.woff") format('woff');
}

@font-face {
    font-display: swap;
    font-family: "TT Norms";
    font-weight: 500;
    src: url('../../fonts/tt_norms_pro_normal-webfont.woff2') format('woff2'),
         url('../../fonts/tt_norms_pro_normal-webfont.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: "TT Norms";
    font-weight: 700;
    src: url('../../fonts/tt_norms_pro_demibold-webfont.woff2') format('woff2'),
         url('../../fonts/tt_norms_pro_demibold-webfont.woff') format('woff');
}


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

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible,
:focus-visible + label::before {
    box-shadow: 0 0 3px 2px #0099cc;
    outline: 3px solid transparent;
}

:disabled,
:disabled + label {
    cursor: not-allowed;
    opacity: 0.6;
}

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

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










/*---------------------------*/
/* Document                  */
/*---------------------------*/
html {
    font: 400 100%/1.4 "TT Norms", "Helvetica Neue", "Helvetica", sans-serif;
    font-synthesis: none;
}

body {
    font-size: 0.875rem;
    line-height: 1.428;
}
/**/










/*---------------------------*/
/* Headings                  */
/*---------------------------*/
:where(:not(.stack) > :is(h1, h2, h3, h4, h5, h6, p)) {
    margin-bottom: 1.25rem;
}
/**/










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

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

ul:not([class]) > *::marker {
    font-size: 0.8em;
}

ul[style*="--type:"],
ol[style*="--type:"] {
    list-style-type: var(--type);
}

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

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

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

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

.toc {
    background-color: #ededed;
    padding: 1.25rem;
}

.toc[style*="--type:"] {
    padding-left: 2.5rem;
}

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

.toc > * > a,
.toc > *::marker {
    font-weight: 700;
}

.toc ul, .toc ul > * + *,
.toc ol, .toc ol > * + * {
    margin-top: 0.625rem;
}

.toc ul {
    list-style: disc;
}
/**/










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

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

img, iframe {
    border: 0;
}

source {
    display: none;
}

[data-object-fit="contain"] {
    -o-object-fit: contain;
       object-fit: contain;
}

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










/*---------------------------*/
/* Forms                     */
/*---------------------------*/

fieldset {
    border: 0;
}

legend,
label:first-child {
    display: block;
    font-weight: 700;
}

legend:not(.visually-hidden) + *,
label:not(.visually-hidden):first-child + * {
    margin-top: 0.625rem;
}

label:first-child + input,
label:first-child + textarea {
    max-width: 80ch;
    width: 100%;
}

input,
select,
button,
textarea {
    border: thin solid transparent;
    color: currentcolor;
    font-family: inherit;
    font-size: inherit;
}

input,
button {
    line-height: 1;
}

input,
select,
textarea {
    background-color: #d2d2d2;
    border-radius: 0.125rem;
    color: #111;
    min-height: 2.5em;
    padding: 0.5em;
}

.bg--green input,
.bg--green select,
.bg--green textarea {
    background-color: #f6f6f6;
}

select,
input[type="search"] {
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: 2em;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

select {
    background-color: #b2bc00;
    background-image: url("../../pic/system/select-arrow.svg");
    width: 100%;
}

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

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

[type="radio"],
[type="checkbox"] {
    height: 1.25rem;
    opacity: 0;
    position: absolute;
    min-height: 0;
    width: 1.25rem;
}

[type="radio"] + label,
[type="checkbox"] + label {
    align-items: center;
    display: inline-grid;
    gap: 1em;
    grid: "input label" / max-content auto;
}

[type="radio"] + label::after,
[type="radio"] + label::before,
[type="checkbox"] + label::after,
[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    grid-area: input;
    justify-self: center;
}

[type="radio"] + label::before,
[type="checkbox"] + label::before {
    border: thin solid;
    height: 1.25rem;
    width: 1.25rem
}

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

[type="checkbox"] + label::before {
    border-radius: 0.125rem;
}

[type="radio"] + label::after,
[type="checkbox"] + label::after {
    transform: scale(0);
    transition: transform 0.25s;
}

[type="radio"] + label::after {
    border: 0.25rem solid;
    border-radius: 50%;
}

[type="checkbox"] + label::after {
    height: 1.25rem;
    width: 1.25rem;
    background: center/70% no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' fill-rule='evenodd'/></svg>");
}

[type="radio"]:checked + label::after,
[type="checkbox"]:checked + label::after {
    transform: scale(1);
}

[type="checkbox"].remove + label {
    background: #d2d2d2;
    border-radius: 0.125rem;
    cursor: pointer;
    gap: 0.125em;
    padding: 0.5ch 2ch 0.5ch 1ch;
}

[type="checkbox"].remove + label::after {
    display: none;
}

[type="checkbox"].remove + label::before {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' %3E%3Cpath d='M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z'/%3E%3C/svg%3E") center center/0.75em 0.75em no-repeat;
    border: thin solid transparent;
}

[type="checkbox"].remove:not(:checked) + label {
    opacity: 0.6;
}
/**/










/*---------------------------*/
/* Tables                    */
/*---------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    table-layout: fixed;
    width: 100%;
}

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

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

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) ": ";
}

.table-container {
    overflow-x: auto;
    width: 100%;
}

table.compare {
    max-width: max-content;
    table-layout: auto;
    text-align: center;
}

table.compare caption {
    text-align: left;
    padding: 0 0.625rem;
}

table.compare tr,
table.compare th,
table.compare td {
    border: 0;
}

table.compare th,
table.compare td {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1.25rem 0.625rem;
    vertical-align: baseline;
    text-align: inherit;
}

table.compare thead th,
table.compare thead td {
    width: 20ch;
}

table.compare th:first-child,
table.compare td:first-child {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

table.compare [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
}

table.compare img {
    max-width: 20ch;
}

table.compare .btn {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

@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 {
    color: currentcolor;
}

a[class] {
    text-decoration: none;
}

sub,
sup {
    font-size: 0.875em;
    font-variant-position: super;
    position: relative;
    top: -0.4em;
    vertical-align: baseline;
}

sub {
    font-variant-position: sub;
    top: 0.3em;
}

@supports (font-variant-position: super) {
    sub,
    sup {
        font-size: 1em;
        position: static;
    }
}
/**/










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

/**
 * Breadcrumbs
 * Trennzeichen zwischen ausgewählten Elementen.
 */
.nav > * + *::before,
.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 > *,
.nav__item {
    display: inline-block;
}

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


/**
 * Icons
 */
.icon {
    display: block;
    fill: currentcolor;
    flex-shrink: 0;
    height: 1.25em;
    width: 1.25em;
}

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

.icon--video {
    height: 4em;
    width: 4em;
    margin-left: auto;
    margin-right: auto;
}

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



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

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

.btn, a.cta {
    align-items: center;
    background-color: transparent;
    border: thin solid #757575;
    border-radius: 2px;
    cursor: pointer;
    color: #111111;
    justify-content: center;
    min-height: 2.5em;
    padding: 0.3em 2em 0.5em;
    text-decoration: none;
}

a.cta {
    background-color: #b2bc00;
    color: #111111;
}

a.cta,
.btn.bg--black,
.btn.bg--green {
    border-color: transparent;
}

.btn--circle {
    background-color: #f6f6f6;
    color: #111111;
}

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



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


/**
 * 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__content,
.media__background {
    height: 100%;
}

.media__content,
.media__content.container {
    position: absolute;
}

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

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

@media (min-width: 40em) {
    .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;
    }
}



/*
 * Vorschau-Container
 * Querverweis zu relevanten redaktionellen Artikeln.
 * Normalerweise am Ende einer Seite zu finden.
 */
.preview {
    aspect-ratio: 640/427;
    background-color: #111;
    color: #f6f6f6;
    display: grid;
    grid: "preview" / 1fr;
    position: relative;
    text-align: center;
}

.preview > *,
.preview::after {
    grid-area: preview;
}

.preview > :not(img) {
    order: 1;
    place-self: center;
}

.preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview a,
.preview strong,
.preview span {
    display: block;
    font-weight: 400;
}

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

.preview a::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.tile {
    --aspect-w: 4;
    --aspect-h: 3;
}

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

.tile > strong {
    margin-top: 1.875rem;
}

.highlight .tile {
    --aspect-w: 2;
    --aspect-h: 1;
}






/**
 * Creates a basic responsive grid.
 * To ensure consistent spacing this also resets the children's margin.
 *
 * Note: We use '!important' to reset all margins.
 *       Otherwise margins might not be overridden as expected,
 *       due to more specific selectors targeting the same element.
 *
 * @param <length> --column-gap   - space between columns
 * @param <length> --column-width - minimum width of each column
 * @param <length> --column-count - maximum amount of columns
 */
.grid {
    --c: var(--column-count, 4);
    --w: var(--column-width, 25ch);
    --g: var(--column-gap, 1.25rem);

    --a: min(var(--w), 100%);
    --b: calc((100% / var(--c) - var(--g) * (var(--c) - 1)));

    display: grid;
    gap: var(--g);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--a), var(--b)), 1fr));
}

.grid > * {
    margin: unset !important;
}



/**
 * Creates a basic sidebar.
 * Use the modifier class 'sidebar--reversed' to swap the sidebar to the right.
 * To ensure consistent display this also resets the children's margin
 * and hides all but the first two children.
 *
 * Note: We use '!important' to reset all margins and hide unwanted children.
 *       Otherwise these styles might not be overridden as expected,
 *       due to more specific selectors targeting the same elements.
 *
 * @param <length> --sidebar-gap   - space between sidebar and content
 * @param <length> --sidebar-width - minimum width of the sidebar
 */
.sidebar {
    --g: var(--sidebar-gap, 1rem);
    --w: var(--sidebar-width, auto);
    display: flex;
    flex-wrap: wrap;
    gap: var(--g);
}

.sidebar > * {
    margin: unset !important;
}

.sidebar > *:first-child {
    flex-basis: var(--w);
    flex-grow: 1;
}

.sidebar > *:first-child ~ * {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%;
}

.sidebar > *:nth-child(n+3) {
    display: none !important;
}

.sidebar--reversed {
    flex-direction: row-reverse;
}

.stack > * + * {
    margin-top: 1.25rem;
    margin-top: var(--stack-gap, 1.25rem);
}



/**
 * 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 {
    --column-count: 2;
    --column-gap: 2.5rem;
}

.rider-grid {
    --column-count: 3;
    grid-auto-flow: dense;
    row-gap: 2.5rem;
}

.rider-grid .highlight {
    grid-column: 1 / -1;
}


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

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

.region-select__text:first-child {
    display: block;
    font-weight: 400;
    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;
}

.region-select__input > *:first-child {
    flex-grow: 999;
}

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

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

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

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

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




.card {
    --aspect-w: 5;
    --aspect-h: 3;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card > * {
    margin: 0;
}

.card a {
    margin-top: auto;
}

.card > :first-child {
    margin-top: 1.875rem;
}

.card > :first-child ~ p {
    margin-bottom: 1.875rem;
    max-width: 42.5rem;
}

.card__image {
    align-self: stretch;
    order: -1;
}









/**
 * Creates a box with the given aspect ratio.
 * Default ratio is 16:9.
 */
.aspect-box {
    --w: var(--aspect-w, 16);
    --h: var(--aspect-h, 9);
    display: block;
    height: 0;
    padding-top: calc(var(--h) / var(--w) * 100%);
    position: relative;
}

.aspect-box img,
.aspect-box video,
.aspect-box iframe {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.photo-box {
    --aspect-w: 1;
    --aspect-h: 1;
}

.photo-box * {
    margin: 0;
}

.photo-box picture + * {
    margin: 2.5rem 0;
}

.photo-box__caption {
    padding-bottom: 2.5rem;
    text-align: center;
}

.photo-box__caption > * {
    display: block;
    margin: auto;
    max-width: 45ch;
}

.photo-box__caption > * + *,
.photo-box__caption > *:only-child {
    font-size: 1.375rem;
    line-height: 1.25;
}

.photo-box__caption > * + * {
    margin-top: 0.625rem;
}

.photo-box__caption > *:first-child:not(:only-child) {
    font-weight: 700;
}

@media (min-width: 40em) {
    .photo-box {
        --aspect-w: 4;
        --aspect-h: 3;
    }
}

@media (min-width: 60em) {
    .photo-box {
        --aspect-w: 2;
        --aspect-h: 1;
    }
}

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

.quote blockquote {
    margin: auto;
    max-width: 35ch;
}

[data-content-slider] .quote {
    padding: 0 5rem 2.5rem;
    text-align: center;
    margin: auto;
}


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

.quote blockquote {
    margin: auto;
    max-width: 35ch;
}

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

.pullquote > :first-child {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: none;
}

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

[data-content-slider] .quote {
    padding: 0 5rem 2.5rem;
    text-align: center;
    margin: auto;
}

.teasers > * {
    position: relative;
}

.teasers > * + * {
    margin-top: 1.875rem;
}

.mainteaser {
    --aspect-w: 1;
    --aspect-h: 1;
    background: hsl(0deg 0% 5%);
    color: hsl(0deg 0% 95%);
    display: grid;
    grid: "mainteaser" / 1fr;
}

.mainteaser > * {
    grid-area: mainteaser;
    margin: 0;
}

.mainteaser__content {
    margin: auto;
    max-width: 45rem;
    padding: 1.25rem;
    position: relative;
    text-align: center;
    width: fit-content(40ch);
}

.mainteaser__content > * {
    display: block;
    font-size: 1.375rem;
    line-height: 1.25;
}

.mainteaser__content > * + * {
    margin-top: 1.875rem;
}

.mainteaser__content > *:first-child:not(:only-child) {
    font-size: 2.875rem;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.mainteaser__gif {
    position: relative;
}

.mainteaser__gif > picture:not(:first-of-type) {
    position: absolute;
    inset: 0;
}

.mainteaser__gif > picture:not(.is-current) {
    visibility: hidden;
}

.mainteaser__video {
    margin-block: auto;
}

.mainteaser + button {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;

    align-items: center;
    justify-items: center;



    height: 40px; width: 40px;
    overflow: hidden;
    padding: 0;
    min-width: 0;
    border-radius: 50%;

    background: transparent;
    color: #f5f5f5;
    border: 0.125rem solid;
    padding: 0.35rem;
}

.mainteaser + button > svg {
    width: 20px;
    height: 20px;
}

.mainteaser + button > svg:first-of-type {
    margin-left: 0.25rem;
}

@media (min-width: 40em) {
    .mainteaser {
        --aspect-w: 4;
        --aspect-h: 3;
    }

    .mainteaser__content {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 60em) {
    .mainteaser {
        --aspect-w: 2;
        --aspect-h: 1;
    }
}
/**/










/*---------------------------*/
/* Widgets                   */
/*---------------------------*/
/**
 * Legacy Code
 * Überbleibsel des alten Content Sliders,
 * die sich an anderen Stellen eingeschlichen haben.
 * Kann gelöscht werden, sobald die Templates entsprechend aufgeräumt wurden.
 */
.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%;
}

.slide-txt,
.slide-txt.container {
    position: absolute;
    width: 100%;
}

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

@media (min-width: 40em) {
    .slide-txt {
        padding-top: 2.5em;
    }
}
/* End of legacy */

/* Neuer Content-Slider */
[data-content-slider],
[data-content-slider] .stage {
    position: relative;
}

[data-content-slider] img {
    display: block;
    margin: 0 auto;
}

[data-content-slider] ul,
[data-content-slider] ol {
    list-style: none;
    padding: 0;
}

[data-content-slider] [role="region"] {
    max-width: 100%;
    min-height: 5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

[data-content-slider] .slides {
    display: flex;
    max-width: 100%;
}

[data-content-slider] .slides > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 1px;
    position: relative;
    scroll-snap-align: start;
    width: 100%;
}

/* Navigation */
[data-content-slider] a.zoom {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
}

[data-content-slider] [data-scroll] {
    background: rgb(0 0 0 / 0);
    border: 0;
    border-radius: 50%;
    color: #f6f6f6;
    height: 2.5rem;
    margin: 0;
    padding: 0.75rem;
    pointer-events: auto;
    vertical-align: middle;
    width: 2.5rem;
}

[data-content-slider] [data-scroll]:hover,
[data-content-slider] [data-scroll]:focus,
[data-content-slider] [data-scroll][aria-current] {
    background-color: rgba(0, 0, 0, 0.75)
}

[data-content-slider] [data-scroll="next"],
[data-content-slider] [data-scroll="prev"] {
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    height: 2.5rem;
    position: relative;
    width: 2.5rem;
}

[data-content-slider] [data-scroll="next"]::after,
[data-content-slider] [data-scroll="prev"]::before {
    border: solid currentcolor;
    content: "";
    display: block;
    height: 0.625rem;
    left: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.625rem;
}

[data-content-slider] [data-scroll="next"]::after {
    border-width: thin thin 0 0;
    margin-left: -0.095rem;
}

[data-content-slider] [data-scroll="prev"]::before {
    border-width: 0 0 thin thin;
    margin-left: 0.095rem;
}

[data-content-slider] .controls,
[data-content-slider] .pagination,
[data-content-slider] .thumbnails {
    display: flex;
    line-height: 0;
    max-width: 100%;
    pointer-events: none;
    width: 100%;
}

[data-content-slider] .pagination,
[data-content-slider] .thumbnails {
    flex-wrap: wrap;
    justify-content: center;
}

[data-content-slider] .controls {
    justify-content: space-between;
    margin: 0.625rem 0 0.3125rem;
}

[data-content-slider] .pagination > *,
[data-content-slider] .thumbnails > * {
    margin: 0.3125rem;
    margin: 0;
}

[data-content-slider] .pagination {
    bottom: 0;
    max-width: calc(100% - 5em);
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

[data-content-slider] .pagination button {
    background: rgba(0, 0, 0, 0.35) content-box;
}

[data-content-slider] .thumbnails button {
    border-radius: 0;
    height: 5rem;
    width: 5rem;
}

[data-content-slider] .thumbnails img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 40em) {
    [data-content-slider] .controls {
        left: 0;
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    [data-content-slider] .thumbnails {
        padding-top: 0.3125rem;
    }
}

/* Stati */
[data-content-slider].is-ready [role="region"] {
    overflow-x: hidden;
    scroll-snap-type: none;
}

[data-content-slider].is-zoomed,
[data-content-slider].is-zoomed::before {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

[data-content-slider].is-zoomed {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.625rem;
    position: fixed;
    z-index: 1;
}

[data-content-slider].is-zoomed .stage,
[data-content-slider].is-zoomed .thumbnails {
    background: white;
    width: 100%;
    z-index: 1;
    padding: 0.625rem 0;
}

[data-content-slider].is-zoomed .stage:not(:only-child) {
    padding-bottom: 0;
}

[data-content-slider].is-zoomed .thumbnails {
    padding-top: 0;
}

[data-content-slider].is-zoomed .controls {
    padding: 0 0.625rem;
}

[data-content-slider].is-zoomed::before {
    background: rgb(0 0 0 / 0.75);
    content: "";
    margin: -0.625rem;
    position: absolute;
}

/**
 * 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: #b2bc00;
}

.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: #b2bc00;
    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 #b2bc00 inset;
    }

    .tab-list__item--material[data-tab-active] {
        background-color: #b2bc00;
        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
 */

.embed {
    background-color: #111;
    color: #f6f6f6;
    text-align: center;
}

.embed p,
.embed button {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.embed p {
    top: calc(50% + 2.5rem);
    margin: 0;
    padding: 1.25rem calc((100% - 45ch) / 2);
    z-index: 1;
}

.embed button {
    background: rgba(0, 0, 0, 0.6) 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>") center center/5rem 5rem no-repeat;
    height: 100%;
}


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

.site-header {
    --_header-gap: 1.25rem;
    --_header-width: 80.75rem;
    --_header-max-width: calc((100% - var(--_header-width)) / 2);
    --_logo-width: 12rem;

    align-items: center;
    display: grid;
    gap: var(--_header-gap);
    grid: "logo . misc" "navi navi navi" / var(--_logo-width) 1fr 5rem;
    padding: 1.25rem max(1.25rem, var(--_header-max-width));
    position: relative;
}

.site-header ul {
    list-style: none;
    padding: 0;
}

.site-header a,
.site-header button {
    cursor: pointer;
    display: block;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
}

.site-header__logo {
    grid-area: logo;
}

.site-header__nav {
    grid-area: navi;
    padding-top: 0.625rem;
}

.site-header__complementary {
    grid-area: misc;
    padding-top: 0.3125rem;
}

@media (min-width: 42em) {
    .site-header {
        --_header-gap: 3.125rem;
        grid-template-areas: "logo navi misc";
        grid-template-rows: auto;
    }
}

.site-nav {
    align-items: center;
    display: flex;
    font-weight: 700;
    margin: -0.75rem -1.25rem;
}

.site-nav > * {
    margin: 0.75rem 1.25rem;
}

.site-nav a,
.site-nav button {
    font-weight: inherit;
    padding: 5px 0;
}

.site-nav > * > a,
.site-nav > * > button {
    padding-top: 0.4em;
    padding-bottom: 0.5em;
}

.site-nav > * > button {
    background: #b2bc00;
}

.site-nav button[data-radioname] {
    text-transform: uppercase;
}

.site-nav button:disabled {
    opacity: 1;
}

.site-nav > * > button {
    align-items: center;
    border-radius: 2px;
    color: #111;
    display: flex;
    justify-content: center;
    min-height: 30px;
    padding-left: 2.4em;
    padding-right: 1.4em;
}

.site-nav > * > button[aria-expanded]::after {
    content: "";
    display: block;
    height: 1.25em;
    width: 1.25em;
    margin-left: 0.5em;
    margin-top: 0.125em;
    flex-shrink: 0;
    background: url("../../pic/system/select-arrow.svg") center/cover no-repeat;
    transition: linear transform 0.125s;
}

.site-nav > * > button[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

.site-nav__drawer,
.site-nav__drawer > div {
    overflow: hidden;
}

.site-nav__drawer {
    background-color: #fff;
    color: #111;
    padding-left: calc(1.25rem + 2.4em);
    padding-right: var(--_header-max-width);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}

.site-nav__drawer.is-sliding > div {
    transition: margin-top 0.25s;
}

.site-nav__drawer.is-closed > div {
    margin-top: var(--drawer-height, 0);
}

.site-nav__drawer > * > ul {
    padding-top: 1em;
    position: relative;
    max-width: max-content;
}

.site-nav__drawer > * > ul:last-of-type {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.site-nav__drawer .site-nav__dropdown {
    font-weight: 400;
}

.site-nav__drawer .site-nav__dropdown.is-sliding {
    transition: opacity 0.25s;
}

.site-nav__drawer .site-nav__dropdown.is-closed {
    opacity: 0;
}

.site-nav__drawer .site-nav__dropdown li:first-of-type {
    margin-bottom: 1.25rem;
}

@media (min-width: 42em) {
    .site-nav {
        margin: -0.75rem -1.5625rem;
    }

    .site-nav > * {
        margin: 0.75rem 1.5625rem;
    }

    .site-nav__drawer {
        --padding-min: calc(1.25rem + 2.4em + var(--_logo-width) + var(--_header-gap));
        --padding-max: calc(var(--padding-min) + var(--_header-max-width) - 1.25rem);
        padding-left: max(var(--padding-min), var(--padding-max));
    }
}

@media (min-width: 50em) {
    .site-nav__drawer .site-nav__dropdown {
        border-left: thin solid hsl(0, 0%, 60%);
        height: calc((var(--drawer-height) * -1) - 1em - 2.5rem);
        left: calc(100% + 2.25rem);
        padding: 0;
        padding-left: 2.25rem;
        position: absolute;
        top: 1em;
        width: max-content;
    }
}

.site-footer {
    display: grid;
    margin-top: 2.5rem;
    padding: 2.5rem max(1.25rem, calc((100% - 80.75rem) / 2));

    grid-template-columns: repeat(2, 1fr);
    gap: 35px 60px;
}

.site-footer * {
    margin: 0;
}

.site-footer > :nth-last-child(-n + 2) {
    grid-column: 1 / -1;
}

.site-footer a {
    align-items: center;
    display: inline-flex;
    padding: 5px 0;
    gap: 10px;
    text-decoration: none;
}

.site-footer h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

@media (min-width: 600px) {
    .site-footer {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 700px) {
    .site-footer {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 900px) {
    .site-footer {
        grid-template-columns: repeat(5, 1fr);
    }

    .site-footer > :last-child {
        grid-column: 5;
        grid-row: 1;
        align-self: start;
        justify-self: end;
    }
}

@media (min-width: 1200px) {
    .site-footer {
        grid-template-columns: repeat(5, max-content) 1fr;
    }

    .site-footer > :nth-last-child(-n + 2) {
        grid-column: auto;
        grid-row: auto;
    }

    .site-footer > *:last-child {
        align-self: start;
        justify-self: end;
    }
}

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

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

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


/*---------------------------*/
/* Seitenspezifische Stile   */
/*---------------------------*/

/* service.php -> dealersearch.css */
.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); }
}

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

.to-selector,
.saddle-selector-start > div {
    align-items: center;
    background-color: #d2d2d2;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 0.625rem;
    padding-left: calc(0.625rem + 1.5em);
}

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

.to-selector .btn,
.saddle-selector-start .btn,
.saddle-selector-start .btn:hover,
.saddle-selector-start .btn:focus {
    background: #111111;
    color: #f6f6f6;
    border-color: transparent;
    margin-top: 1.25em;
    padding: 0.3em 1.5em 0.5em;
}

@media (min-width: 657px) {
    .to-selector .btn,
    .saddle-selector-start .btn,
    .saddle-selector-start .btn:hover,
    .saddle-selector-start .btn:focus {
        margin-top: 0;
    }
}

/* eigentlicher Saddle Selector */

.selector {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.selector > * + * {
    margin-top: 2.5rem;
}

.selector h3,
.selector legend {
    font-weight: 700;
}

.selector legend + * {
    margin-top: 1.25rem;
}

/*
Some elements are still using the now deprecated `.hidden` class.
To remove this properly the JavaScript needs to be modified.
For now this selector should be good enough.
*/
.selector .hidden,
.selector ~ .hidden {
    display: none !important;
}

.selector__specs {
    align-items: start;
    display: grid;
    grid-gap: 1.25rem;
}

.selector__calculator {
    background: #fff;
    padding: 1.25rem;
}

.selector__calculator,
.selector__calculator > * + *,
.selector__calculator > fieldset > * + * {
    margin-top: 1.25rem;
}

.selector__hint {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(6, 1fr);
}

.selector__hint > * {
    grid-column: 1 / -1;
    margin: 0;
}

.selector__hint img,
.selector__hint > figure {
    grid-column: span 3;
    margin: auto;
    width: 100%;
}

.selector__hint > figure {
    text-align: center;
}

.selector__cluster > * {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: -0.625rem;
}

.selector__cluster > * > * {
    margin: 0.625rem;
}

.selector__cluster--min > * > * {
    flex-basis: 40ch;
    flex-grow: 1;
}

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

.selector .tab-list > * {
    display: block;
    padding: 0.625rem 0;
}

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

.selector .tab-panel[data-tab-active] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.selector [role=tab],
.selector [role=tab] > * {
    display: block;
    text-decoration: none;
    flex: 1;
}

.selector [role=tab] > :first-child {
    font-weight: bold;
}

.selector [role=tab][aria-selected="true"] > :first-child {
    color: #b2bc00;
}

@media (min-width: 480px) {
    .selector__specs {
        grid-template-columns: 1fr max-content;
    }

    .selector__specs > * {
        grid-column: 1;
    }

    .selector__specs > *:last-child,
    .selector--grip .selector__specs > *:nth-last-child(2) {
        grid-row: 1;
        grid-column: 2;
        margin-top: 0.5em;
    }

    .selector--grip .selector__specs > *:last-child {
        grid-row: 2;
        grid-column: 2;
        align-self: end;
        margin-bottom: 0.4em;
    }
}

@media (min-width: 600px) {
    .selector__hint > :not(h3) {
        grid-column: span 2;
    }

    .selector__hint > p:nth-last-child(2) {
        grid-column: span 4;
    }
}

@media (min-width: 900px) {
    .selector {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-columns: max-content 1fr;
    }

    .selector > * {
        margin: 0;
    }

    .selector > :nth-child(n+3),
    .selector--grip > :nth-child(n+2) {
        grid-column: 1 / -1;
    }

    .selector > button[type="submit"] {
        justify-self: start;
    }

    .selector select {
        max-width: 40ch;
    }

    .selector__specs {
        grid-template-columns: 40ch 1fr;
    }

    .selector__calculator {
        align-items: start;
        display: grid;
        gap: 20px;
        grid-template-columns: 30ch 1fr;
    }

    .selector__calculator > * {
        margin: 0;
    }

    .selector__calculator > h3 {
        grid-column: 1 / -1;
    }

    .selector__cluster > * {
        margin: -1.25rem;
    }

    .selector__cluster > * > * {
        margin: 1.25rem;
    }

    .selector__cluster--min > * > * {
        flex-basis: 40ch;
        flex-grow: 0;
    }
}

@media (min-width: 970px) {
    .selector h3,
    .selector legend {
        font-weight: 400;
    }
}

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

/* Saddle Selector: Ergebnis-Skala (Größen) */
.selector-result__badge {
    align-self: start;
    grid-area: image;
    height: auto;
    justify-self: end;
    transform: rotate(20deg);
    width: 25%;
}

.selector-result__range {
    margin-bottom: 0.625rem;
}

.range {
    position: relative;
}

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

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

.range__size > * {
    position: relative;
    z-index: 1;
}

.range__thumb {
    box-shadow: inset 0 0 0 0.25em #b2bc00;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.range__thumb:not([style*="width:"]) {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0.1875em,
        #b2bc00 0.1875em,
        #b2bc00 0.4375em,
        rgba(0, 0, 0, 0) 0.4375em
    );
    box-shadow: none;
    width: 0.625em;
}

.range__thumb::after,
.range__thumb::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%);
}

.range__thumb::after {
    border-bottom: 0.3125em solid #b2bc00;
    bottom: -0.25em;
}

.range__thumb::before {
    border-top: 0.3125em solid #b2bc00;
    top: -0.25em;
}

/* Impressum */
.masthead {
    margin: auto;
    max-width: 40ch;
    padding: 1.25rem;
}

@media (min-width: 60em) {
    @supports (display: grid) {
        .masthead {
            display: grid;
            grid-template-columns: max-content max-content;
            grid-gap: 0 2.5rem;
            max-width: none;
            width: max-content;
        }

        .masthead > * {
            grid-column: 1;
        }

        .masthead > :last-child {
            grid-column: 2;
            grid-row: 1;
        }
    }
}

/* privacy-policy.php / privacy-policy-tert.php */
#privacy-policy > * + * {
    margin-top: 2.5rem;
}

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

#privacy-policy h2,
#warranty h2,
#participation-terms h2 {
    margin-top: 2.5rem;
}

#privacy-policy ul,
#privacy-policy ol,
#warranty ul,
#participation-terms ol {
    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;
}

#faq,
#warranty,
#privacy-policy,
#participation-terms {
    max-width: 60rem;
}

#faq > * + * {
    margin-top: 3.75rem;
}

#faq > article > * + * {
    margin-top: 2.5rem;
}

/*
A small popup banner at the lower right corner of the screen,
which can be used to advertise some services or products.
Using an ID to apply the styling, as there can only be one of those per page.
*/
#scroll-popup {
    bottom: 0;
    right: 0;
    position: fixed;
    transform: translateX(200%);
    transition: transform ease-in 0.4s;

    background: #b2bc00;
    border-radius: 0.125rem;
    box-shadow:
        0 3px 6px rgb(0 0 0 / 0.16),
        0 3px 6px rgb(0 0 0 / 0.23);
    color: #111;
    margin: 1.25rem;
    max-width: 40ch;
    padding: 1.25rem;
    padding-right: calc(1.25rem * 3);
}

#scroll-popup.show {
    transform: translateX(0);
}

#scroll-popup h2,
#scroll-popup p {
    font-size: 1rem;
}

#scroll-popup button {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
}

/**/










/*---------------------------*/
/* Utility                   */
/*---------------------------*/
/**
 * Layout-Raster
 * Basiert auf Bootstrap's Grid-System
 * LEGACY! DON'T USE!
 */
.container {
    width: auto;
    max-width: 83.25rem;
    margin-left:  auto;
    margin-right: auto;
}

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

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

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

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

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

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



/**
 * 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 > *:not(li) {
        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 hsl(0, 0%, 60%); }
.border, .border-right  { border-right:  thin solid hsl(0, 0%, 60%); }
.border, .border-bottom { border-bottom: thin solid hsl(0, 0%, 60%); }
.border, .border-left   { border-left:   thin solid hsl(0, 0%, 60%); }

.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
 */
/* Schriftgrößen */
h1, .alpha {
    font-size: 2.875rem; /* 46px */
    line-height: 1.25;
}

h2, .beta {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
}

h3, .gamma, .sg1 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.25;
}

h4, .delta, .sg2 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
}

h5, .epsilon, .sg3, .sg4,
h6, small, .zeta, .milli {
    font-size: 0.875rem; /* 14px */
}

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

@media screen and (min-width: 60.625rem) {
    .sg1 { font-size: 2.875rem; }
    .sg2 { font-size: 1.75rem; line-height: 1.25; }
    .sg3 { font-size: 1.375rem; line-height: 1.2727; }
}

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

/**
 * 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: #b2bc00; }

.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.125rem solid #d2d2d2;
    border-radius: 50%;
    display: inline-block;
    height: 2rem;
    padding: 0.125rem;
    width: 2rem;
}

.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: #b2bc00; }

.product-color--aquamarine     { background-color: #009999; }
.product-color--blue           { background-color: #0099cc; }
.product-color--purple         { background-color: #6666cc; }
.product-color--bikinipink     { background-color: #ff33cc; }

.product-color--chilired      { background-color: #9b2e2c; }
.product-color--laserred      { background-color: #ff073a; }
.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--lasergreen    { background-color: #0cff0c; }
.product-color--deepmoss      { background-color: #565c46; }
.product-color--laserblue     { background-color: #04d9ff; }
.product-color--midsummerblue { background-color: #195e9a; }
.product-color--nightrideblue { background-color: #2d4661; }
.product-color--purplereign   { background-color: #6d3e5b; }

/* New for 2022 */
.product-color--spaceblue       { background-color: #3b414f; }
.product-color--merlotred       { background-color: #863339; }
.product-color--wildernessgreen { background-color: #435e55; }
.product-color--whitespeed      { background-color: #f6f6f6; }
.product-color--rustyred        { background-color: #ab4d3a; }
.product-color--swampgreen      { background-color: #6b6947; }
.product-color--horizonblue     { background-color: #008bc3; }
.product-color--racered         { background-color: #cc333d; }
.product-color--moondustgrey    { background-color: #525257; }

.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 50%,
        #f6f6f6 0 55%,
        #d2d2d2 0
    );
}

.product-color--blackblack {
    background: linear-gradient(
        45deg,
        #111111 50%,
        #f6f6f6 0 55%,
        #111111 0
    );
}

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

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

.product-color--stealthriskyred {
    background: linear-gradient(
        45deg,
        #444444 50%,
        #f6f6f6 0 55%,
        #cb323c 0
    );
}

.product-color--stealthmidsummerblue {
    background: linear-gradient(
        45deg,
        #444444 50%,
        #f6f6f6 0 55%,
        #195e9a 0
    );
}

.product-color--blackgrey {
    background: linear-gradient(
        45deg,
        #111111 50%,
        #f6f6f6 0 55%,
        #cccccc 0
    );
}

.product-color--greyblack {
    background: linear-gradient(
        45deg,
        #cccccc 50%,
        #f6f6f6 0 55%,
        #111111 0
    );
}

.product-color--frozenstealthgrey {
    background: linear-gradient(
        45deg,
        #5a595b 50%,
        #f6f6f6 0 55%,
        #cccccc 0
    );
}

.product-color--bluestealth {
    background: linear-gradient(
        45deg,
        #0099cc 50%,
        #f6f6f6 0 55%,
        #444444 0
    );
}

.product-color--blueblack {
    background: linear-gradient(
        45deg,
        #0099cc 50%,
        #f6f6f6 0 55%,
        #111111 0
    );
}

.product-color--stealthgrey {
    background: linear-gradient(
        45deg,
        #444444 50%,
        #f6f6f6 0 55%,
        #cccccc 0
    );
}

.product-color--blackgrey {
    background: linear-gradient(
        45deg,
        #111111 50%,
        #f6f6f6 0 55%,
        #cccccc 0
    );
}

.product-color--blackwhite {
    background: linear-gradient(
        45deg,
        #111111 50%,
        #f6f6f6 0 55%,
        #ffffff 0
    );
}

.product-color--yellowgreen {
    background: linear-gradient(
        45deg,
        #fec600 50%,
        #f6f6f6 0 55%,
        #b2bc00 0
    );
}

.product-color--pinkpurple {
    background: linear-gradient(
        45deg,
        #ff33cc 50%,
        #f6f6f6 0 55%,
        #6666cc 0
    );
}

.product-color--lavapinklavapurple {
    background-image: linear-gradient(
        45deg,
        #fcb5bc 50%,
        #d2d2d2 0 55%,
        #af246a 0
    );
}

.product-color--lavablacklavawhite {
    background-image: linear-gradient(
        45deg,
        #000000 50%,
        #d2d2d2 0 55%,
        #ffffff 0
    );
}

.product-color--lavayellowlavagreen {
    background-image: linear-gradient(
        45deg,
        #eaf043 50%,
        #d2d2d2 0 55%,
        #6b9726 0
    );
}

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

.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: #b2bc00; }
.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; }

/* New for 2022 */
.txt-color--chilired        { color: #9b2e2c; }
.txt-color--spaceblue       { color: #3b414f; }
.txt-color--merlotred       { color: #863339; }
.txt-color--wildernessgreen { color: #435e55; }
.txt-color--whitespeed      { color: #f6f6f6; }
.txt-color--rustyred        { color: #ab4d3a; }
.txt-color--swampgreen      { color: #6b6947; }
.txt-color--horizonblue     { color: #008bc3; }
.txt-color--racered         { color: #cc333d; }
.txt-color--moondustgrey    { color: #525257; }




@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--lavapinklavapurple {
        -webkit-background-clip: text;
                background-clip: text;
        background-image: linear-gradient(
            45deg,
            #fcb5bc,
            #d2d2d2,
            #af246a
        );
        color: rgba(0, 0, 0, 0);
    }
    .txt-color--lavablacklavawhite {
        -webkit-background-clip: text;
                background-clip: text;
        background-image: linear-gradient(
            45deg,
            #000000,
            #d2d2d2,
            #ffffff
        );
        color: rgba(0, 0, 0, 0);
    }
    .txt-color--lavayellowlavagreen {
        -webkit-background-clip: text;
                background-clip: text;
        background-image: linear-gradient(
            45deg,
            #eaf043,
            #d2d2d2,
            #6b9726
        );
        color: rgba(0, 0, 0, 0);
    }
}

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

.txt-color--white,
.txt-color--whitespeed {
    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 {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

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