/* DOM class inventory:
.drkn--teaser
.drkn--teaser__item
.drkn--teaser__image
.drkn--teaser__image img
.drkn--teaser__title
.drkn--teaser__title a
.drkn--teaser__content
.drkn--teaser__excerpt
.drkn--teaser__button-wrapper
*/

/* =============================================================================
   CONTAINER / GRID
   ============================================================================= */

.drkn--teaser {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Spalte */
    gap: 1.25rem;
}

@media (min-width: 768px) {
    /* Tablet Columns (1–6) */
    .drkn--teaser.drkn--teaser--tab-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .drkn--teaser.drkn--teaser--tab-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .drkn--teaser.drkn--teaser--tab-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .drkn--teaser.drkn--teaser--tab-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .drkn--teaser.drkn--teaser--tab-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .drkn--teaser.drkn--teaser--tab-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1200px) {
    /* Desktop Columns (1–6) override */
    .drkn--teaser.drkn--teaser--desk-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .drkn--teaser.drkn--teaser--desk-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .drkn--teaser.drkn--teaser--desk-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .drkn--teaser.drkn--teaser--desk-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .drkn--teaser.drkn--teaser--desk-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .drkn--teaser.drkn--teaser--desk-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* =============================================================================
   ITEM
   ============================================================================= */


.drkn--teaser__item {
    display: flex;
    flex-direction: column;
    width: 100%; /* Grid übernimmt die Spaltenbreite */
    border-radius: var(--site-border-radius, 0.5rem) !important;
    border: 4px solid var(--color-content-secondary);
    overflow: hidden;
}

/* Responsive columns based on drkn_team patterns */
@media (min-width: 576px) {
    .drkn--teaser__item {
    }
}

/* Hinweis: Breitensteuerung erfolgt über Grid am Container, keine item-spezifischen MQs nötig */

/* =============================================================================
   IMAGE
   ============================================================================= */

.drkn--teaser__image {
    overflow: hidden;
    display: block;
}

.drkn--teaser__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* =============================================================================
   CONTENT
   ============================================================================= */

.drkn--teaser__content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

/* Neuer Teaser-Vorschautext (Excerpt) */
.drkn--teaser__excerpt {
    color: var(--color-content-text, inherit);
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsive columns based on drkn_team patterns */
@media (min-width: 576px) {
    .drkn--teaser__content {
        padding: 2rem;
    }
}

.drkn--teaser__title {
    margin: 0;
    font-weight: var(--h3-font-weight, inherit);
    font-size: var(--h3-font-size, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
}

.drkn--teaser__title a {
    color: inherit;
    text-decoration: none;
}

.drkn--teaser__title a:hover {
    color: var(--color-content-link);
}

.drkn--teaser__button-wrapper {
    display: block;
    margin-top: auto;
}