:root {
    --sand: #FAF2E5;
    --kosmos: #192344;
    --gray-500: #8B8C90;
}

.gray-500 {color: var(--gray-500);}

.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:not(.el-content) {
    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;
}


label a {text-decoration: underline;}
label a:hover {text-decoration: none;}

.vd-back-button {
    border-bottom: 0;
    font-size: 18px;
    font-weight: 400;
}

.news-template-default .uk-container-small,
.stellenangebote-template-default .uk-container-small {
    max-width: 850px;
}

/************************************ 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: 26;
    --fs-h2-min: 18;
    --fs-h3-min: 18;
    --fs-h4-min: 21;
    --fs-h5-min: 18;
    --fs-h6-min: 18;
    --fs-large-min: 15;
    --fs-base-min: 14;
    --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 *********************************/





.country-selector a {
    font-size: var(--fs-small);
    padding: 0;
    line-height: 1;
    margin-top: -2px;
    display: block;
}
.country-selector.weglot-inline a:hover {
    text-decoration: none;
    color: var(--kosmos);
}
.wgcurrent {
    display: none !important;
}

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

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

/* Dropdown + mobile drawer: background per Figma */
.tm-header .uk-navbar-dropdown {
    background-color: #FFFCF8;
    border-color: rgba(25, 35, 68, 0.12);
    box-shadow: 0 4px 24px rgba(25, 35, 68, 0.08);
}

.tm-header-mobile .mdn-element {
    --mdn-panel-bg: #FFFCF8 !important;
}

/* Leistungen mega-menu: compact layout (680px, content-sized columns) */
.tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large {
    width: 680px !important;
    max-width: 680px;
    min-width: 680px;
}

@media (min-width: 960px) {
    /* Note: a <style> node sits between dropdown and grid — use descendants, not > .uk-grid */
    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-grid.tm-grid-expand {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-grid-column-large {
        margin-left: -24px;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-grid-column-large > * {
        padding-left: 24px;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-grid.tm-grid-expand > [class*="uk-width-3-5"],
    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-grid.tm-grid-expand > [class*="uk-width-2-5"] {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .uk-panel.uk-flex {
        flex: 0 0 auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] > .uk-grid {
        flex: 0 0 auto !important;
        align-items: flex-start !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] .uk-flex-1 {
        flex: 0 0 auto !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] .uk-width-expand {
        flex: 1 1 auto;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] .el-content.uk-margin-auto-bottom,
    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] .uk-margin-auto-bottom {
        margin-bottom: 0 !important;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large [id*="menu-item-"] .el-image {
        width: 133px !important;
        max-width: 133px !important;
        height: auto;
    }

    .tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent > .uk-navbar-dropdown-large .vd-sub-menu {
        flex: 0 0 auto;
    }
}

.tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent .vd-sub-menu .uk-nav-sub a,
.tm-header .menu-item-type-post_type_archive.menu-item-object-leistungen.uk-parent .vd-sub-menu > ul.uk-nav > li > a {
    white-space: nowrap;
}

.tm-header .vd-sub-menu .uk-nav li > a {
    display: inline-block;
    padding: 4px 10px;
    margin-left: -10px;
    border-radius: 20px;
    transition: background-color 0.2s ease;
}

.tm-header .vd-sub-menu .uk-nav li > a:hover {
    background-color: #F6EAD4;
    text-decoration: none;
}

.tm-header.uk-active .uk-navbar-container {
    background-color: #faf2e5b8;
    backdrop-filter: blur(10px);
}
@media (min-width: 960px) {
    .uk-logo img {
        width: 240px;
        height: auto;
        transform-origin: center center;
        transition: transform 0.3s ease;
    }
}

.uk-navbar-left .uk-navbar-nav {
    margin-top: 7px;
}
.tm-header.uk-active .uk-navbar-container .uk-logo img {
    transform: scale(0.66);
    transition: all 0.3s ease;
    margin-top: -30px;
}
.tm-header .uk-navbar-item {
    min-height: 75px;
    transition: all 0.3s ease;
}

.uk-navbar-nav>li>a {
    max-height: 35px;
    min-height: 10px;
    padding-left: 14px;
    padding-right: 14px;
    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;
}

/* No persistent highlight for the current page in the main navbar */
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
    background-color: transparent;
}

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





/******************************** COOKIE CONSENT ******************************/

.tm-consent {
    background: linear-gradient(#faf2e5d1, #faf2e5);
    padding: 50px 20px;
}
/******************************** COOKIE CONSENT ENDE ******************************/





/******************************** BLOPS ******************************/
/* =========================================================
   Blop Image Masks
   --------------------------------------------------------
   Die Klasse .blop-1 ... .blop-9 bzw. .blop-wide-1 ... .blop-wide-4
   kann gesetzt werden auf:
     a) ein <img> direkt   (Gutenberg-Bildblock)
     b) einen Wrapper-<div> (YooTheme Bildelement:
        <div class="blop-wide-4"><picture><img class="el-image">)
   Die Maske passt sich automatisch an die jeweiligen Bildmasse an
   (kein festes Seitenverhaeltnis, kein Beschnitt) und respektiert
   die Ausrichtung (links/zentriert/rechts) von YooTheme.
   ========================================================= */

/* FALL A: Klasse direkt auf einem Bild -> Maske aufs Bild */
img[class*="blop-"],
picture[class*="blop-"] > img {
    display: block;
}

/* FALL B: Klasse auf YooTheme-Wrapper-<div>.
   Der <div> bleibt ein normaler Block (volle Breite), damit
   YooThemes Ausrichtung (uk-text-center etc.) weiter funktioniert.
   Die Maske wird NICHT auf den <div> gelegt, sondern auf das
   innere <img> -> sie liegt exakt ueber dem (ggf. schmaleren,
   zentrierten) Bild. */
div[class*="blop-"] > picture {
    display: inline-block;   /* schrumpft auf Bildbreite, folgt text-align */
    font-size: 0;            /* entfernt Inline-Whitespace unter dem Bild */
    line-height: 0;
}
div[class*="blop-"] > picture > img,
div[class*="blop-"] > img {
    display: block;
}

/* =========================================================
   Masken-Definitionen.
   - Liegt die Klasse auf img/picture (Fall A): direkt anwenden.
   - Liegt die Klasse auf einem <div> (Fall B): an das innere
     Bild weiterreichen, NICHT auf den div selbst.
   ========================================================= */

/* ----- Fall A: img / picture traegt die Klasse selbst ----- */
img.blop-1, picture.blop-1 > img { -webkit-clip-path: url(#blop-1); clip-path: url(#blop-1); }
img.blop-2, picture.blop-2 > img { -webkit-clip-path: url(#blop-2); clip-path: url(#blop-2); }
img.blop-3, picture.blop-3 > img { -webkit-clip-path: url(#blop-3); clip-path: url(#blop-3); }
img.blop-4, picture.blop-4 > img { -webkit-clip-path: url(#blop-4); clip-path: url(#blop-4); }
img.blop-5, picture.blop-5 > img { -webkit-clip-path: url(#blop-5); clip-path: url(#blop-5); }
img.blop-6, picture.blop-6 > img { -webkit-clip-path: url(#blop-6); clip-path: url(#blop-6); }
img.blop-7, picture.blop-7 > img { -webkit-clip-path: url(#blop-7); clip-path: url(#blop-7); }
img.blop-8, picture.blop-8 > img { -webkit-clip-path: url(#blop-8); clip-path: url(#blop-8); }
img.blop-9, picture.blop-9 > img { -webkit-clip-path: url(#blop-9); clip-path: url(#blop-9); }
img.blop-wide-1, picture.blop-wide-1 > img { -webkit-clip-path: url(#blop-wide-1); clip-path: url(#blop-wide-1); }
img.blop-wide-2, picture.blop-wide-2 > img { -webkit-clip-path: url(#blop-wide-2); clip-path: url(#blop-wide-2); }
img.blop-wide-3, picture.blop-wide-3 > img { -webkit-clip-path: url(#blop-wide-3); clip-path: url(#blop-wide-3); }
img.blop-wide-4, picture.blop-wide-4 > img { -webkit-clip-path: url(#blop-wide-4); clip-path: url(#blop-wide-4); }

/* ----- Fall B: <div> traegt die Klasse -> Maske aufs innere Bild ----- */
div.blop-1 > picture > img, div.blop-1 > img { -webkit-clip-path: url(#blop-1); clip-path: url(#blop-1); }
div.blop-2 > picture > img, div.blop-2 > img { -webkit-clip-path: url(#blop-2); clip-path: url(#blop-2); }
div.blop-3 > picture > img, div.blop-3 > img { -webkit-clip-path: url(#blop-3); clip-path: url(#blop-3); }
div.blop-4 > picture > img, div.blop-4 > img { -webkit-clip-path: url(#blop-4); clip-path: url(#blop-4); }
div.blop-5 > picture > img, div.blop-5 > img { -webkit-clip-path: url(#blop-5); clip-path: url(#blop-5); }
div.blop-6 > picture > img, div.blop-6 > img { -webkit-clip-path: url(#blop-6); clip-path: url(#blop-6); }
div.blop-7 > picture > img, div.blop-7 > img { -webkit-clip-path: url(#blop-7); clip-path: url(#blop-7); }
div.blop-8 > picture > img, div.blop-8 > img { -webkit-clip-path: url(#blop-8); clip-path: url(#blop-8); }
div.blop-9 > picture > img, div.blop-9 > img { -webkit-clip-path: url(#blop-9); clip-path: url(#blop-9); }
div.blop-wide-1 > picture > img, div.blop-wide-1 > img { -webkit-clip-path: url(#blop-wide-1); clip-path: url(#blop-wide-1); }
div.blop-wide-2 > picture > img, div.blop-wide-2 > img { -webkit-clip-path: url(#blop-wide-2); clip-path: url(#blop-wide-2); }
div.blop-wide-3 > picture > img, div.blop-wide-3 > img { -webkit-clip-path: url(#blop-wide-3); clip-path: url(#blop-wide-3); }
div.blop-wide-4 > picture > img, div.blop-wide-4 > img { -webkit-clip-path: url(#blop-wide-4); clip-path: url(#blop-wide-4); }
/******************************** BLOPS 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 .uk-card:hover {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
    transform: translate(0, -3px);
    transition: all 0.3s;
}
.vd-highlight-panel .uk-card:hover: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 **********************************/

.vd-form-wrapper .uk-container {max-width: 850px;}
.vd-form-wrapper .uk-tile-muted {border-radius: 10px;}

.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;
}
.uk-form-controls .uk-margin-small-left {
    margin-left: 10px !important;
}

/* === File-Upload Drop-Zone === */
[data-ye-form-field="anschreiben"] {
    /* Container für den Format-Hinweis unten */
}

/* Drop-Zone */
[data-ye-form-field="anschreiben"] .uk-form-controls {
    position: relative;
    padding: 78px 20px 32px;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2a4a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
    background-repeat: no-repeat;
    background-position: center 32px;
    background-size: 32px 32px;
    transition: border-color .2s ease, background-color .2s ease;
    cursor: pointer;
}

[data-ye-form-field="anschreiben"] .uk-form-controls:hover,
[data-ye-form-field="anschreiben"] .uk-form-controls:focus-within {
    border-color: #1e2a4a;
    background-color: #fafafa;
}

/* Haupttext */
[data-ye-form-field="anschreiben"] .uk-form-controls::before {
    content: "Datei hierher ziehen und loslassen oder";
    display: block;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
}

/* "Dateien durchsuchen"-Link */
[data-ye-form-field="anschreiben"] .uk-form-controls::after {
    content: "Dateien durchsuchen";
    display: block;
    color: #1e2a4a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Native Input unsichtbar, aber klickbar über die volle Fläche */
[data-ye-form-field="anschreiben"] input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Format-Hinweis unter der Box */
[data-ye-form-field="anschreiben"]::after {
    content: "Zulässige Formate: pdf, jpg, png, heic – maximal 10 MB.";
    display: block;
    margin-top: 10px;
    color: #9ca3af;
    font-size: 12px;
}

.anschreiben-file-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.anschreiben-file-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 14px;
}

.anschreiben-file-list .file-icon {
    flex-shrink: 0;
    font-size: 16px;
}

.anschreiben-file-list .file-name {
    flex: 1;
    color: #1e2a4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anschreiben-file-list .file-size {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 12px;
}

.anschreiben-file-list .file-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .15s ease, color .15s ease;
}

.anschreiben-file-list .file-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}
/******************************** 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;
    border: 0;
}

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



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

.vd-icon-card {}
.vd-icon-card .el-item.uk-panel {
    aspect-ratio: 240 / 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
    padding: 25px;
}
.vd-icon-card .el-item.uk-panel:hover {
    background-color: #192344;
    color: #fff;
    transition: all 0.3s;
    transform: translate(0, -3px);
}
.vd-icon-card .el-item.uk-panel .el-title {
    font-weight: 700;
}
body:not(.post-type-archive-leistungen) .vd-icon-card .el-item.uk-panel:hover .el-title {
    color: #fff;
    transition: all 0.3s;
}
body:not(.post-type-archive-leistungen) .vd-icon-card .el-item.uk-panel:hover img {
    filter: brightness(10);
    transition: all 0.3s;
}
.vd-icon-card .el-item.uk-panel .el-content {
    text-align: left;
    transition: all 0.3s;
    max-height: 0px;
    overflow: hidden;
}
.vd-icon-card .el-item.uk-panel:hover .el-content {
    text-align: left;
    transition: all 0.3s;
    max-height: 100px;
}
.vd-icon-card .el-item.uk-panel .el-content strong:first-of-type {
    text-transform: uppercase;
}

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





/***************************** DIGITALE PORTALE ********************************/

.post-type-archive-leistungen .vd-icon-card {}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel {
    aspect-ratio: 240 / 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s;
    padding: 25px;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover {
    background-color: #F6EAD4;
    transition: all 0.3s;
    transform: translate(0, -3px);
    color: var(--kosmos) !important;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-title {
    font-weight: 700;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover .el-title {
    transition: all 0.3s;
    font-size: 14px;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover img {
    transition: all 0.3s;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-content {
    text-align: left;
    transition: all 0.3s;
    max-height: 0px;
    overflow: hidden;
    margin-top: 0 !important;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover .el-content {
    text-align: left;
    transition: all 0.3s;
    max-height: 100px;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-content strong:first-of-type {
    text-transform: uppercase;
    font-size: 12px;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-content > *:first-child {
    margin-top: 20px;
    display: block;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-image {
    object-fit: contain;
    max-height: 100px;
    transition: all 0.3s;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover .el-image {
    object-fit: contain;
    max-height: 35px;
    transition: all 0.3s;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel .el-title {
    transition: all 0.3s;
}
.post-type-archive-leistungen .vd-icon-card .el-item.uk-panel:hover .el-title {
    margin-top: 8px !important;
    transition: all 0.3s;
}

/**************************** DIGITALE PORTALE 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;
}

.page-id-30 .tm-page,
.page-id-217 .tm-page,
.post-type-archive-stellenangebote .tm-page {
    background: url(/wp-content/uploads/2026/05/news_bg-logo.svg) no-repeat right 11vh;
}

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


@media screen and (max-width: 960px) {

    .uk-text-meta {
        font-size: 12px;
    }

    /* Mobile drawer: keep burger + panel above page content */
    .tm-header-mobile {
        position: relative;
        z-index: 1000;
    }
    .tm-header-mobile .mdn-element {
        position: relative;
        z-index: 1001;
    }
    .tm-header-mobile .mdn-toggle {
        position: relative;
        z-index: 1002;
    }
    .tm-header-mobile .mdn-drawer {
        z-index: 1003;
    }

    .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;
    }
    .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
        content: none;
    }
    .uk-button:not(.uk-button-text) {
        font-size: 15px;
        padding-left: 25px;
        padding-right: 25px;
        line-height: 45px;
    }
    .uk-button-text {
        font-size: 15px;
    }
    .uk-section-large {
        padding-top: 110px;
        padding-bottom: 110px;
    }
    .uk-section-large-bottom {
        padding-bottom: 110px;
    }
    .uk-section {
        padding-top: 110px;
        padding-bottom: 110px;
    }
    .uk-section-small {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .uk-section-xsmall-top {
        padding-top: 40px;
    }
    .uk-section-xsmall {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .vd-count-up .el-item {
        text-align: left;
        position: relative;
        padding-left: 130px;
    }
    .vd-count-up .el-image {
        position: absolute;
        left: 40px;
    }
    .vd-count-up .el-title {
        margin-top: 0 !important;
    }
    .vd-corner-grid picture img {
        max-width: 50%;
    }
    .vd-corner-grid > .uk-grid > *:nth-of-type(even) .uk-grid > *:nth-of-type(1) {
        order: 0;
        text-align: right;
        margin-bottom: 10px;
    }
    .vd-corners .uk-button {display: none;}
    .vd-corners .uk-text-large {
        font-size: 10px;
    }

    .uk-form-label {
        font-size: 15px;
    }
    .uk-accordion-default .uk-accordion-title {
        font-size: 16px;
    }
}

/* ── Mobile: prevent text overflow without breaking UIkit grid gutters ── */
@media (max-width: 959px) {
    /*
     * DO NOT use overflow-x: hidden on sections or cards —
     * UIkit grids use negative left margins for gutters and
     * overflow hidden clips them, stripping left padding from cards.
     * Instead, force all text to wrap within its container.
     */

    /* All headings site-wide: break long words */
    h1, h2, h3, h4, h5, h6,
    .uk-h1, .uk-h2, .uk-h3, .uk-h4,
    .uk-heading-medium, .uk-heading-large {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* Section-muted headings: also clamp font-size */
    .uk-section-muted h1,
    .uk-section-muted h2,
    .uk-section-muted h3,
    .uk-section-muted .uk-h1,
    .uk-section-muted .uk-h2 {
        font-size: clamp(1.3rem, 5.5vw, 2.4rem) !important;
        line-height: 1.25 !important;
    }

    /* Card text: wrap without clipping */
    .uk-card-body,
    .uk-card-title,
    .el-content,
    .el-title {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* Search result cards specifically */
    .vd-highlight-panel .uk-card-body,
    .vd-highlight-panel .uk-panel {
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
}

/* ── Über uns: spacing above "Als unabhängiges Unternehmen" block ─────── */
.vd-ueber-uns-spacing {
    margin-top: 120px !important;
    display: block;
}

/* ── Mandantenportal: circular icon badges ─────────────────────────────── */
/* The element is <span class="el-image uk-icon"> — UIkit forces height:auto on
   .uk-icon, collapsing the span to the SVG height (28px) while width stays at
   60px → oval. Use !important on both dimensions to win that specificity fight. */
.vd-mandantenportal-direkt .el-image {
    background: #1d2c5b !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    margin-bottom: 20px;
}

.vd-mandantenportal-direkt .el-image svg {
    width: 24px !important;
    height: 24px !important;
    overflow: visible;
    flex-shrink: 0;
}

/* SVG paths have hardcoded fill="#192344" — override to white */
.vd-mandantenportal-direkt .el-image svg path,
.vd-mandantenportal-direkt .el-image svg rect,
.vd-mandantenportal-direkt .el-image svg polygon,
.vd-mandantenportal-direkt .el-image svg circle {
    fill: #ffffff !important;
}

/* ── Leistungen: Kosmos-blau primary buttons ───────────────────────────── */
.post-type-archive-leistungen .uk-button-primary,
.single-leistungen .uk-button-primary {
    background-color: var(--kosmos, #192344) !important;
    border-color: var(--kosmos, #192344) !important;
    color: #fff !important;
}

/* Startseite: compact hero so cert row peeks into the fold below Über 40 Jahre */
@media (min-width: 960px) {
    body.home #page\#1 > .uk-section,
    body.page-id-26 #page\#1 > .uk-section {
        min-height: 0 !important;
        height: auto !important;
        align-items: flex-start !important;
        padding-top: 60px !important;
        padding-bottom: 77px !important;
    }

    body.home #page\#1 .uk-text-meta,
    body.page-id-26 #page\#1 .uk-text-meta {
        margin-top: 0;
    }

    body.home #tm-main > .uk-section-xsmall,
    body.page-id-26 #tm-main > .uk-section-xsmall {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* Leistungen archive + detail: compact hero so certification row fits above the fold */
@media (min-width: 960px) {
    .post-type-archive-leistungen #leistungen-hero,
    .post-type-archive-leistungen .tm-main > .uk-section:first-child,
    .single-leistungen .tm-main > .uk-section:first-child {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 24px !important;
        padding-bottom: 8px !important;
        overflow: hidden;
    }

    .post-type-archive-leistungen #leistungen-hero .uk-text-meta,
    .post-type-archive-leistungen .tm-main > .uk-section:first-child .uk-text-meta,
    .single-leistungen .tm-main > .uk-section:first-child .uk-text-meta {
        margin-top: 0;
    }

    .post-type-archive-leistungen #leistungen-hero h1,
    .post-type-archive-leistungen .tm-main > .uk-section:first-child h1,
    .single-leistungen .tm-main > .uk-section:first-child h1 {
        margin-top: 0;
    }

    .post-type-archive-leistungen #leistungen-hero h5.fw-200,
    .post-type-archive-leistungen .tm-main > .uk-section:first-child h5.fw-200,
    .single-leistungen .tm-main > .uk-section:first-child h4.fw-200,
    .single-leistungen .tm-main > .uk-section:first-child h5.fw-200 {
        margin-bottom: 0.5rem;
    }

    .post-type-archive-leistungen #leistungen-hero .uk-margin-top,
    .post-type-archive-leistungen .tm-main > .uk-section:first-child .uk-button,
    .single-leistungen .tm-main > .uk-section:first-child .uk-margin-top {
        margin-top: 1rem !important;
    }

    /* Scroll CTA → cert row: double uk-margin-large-bottom spacing */
    .post-type-archive-leistungen #leistungen-hero .uk-margin-large-top:has(a[href="#leistungen-zertifizierung"]),
    .post-type-archive-leistungen #leistungen-hero .uk-margin-large-top:has(a[href*="#leistungen-zertifizierung"]),
    .single-leistungen .uk-section.uk-section-xsmall-top .uk-margin-large-top:has(a[href*="#leistungen-zertifizierung"]),
    .single-leistungen .uk-section.uk-section-xsmall-top .uk-margin-large-top:has(a[uk-scroll]) {
        margin-bottom: calc(var(--uk-margin-large-margin, 70px) * 2) !important;
    }

    .post-type-archive-leistungen #leistungen-zertifizierung,
    .single-leistungen #leistungen-zertifizierung {
        padding-top: 8px !important;
        padding-bottom: 16px !important;
    }

    .post-type-archive-leistungen #leistungen-zertifizierung .uk-grid,
    .single-leistungen #leistungen-zertifizierung .uk-grid {
        margin-top: 0;
    }

    /* Single pages: keep scroll CTA from overlapping the cert row */
    .single-leistungen .uk-section.uk-section-xsmall-top .uk-margin-top,
    .single-leistungen .uk-section.uk-section-xsmall-top .uk-margin-large-top {
        margin-top: 16px !important;
    }

    .single-leistungen .uk-section.uk-section-xsmall-top h4.fw-200,
    .single-leistungen .uk-section.uk-section-xsmall-top h5.fw-200 {
        margin-bottom: 0 !important;
    }
}

/* ── Über uns: trust section (icons, seals, headlines) ─────────────────── */
/* Icon row (first grid) */
.vd-ueber-uns-trust .uk-grid:first-of-type .el-item .el-image,
.vd-ueber-uns-trust .uk-grid:first-of-type > * > .uk-panel .el-image {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
}
.vd-ueber-uns-trust .uk-grid:first-of-type .el-item .el-image img,
.vd-ueber-uns-trust .uk-grid:first-of-type .el-item .el-image svg {
    width: 64px !important;
    height: 64px !important;
}
/* icon_mitglied.svg natural size is 49×49 — override every size constraint */
.vd-ueber-uns-trust img.el-image[src*="icon_mitglied"] {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
}
.vd-ueber-uns-trust .el-title {
    font-weight: 700;
    color: var(--kosmos, #192344);
}

/* Award / seal logos (logo row uses uk-grid-match) */
.vd-ueber-uns-trust .uk-grid-match {
    margin-top: 48px;
    --uk-grid-gap: 64px;
    align-items: center !important;
}
.vd-ueber-uns-trust .uk-grid-match > *,
.vd-ueber-uns-trust .uk-grid-match > * > *,
.vd-ueber-uns-trust .uk-grid-match .el-item,
.vd-ueber-uns-trust .uk-grid-match .uk-panel,
.vd-ueber-uns-trust .uk-grid-match picture {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}
.vd-ueber-uns-trust .uk-grid-match .el-item .el-image {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
}
.vd-ueber-uns-trust .uk-grid-match .el-image img {
    height: 197px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ── Über uns / Karriere CTA blocks ─────────────────────────────────────── */
.vd-ueber-uns-karriere-cta .uk-container,
.vd-karriere-akademie .uk-container {
    max-width: 900px;
}

/* 10-Säulen grid needs full content width; intro text stays at 900px */
.vd-karriere-akademie .uk-container:has(.vd-karriere-saeulen) {
    max-width: 1280px;
}
.vd-ueber-uns-karriere-cta .el-row,
.vd-karriere-akademie .el-row:last-child {
    justify-content: center;
    text-align: center;
}

/* ── Hilfe: intro text under Häufige Fragen ─────────────────────────────── */
.vd-hilfe-faq .fw-200,
.vd-hilfe-faq .uk-h4 {
    font-weight: 200;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--kosmos, #192344);
}

/* ── Search: submit button + term highlight ──────────────────────────────── */
.tm-search .uk-search-input {
    border-radius: 999px 0 0 999px;
}
.tm-search .uk-search-icon:not(.uk-search-icon-flip),
.uk-search .uk-search-icon:not(.uk-search-icon-flip) {
    border-radius: 0 999px 999px 0;
    background: var(--kosmos, #192344);
    color: #fff;
    width: 48px;
    justify-content: center;
}
.vd-search-highlight,
mark.vd-search-highlight {
    background: #F5EDE0;
    color: var(--kosmos, #192344);
    padding: 0 2px;
    border-radius: 2px;
}

/* ── Karriere: 10 Säulen — larger tiles, titles must not clip ─────────────── */
@media (min-width: 960px) {
    .vd-karriere-saeulen.vd-hover-grid-layout-343 {
        --vd-hg-gap: 20px;
    }
}

.vd-karriere-saeulen .vd-hg-title {
    font-size: clamp(17px, 1.35vw, 22px);
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: break-word;
    max-width: 100%;
    padding-inline: 8px;
    box-sizing: border-box;
}

.vd-karriere-saeulen .vd-hg-top {
    padding: clamp(16px, 6%, 28px);
}

.vd-karriere-saeulen .vd-hg-tile {
    aspect-ratio: 1 / 1.08;
}

.vd-karriere-saeulen .vd-hg-icon {
    margin-bottom: 10px;
}

.vd-karriere-saeulen .vd-hg-icon img {
    max-height: 44px;
    max-width: 44px;
    width: auto;
    height: auto;
}

/* Karriere: Arbeitgeber der Zukunft — viewBox cropped to 72×72 badge, SVGs now 73×73 */
.page-id-449 img.el-image[src*="karriere-icon-"] {
    width: 73px !important;
    height: 73px !important;
    min-width: 73px !important;
    min-height: 73px !important;
    max-width: 73px !important;
    max-height: 73px !important;
}


/* Leistungen pages: Mandantenportal navbar button as secondary */
.post-type-archive-leistungen .tm-header .uk-navbar-right a[href*="/mandantenportal/"].uk-button-primary,
.single-leistungen .tm-header .uk-navbar-right a[href*="/mandantenportal/"].uk-button-primary {
    background: transparent !important;
    color: var(--kosmos, #192344) !important;
    border: 1px solid var(--kosmos, #192344) !important;
    box-shadow: none !important;
}
.post-type-archive-leistungen .tm-header .uk-navbar-right a[href*="/mandantenportal/"].uk-button-primary:hover,
.single-leistungen .tm-header .uk-navbar-right a[href*="/mandantenportal/"].uk-button-primary:hover {
    background: var(--kosmos, #192344) !important;
    color: #fff !important;
}

/* Leistungen pages: portal-card "Einblick in die digitalen Portale" buttons as secondary (outlined) */
.post-type-archive-leistungen a.el-link.uk-button-primary[href*="/digitale-portale/"],
.single-leistungen a.el-link.uk-button-primary[href*="/digitale-portale/"] {
    background: transparent !important;
    color: var(--kosmos, #192344) !important;
    border: 1px solid var(--kosmos, #192344) !important;
    box-shadow: none !important;
}
.post-type-archive-leistungen a.el-link.uk-button-primary[href*="/digitale-portale/"]:hover,
.single-leistungen a.el-link.uk-button-primary[href*="/digitale-portale/"]:hover {
    background: var(--kosmos, #192344) !important;
    color: #fff !important;
}

/* Leistungen archive + single pages: "... unverbindlich anfragen" CTA buttons as secondary (outlined) */
.post-type-archive-leistungen a.el-link.uk-button-primary[uk-scroll],
.single-leistungen a.el-link.uk-button-primary[uk-scroll] {
    background: transparent !important;
    color: var(--kosmos, #192344) !important;
    border: 1px solid var(--kosmos, #192344) !important;
    box-shadow: none !important;
}
.post-type-archive-leistungen a.el-link.uk-button-primary[uk-scroll]:hover,
.single-leistungen a.el-link.uk-button-primary[uk-scroll]:hover {
    background: var(--kosmos, #192344) !important;
    color: #fff !important;
}

/* Leistungen pages: "Zur Übersicht" buttons inside the navbar dropdowns (Leistungen + Über uns) as secondary.
   Anchored to .uk-navbar-dropdown (not the menu <li>) because UIkit relocates the drop at runtime. */
.post-type-archive-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/leistungen"],
.single-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/leistungen"],
.post-type-archive-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/ueber-uns"],
.single-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/ueber-uns"] {
    background: transparent !important;
    color: var(--kosmos, #192344) !important;
    border: 1px solid var(--kosmos, #192344) !important;
    box-shadow: none !important;
}
.post-type-archive-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/leistungen"]:hover,
.single-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/leistungen"]:hover,
.post-type-archive-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/ueber-uns"]:hover,
.single-leistungen .uk-navbar-dropdown a.el-link.uk-button-primary[href="/ueber-uns"]:hover {
    background: var(--kosmos, #192344) !important;
    color: #fff !important;
}

/* Leistungen single pages: extra bottom padding under the certification section
   so the following blue (uk-section-primary) section doesn't peek as a line */
.single-leistungen #leistungen-zertifizierung {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
}
/* Forderungskauf + Wirtschaftsauskünfte: more space under the hero CTA button (instead of
   bigger padding under the certs) so the certs sit lower and there's less orphaned white space */
@media (min-width: 960px) {
    .single-leistungen.postid-35 .uk-section.uk-section-xsmall-top .uk-margin-large-top:has(a[uk-scroll]),
    .single-leistungen.postid-36 .uk-section.uk-section-xsmall-top .uk-margin-large-top:has(a[uk-scroll]) {
        margin-bottom: calc(var(--uk-margin-large-margin, 70px) * 3) !important;
    }
}
/* Inkasso: its certs section has no id and no top gap (preceding section removes bottom
   padding), so add top spacing to match the other leistungen pages */
.single-leistungen.postid-34 .uk-section-default.uk-padding-remove-top.uk-section-xsmall-bottom {
    padding-top: 20px !important;
}

/* Mahnwesen: push button down so blue backdrop doesn't peek above the fold */
@media (min-width: 960px) {
    .single-leistungen.postid-37 .uk-section.uk-section-xsmall-top .uk-margin-large-top:has(a[uk-scroll]) {
        margin-bottom: calc(var(--uk-margin-large-margin, 70px) * 3) !important;
    }
}

/* Über uns: highlight inline Akademie link in Was uns auszeichnet */
.page-id-23 h3.el-title a[href="/karriere/"],
.page-id-23 h3.el-title a[href*="/karriere/"] {
    color: var(--kosmos, #192344);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    box-decoration-break: clone;
    background: linear-gradient(transparent 62%, #f5ede0 62%);
}

.page-id-23 h3.el-title a[href="/karriere/"]:hover,
.page-id-23 h3.el-title a[href*="/karriere/"]:hover {
    text-decoration-thickness: 3px;
}

.vd-ueber-uns-trust .el-title a,
.vd-ueber-uns-trust .el-content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.vd-ueber-uns-trust .el-title a:hover,
.vd-ueber-uns-trust .el-content a:hover {
    color: var(--kosmos, #192344);
}

/* Weglot: show only the non-active language as a clickable link next to the globe */
.country-selector.weglot-inline {
    display: inline-flex !important;
    align-items: center;
    line-height: 1;
}
.country-selector.weglot-inline ul {
    display: inline-flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
.country-selector.weglot-inline li {
    display: inline-flex !important;
}
.tm-header .weglot-toggle .mdn-item-label {
    font-weight: 500;
}

/* ── Mandantenportal: 3-tile grid ─────────────────────────────────────────── */
.vd-mandantenportal-page .tm-page {
    background-color: var(--sand, #faf2e5);
}

.vd-mandantenportal-page .tm-main {
    padding-top: 0;
}

.vd-mandantenportal-page .tm-sidebar {
    display: none !important;
}

.vd-mandantenportal-page .tm-main .uk-width-expand {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}

/* Watermark: cover-sized, bottom-right — mirrors the Startseite hero treatment
   so the full brand wave ring fills the section background prominently. */
.vd-mandantenportal-direkt.vd-mandantenportal-tiles {
    background-color: var(--sand, #faf2e5);
    background-image: url(/wp-content/uploads/2026/03/home_bg-logo.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    overflow: hidden;
    min-height: calc(100vh - 80px);
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Centre the content column. The theme gives .uk-container 80px side padding
   at large widths but sizes it content-box, so width:100% + max-width:1320px
   resolved to a 1480px border-box that overflowed and shifted everything right.
   Force border-box + auto margins so it is genuinely centred. */
.vd-mandantenportal-direkt.vd-mandantenportal-tiles > .uk-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.vd-mandantenportal-page .uk-section-media,
.vd-mandantenportal-direkt .uk-section-media {
    display: none !important;
}

/* Footer sits on plain sand — no watermark bleed-through */
.vd-mandantenportal-page .tm-main > .uk-section:not(.vd-mandantenportal-direkt),
.vd-mandantenportal-page .tm-page > .uk-section {
    background-color: var(--sand, #faf2e5) !important;
    background-image: none !important;
}

/* Safari/iOS can fail to shrink-wrap width:fit-content inside a flex column
   with align-items:center, leaving boxes misaligned. Drop the flex-based
   centering and let each child center itself directly instead. */
.vd-mandantenportal-tiles .vd-mandantenportal-intro .uk-width-1-1 {
    display: block;
}
.vd-mandantenportal-tiles .vd-mandantenportal-intro .uk-width-1-1 > .uk-text-meta {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.vd-mandantenportal-tiles .vd-mandantenportal-intro .uk-width-1-1 > h5 {
    width: 100%;
}

.vd-mandantenportal-tiles .vd-mandantenportal-intro {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 2.5rem;
}
/* .vd-mandantenportal-intro is a uk-grid: UIkit's gutter trick relies on
   margin-left:-Xpx on the grid cancelling padding-left:Xpx on its child.
   Overriding margin-left to "auto" above breaks that cancellation, leaving
   the child's padding-left unmatched and shifting all content right. */
.vd-mandantenportal-tiles .vd-mandantenportal-intro > * {
    padding-left: 0 !important;
}

.vd-mandantenportal-tiles .vd-mandantenportal-intro h1 {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.vd-mandantenportal-tiles .vd-mandantenportal-intro .uk-text-large,
.vd-mandantenportal-tiles .vd-mandantenportal-intro .el-content,
.vd-mandantenportal-tiles .vd-mandantenportal-intro .fw-200 {
    font-weight: 200;
    line-height: 1.5;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Tile grid only — not the intro row grid.
   Keep UIkit's native gutter (negative margin on the row + padding on the
   items); zeroing it indented the first card by one gutter and pushed the
   whole row off-centre. Only equalise card heights here. */
.vd-mandantenportal-tiles .uk-margin > .uk-grid {
    align-items: stretch;
}

.vd-mandantenportal-tiles .uk-margin > .uk-grid > * {
    display: flex;
}

.vd-mandantenportal-tiles .el-item.uk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.vd-mandantenportal-tiles .el-item,
.vd-mandantenportal-tiles .uk-panel {
    height: 100%;
    width: 100%;
}

.vd-mandantenportal-tiles .uk-panel {
    display: flex;
    flex-direction: column;
}

.vd-mandantenportal-tiles .el-content {
    flex: 1 1 auto;
}

.vd-mandantenportal-tiles .el-title {
    line-height: 1.25;
    hyphens: manual;
    overflow-wrap: normal;
}

.vd-mandantenportal-tiles .el-item.uk-card > .uk-margin-top:has(.el-link),
.vd-mandantenportal-tiles .el-item.uk-card > div:last-child:has(.el-link) {
    margin-top: auto !important;
    padding-top: 1.5rem;
}

.vd-mandantenportal-tiles .el-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.vd-mandantenportal-tiles .el-link,
.vd-mandantenportal-tiles .el-link a {
    vertical-align: middle;
}

/* Small circle-arrow — subtle, matches the site's link language */
.vd-mandantenportal-tiles .el-link::after {
    content: '';
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8.5' stroke='%23192344'/%3E%3Cpath d='M6.75 9h4.5M9 6.75L11.25 9 9 11.25' stroke='%23192344' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 6px;
    transition: transform 0.2s ease;
}
.vd-mandantenportal-tiles .el-link:hover::after {
    transform: translateX(2px);
}

@media (max-width: 959px) {
    .vd-mandantenportal-direkt.vd-mandantenportal-tiles {
        padding-top: 32px;
        padding-bottom: 48px;
    }

    .vd-mandantenportal-tiles .uk-margin > .uk-grid > * + * {
        margin-top: 16px;
    }
}

/* Leistungen: add breathing room between hero button and cert badges on mobile */
@media (max-width: 959px) {
    .post-type-archive-leistungen a[href="#leistungen-zertifizierung"].uk-button {
        margin-bottom: 32px;
    }
}

/* Navigation: switch to mobile view below 1250px (UIkit default is 960px) */
@media (min-width: 960px) and (max-width: 1249px) {
    .tm-header.uk-visible\@m {
        display: none !important;
    }
    .tm-toolbar.uk-visible\@m {
        display: none !important;
    }
    .tm-header-mobile.uk-hidden\@m {
        display: block !important;
    }
}

/* Mandantenportal: sub-headline uses fixed uk-width-large (450px), which
   overflows and de-centers on narrow mobile viewports. Cap it to the
   available width so uk-margin-auto can actually center it. */
@media (max-width: 479px) {
    .vd-mandantenportal-intro .uk-width-large {
        width: 100% !important;
        max-width: 100%;
    }
}