/* Include fonts. */
@font-face {
    font-family: 'Open Sans';
    src: url("/typo3conf/ext/ji_site/Resources/Public/Fonts/OpenSans-Light.ttf") format("ttf");
    font-weight: 300;
}

@font-face {
    font-family: 'Open Sans';
    src: url("/typo3conf/ext/ji_site/Resources/Public/Fonts/OpenSans-Regular.ttf") format("ttf");
    font-weight: 400;
}

@font-face {
    font-family: 'Open Sans';
    src: url("/typo3conf/ext/ji_site/Resources/Public/Fonts/OpenSans-SemiBold.ttf") format("ttf");
    font-weight: 600;
}

/* Default colors. */
:root {
    --ji-light-grey: #DEDEDE;
    --ji-anthracite: #4D4D4D;
    --ji-red: #DC1A22;
    --ji-red-dark: #9D383D;
    --ji-green: #55C06D;
    --ji-green-dark: #318653;
    --ji-gradient-red: linear-gradient(90deg, var(--ji-red) 0%, var(--ji-red-dark) 100%);
}

/* Font default. */
* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 1.375rem; /* 22px */
    color: var(--ji-anthracite);
}

/* Define headers. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

h1 {
    color: var(--ji-red);
    font-size: 2.8125rem; /* 45px */
    line-height: 3.75rem; /* 60px */
}

h2, h3, h4 {
    color: var(--ji-anthracite);
}

h2 {
    font-size: 1.5625rem; /* 25px */
    line-height: 1.875rem; /* 30ox */
}

h3 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.5625rem; /* 25px */
}

h4 {
    font-size: 1rem; /* 16px */
    line-height: 1.375rem; /* 22px */
}

/* Define styling of links, that are not ancestor of .ji_skip_anchor_styling */
:where(a):not(:where(.ji_skip_anchor_styling a)):is(:link, :visited, :active) {
    text-decoration: none;
    color: var(--ji-red);
}

:where(a):not(:where(.ji_skip_anchor_styling a)):is(:hover) {
    text-decoration: underline;
    color: var(--ji-red);
}

/**
 * Define general styles of content elements.
 * Those styles are directly used in the file "EXT:ji_site/Resources/Private/Layouts/ContentElements/Default.html"
 * and are defined via TCA as the values of the columns "space_before_class" and "space_after_class"
 * of the table "tt_content".
 */
.ce_space_before_none {
    padding-top: 0;
}

.ce_space_before_small {
    padding-top: 1.5625rem; /* 25px */
}

.ce_space_before_medium {
    padding-top: 3.125rem; /* 50px */
}

.ce_space_after_none {
    padding-bottom: 0;
}


.ce_space_after_small {
    padding-bottom: 1.5625rem; /* 25px */
}

.ce_space_after_medium {
    padding-bottom: 3.125rem; /* 50px */
}

.ce_space_after_large {
    padding-bottom: 4.6875rem; /* 75px */
}

/**
 * Define reusable styles for content elements.
 */
/* Weak drop shadow for large elements. */
.ce_drop_shadow {
    filter: drop-shadow(0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.15));
}
/* Strong drop shadow for CTA elements. */
.ce_drop_shadow_button {
    filter: drop-shadow(0.4rem 0.4rem 1rem rgba(0, 0, 0, 0.3));
}

.ce_text_center {
    text-align: center !important;
}

.ce_text_right {
    text-align: right !important;
}

.ce_text_left {
    text-align: left !important;
}

/* Hides content on mobile */
@media (max-width: 991px) {
    .hide_on_mobile {
        display: none;
    }

    .container-lg {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 73.5rem !important;
    }

    .container-lg {
        max-width: 73.5rem !important;
    }

    .hide_on_desktop {
        display: none;
    }
}

/* Style for the breadcrumbs. */
.ji_breadcrumbs {
    padding-top: 3.125rem;
}

.ji_breadcrumb {
    font-size: 0.75rem;
    color: var(--ji-anthracite);
    text-decoration: none;
}

/* Style for the sticky CTA element */
#sticky_cta {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
}

.cta_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #4D4D4D;
    color: white;
    text-decoration: none;
    width: 3.125rem;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.cta_btn:hover {
    transform: scale(1.05);
    z-index: 1099;
}