/*
Theme Name:   Mint Theme Child
Template:     kdgs-mint
Version:      1.0.0
*/


/*** NICHT EINKOMMENTIEREN ***/
/* EINKOMMENTIEREN */


/*** Info: Pixelwerte für den Umbruch der Viewports ***/
/*** 'xs'     => max-width: 575px   ***/
/*** 'sm'     => min-width: 576px   ***/
/*** 'md'     => min-width: 768px   ***/
/*** 'lg'     => min-width: 992px   ***/
/*** 'xl'     => min-width: 1200px  ***/
/*** 'xxl'    => min-width: 1400px  ***/
/*** 'xxxl'   => min-width: 1800px  ***/

/*** Major Typo Breakpoints ***/
/*** 'md'     => min-width: 768px   ***/
/*** 'xl'    => min-width: 1200px  ***/


/*** Einbinden der font-family ***/

@font-face {
    font-family: 'MonaSans';
    src: url("fonts/MonaSans-Regular.woff2") format('woff2'), url("fonts/MonaSans-Regular.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MonaSans';
    src: url("fonts/MonaSans-Bold.woff2") format('woff2'), url("fonts/MonaSans-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RobotoSlab';
    src: url("fonts/RobotoSlab-Regular.woff2") format('woff2'), url("fonts/RobotoSlab-Regular.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RobotoSlab';
    src: url("fonts/RobotoSlab-Bold.woff2") format('woff2'), url("fonts/RobotoSlab-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/*** Fontsize, Font Family, Line Height ***/

:root {

    --kdgs-font-family-primary: MonaSans, sans-serif;
    --kdgs-font-family-secondary: MonaSans, sans-serif;
    
    --kdgs-font-size-H1-sm: calc(29 / 16 * 1rem);
    --kdgs-font-size-H2-sm: calc(21.7 / 16 * 1rem);
    --kdgs-font-size-H3-sm: calc(19.2 / 16 * 1rem); /* Also used for: Mobile Main nav */
    --kdgs-font-size-H4-sm: calc(17 / 16 * 1rem); /* Also used for: Mobile sub nav */
    --kdgs-font-size-H5-sm: calc(16.3 / 16 * 1rem); /* Also used for: Mobile meta nav */
    --kdgs-font-size-P-sm: calc(15.5 / 16 * 1rem);
    --kdgs-font-size-xl-sm: calc(23.5 / 16 * 1rem);
    --kdgs-font-size-lg-sm: calc(21.2 / 16 * 1rem);
    --kdgs-font-size-md-sm: calc(16.6 / 16 * 1rem);
    --kdgs-font-size-sm-sm: calc(15.2 / 16 * 1rem);
    --kdgs-font-size-xs-sm: calc(15 / 16 * 1rem);

    --kdgs-font-size-H1-xl: calc(80 / 16 * 1rem);
    --kdgs-font-size-H2-xl: calc(40 / 16 * 1rem);
    --kdgs-font-size-H3-xl: calc(28 / 16 * 1rem);
    --kdgs-font-size-H4-xl: calc(28 / 16 * 1rem); /* Also used for: Accordion */
    --kdgs-font-size-H5-xl: calc(26 / 16 * 1rem); /* Also used for: Desktop Main nav */
    --kdgs-font-size-P-xl: calc(24 / 16 * 1rem); /* Also used for: Desktop Sub nav */
    --kdgs-font-size-xl-xl: calc(60 / 16 * 1rem); /* Used for: Header */
    --kdgs-font-size-lg-xl: calc(33 / 16 * 1rem); /* Used for: Zitat Teaser */
    --kdgs-font-size-md-xl: calc(28 / 16 * 1rem); /* Used for: Footer Mails */
    --kdgs-font-size-sm-xl: calc(20 / 16 * 1rem); /* Used for: Desktop Metanav, footer columns, links */
    --kdgs-font-size-xs-xl: calc(17 / 16 * 1rem); /* Used for: Footer impressumm nav, referenzen */
}


/*** Font Color ***/
body, .body {
}
.lead {
/*    font-family: var(--kdgs-font-family-secondary);*/
/*    font-weight: bold;*/
font-size: var(--kdgs-font-size-lg);
}
h1, .h1 {
    font-weight: bold;
/*    font-family: var(--kdgs-font-family-secondary);*/
}
h2, .h2 {
    font-weight: bold;
/*    font-family: var(--kdgs-font-family-secondary);*/
}
h3, .h3 {
    font-weight: bold;
/*    font-family: var(--kdgs-font-family-secondary);*/
}
h4, .h4 {
}
h5, .h5 {
    font-weight: bold;
/*    font-family: var(--kdgs-font-family-secondary);*/
}
.small {
    font-size: var(--kdgs-font-size-sm);
}
.arrow a {
    text-decoration: none;
    position: relative;
    font-weight: bold;
    padding-left: 1.7em;

}
.arrow a:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2333BAE7' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
    display: block;
    content: '';
    height: 1.2em;
    width: 1.2em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Links */
a {
    text-decoration-thickness: 2px;
}
/* For some reason, the standard text-decoration thickness with this font in firefox is unreasonably thick, so we have to fix it everywhere */
.mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-ancestor > a, .mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-item > a, .mod-header .header-wrapper .main-nav .menu .menu-item:hover > a, .mod-header .header-wrapper .meta-nav .menu .menu-item.current-menu-ancestor > a, .mod-header .header-wrapper .meta-nav .menu .menu-item.current-menu-item > a, .mod-header .header-wrapper .meta-nav .menu .menu-item:hover > a {
    text-decoration-thickness: 3px;
}

.small a {
    text-underline-offset: 3px;
}


/*** Font Color ***/

body, .body,
.lead, 
h1, .h1, 
h2, .h2,
h4, .h4,
h5, .h5 {
    color: var(--c-text-primary);
}

h3, .h3 {
    color: var(--c-text-secondary);
}


/**********/
/* Header */
/**********/

/* Logo */
.mod-header .header-wrapper .home-link .img-wrapper {
    height: 100%;
    max-width: 250px;
}
@media screen and (min-width: 1200px) {
    .mod-header .header-wrapper .home-link .img-wrapper {
        max-width: 350px;
    }
}
.mod-header .header-wrapper .menu .menu-item a {
    text-decoration-color: var(--c-theme-2);
}

/*** Meta Navigation ***/
.mod-header .header-wrapper .meta-nav.above {
    top: 0px;
    padding: 7px 0px;
    font-weight: bold;
}

/*** Main Navigation ***/
.mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu, .mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu {
    padding: 24px 36px 30px;
    transform: translate(-36px, -2px);
}
/* Underline */
.mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-ancestor>a, 
.mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-item>a, 
.mod-header .header-wrapper .main-nav .menu .menu-item:hover>a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item.current-menu-ancestor>a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item.current-menu-item>a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item:hover>a {
    text-decoration-color: var(--c-theme-2);
}
/* Subnav */
.mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu .menu-item a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu .menu-item a {
    font-size: var(--kdgs-font-size-sm);
    font-weight: bold;
}
.mod-header .header-wrapper .main-nav {
    line-height: 1.2;
}
.mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu .menu-item.current-menu-item>a, 
.mod-header .header-wrapper .main-nav .menu .menu-item .sub-menu .menu-item:hover>a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu .menu-item.current-menu-item>a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu .menu-item:hover>a {
    color: var(--c-theme-2);
}

/* -----  */
/* Footer */
/* -----  */

.mod-footer .back-to-top .svg-icon {
    color: var(--c-theme-2);
}
.mod-footer .back-to-top.show-arrow {
    opacity: 1;
}
.mod-footer .back-to-top {
    transform: rotate(-90deg);
}

/* Footer columns */
@media only screen and (min-width: 992px) {
    .mod-footer .footer-main .footer-col-left .text {
        padding-right: 80px;
    }
}
.mod-footer .footer-main {
    background-color: var(--c-theme-4);
}
.mod-footer .footer-main p {
    font-size: var(--kdgs-font-size-sm);
}

/* Footer Navigation */
.mod-footer .footer-bottom {
    background-color: var(--c-theme-2);
    color: white;
    font-size: var(--kdgs-font-size-xs);
}


/* ------ */
/* Blocks */
/* ------ */

.mod-header-mit-bild-breit .container-breakout {
/*    padding-top: var(--header-height);*/
}

/*** Teaserkacheln ***/
.mod-teaserkacheln .teaser {
    position: relative;
}
.mod-teaserkacheln .teaser .text-wrapper {
    position: absolute;
    bottom: 0;
    padding: 27px 24px;
    max-width: 100%;
    margin-right: 50px;
}
.mod-teaserkacheln .teaser .text-wrapper .title {
    margin-bottom: 0;
}
.mod-teaserkacheln .teaser .text-wrapper .text {
    margin-bottom: 0;
}
.mod-teaserkacheln .teaser .link {
    display: none;
}
.mod-teaserkacheln .teaser:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2333BAE7' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
    content: '';
    display: block;
    height: 2em;
    width: 2em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 24px;
    bottom: 18px;
}
.mod-teaserkacheln .teaser-container .teaser .img-wrapper {
    background-color: rgba(227, 214, 115, 0.5);
}
.mod-teaserkacheln .teaser img {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.05) 100%);
}
.mod-teaserkacheln .teaser-container {
    margin-bottom: 0px;
}
@media screen and (max-width: 575px) {
    .mod-teaserkacheln .teaser {
        max-width: 300px; /* Don't let tiles get too wide on tablet */
    }
}
/* Font sizes */
.mod-teaserkacheln .teaser-container .title {
    font-size: var(--kdgs-font-size-H3);
    line-height: 1.2;
}
.mod-teaserkacheln .teaser-container .text {
    font-size: var(--kdgs-font-size-H3);
    line-height: 1.2;
}

/*** Accordion ***/
.mod-accordion .accordion {
    --bs-accordion-border-width: 3px;
}
.mod-accordion .accordion .accordion-item .accordion-header .accordion-button .indicator {
    height: 30px;
    width: 30px;
    background-color: var(--c-accordion);
    margin-right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mod-accordion .accordion .accordion-item .accordion-header .accordion-button .indicator span {
    background-color: white;
    height: 2px;
    width: 10px;
}
@media screen and (min-width: 768px) {
    .mod-accordion .accordion .accordion-item .accordion-header .accordion-button .indicator {
        height: 35px;
        width: 35px;
    }
    .mod-accordion .accordion .accordion-item .accordion-header .accordion-button .indicator span {
        height: 3px;
        width: 13px;
    }
}
@media screen and (min-width: 1200px) {
    .mod-accordion .accordion .accordion-item .accordion-header .accordion-button .indicator {
        height: 40px;
        width: 40px;
    }
}
.mod-accordion .accordion .accordion-item .accordion-header .accordion-button {
    padding: 22px 0;
}
.mod-accordion .row {
    --bs-gutter-x: 2.5rem;
}
.mod-accordion .img-wrapper {
    border-radius: var(--image-border-radius);
    overflow: hidden;
}
/*font-size*/
.mod-accordion .accordion-header {
    font-size: var(--kdgs-font-size-H2);
}


/*** Zweispaltig mit Links ***/
.mod-zweispaltig-mit-links .link svg {
    fill: var(--c-zweispaltig-mit-links);
    position: absolute;
    height: 1.2em;
    width: 1.2em;
    top: 50%;
    transform: translateY(-50%);
}
.mod-zweispaltig-mit-links .link .link-title {
    display: block;
}

/* Bild mit Readmore */
.mod-bild-mit-readmore {
    --kdgs-gutter: 12px;
}
@media only screen and (min-width: 768px) {
    .mod-bild-mit-readmore {
        --kdgs-gutter: 20px;
    }
}
@media only screen and (min-width: 1200px) {
    .mod-bild-mit-readmore {
        --kdgs-gutter: 20px;
    }
}
.mod-bild-mit-readmore .tile-wrapper {
    max-width: 300px;
}
.mod-bild-mit-readmore .content-wrapper .title {
    font-weight: bold;
/*    line-height: 1.2;*/
}
.mod-bild-mit-readmore .content-wrapper .title {
/*    line-height: 1.2;*/
}

.mod-bild-mit-readmore .tile-wrapper .content-wrapper .title-wrapper {
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media only screen and (min-width: 768px) {
    .mod-bild-mit-readmore .tile-wrapper .content-wrapper .title-wrapper {
        min-height: 56px;
    }
}
@media only screen and (min-width: 1200px) {
    .mod-bild-mit-readmore .tile-wrapper .content-wrapper .title-wrapper {
        min-height: 72px;
    }
}



/*** Header ohne Bild ***/
.mod-header-ohne-bild .title-wrapper {
    padding-right: 50px;
}
@media only screen and (min-width: 768px) {
    .mod-header-ohne-bild .lead-wrapper {
        padding-top: 2em;
    }
}
@media only screen and (min-width: 1200px) {
    .mod-header-ohne-bild .title-wrapper {
        font-size: var(--kdgs-font-size-H1);
    }
}
@media only screen and (min-width: 768px) {
    .mod-header-ohne-bild .title-wrapper {
        font-size: var(--kdgs-font-size-H1);
    }
}
.mod-header-ohne-bild .title-wrapper {
    font-size: var(--kdgs-font-size-H1);
}

/*** Links ***/
.mod-links .link {
    font-weight: bold;
    position: relative;
    padding-left: 1.7em;
}

.mod-links .link:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2333BAE7' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
    display: block;
    content: '';
    height: 1.2em;
    width: 1.2em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/*** Ticket Teaser Klein ***/
.mod-ticket-teaser-klein .ticket-container .ticket-wrapper:after, .mod-ticket-teaser-klein .ticket-container .ticket-wrapper:before {
    display: none;
}
.mod-ticket-teaser-klein .ticket {
    display: flex;
    flex-direction: column;
}
.mod-ticket-teaser-klein .ticket-container .ticket-wrapper .ticket .link {
    margin-top: auto;
}
.mod-ticket-teaser-klein .text {
    margin-bottom: 40px;
}
/* Change horizontal gutter */  
.mod-ticket-teaser-klein {
    --kdgs-gutter: 12px;
}
@media only screen and (min-width: 768px) {
    .mod-ticket-teaser-klein {
        --kdgs-gutter: 20px;
    }
}
.mod-ticket-teaser-klein .row {
    margin-left: calc(var(--kdgs-gutter)* -1);
    margin-right: calc(var(--kdgs-gutter)* -1);
}
.mod-ticket-teaser-klein .row>* {
    padding-left: var(--kdgs-gutter);
    padding-right: var(--kdgs-gutter);
}
.mod-ticket-teaser-klein .ticket-wrapper {
    border-radius: var(--image-border-radius);
    overflow: hidden;
}
/*font-size*/
.mod-ticket-teaser-klein .ticket-container .ticket-wrapper .ticket .title {
    font-size: var(--kdgs-font-size-H2);
}
/* Button */
.mod-ticket-teaser-klein .link:hover {
    background-color: var(--c-text-primary) !important;
    border-color: var(--c-text-primary) !important;
    color: #fff;
    color: var(--c-white);
    cursor: pointer;
    transition: all .3s;
}


/*** Link Buttons ***/
.mod-link-button .link-text {
    font-weight: bold;
}


/*** Text-Bild ***/
.mod-text-bild .img-wrapper {
    border-radius: var(--image-border-radius);
    overflow: hidden;
}


/*** Header mit Slider ***/
.mod-header-mit-slider .container-breakout {
    margin-bottom: calc(2 * var(--block-spacing));
}