:root {
    --sand: #FAF2E5;
    --kosmos: #192344;
}

.uk-text-meta {
    background-color: #F6EAD4;
    width: fit-content;
}
.uk-text-meta.uk-text-center {
    margin-left: auto;
    margin-right: auto;
}
.fw-200 {font-weight: 200;}

.vd-corner-br img {border-radius: 50% 50% 15px 50%;}
.vd-corner-bl img {border-radius: 50% 50% 50% 15px;}

.vd-corners .el-item.uk-panel,
.vd-corners .el-item > .uk-panel {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vd-corners > .uk-grid > *:nth-of-type(4n + 1) .el-item.uk-panel,
.vd-corners > .uk-grid > *:nth-of-type(4n + 1) .el-item > .uk-panel {border-radius: 50% 50% 15px 50%;}
.vd-corners > .uk-grid > *:nth-of-type(4n + 2) .el-item.uk-panel,
.vd-corners > .uk-grid > *:nth-of-type(4n + 2) .el-item > .uk-panel {border-radius: 50% 50% 50% 15px;}
.vd-corners > .uk-grid > *:nth-of-type(4n + 3) .el-item.uk-panel,
.vd-corners > .uk-grid > *:nth-of-type(4n + 3) .el-item > .uk-panel {border-radius: 50% 15px 50% 50%;}
.vd-corners > .uk-grid > *:nth-of-type(4n + 4) .el-item.uk-panel,
.vd-corners > .uk-grid > *:nth-of-type(4n + 4) .el-item > .uk-panel {border-radius: 15px 50% 50% 50%;}

.vd-corners > .uk-grid .el-item > .uk-panel .el-content + * {
    margin: 0 !important;
    padding: 0;
    line-height: 0;
}
.vd-corners > .uk-grid .el-item > .uk-panel .el-content + * .el-link {
    font-size: 0px;
    transition: all 0.3s;
    opacity: 0;
}
.vd-corners > .uk-grid .el-item:hover > .uk-panel .el-content + * .el-link {
    font-size: 18px;
    transition: all 0.3s;
    margin-top: 20px;
    opacity: 1;
}
.vd-corners > .uk-grid .el-item:hover > .uk-panel.uk-link-toggle {
    background-color: #F6EAD4;
    transition: all 0.3s;

}


.vd-partnerschaft {}
.vd-partnerschaft .uk-card-default {
    border-radius: 0;
    background-color: transparent;
    border-left: 2px dashed #192344;
    padding: 0 50px;
}
.vd-partnerschaft .uk-card-default {
    border-radius: 0;
    background-color: transparent;
    border-left: 2px dashed #192344;
    padding: 0 50px;
}

.vd-partnerschaft-1 {
    padding-right: 15%;
}
    .vd-partnerschaft-1 .uk-card-default {
        padding-bottom: 120px;
    }
.vd-partnerschaft-2 {
    border-top: 2px solid #192344;
    padding-left: 15%;
}
    .vd-partnerschaft-2 .uk-card-default {
        padding-top: 120px;
    }
    /*
    .vd-partnerschaft > .uk-grid > * {
        width: 40%;
    }

    .vd-partnerschaft > .uk-grid > *:nth-of-type(4n+1) .uk-card-default,
    .vd-partnerschaft > .uk-grid > *:nth-of-type(4n+2) .uk-card-default {
        padding-bottom: 120px;
    }
    .vd-partnerschaft > .uk-grid > *:nth-of-type(4n+2):after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: #000;
        display: block;
    }

    .vd-partnerschaft > .uk-grid > *:nth-of-type(4n+4) .uk-card-default {
        padding-top: 120px;
    }*/


.vd-corner-grid > .uk-grid > *:nth-of-type(even) .uk-grid > *:nth-of-type(1){
    order: 2;
}
.vd-corner-grid > .uk-grid > *:nth-of-type(even) .uk-grid > *:nth-of-type(1) img{
    border-radius: 50% 50% 50% 15px;
}
.vd-corner-grid > .uk-grid > *:nth-of-type(odd) .uk-grid > *:nth-of-type(1) img{
    border-radius: 50% 50% 15px 50%;
}
.vd-corner-grid > .uk-grid > *:nth-of-type(odd) .uk-grid > *:nth-of-type(2){
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.vd-corner-grid > .uk-grid > *:nth-of-type(even) .uk-grid > *:nth-of-type(2){
    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.vd-corner-grid .uk-grid .el-item .uk-width-expand {
    padding-bottom: 32px;
}

#tm-main > div:first-of-type + .uk-section-xsmall {
    padding: 22px 0;
}


/************************************ FONTS ************************************/

/* ============================================
   BID – Fluid Typography Variables
   ============================================ */

:root {
    /* Viewport-Range für die Skalierung */
    --vp-min: 480;   /* Mobile-Breakpoint  */
    --vp-max: 1200;  /* Desktop-Breakpoint */

    /* Schriftgrößen Mobile (px) */
    --fs-h1-min: 36;
    --fs-h2-min: 26;
    --fs-h3-min: 21;
    --fs-h4-min: 28;
    --fs-h5-min: 18;
    --fs-h6-min: 18;
    --fs-large-min: 17;
    --fs-base-min: 16;
    --fs-small-min: 14;

    /* Schriftgrößen Desktop (px) */
    --fs-h1-max: 54;
    --fs-h2-max: 32;
    --fs-h3-max: 24;
    --fs-h4-max: 40;
    --fs-h5-max: 24;
    --fs-h6-max: 21;
    --fs-large-max: 18;
    --fs-base-max: 16;
    --fs-small-max: 14;

    /* Fluid-Formel – nicht anfassen */
    --fluid-slope: calc((100vw - (var(--vp-min) * 1px)) / (var(--vp-max) - var(--vp-min)));

    --fs-h1: clamp(
            calc(var(--fs-h1-min) * 1px),
            calc(var(--fs-h1-min) * 1px + (var(--fs-h1-max) - var(--fs-h1-min)) * var(--fluid-slope)),
            calc(var(--fs-h1-max) * 1px)
    );
    --fs-h2: clamp(
            calc(var(--fs-h2-min) * 1px),
            calc(var(--fs-h2-min) * 1px + (var(--fs-h2-max) - var(--fs-h2-min)) * var(--fluid-slope)),
            calc(var(--fs-h2-max) * 1px)
    );
    --fs-h3: clamp(
            calc(var(--fs-h3-min) * 1px),
            calc(var(--fs-h3-min) * 1px + (var(--fs-h3-max) - var(--fs-h3-min)) * var(--fluid-slope)),
            calc(var(--fs-h3-max) * 1px)
    );
    --fs-h4: clamp(
            calc(var(--fs-h4-min) * 1px),
            calc(var(--fs-h4-min) * 1px + (var(--fs-h4-max) - var(--fs-h4-min)) * var(--fluid-slope)),
            calc(var(--fs-h4-max) * 1px)
    );
    --fs-h5: clamp(
            calc(var(--fs-h5-min) * 1px),
            calc(var(--fs-h5-min) * 1px + (var(--fs-h5-max) - var(--fs-h5-min)) * var(--fluid-slope)),
            calc(var(--fs-h5-max) * 1px)
    );
    --fs-h6: clamp(
            calc(var(--fs-h6-min) * 1px),
            calc(var(--fs-h6-min) * 1px + (var(--fs-h6-max) - var(--fs-h6-min)) * var(--fluid-slope)),
            calc(var(--fs-h6-max) * 1px)
    );
    --fs-large: clamp(
            calc(var(--fs-large-min) * 1px),
            calc(var(--fs-large-min) * 1px + (var(--fs-large-max) - var(--fs-large-min)) * var(--fluid-slope)),
            calc(var(--fs-large-max) * 1px)
    );
    --fs-small: calc(var(--fs-small-max) * 1px);
}

/* ============================================
   Anwendung
   ============================================ */

html,
body {
    font-size: calc(var(--fs-base-max) * 1px);
}

h1, .uk-h1 { font-size: var(--fs-h1); }
h2, .uk-h2 { font-size: var(--fs-h2); }
h3, .uk-h3, .uk-card-title { font-size: var(--fs-h3); }
h4, .uk-h4 { font-size: var(--fs-h4); }
h5, .uk-h5 { font-size: var(--fs-h5); }
h6, .uk-h6 { font-size: var(--fs-h6); }

.uk-text-large { font-size: var(--fs-large); }
.uk-text-small { font-size: var(--fs-small); }

/********************************* FONTS ENDE **********************************/





/********************************** NAVIGATION *********************************/

.vd-sub-menu ul.uk-nav > li {

}
ul.uk-nav-sub {
    padding: 0px 0 5px 15px;
}

.uk-navbar-container.uk-navbar-sticky {
    background-color: var(--sand);
}
@media (min-width: 960px) {
    .uk-logo img {
        width: 240px;
        height: auto;
        transform-origin: center center;
        transition: transform 0.3s ease;
    }
}


.uk-navbar-container.uk-navbar-sticky .uk-logo img {
    transform: scale(0.66);
}

.uk-navbar-nav>li>a {
    max-height: 35px;
    min-height: 10px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 20px;
}

.uk-navbar-nav>li,
.uk-navbar-right .uk-navbar-item {
    display: flex;
    align-items: baseline;
}
.uk-navbar-nav>li:hover>a {
    background-color: #F6EAD4;
}

/******************************** NAVIGATION ENDE ******************************/





/******************************* HIGHLIGHT PANEL *******************************/

.vd-highlight-panel {}
.vd-highlight-panel .uk-card:after {
    content: "";
    width: 27px;
    height: 15px;
    background: url(../images/arrow-right.svg) no-repeat center center;
    display: block;
    position: absolute;
    top: 35px;
    right: 35px;
    transition: all 0.3s;
}
.vd-highlight-panel .uk-card {
    transition: all 0.3s;
}
.vd-highlight-panel:hover .uk-card {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
    transform: translate(0, -3px);
    transition: all 0.3s;
}
.vd-highlight-panel:hover .uk-card:after {
    right: 30px;
    transition: all 0.3s;
}
.vd-highlight-panel .uk-card span {
    border-bottom: solid 1px var(--kosmos);
    font-weight: 700;
}
.vd-highlight-panel .uk-card-body {
    padding: 32px;
}

/**************************** HIGHLIGHT PANEL ENDE *****************************/





/******************************** KUNDENSTIMMEN ********************************/

.vd-kundenstimme-wrapper .uk-grid {align-items: end;}
.vd-kundenstimme-wrapper img {border-radius: 50% 50% 16px 50%}
.vd-kundenstimme-meta .uk-text-small {font-size: 12px; font-weight: 400;margin: 0; line-height: 1;}

/***************************** KUNDENSTIMMEN ENDE ******************************/





/********************************** FORMULARE **********************************/

.uk-form-controls {
    margin-top: 8px;
}
.uk-form-controls .uk-margin-small-left {
    margin-left: 5px !important;
}
.uk-checkbox {
    border-radius: 4px;
    border: solid 1.5px var(--kosmos);
}

.vd-form-hint {max-width: 560px;}

.vd-form-hint .el-title > *{
    vertical-align: middle;
}
.vd-form-hint .el-title span {
    display: inline-block;
    margin-right: 8px;
}

/******************************** FORMULARE ENDE *******************************/





/************************************* NEWS ************************************/
.vd-grid-tags {}
.vd-grid-tags a.uk-button {
    background: #F5EDE0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 14px;
    font-style: italic;
    color: #192344;
    font-weight: 400;
}

/********************************** NEWS ENDE **********************************/



/********************************** KARRIERE ***********************************/

.vd-icon-card {}
.vd-icon-card .uk-panel {
    aspect-ratio: 240 / 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
}
.vd-icon-card .uk-panel:hover {
    background-color: #192344;
    color: #fff;
    transition: all 0.3s;
    transform: translate(0, -3px);
}
.vd-icon-card .uk-panel .el-title {
    font-weight: 700;
}
.vd-icon-card .uk-panel:hover .el-title {
    color: #fff;
    transition: all 0.3s;
}
.vd-icon-card .uk-panel:hover img {
    filter: brightness(10);
    transition: all 0.3s;
}

/******************************* KARRIERE ENDE *********************************/





/********************************** ACCORDION **********************************/

.uk-accordion {
    border-radius: 16px !important;
    background-color: #fff;
}
.uk-accordion-default > * {
    padding: 16px;
    border-bottom: solid 1px #E2E3E4;
    background-color: transparent;
}
.uk-accordion-default > *:last-child {
    border-bottom: 0;
}

/******************************* ACCORDION ENDE ********************************/




/****************************** SOCIAL MEDIA GRID ******************************/

.vd-social-wrapper {
    background: #fff;
    border-radius: 16px;
}
.vd-social-header {
    padding: 16px;
}
.vd-social-content {
    padding: 0 16px;
}
.vd-social-wrapper + .vd-social-wrapper {margin-top: 40px;}

.vd-social-logo {
    background-color: var(--sand);
    padding: 5px 5px 6px 6px;
}
.vd-instagram .vd-social-logo {border-radius: 100px;}
.vd-linkedin .vd-social-logo {border-radius: 5px;}


.vd-social-image {
    aspect-ratio: 1.4 / 1;
    background-color: red;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
}
.vd-social-image img {
    object-fit: fill;
    width: 100%;
}
.vd-linkedin-meta {
    font-size: 14px;
    line-height: 1;
}

/*************************** SOCIAL MEDIA GRID ENDE ****************************/





/****************************** MANDANTENPORTAL ********************************/

.page-id-30 {}
.page-id-30 .el-item .el-image.uk-icon {
    width: 64px;
    height: 64px;
    border-radius: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-id-30 .uk-section-muted .el-item .el-image.uk-icon {
    background-color: var(--sand);
}


.page-id-30 .vd-accordion-large.uk-accordion {
    background: transparent;
}
.page-id-30 .vd-accordion-large .uk-accordion-title {
    font-size: 24px;
    font-weight: 700;
}
.page-id-30 .vd-accordion-large.uk-accordion > * {
    border-bottom: none;
    background-color: #fff;
    border-radius: 10px;
    padding: 24px 32px;
}
.page-id-30 .vd-accordion-large.uk-accordion > *:nth-of-type(n + 2) {
    margin-top: 16px;
}
.page-id-30 .uk-section-muted .vd-accordion-large.uk-accordion > * {
    border-bottom: none;
    background-color: var(--sand);
    border-radius: 10px;
    padding: 24px 32px;
}

/**************************** MANDANTENPORTAL ENDE *****************************/


@media screen and (max-width: 960px) {
    .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
        min-height: 75px;
    }
    .uk-navbar-container:not(.uk-navbar) {
        padding-top: 0;
        border-bottom: solid 1px #BCBDC0;
    }
}