/* WEBFONTS ##################################################### */

@font-face {
    font-family: 'JUST Sans';
    src: url('fonts/JUSTSans-Rg.eot');
    src: url('fonts/JUSTSans-Rg.eot?#iefix') format('embedded-opentype'),
        url('fonts/JUSTSans-Rg.woff2') format('woff2'),
        url('fonts/JUSTSans-Rg.woff') format('woff'),
        url('fonts/JUSTSans-Rg.ttf') format('truetype'),
        url('fonts/JUSTSans-Rg.svg#JUSTSans-Rg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans ExtraBold';
    src: url('fonts/JUSTSans-ExBd.eot');
    src: url('fonts/JUSTSans-ExBd.eot?#iefix') format('embedded-opentype'),
        url('fonts/JUSTSans-ExBd.woff2') format('woff2'),
        url('fonts/JUSTSans-ExBd.woff') format('woff'),
        url('fonts/JUSTSans-ExBd.ttf') format('truetype'),
        url('fonts/JUSTSans-ExBd.svg#JUSTSans-ExBd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans Bold';
    src: url('fonts/JUSTSans-Bd.eot');
    src: url('fonts/JUSTSans-Bd.eot?#iefix') format('embedded-opentype'),
        url('fonts/JUSTSans-Bd.woff2') format('woff2'),
        url('fonts/JUSTSans-Bd.woff') format('woff'),
        url('fonts/JUSTSans-Bd.ttf') format('truetype'),
        url('fonts/JUSTSans-Bd.svg#JUSTSans-Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}





/* END WEBFONTS ################################################# */

/* VARIABLEN ##################################################### */

:root {

    /* SCHRIFT*/
    --mengenText: 'JUST Sans';
    --mainNav: 'JUST Sans Bold';
    --h1FW: 'JUST Sans ExtraBold';
    --h2FW: 'JUST Sans Bold';
    --h3FW: 'JUST Sans Bold';
    --button: 'JUST Sans Bold';

    /* SCHRIFTGRÖßEN */
    --mainNavFS: clamp(1rem, 0.7114rem + 0.4654vw, 1.875rem);
    --mengenTextFS: clamp(1.125rem, 0.9405rem + 0.2976vw, 1.3125rem);
    --mengenTextFooter: clamp(1.125rem, 1.082rem + 0.0896vw, 1.25rem);

    --h1FS: clamp(1.5625rem, 0.6399rem + 1.4881vw, 2.5rem);
    --h2FS: clamp(1.5625rem, 0.6399rem + 1.4881vw, 2.5rem);
    --h3FS: clamp(1.25rem, 0.9425rem + 0.496vw, 1.5625rem);
    --h3smallFS: clamp(1rem, 1rem + 0vw, 1rem);


    /* FARBEN */
    --rot: #C62837;
    --gelb: #FFE713;
    --weiss: #fff;
    --hellgrau: #f3f3f3;
    --dunkel: #0A122A;
    --accBorderbottom: #142043;
}

/* END VARIABLEN ################################################# */

/* BODY ##################################################### */

body {
    font-family: var(--mengenText);
    font-size: var(--mengenTextFS);
    line-height: 28px;
}

h1 {
    font-family: var(--h1FW);
    font-size: var(--h1FS);
}

h2 {
    font-family: var(--h2FW);
    font-size: var(--h2FS);
}

h2 small {
    font-size: 50%!important;
    font-family: var(--mengenText)!important;
}

#entdecken .sppb-button-wrapper a.sppb-btn-custom {
    font-family: var(--button);
    transition: .8s;
    background-color: var(--weiss)!important;
}

#entdecken .sppb-button-wrapper a.sppb-btn-custom:hover {
    background-color: var(--rot)!important;
    transition: .4s;
}

.sppb-sp-slider-button .sp-slider-btn-text {
    background-color: var(--rot);
}

.sppb-sp-slider-button .sp-slider-btn-text:hover {
    background-color: var(--accBorderbottom);
    color: var(--weiss);
}

/* TERMINE BUCHEN */

.modal {
    z-index: 9999;
}

button[data-bs-target="#ModalOpenSismos-appointment-form"] {
    width: 100%;
    margin: 0;
    background-color: var(--dunkel);
    border: 0;
    border-radius: 0;
    padding: 8px 16px;
    font-size: var(--mengenText);
}

button[data-bs-target="#ModalOpenSismos-appointment-form"]:hover {
    background-color: var(--rot);
}

#stellenausschreibung p.sppb-title-subheading {
    font-family: var(--mengenText);
    font-size: var(--mengenTextFS)!important;
    line-height: 28px;
    color: var(--weiss);
    margin-bottom: 100px!important;
}

/* END BODY ################################################# */


/* MAINNAVIGATION ##################################################### */

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-family: var(--mainNav);
    font-size: var(--mainNavFS);
    text-transform: uppercase;
}

li.sp-menu-item.current-item.active a {
    color: var(--rot);
}

/* END MAINNAVIGATION ################################################# */

/* IMAGE LAYOUTS ADDON ##################################################### */
/*
.hfc__entdeckenBereich h3.sppb-image-layout-title strong {
    font-size: var(--h3FS);
    line-height: 120%;
}

.hfc__entdeckenBereich h3.sppb-image-layout-title {
    font-size: var(--h3smallFS);
}
*/
/* END IMAGE LAYOUTS ADDON ################################################# */

/* BIKEFITTINGAREA ##################################################### */

.hfc__bikefitting h2 {
    font-size: var(--h2FS);
    line-height: 120%;
}

.hfc__bikefitting h3.sppb-feature-box-title {
    font-family: var(--h3FW);
}

/* END BIKEFITTINGAREA ################################################# */

/* KONTAKT ##################################################### */

.hfc__standorteArea h2 {
    font-size: var(--h3smallFS);
}

.hfc__standorteArea h2 strong,
.hfc__faqArea h3 {
    font-size: var(--h2FS);
    line-height: 120%;
}
/* END KONTAKT ################################################# */

/* ACCORDION ##################################################### */

.sppb-panel-title {
    font-size: var(--mengenTextFS);
}

.sppb-panel-custom .sppb-panel-heading {
    border-bottom: 1px solid var(--accBorderbottom);
}

.sppb-panel-custom button.sppb-accordion-icon-position-right:hover {
    background-color: var(--accBorderbottom)!important;
}

#bikeleasing .sppb-panel-custom button.sppb-accordion-icon-position-right {
    background-color: var(--weiss)!important;
    border-bottom: 1px solid var(--hellgrau);
    color: var(--accBorderbottom)
}

#bikeleasing .sppb-panel-custom button.sppb-accordion-icon-position-right.active,
#bikeleasing .sppb-panel-custom button.sppb-accordion-icon-position-right:hover {
    background-color: var(--hellgrau)!important;
}

#bikeleasing .sppb-panel-custom button.sppb-accordion-icon-position-right i {
    color: var(--accBorderbottom);
}

/* END ACCORDION ################################################# */

/* FAHRRÄDER ################################################## */

#fahrradauswahl .sppb-row-column .sppb-addon-subtitle {
    color: rgba(255,255,255, 0);
}

#fahrradauswahl .sppb-row-column:hover .sppb-addon-subtitle {
    color: rgba(255,255,255, 1);
}

/* END FAHRRÄDER ############################################## */

/* FOOTER ##################################################### */

#sp-footer, #sp-bottom {
    background-color: var(--dunkel);
}

#sp-footer .container-inner {
    border-top: 0;
}

#hfc_footerArea p,
ul.menu {
    text-align: center;
    font-family: var(--mengenText);
    font-size: var(--mengenTextFooter);
}

#sp-bottom .sp-module ul>li {
    margin-bottom: 0;
}

#sp-bottom .sp-module ul>li>a {
    color: var(--weiss);
}

#sp-bottom .sp-module ul>li>a:hover {
    text-decoration: underline;
}

.footer1 {
    text-align: center;
    font-family: var(--mengenText);
}

/* END FOOTER ################################################# */

/* CONVERTFORMS ##################################################### */

input[type="text"]:not(.form-control), 
input[type="email"]:not(.form-control), 
input[type="url"]:not(.form-control), 
input[type="date"]:not(.form-control), 
input[type="password"]:not(.form-control), 
input[type="search"]:not(.form-control), 
input[type="tel"]:not(.form-control), 
input[type="number"]:not(.form-control), 
select:not(.form-select):not(.form-control) {
    border-radius: 0;
    height: 50px;
}

label.cf-label {
    color: var(--weiss)!important;
}

label.cf-label a {
    color: var(--weiss);
    text-decoration: underline;
}

label.cf-label a:hover {
    text-decoration: none;
}

.convertforms .cf-content-wrap, .convertforms .cf-form-wrap {padding: 0 20px!important;}
.cf-form-wrap.cf-col-16 {padding: 0!important;}

.captcha-equation,
.cf-control-input-desc {
    color: var(--weiss)!important;
}

/* END CONVERTFORMS ################################################# */

/* CUSTOM ##################################################### */

/* END CUSTOM ################################################# */