/* Domain-spezifische Styles und Overrides */
:root {


    --color-primary: var(--knf-color-dunkelblau);
    --focus-outline-color: var(--knf-color-mittelsand);
    --focus-outline: 2px solid var(--focus-outline-color);

    --ast-global-color-0: var(--knf-color-dunkelblau);


    --font-family-base: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-family-bold: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-family-headline: var(--font-family-bold);
    --font-weight-headline: 700;



    /* =========================
       BASISFARBEN
       ========================= */

    --kitawerk-blau: #3C5EA8;
    --kitawerk-blau-dunkel: #304B86;

    --kitawerk-rot: #E85654;
    --kitawerk-rot-dunkel: #C94644;

    --kitawerk-gelb: #F9D66E;
    --kitawerk-gelb-dunkel: #E4BF4F;

    --kitawerk-text: #4A4A4A;
    --kitawerk-weiss: #FFFFFF;


    /* =========================
       HELLE FLÄCHEN
       je 2 Abstufungen
       ========================= */

    --kitawerk-blau-hell: #E8EEF7;
    --kitawerk-blau-mittelhell: #D5E0F1;

    --kitawerk-rot-hell: #FCE9E9;
    --kitawerk-rot-mittelhell: #F8D2D1;

    --kitawerk-gelb-hell: #FEF6DA;
    --kitawerk-gelb-mittelhell: #FCE9A9;


    /* =========================
       ALTE KNF-VARIABLEN
       vorübergehend auf Kitawerk gemappt
       ========================= */

    --knf-color-dunkelblau: var(--kitawerk-blau);
    --knf-color-petrol: var(--kitawerk-blau-dunkel);

    --knf-color-hellblau: var(--kitawerk-blau-hell);



    /* Achtung: alter Name "mittelblau" = jetzt Rot 
    --knf-color-mittelblau: var(--kitawerk-rot); */

    /* Achtung: alter Name "hellsand" = jetzt Hellgelb */
    --knf-color-hellsand: var(--kitawerk-gelb-hell);

    /* Achtung: alter Name "mittelsand" = jetzt Gelb */
    --knf-color-mittelsand: var(--kitawerk-gelb);

    --knf-color-mittelsand-heller: var(--kitawerk-gelb-mittelhell);
    --knf-color-mittelsand-dunkler: var(--kitawerk-gelb-dunkel);

    --knf-color-mittelblau-heller: var(--kitawerk-rot-hell);
    --knf-color-mittelblau-dunkler: var(--kitawerk-rot-dunkel);

    --color-text: var(--kitawerk-text);


    --feature-font-family: "Gloria Hallelujah", cursive;
    --feature-font-weight: 400;
    --feature-font-style: normal;


    --knf-fact-line-color: var(--kitawerk-gelb);
    --knf-fact-icon-bg-color: var(--kitawerk-blau-dunkel);
    --knf-fact-border-radius: var(--border-radius);

}



/*
body.hero-dark:not(.is-header-scrolled) .custom-logo {
    filter: invert(1);
}


body.is-header-scrolled .custom-logo {
    filter: none;
}
*/



/* ==================================================
   KITAWERK-FARBKLASSEN
   ================================================== */


/* BLAU */

.kitawerk-blau-h h1,
.kitawerk-blau-h h2,
.kitawerk-blau-h h3,
.kitawerk-blau-h h4,
.kitawerk-blau-h h5,
.kitawerk-blau-h1 h1,
.kitawerk-blau-h2 h2,
.kitawerk-blau-h3 h3,
.kitawerk-blau-h4 h4,
.kitawerk-blau-h5 h5,
.kitawerk-blau,
.kitawerk-blau *,
.text-kitawerk-blau,
.kitawerk-blau-text,
.text-kitawerk-blau *,
.kitawerk-blau-text *
{
    color: var(--kitawerk-blau) !important;
    --h-linie-color: var(--kitawerk-blau);
}

.fact-icon-bg-kitawerk-blau
{
    --knf-fact-icon-bg-color: var(--kitawerk-blau);
}
.buttons-bg-kitawerk-blau .button,
.buttons-bg-kitawerk-blau .vc_btn3,
.vc_btn3-container.bg-kitawerk-blau > .vc_btn3,
.bg-kitawerk-blau:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-blau > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-blau > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-blau .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-blau .vc-hoverbox-block
{
    background-color: var(--kitawerk-blau) !important;  
}

/* ----------------- */

.kitawerk-blau-hell-h h1,
.kitawerk-blau-hell-h h2,
.kitawerk-blau-hell-h h3,
.kitawerk-blau-hell-h h4,
.kitawerk-blau-hell-h h5,
.kitawerk-blau-hell-h1 h1,
.kitawerk-blau-hell-h2 h2,
.kitawerk-blau-hell-h3 h3,
.kitawerk-blau-hell-h4 h4,
.kitawerk-blau-hell-h5 h5,
.kitawerk-blau-hell,
.kitawerk-blau-hell *,
.text-kitawerk-blau-hell,
.kitawerk-blau-hell-text,
.text-kitawerk-blau-hell *,
.kitawerk-blau-hell-text *
{
    color: var(--kitawerk-blau-hell) !important;
    --h-linie-color: var(--kitawerk-blau-hell);
}

.fact-icon-bg-kitawerk-blau-hell
{
    --knf-fact-icon-bg-color: var(--kitawerk-blau-hell);
}
.buttons-bg-kitawerk-blau-hell .button,
.buttons-bg-kitawerk-blau-hell .vc_btn3,
.vc_btn3-container.bg-kitawerk-blau-hell > .vc_btn3,
.bg-kitawerk-blau-hell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-blau-hell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-blau-hell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-blau-hell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-blau-hell .vc-hoverbox-block
{
    background-color: var(--kitawerk-blau-hell) !important;  
}

/* ----------------- */

.kitawerk-blau-mittelhell-h h1,
.kitawerk-blau-mittelhell-h h2,
.kitawerk-blau-mittelhell-h h3,
.kitawerk-blau-mittelhell-h h4,
.kitawerk-blau-mittelhell-h h5,
.kitawerk-blau-mittelhell-h1 h1,
.kitawerk-blau-mittelhell-h2 h2,
.kitawerk-blau-mittelhell-h3 h3,
.kitawerk-blau-mittelhell-h4 h4,
.kitawerk-blau-mittelhell-h5 h5,
.kitawerk-blau-mittelhell,
.kitawerk-blau-mittelhell *,
.text-kitawerk-blau-mittelhell,
.kitawerk-blau-mittelhell-text,
.text-kitawerk-blau-mittelhell *,
.kitawerk-blau-mittelhell-text *
{
    color: var(--kitawerk-blau-mittelhell) !important;
    --h-linie-color: var(--kitawerk-blau-mittelhell);
}

.fact-icon-bg-kitawerk-blau-mittelhell
{
    --knf-fact-icon-bg-color: var(--kitawerk-blau-mittelhell);
}
.buttons-bg-kitawerk-blau-mittelhell .button,
.buttons-bg-kitawerk-blau-mittelhell .vc_btn3,
.vc_btn3-container.bg-kitawerk-blau-mittelhell > .vc_btn3,
.bg-kitawerk-blau-mittelhell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-blau-mittelhell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-blau-mittelhell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-blau-mittelhell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-blau-mittelhell .vc-hoverbox-block
{
    background-color: var(--kitawerk-blau-mittelhell) !important;  
}



/* ROT */

.kitawerk-rot-h h1,
.kitawerk-rot-h h2,
.kitawerk-rot-h h3,
.kitawerk-rot-h h4,
.kitawerk-rot-h h5,
.kitawerk-rot-h1 h1,
.kitawerk-rot-h2 h2,
.kitawerk-rot-h3 h3,
.kitawerk-rot-h4 h4,
.kitawerk-rot-h5 h5,
.kitawerk-rot,
.kitawerk-rot *,
.text-kitawerk-rot,
.kitawerk-rot-text,
.text-kitawerk-rot *,
.kitawerk-rot-text *
{
    color: var(--kitawerk-rot) !important;
    --h-linie-color: var(--kitawerk-rot);
}


.fact-icon-bg-kitawerk-rot
{
    --knf-fact-icon-bg-color: var(--kitawerk-rot);
}
.buttons-bg-kitawerk-rot .button,
.buttons-bg-kitawerk-rot .vc_btn3,
.vc_btn3-container.bg-kitawerk-rot > .vc_btn3,
.bg-kitawerk-rot:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-rot > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-rot > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-rot .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-rot .vc-hoverbox-block
{
    background-color: var(--kitawerk-rot) !important;  
}

/* ----------------- */

.kitawerk-rot-hell-h h1,
.kitawerk-rot-hell-h h2,
.kitawerk-rot-hell-h h3,
.kitawerk-rot-hell-h h4,
.kitawerk-rot-hell-h h5,
.kitawerk-rot-hell-h1 h1,
.kitawerk-rot-hell-h2 h2,
.kitawerk-rot-hell-h3 h3,
.kitawerk-rot-hell-h4 h4,
.kitawerk-rot-hell-h5 h5,
.kitawerk-rot-hell,
.kitawerk-rot-hell *,
.text-kitawerk-rot-hell,
.kitawerk-rot-hell-text,
.text-kitawerk-rot-hell *,
.kitawerk-rot-hell-text *
{
    color: var(--kitawerk-rot-hell) !important;
    --h-linie-color: var(--kitawerk-rot-hell);
}

.fact-icon-bg-kitawerk-rot-hell
{
    --knf-fact-icon-bg-color: var(--kitawerk-rot-hell);
}
.buttons-bg-kitawerk-rot-hell .button,
.buttons-bg-kitawerk-rot-hell .vc_btn3,
.vc_btn3-container.bg-kitawerk-rot-hell > .vc_btn3,
.bg-kitawerk-rot-hell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-rot-hell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-rot-hell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-rot-hell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-rot-hell .vc-hoverbox-block
{
    background-color: var(--kitawerk-rot-hell) !important;  
}

/* ----------------- */

.kitawerk-rot-mittelhell-h h1,
.kitawerk-rot-mittelhell-h h2,
.kitawerk-rot-mittelhell-h h3,
.kitawerk-rot-mittelhell-h h4,
.kitawerk-rot-mittelhell-h h5,
.kitawerk-rot-mittelhell-h1 h1,
.kitawerk-rot-mittelhell-h2 h2,
.kitawerk-rot-mittelhell-h3 h3,
.kitawerk-rot-mittelhell-h4 h4,
.kitawerk-rot-mittelhell-h5 h5,
.kitawerk-rot-mittelhell,
.kitawerk-rot-mittelhell *,
.text-kitawerk-rot-mittelhell,
.kitawerk-rot-mittelhell-text,
.text-kitawerk-rot-mittelhell *,
.kitawerk-rot-mittelhell-text *
{
    color: var(--kitawerk-rot-mittelhell) !important;
    --h-linie-color: var(--kitawerk-rot-mittelhell);
}

.fact-icon-bg-kitawerk-rot-mittelhell
{
    --knf-fact-icon-bg-color: var(--kitawerk-rot-mittelhell);
}
.buttons-bg-kitawerk-rot-mittelhell .button,
.buttons-bg-kitawerk-rot-mittelhell .vc_btn3,
.vc_btn3-container.bg-kitawerk-rot-mittelhell > .vc_btn3,
.bg-kitawerk-rot-mittelhell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-rot-mittelhell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-rot-mittelhell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-rot-mittelhell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-rot-mittelhell .vc-hoverbox-block
{
    background-color: var(--kitawerk-rot-mittelhell) !important;  
}



/* GELB */

.kitawerk-gelb-h h1,
.kitawerk-gelb-h h2,
.kitawerk-gelb-h h3,
.kitawerk-gelb-h h4,
.kitawerk-gelb-h h5,
.kitawerk-gelb-h1 h1,
.kitawerk-gelb-h2 h2,
.kitawerk-gelb-h3 h3,
.kitawerk-gelb-h4 h4,
.kitawerk-gelb-h5 h5,
.kitawerk-gelb,
.kitawerk-gelb *,
.text-kitawerk-gelb,
.kitawerk-gelb-text,
.text-kitawerk-gelb *,
.kitawerk-gelb-text *
{
    color: var(--kitawerk-gelb) !important;
    --h-linie-color: var(--kitawerk-gelb);
}


.fact-icon-bg-kitawerk-gelb
{
    --knf-fact-icon-bg-color: var(--kitawerk-gelb);
}
.buttons-bg-kitawerk-gelb .button,
.buttons-bg-kitawerk-gelb .vc_btn3,
.vc_btn3-container.bg-kitawerk-gelb > .vc_btn3,
.bg-kitawerk-gelb:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-gelb > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-gelb > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-gelb .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-gelb .vc-hoverbox-block
{
    background-color: var(--kitawerk-gelb) !important;  
}

/* ----------------- */

.kitawerk-gelb-hell-h h1,
.kitawerk-gelb-hell-h h2,
.kitawerk-gelb-hell-h h3,
.kitawerk-gelb-hell-h h4,
.kitawerk-gelb-hell-h h5,
.kitawerk-gelb-hell-h1 h1,
.kitawerk-gelb-hell-h2 h2,
.kitawerk-gelb-hell-h3 h3,
.kitawerk-gelb-hell-h4 h4,
.kitawerk-gelb-hell-h5 h5,
.kitawerk-gelb-hell,
.kitawerk-gelb-hell *,
.text-kitawerk-gelb-hell,
.kitawerk-gelb-hell-text,
.text-kitawerk-gelb-hell *,
.kitawerk-gelb-hell-text *
{
    color: var(--kitawerk-gelb-hell) !important;
    --h-linie-color: var(--kitawerk-gelb-hell);
}


.fact-icon-bg-kitawerk-gelb-hell
{
    --knf-fact-icon-bg-color: var(--on-bg-kitawerk-gelb-hell);
}
.buttons-bg-kitawerk-gelb-hell .button,
.buttons-bg-kitawerk-gelb-hell .vc_btn3,
.vc_btn3-container.bg-kitawerk-gelb-hell > .vc_btn3,
.bg-kitawerk-gelb-hell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-gelb-hell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-gelb-hell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-gelb-hell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-gelb-hell .vc-hoverbox-block
{
    background-color: var(--kitawerk-gelb-hell) !important;  
}

/* ----------------- */

.kitawerk-gelb-mittelhell-h h1,
.kitawerk-gelb-mittelhell-h h2,
.kitawerk-gelb-mittelhell-h h3,
.kitawerk-gelb-mittelhell-h h4,
.kitawerk-gelb-mittelhell-h h5,
.kitawerk-gelb-mittelhell-h1 h1,
.kitawerk-gelb-mittelhell-h2 h2,
.kitawerk-gelb-mittelhell-h3 h3,
.kitawerk-gelb-mittelhell-h4 h4,
.kitawerk-gelb-mittelhell-h5 h5,
.kitawerk-gelb-mittelhell,
.kitawerk-gelb-mittelhell *,
.text-kitawerk-gelb-mittelhell,
.kitawerk-gelb-mittelhell-text,
.text-kitawerk-gelb-mittelhell *,
.kitawerk-gelb-mittelhell-text *
{
    color: var(--kitawerk-gelb-mittelhell) !important;
    --h-linie-color: var(--kitawerk-gelb-mittelhell);
}


.fact-icon-bg-kitawerk-gelb-mittelhell
{
    --knf-fact-icon-bg-color: var(--kitawerk-gelb-mittelhell);
}
.buttons-bg-kitawerk-gelb-mittelhell .button,
.buttons-bg-kitawerk-gelb-mittelhell .vc_btn3,
.vc_btn3-container.bg-kitawerk-gelb-mittelhell > .vc_btn3,
.bg-kitawerk-gelb-mittelhell:not(.vc_column_container):not(.vc_btn3-container):not(.vc-hoverbox-wrapper),
.vc_column_container.bg-kitawerk-gelb-mittelhell > .vc_column-inner,
.vc_column_container.inner-bg-kitawerk-gelb-mittelhell > .vc_column-inner > .wpb_wrapper,
.ult-just-icon-wrapper.bg-kitawerk-gelb-mittelhell .aio-icon-img,
.vc-hoverbox-wrapper.bg-kitawerk-gelb-mittelhell .vc-hoverbox-block
{
    background-color: var(--kitawerk-gelb-mittelhell) !important;  
}



/* ==================================================
   FAQ / ACCORDION
   mittelhelles Gelb auf hellgelber Fläche
   ================================================== */

body:not(.specfake) .vc_general.vc_tta-style-classic
.vc_tta-panel .vc_tta-panel-heading {
    background-color: var(--kitawerk-gelb-mittelhell) !important;
    border-color: var(--kitawerk-gelb-mittelhell) !important;
}

body:not(.specfake) .vc_general.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title>a
{
    color: var(--color-text);
}


/* ==================================================
   FOOTER
   bewusst unabhängig von alten KNF-Namen
   ================================================== */

.site-footer {
    background-color: var(--kitawerk-bla0u) !important;
}

.site-footer *,
.site-footer a,
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
    color: var(--kitawerk-weiss) !important;
}




.feature-font-headline h1,
.feature-font-headline h2,
.feature-font-headline h3,
.feature-font-headline h4,
.feature-font-headline h5,
.feature-font-headline h6,
.feature-font,
.feature-font * 
{
    font-family: var(--feature-font-family) !important;
    font-weight: var(--feature-font-weight) !important;
    font-style:  var(--feature-font-style) !important;
}


/* --------------------------------------- */


body .dvinci-job-widget .row.dvinci-job-filters
{
    margin-bottom: 20px;
}

body .dvinci-job-widget .row {
    --dvinci-job-widget-gutter-x: 2rem;
    --dvinci-card-border-radius: var(--border-radius);
    --dvinci-headline-font-size: 21px;
    --dvinci-card-background-hover: #b3cbf2;
}

body .dvinci-job-widget .dvinci-job-list > li {
    margin-bottom: 2rem;
}

body .dvinci-job-widget .dvinci-job-entry
{
    display: block;
    position: relative;

    background-image: url(../images/kitawerk/ktw-bottom1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 100%;

    border: 1px solid rgba(45, 92, 151, 0.08);
    border-bottom: 0;
    border-radius: 18px;

    box-shadow:
        0 3px 8px rgba(25, 55, 90, 0.04),
        0 8px 24px rgba(25, 55, 90, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;

}

body .dvinci-job-widget .dvinci-job-entry:hover {
    background-image: url(../images/kitawerk/ktw-bottom1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 100%;
    background-color: var(--dvinci-card-background-hover, #f9f9f9);
    border-color: #b9b9b9;
}

body .dvinci-job-widget .card-body {
    padding: 16px 16px 35px 16px;
}



/* Mouseover */
@media (hover: hover) and (pointer: fine) {
    a.dvinci-job-entry.card:hover {
        transform: translateY(-5px);

        border-color: rgba(45, 92, 151, 0.2);

        box-shadow:
            0 8px 18px rgba(25, 55, 90, 0.08),
            0 18px 38px rgba(25, 55, 90, 0.13);
    }
}

/* Tastatur-Navigation */
a.dvinci-job-entry.card:focus-visible {
    outline: 3px solid #376da6;
    outline-offset: 3px;
}

/* Titel */
.dvinci-job-entry .dvinci-job-position {
    transition: color 0.25s ease;
}

.dvinci-job-entry:hover .dvinci-job-position {
    color: #214e85;
}

/* Animationen bei reduzierter Bewegung deaktivieren */
@media (prefers-reduced-motion: reduce) {
    a.dvinci-job-entry.card,
    .dvinci-job-entry .dvinci-job-position {
        transition: none;
    }

    a.dvinci-job-entry.card:hover {
        transform: none;
    }
}



body .dvinci-job-widget .dvinci-job-position
{
    display: flex;
}

body .dvinci-job-widget .dvinci-job-position:before
{
    content: '';
    display: block;
    background-image: url(../images/kitawerk/ktw-logobogen.svg);
    margin-right: 7px;
    flex: 0 0 25px;
    background-repeat: no-repeat;
    background-position: 50% 4px;
    margin-left: -7px;
}

body .dvinci-job-widget .dvinci-job-property {
    margin-bottom: 10px;
    font-weight: var(--dvinci-font-weight, 400);
    display: flex;
}

body ul.dvinci-list-inline.dvinci-list-categories {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-left: 1.5em;
    column-gap: 0.3em;
}

body ul.dvinci-list-categories > li.dvinci-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.2em;
}