/* Basislayout */
.knf-teaser {
    padding-top: var(--knf-teaser-padding-top, 0.7rem);
    padding-bottom: var(--knf-teaser-padding-bottom, 3rem);
}
.knf-teaser:first-child {
    padding-top: 0;
}
.knf-teaser:last-child {
    padding-bottom: 0;
}

.knf-teaser__inner {
    display: flex;
    flex-wrap: wrap;

    margin-left: -15px;
    margin-right: -15px;
}

/* Spalten – mobile: 100% Breite, Bild zuerst dank DOM-Reihenfolge */
.knf-teaser__media,
.knf-teaser__content {
    width: 100%;
}

.knf-teaser__content {
    padding-top: 40px;
}


/* WPBakery-Column-Floats für unseren Block neutralisieren */
.knf-teaser__inner > .wpb_column {
    float: none;
    /*
    padding-left: var(--knf-grid-gutter, 1rem);
    padding-right: var(--knf-grid-gutter, 1rem);
    */
}

/* Bild etwas hübsch machen */
.knf-teaser__media-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--knf-radius-lg, 0);
}

.knf-teaser__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Content-Box */
.knf-teaser__content-inner {
    background-color: var(--knf-color-surface, transparent);
    padding: 0.5rem 0 0; /* var(--knf-spacing-lg, 2rem); */
    border-radius: var(--knf-radius-lg, 1rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* gap: var(--knf-spacing-md, 1rem); */
}

/*
.knf-teaser__title {
    margin: 0;
}
*/

.knf-teaser__text
{
    margin-bottom: 1rem;
}

/* Button in eigener Zeile unten festpinnen */
.knf-teaser__button {
    margin-top: auto;
    align-self: flex-start;
}

/* Farbvarianten der Textbox (optional anpassen) */
.knf-teaser--bg-blau-mittel .knf-teaser__content-inner {
    background-color: var(--knf-color-blue-mid, #014f86);
    color: var(--knf-color-on-blue, #fff);
}

.knf-teaser--bg-blau-hell .knf-teaser__content-inner {
    background-color: var(--knf-color-blue-light, #e5f2ff);
}

/* usw. für die anderen Themes ... */



.knf-teaser__inner .vc_column-inner
{
  /* Equal height: 
  height: 100%; */

  padding-left: 20px;
  padding-right: 20px;
}


/*
.vc_row.vc_column-gap-30>.vc_column_container {
    padding: 15px;
}
*/



/* Ab Medium: zwei Spalten nebeneinander, mit Reverse-Option */
@media (min-width: 768px) {



    .knf-teaser--layout-image_left .knf-teaser__content-inner,
    .knf-teaser--layout-image_left .knf-teaser__content-inner .knf-teaser__title
    {
        text-align: left;
    }

    .knf-teaser--layout-image_right .knf-teaser__content-inner,
    .knf-teaser--layout-image_right .knf-teaser__content-inner .knf-teaser__title
    {
        text-align: right;
    }

    .knf-teaser--layout-image_right .knf-teaser__button
    {
        align-self: flex-end;
    }

    .knf-teaser__media,
    .knf-teaser__content {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .knf-teaser__media {
        order: 1;
    }

    .knf-teaser__content {
        order: 2;
        padding-top: 0;
    }

    .knf-teaser--reverse .knf-teaser__media {
        order: 2;
    }

    .knf-teaser--reverse .knf-teaser__content {
        order: 1;
    }
}