/*
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  ***/



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


@font-face {
    font-family: 'Inter';
    src: url("fonts/Inter-VariableFont.woff2") format('woff2');
    font-weight: 300 400 700;
    font-style: normal;
    font-display: swap;
}

/*** If no variable fonts are available, use this instead ***/

/* @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: Inter, sans-serif;
    --kdgs-font-family-secondary: Inter, sans-serif;
    
    --kdgs-font-size-H1-sm: calc(35 / 16 * 1rem);
    --kdgs-font-size-H2-sm: calc(25 / 16 * 1rem);
    --kdgs-font-size-H3-sm: calc(18 / 16 * 1rem); /* Also used for: Mobile Main nav */
    --kdgs-font-size-H4-sm: calc(16 / 16 * 1rem); /* Also used for: Mobile sub nav */
    --kdgs-font-size-H5-sm: calc(14 / 16 * 1rem); /* Also used for: Mobile meta nav */
    --kdgs-font-size-P-sm: calc(14 / 16 * 1rem);
    --kdgs-font-size-xl-sm: calc(28 / 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(12 / 16 * 1rem);

    --kdgs-font-size-H1-xl: calc(100 / 16 * 1rem);
    --kdgs-font-size-H2-xl: calc(46 / 16 * 1rem);
    --kdgs-font-size-H3-xl: calc(32 / 16 * 1rem);
    --kdgs-font-size-H4-xl: calc(25 / 16 * 1rem); 
    --kdgs-font-size-H5-xl: calc(18 / 16 * 1rem);
    --kdgs-font-size-P-xl: calc(18 / 16 * 1rem); /* Desktop Sub nav */
    --kdgs-font-size-xl-xl: calc(60 / 16 * 1rem); /* Zitat */
    --kdgs-font-size-lg-xl: calc(53 / 16 * 1rem); 
    --kdgs-font-size-md-xl: calc(24 / 16 * 1rem); /* Desktop Main nav */
    --kdgs-font-size-sm-xl: calc(16 / 16 * 1rem); /* Block 'Blog' Datum */
    --kdgs-font-size-xs-xl: calc(15 / 16 * 1rem); /* Desktop Meta nav */

    --header-margin: 10px;
    --kdgs-font-size-desktop-mainnav: var(--kdgs-font-size-md);
    --kdgs-font-size-desktop-metanav: var(--kdgs-font-size-xs);
    --kdgs-font-size-mobile-mainnav: var(--kdgs-font-size-H2);
    --kdgs-font-size-mobile-metanav: var(--kdgs-font-size-md);
}


/*** Fonts ***/
body, .body {
}
h1, .h1 {
    line-height: 1;
    font-weight: 300;
}
h2, .h2 {
    line-height: 1.2;
    font-weight: 300;
}
h3, .h3 {
    line-height: 1.1875;
    font-weight: 300;
}
h4, .h4 {
    line-height: 1.28;
    font-weight: 300;
}
h5, .h5 {
    line-height: 1.35;
    font-weight: 300;
}
p {
    line-height: 1.5;
}
b, strong {
    font-weight: bold;
}
.quote {
    font-size: var(--kdgs-font-size-xl);
    line-height: 1.23;
    font-weight: 300;
}
.button-green a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 18px;
    margin: 1em 1em 1em 0;
    background-color: var(--c-theme-3);
    border-radius: 30px;
    color: var(--c-white);
    font-weight: bold;
    transition: box-shadow 0.3s;
}
.button-green a:hover {
    box-shadow: 4px 5px 0px 0px var(--c-text-primary);
    transition: box-shadow 0.3s;
}
.button-white a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 18px;
    margin: 1em 1em 1em 0;
    background-color: var(--c-white);
    border-radius: 30px;
    color: var(--c-text-primary);
    font-weight: bold;
    transition: box-shadow 0.3s;
}
.button-white a:hover {
    box-shadow: 4px 5px 0px 0px var(--c-theme-3);
    transition: box-shadow 0.3s;
}
a:hover {
    text-decoration: none;
}

/*** Font Color ***/

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


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

/*** Logo ***/
/*@media screen and (min-width: 1200px) {
    .mod-header .header-wrapper .home-link .img-wrapper {
        max-width: 200px;
    }
}*/
.mod-main {
    margin-top: calc(var(--header-height) + 2 * var(--header-margin));
}
.mod-header {
    margin: var(--header-margin);
    width: calc(100vw - 2 * var(--header-margin));
    border-radius: var(--image-border-radius);
}
/* fix mobile navi visible because of header margin */
.mod-header .header-wrapper .mobile-menu {
    right: calc(-100% - var(--header-margin));
}
.mod-header.header-hidden {
    transform: translateY(calc(-100% - var(--header-margin) - var(--wp-admin--admin-bar--height, 0px)));
}

/* place main nav low */
.mod-header .header-wrapper .main-nav {
    align-self: end;
    margin-bottom: 15px;
}
/* place meta nav a bit higher */
.mod-header .header-wrapper .meta-nav.above {
    top: 14px;
}
/* resize header */
@media only screen and (min-width: 1200px) {
    :root {
        --header-height: 100px;
    }
}
/* Make main nave menu font-weight light */
.mod-header .header-wrapper .main-nav .menu .menu-item a {
    font-weight: 300;
}
.mod-header .header-wrapper .main-nav .menu .menu-item a, 
.mod-header .header-wrapper .meta-nav .menu .menu-item a {
    text-underline-offset: 5px;
}
.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: 1.5px;
}
/* Hover color Main Nav */
.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 {
    color: var(--c-text-secondary);
}
/* Unset underline and color when current-menu-item is set */
.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.current-menu-item>a {
    text-decoration: none;
    color: var(--c-text-primary);
}
.mod-header .header-wrapper .main-nav .menu .menu-item:hover>a {
    color: var(--c-text-secondary);
}
/* Subnav hover and current-ancestor */
.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 {
    font-weight: initial;
}
/* Re set underline and color on hover */
.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:hover>a {
    text-decoration: underline;
    color: var(--c-text-secondary);
}
/* color of Meta Nav */
.mod-header .header-wrapper .meta-nav .menu {
    color: var(--c-text-secondary);
}
/* hide submenu arrow */
.mod-header .header-wrapper .main-nav .menu .menu-item.menu-item-has-children .sub-menu-arrow, 
.mod-header .header-wrapper .meta-nav .menu .menu-item.menu-item-has-children .sub-menu-arrow {
    display: none;
}

/* Header Padding bei Seiten ohne Full screen header */
body:not(.no-header-margin) .mod-main {
    padding-top: 5em;
}

/* Meta Nav styling */
.mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu {
    padding: 15px;
    transform: translate(-15px, -2px);
    width: 200px;
}
.mod-header .header-wrapper .meta-nav .menu .menu-item .sub-menu .menu-item a {
    font-size: var(--kdgs-font-size-desktop-metanav);
}

/* Mobile meta nav */
.mod-header .mobile-meta-nav .menu {
    display: flex;
    flex-direction: column;
}
.mod-header .mobile-meta-nav .sub-menu {
    display: none;
    /* display: flex; */
    /* flex-direction: column; */
}
.mod-header .header-wrapper .mobile-menu .mobile-meta-nav .menu .menu-item a {
    color: white;
}
.mod-header .header-wrapper .mobile-menu .mobile-main-nav .menu .menu-item.menu-item-has-children .sub-menu-arrow i {
    font-size: 1.5em;
}
.mod-header .header-wrapper .mobile-menu .mobile-menu-trigger {
    right: calc(var(--bs-gutter-x, .8rem) + 3px);
    font-size: 1.5em;
}
.mod-header .header-wrapper .mobile-menu .mobile-meta-nav .menu .menu-item {
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: column;
}
.mod-header .header-wrapper .mobile-menu .mobile-meta-nav .menu>.menu-item>a {
    /*margin-bottom: 0.5em;*/
    font-weight: normal;
}
.mod-header .header-wrapper .mobile-menu-trigger {
    font-size: 1.5em;
}
.mod-header .header-wrapper .mobile-menu .mobile-meta-nav {
    font-size: var(--kdgs-font-size-mobile-metanav);
}

/**********/
/* Footer */
/**********/

.mod-footer {
    background-color: #E5E5E5;
}
.mod-footer .logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-top: 2em;
    margin-bottom: 43px;
}
.mod-footer .logo-wrapper a {
    width: 150px;
    /*filter: brightness(0);*/
}
.mod-footer .logo-wrapper .logo-right {
    margin-bottom: -43px;
}

/* ------- */
/* General */
/* ------- */


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

::marker {
    color: var(--c-theme-2);
}
ol, ul {
    padding-left: 1.2rem;
}

/*** Text ***/
/*.mod-text .container-breakout {
    padding: var(--block-spacing) 0;
}
.mod-text .text > *:last-child {
    margin-bottom: 0;
}
.mod-text li {
    margin-bottom: 1em;
}*/

/*** Header Bildteaser ***/
.mod-header-bildteaser .header-wrapper {
    align-items: end;
}
.mod-header-bildteaser .header-wrapper .textbox-col .textbox {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mod-header-bildteaser .text > *:last-child {
    margin-bottom: 0;
}
.mod-header-bildteaser .header-wrapper {
    min-height: 100dvh;
}
@media only screen and (min-width: 768px) {
    .mod-header-bildteaser .header-wrapper .textbox-col .textbox {
        padding: 3em 1.5em 3em;
    }
}

/*** Akkordeon Kachel ***/
.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 0 0 1em;
}
.mod-akkordeon-kachel .link-list .svg-icon {
    height: 0.65em;
}
.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-body .link-list .list-item a {
    gap: 8px;
}
.mod-akkordeon-kachel .accordion-wrapper {
    padding: 1.5em 1.8em 2em;
}
.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-header .accordion-button {
    padding: 0.4em 0.4em 0.4em 0;
}
.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-body .text > *:last-child {
    margin-bottom: 0;
}
/*.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-body .link-list .list-item a:hover .svg-icon {
    transform: none;
}
.mod-akkordeon-kachel .accordion-wrapper .accordion .accordion-item .accordion-body .link-list .list-item a {
    gap: 5px;
}
.mod-akkordeon-kachel .link-list a:hover {
    transform: translateX(7px);
    transition: transform 0.3s;
}
.mod-akkordeon-kachel .link-list a {
    transition: transform 0.3s;
}*/


/*** Teaserkacheln einfach ***/
.mod-teaserkacheln-einfach .row {
    margin-top: 0;
}
.mod-teaserkacheln-einfach .teaser-container .teaser {
    padding: 1.5em 1.8em 2em;
    aspect-ratio: 4 / 3;
}
@media only screen and (min-width: 576px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 3 / 2;
    }
}
@media only screen and (min-width: 768px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 5 / 3;
    }
}
@media only screen and (min-width: 992px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 3 / 4;
    }
}
@media only screen and (min-width: 1200px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 5 / 6;
    }
}
@media only screen and (min-width: 1400px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 5 / 5;
    }
}
@media only screen and (min-width: 1800px) {
    .mod-teaserkacheln-einfach .teaser-container .teaser {
        aspect-ratio: 4 / 3;
    }
}
.mod-teaserkacheln-einfach .link .svg-icon {
    height: 0.65em;
}
.mod-teaserkacheln-einfach .teaser-container {
    transition: box-shadow 0.3s;
}
.mod-teaserkacheln-einfach .teaser-container:hover {
    box-shadow: 9px 9px 0px 0px var(--c-text-primary);
    transition: box-shadow 0.3s;
}

/*** Blog ***/
.mod-blog .blog-teaser-list .blog-teaser .permalink .text-wrapper .fake-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    .svg-icon {
        transition: transform 0.3s;
        height: 0.65em;
    }
}
.mod-blog .blog-teaser-list .blog-teaser .permalink:hover .text-wrapper .fake-link {
    .svg-icon {
        transform: translateX(5px);
        transition: transform 0.3s;
    }
}
.mod-blog .blog-teaser-list .blog-teaser .permalink .text-wrapper .date {
    margin: 1em 0 0.7em;
    font-size: var(--kdgs-font-size-sm);
    font-weight: bold;
    color: var(--c-theme-3);
}
.mod-blog .blog-teaser-list .blog-teaser .permalink .text-wrapper .title {
    font-weight: bold;
    margin-bottom: 0.8em;
}
.mod-blog .blog-teaser-list .blog-teaser .permalink .text-wrapper .fake-link {
    margin-top: 0;
}
.mod-blog .blog-teaser-list .blog-teaser {
    margin-bottom: 0px;
}
.mod-blog .blog-teaser-list .blog-teaser .permalink .img-wrapper {
    padding-top: initial; 
    aspect-ratio: 483 / 319;
}

/*** Full screen Header ***/
.mod-full-screen-header .header-container .text-container {
    margin-top: initial;
    position: absolute;
    bottom: 5em;
    width: 100%;
}
.mod-full-screen-header .header-container .img-wrapper .a-image__picture img {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 39%, rgba(0,0,0,0.5));
    mask-image: linear-gradient(180deg, #000 0, #000 39%, rgba(0,0,0,0.5));
    filter: brightness(0.9);
}

/*** Text ***/
.mod-text .text > *:last-child {
    margin-bottom: 0;
}

/*** Teaser Zitat und Bild ***/
.mod-teaser-mit-zitat-und-bild .text {
    padding: 1.5em 1.8em 2em;
}

/*** Kennzahlen Providus ***/
.mod-kennzahlen-providus .chart-wrapper {
    margin-bottom: 2em;
}
.mod-kennzahlen-providus .kennzahl-title {
    font-weight: bold;
    color: var(--c-theme-3);
    margin-bottom: 0.5em;
}
.mod-kennzahlen-providus .canvas-wrapper {
    aspect-ratio: 4 / 3;
}
/* Legend */
.mod-kennzahlen-providus .chart-legend ul{
    list-style: none;
    margin: 1em 0 0 3em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.mod-kennzahlen-providus .chart-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
.mod-kennzahlen-providus .chart-legend .swatch {
    --swatch-size: 20px;
    width: var(--swatch-size);
    height: var(--swatch-size);
    border-radius: 3px;
    flex: 0 0 var(--swatch-size);
}

/*** Link Buttons ***/
.kdgs-button {
    background-color: var(--c-theme-8) !important;
    border: none;
    /*border-radius: var(--image-border-radius);*/
    border-radius: 20px;
    color: var(--c-text-primary);
    font-weight: bold;
    padding: 2em 1em;
}
.kdgs-button:hover {
    background-color: var(--c-theme-8) !important;
    color: color: var(--c-text-primary);
    box-shadow: 9px 9px 0px 0px var(--c-text-primary);
}

/***********/
/* Plugins */
/***********/

/*** Teams Block ***/
.kdgs-team-item .team-image {
    padding-top: 0;
    aspect-ratio: 1;
    border-radius: var(--image-border-radius);
    overflow: hidden;
    margin-bottom: 1em;
}
.kdgs-team-item .team-content {
    margin-bottom: 1em;
}
.kdgs-team-item .team-content .team-name {
    font-weight: bold;
}
.kdgs-team-item .team-content .team-funktion {
    margin-bottom: 1em;
}

/*** Single page ***/

.kdgs-team-single-content {
    /*padding-top: var(--header-height);*/
    font-size: var(--kdgs-font-size-H4);
    font-weight: 300;
} 

/* H1 style not working Fix (because plugin style gets loaded after parent style) */
.kdgs-team-single-content h1 {
    font-size: var(--kdgs-font-size-H2) !important;
    font-weight: bold;
    line-height: 1.2 !important;
    margin-bottom: 0em !important;
}
.kdgs-team-single-content .funktion {
    font-size: var(--kdgs-font-size-H2) !important;
    font-weight: 300;
    line-height: 1.2 !important;
    margin-bottom: 0.5em !important;
}
@media only screen and (min-width: 992px) {
    .kdgs-team-single-content .funktion {
        margin-bottom: 0.5em !important;
    }
}

/* Image styling */
.kdgs-team-single-content .team-image .col-wrapper {
    aspect-ratio: 3 / 4;
}
.kdgs-team-single-content .team-image img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--image-border-radius);
}

/* Beschreibung */
.kdgs-team-single-row .beschreibung {
    margin-top: 3em;
    margin-bottom: 2em;

}

.kdgs-team-single-description h5 {
    font-size: var(--kdgs-font-size-H3);
    font-weight: bold;
}

/* table styling */
.kdgs-team-single-description .table td {
    color: var(--c-text-primary);
    padding: 14px 0 14px;
}
.kdgs-team-single-description .table td {
    width: initial; 
}
.kdgs-team-single-description .table td:first-child {
    width: 30%;
    font-weight: bold;
}
.kdgs-team-single-description .table tr { /* border styling */
    border-color: var(--c-text-primary);
    border-width: 0 0 1px;
}
.kdgs-team-single-row .table {
    margin-top: 0.5em;
    margin-bottom: 3em;
}

/* Linke Spalte Margin */
.kdgs-team-single-content .col-wrapper {
        margin-right: 4em;
        margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
    .kdgs-team-single-content .col-wrapper {
        margin-right: 12em;
    }
}
@media screen and (min-width: 992px) {
    .kdgs-team-single-content .col-wrapper {
        margin-right: 4em;
    }
}
@media screen and (min-width: 1200px) {
    .kdgs-team-single-content .col-wrapper {
        margin-right: 5em;
    }
}
@media screen and (min-width: 1400px) {
    .kdgs-team-single-content .col-wrapper {
        margin-right: 6em;
    }
}

/* Underline "Über uns" menu item if you are on a teams single page */
.single-kdgs_member .header-wrapper .main-nav .menu .menu-item a[title="Über Uns"] {
    text-decoration: underline;
    color: var(--c-text-secondary);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}