/*
******************************************************************
CSS for flix.BASE theme

(c) sinntun.codes
******************************************************************
*/

/*****************************************************************
**** Allgemein
******************************************************************/

* {
    color: var(--color-text);
    font-family: var(--font-family-arial), sans-serif;
    font-weight: var(--font-weight-normal);
}

h1 {
    font-size: var(--font-size-24px);
    font-family: var(--font-family-metaserif), sans-serif;
}

h2 {
    font-size: var(--font-size-20px);
    font-family: var(--font-family-metaserif), sans-serif;
}

h1,
h2 {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

h3 {
    color: var(--color-primary);
    font-family: var(--font-family-metaserif), sans-serif;
}

strong {
    font-weight: var(--font-weight-bold);
}

em {
    font-style: italic;
}

@media only screen and (max-width: 76.25rem) {
    #main-canvas {
        padding: var(--spacing-25px) var(--spacing-30px) 0;
    }
}

.page-headline {
    color: var(--color-primary);
    margin-bottom: var(--spacing-100px);
    word-break: break-word;
    word-wrap: break-word;
    max-width: calc(100% - 21rem)
}

.link:hover span {
    text-decoration: underline;
}

@media screen and (max-width: 32.5rem) {
    .page-headline {
        margin-bottom: var(--spacing-70px);
    }
}

/*** back-to-top
******************************************************************/

.back-to-top {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.back-to-top .fa-arrow-up {
    color: var(--color-white);
}

/*****************************************************************
**** Canvases
******************************************************************/


/*****************************************************************
**** Navigation
******************************************************************/

/*** nav1
******************************************************************/
/* Auskommentierte Regeln entfernt - nicht mehr benötigt */

/*** nav2
******************************************************************/
/* Auskommentierte Regeln entfernt - nicht mehr benötigt */

/*** nav-meta
******************************************************************/
/* Auskommentierte Regeln entfernt - nicht mehr benötigt */

/*** nav-mobile
******************************************************************/
/* Auskommentierte Regeln entfernt - nicht mehr benötigt */

/*****************************************************************
**** Slider
******************************************************************/

#slider {
    max-width: 120rem;
    margin: auto;
    max-height: 25rem;
}

.slider-caption span {
    font-size: 4.375rem;
    line-height: 4.375rem;
    color: var(--color-white);
}

@media only screen and (max-width: 75rem) {
    .page-headline {
        max-width: unset;
    }

    .slider-caption {
        height: 9.375rem !important;
    }

    .slider-caption span {
        font-size: 2.8125rem !important;
        line-height: var(--spacing-50px) !important;
    }
}

@media only screen and (max-width: 56.25rem) {
    .slider-caption {
        display: none;
    }
}

@media only screen and (max-width: 47.5rem) {
    .page-headline {
        font-size: 2.1875rem;
    }
}

/*****************************************************************
**** Elements
******************************************************************/

/*** text
******************************************************************/

.text ul {
    list-style: disc;
}

.text ol {
    list-style: decimal;
}

.text li {
    float: none;
    margin-left: var(--spacing-20px);
}

/*****************************************************************
**** Module Search
******************************************************************/

.search-container .search-input {
    background-color: #efefef;
}

.search-main .searchresult-group .header,
.search-main .searchresult-item .date {
    color: var(--color-primary);
}

.search-main .searchresult-group .header {
    border-bottom: var(--border-width-1px) solid var(--color-primary);
}

/*** mobile search box
******************************************************************/

#mobile-search-box {
    background-color: var(--color-white);
}

#mobile-search-box .search-input {
    background-color: #efefef;
}

.search-main .searchresult-group .header:before {
    color: #292929;
}

#mobile-search-box button {
    background-color: #ddd;
}