/**
 * Ladereihenfolge
 * =======================================
 * - Typo3-Styles
 * - Bootstrap 4.5.2
 * - rte.css
 * - page.css
 */


/**
 * Konstanten
 * =======================================
 */

:root {
    /* page size */
    --page-max-width: 900px;

    /* background colors */
    --color-bg-boxes: #f0f0f0;
    --color-bg-footer: #f0f0f0;
    --color-bg-page: #ffffff;
    --color-bg-background: #f7f7f7;
    --color-bg-mainnav-active: #f0f0f0;

    /* container size */
    --container-x-padding: 4rem;
    --container-x-padding-sm: 1rem; /* small displays */

    /* CTA */
    --color-cta: #0065BD;
    --cta-padding-bottom: 6rem; /* damit genug Platz für den Button ist */

    /* font colors */
    --color-font-dark: #282828;
    --color-font-middle: #737373;
    --color-font-highlight: #0065BD;
    --color-font-light: #b4b4b4;
    --color-font-highlight-bg: var(--color-bg-mainnav-active);


    /* box padding and distances */
    --box-padding: 1rem;
    --box-margin-bottom: 1rem;

}

/**
    Font
 */
body {
    font-family: 'Source Sans Pro', sans-serif;
}


/**
 * Grobstruktur der Seite
 * =======================================
 */

body {
    background-color: var(--color-bg-background);
    font-size: 1.1rem;
}

#pagewrap { /* erstes element im body */
    max-width: var(--page-max-width);
    background-color: var(--color-bg-page);
    margin: 0 auto;
}

.container {
    padding-left: var(--container-x-padding);
    padding-right: var(--container-x-padding);
    margin: 0;
}
.container {
    max-width: unset !important;
}


.container .container { /* verschachtelte container */
    padding-left: 0;
    padding-right: 0;
}


#footer {
    background-color: var(--color-bg-footer);
}


/**
 * Header
 * =======================================
 */

#header .h1 {
    margin: 0;
}

#header .h1 a {
    font-size: 2rem;
    font-weight: normal;
    color: var(--color-font-dark);
    text-decoration: none;
}

#header .h2 {
    margin: 0;
    font-size: 1.4rem;
}

#header .h2 a {
    font-size: 1.4rem;
    font-weight: normal;
    color: var(--color-font-dark);
    text-decoration: none;
}

.navbar {
    padding: 0;
}

#metanavi .nav-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-font-middle);
}

#mainnavi .nav-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-font-dark);
    line-height: 2.1;
}

#mainnavi .nav-item.active .nav-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-font-highlight);
    background-color: var(--color-bg-mainnav-active);
}

.breadcrumb {
    padding: 1.2rem 0; /*xxx*/
    /*padding: 0.75rem 0;*/
    font-size: 1.1rem;
    font-weight: normal;
    font-style: italic;
    color: var(--color-font-highlight);
}

#navtitle {
    font-size: 2rem;
    font-weight: normal;
    color: var(--color-font-dark);
    padding: 2rem 0 4.6rem 0;
    margin: 0;
}


/**
 * Footer
 * =======================================
 */

#footer, #footer a {
    font-size: 1.1rem;
    font-weight: normal;
}

#footer .footer_logo {
    background: #fff;
    padding: 1rem;
}

#footer h4 {
    font-size: 1.1rem;
    font-weight: 600;
}


/**
 * Frames um Inhaltselemente
 * =======================================
 */

.frame-default { /* default = Grau mit Rand */
    background-color: var(--color-bg-boxes);
    margin-bottom: var(--box-margin-bottom);
    padding: var(--box-padding);
}

.frame-gray { /* gray   = Grau ohne Rand */
    background-color: var(--color-bg-boxes);
    margin-bottom: var(--box-margin-bottom);
}

.frame-border { /* border = Weiß mit Rand */
    background-color: transparent;
    margin-bottom: var(--box-margin-bottom);
    padding: var(--box-padding);
}

.frame-white { /* white  = Weiß ohne Rand */
    background-color: transparent;
    margin-bottom: var(--box-margin-bottom);
}

.card-body { /* bootstrap Card-Body */
    padding: var(--box-padding);
}

.frame-default .row,
.frame-gray .row,
.frame-border .row,
.frame-white .row {
    margin-left: 0;
    margin-right: 0;
}


/**
 * Typo3-spezifisches
 * =======================================
 */

.extbase-debugger {
    margin: 0;
    border-radius: 0;
    border-bottom: 3px solid #f00;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* when something has "frame: none", it renders an <a> before itself... */
#main ._content > a {
    display: none !important;
}


/**
 * Pfeile
 * =======================================
 */

._arrow_right::after {
    display: inline-block;
    content: "";
    background: url(bootstrap-icons-1.0.0/chevron-right.svg);
    width: 2rem;
    height: 1rem;
    background-size: contain;
    background-position: bottom right;
    position: relative;
    bottom: -0.15rem;
    background-repeat: no-repeat;
}


/**
 * Contentelement "CTA"
 * =======================================
 */

.cta {
    background-color: var(--color-cta);
    padding-bottom: var(--cta-padding-bottom) !important;
    padding: var(--box-padding);
}

.cta ._title {
    margin: 0;
    padding: 0;
    color: white;

    font-size: 2rem;
    font-weight: normal;
}

.cta ._button {
    position: absolute;
    bottom: var(--box-padding);
    right: 0;
    width: 100%;
    text-align: right;
    padding: 0 var(--box-padding);
}


/**
 * Contentelement "Teaser"
 * ==========================================
 */

.card-title {
    margin: 0;
}


/**
 * Contentelement "Slider"
 * ==========================================
 */

#header .carousel {
    margin-bottom: 0;
}


/**
 * Contentelement "Text"
 * ==========================================
 */

.frame-type-text > h2, .frame-type-text > h3 {
    margin: 0;
}


/**
 * Kalender
 * =======================================
 */

.kspkalender {
    font-size: 1rem;
    font-weight: normal;
}

.kspkalender h4 {
    color: var(--color-font-highlight);
    width: 100%;
    font-size: 1.4rem;
    font-weight: 600;
}

.kspkalender ._large {
    font-size: 2.4rem;
    font-weight: 600;
}

.kspkalender._teaser .frame-default {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.kspkalender._teaser tr {
    border-bottom: 3px solid #ffffff;
}

.kspkalender._teaser td {
    padding: 0.5rem 1rem;
}

.kspkalender._teaser td._left {
    padding-right: 1.5rem;
    width: 80px;
}


.ksp-user-feedback {
    color: var(--color-font-highlight);
}

#kspideenboerse_ideenboerse label {
    margin-bottom: 0;
}

.tx-ksp-modules select,
.tx-ksp-modules option {
    font-family: 'Source Sans Pro', Arial;
    font-size: 0.875rem;
}

.tx-ksp-modules option {
    font-family: 'Source Sans Pro', Arial;
    font-size: 0.78rem;
}


/**
 * Etwas responsive...
 * =======================================
 */
@media (max-width: 576px) {
    /* entspricht var(--breakpoint-sm) */
    #metanavi .nav-link {
        font-size: 1.1rem;
    }

    .container {
        padding-left: var(--container-x-padding-sm);
        padding-right: var(--container-x-padding-sm);
    }

    .container .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Form tabbing */
.form-check input:focus + span,
.form-group .radio input:focus + span,
.form-group input[type=file]:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


h6, .h6 {
    font-size: 1.1rem;
    font-style: italic;
}

h2, .h2 {
    font-size: 2rem;
}

.tx-ksp-modules .icon-link-ext-alt::before {
    color: var(--color-font-highlight);
}

#map {
    border: solid 1px var(--color-font-light);
}

a {
    color: var(--color-font-highlight);
}

.tx-ksp-modules .text-primary {
    color: var(--color-font-highlight) !important;
}

.tx-ksp-modules .text-muted {
    color: var(--color-font-middle) !important;
}

.btn-primary {
    background-color: var(--color-font-highlight);
    border-color: var(--color-font-highlight);
}

.tx-ksp-modules .table-th-underline th {
    text-decoration: underline;
    font-weight: normal;
}

.card figure,
.card-img-top figure {
    margin: 0;
    position: relative;
}

.card figcaption,
.card-img-top figcaption {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    background: #FFFFFF;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.modal-body figcaption {
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    background: #FFFFFF;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    width: 100%;
}


/**
Video (Typo3 Extension gpdr_social
 */

.social-gdpr-youtube-video,
.social-gdpr-vimeo-video,
.social-gdpr-google-maps,
.social-gdpr-osm-map,
.video-embed-item,
iframe.video-embed-item {
    width: 100%;
    border: none;
    height: auto;
    min-width: unset;
    min-height: 250px;
}
.col-lg-8 .social-gdpr-youtube-video,
.col-lg-8 .social-gdpr-vimeo-video,
.col-lg-8 .social-gdpr-google-maps,
.col-lg-8 .social-gdpr-osm-map,
.col-lg-8 .video-embed-item,
.col-lg-8 iframe.video-embed-item {
    min-height: 500px;
}

.social-gdpr-youtube-iframe-notice,
.social-gdpr-vimeo-iframe-notice {
    font-size: 14px;
    bottom: unset;
}

.social-gdpr-youtube-iframe-notice a,
.social-gdpr-vimeo-iframe-notice a {
    color: white;
    text-decoration: underline;
}

.social-gdpr-vimeo-video,
.social-gdpr-youtube-video, .social-gdpr-vimeo-video {
    background-size: cover;
}

.social-gdpr-vimeo-video img.videostub,
.social-gdpr-youtube-video img.videostub {
    top: 50%;
}

@media print {
    .social-gdpr-youtube-iframe-notice,
    .social-gdpr-vimeo-iframe-notice {
        display: none;
    }
}