.kss-teaser-blog-articel__content {
    text-decoration: none;
}


/* ===================================
   Teaser Blog Artikel Block - Frontend
   =================================== */

.kss-teaser-blog-articel {
    --teaser-gap: 2rem;
    --teaser-border-radius: var(--kss-brand-border-radius-default, 8px);
    --teaser-transition: all 0.3s ease;

    overflow: hidden;
}

/* Normaler Block nutzt theme_helper.css Container - kein extra Styling nötig */

/* Content Container - Standard mit Grid, Full-Width mit Flexbox */
.kss-teaser-blog-articel__content {
    background: var(--teaser-bg, #fff);
    color: var(--teaser-text-color, var(--kss-copy-text-color-primary, #333));
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--teaser-transition);
}

/* Nur bei NICHT Full-Width: Grid Layout */
.kss-teaser-blog-articel:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__content {
    display: grid;
    gap: 0;
}


/* Layout Grid - Desktop Normal */
@media (min-width: 768px) {
    /* Text links, Bild rechts */
    .kss-teaser-blog-articel.kss-teaser-blog-articel--content-image:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__content {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "text image";
    }

    /* Bild links, Text rechts */
    .kss-teaser-blog-articel.kss-teaser-blog-articel--image-content:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__content {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "image text";
    }
}

/* Layout Grid - Desktop Full-Width (Bild 50vw, Text im Container zentriert) */
@media (min-width: 768px) {

    /* Full-Width: Flexbox mit 50/50 Split */
    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__content {
        display: flex;
        align-items: stretch;
        min-height: 75%;
        gap: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Bild links, Text rechts */
    .kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--image-content .kss-teaser-blog-articel__content {
        flex-direction: row;
    }

    /* Text links, Bild rechts */
    .kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--content-image .kss-teaser-blog-articel__content {
        flex-direction: row-reverse;
    }

    /* Bild: 50% Bildschirmbreite */
    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__image {
        width: 50vw;
        height: auto;
        min-height: 100%;
    }

    /* Text: andere 50%, Inhalt zentriert */
    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__text {
        display: flex;
        max-width: 60%;
        flex-direction: column;
        justify-content: center;
        padding: 4rem 2rem;
    }

    /* Bei sehr großen Screens (4K+): Nur Text besser begrenzen */
    @media (min-width: 2000px) {
        .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__text {
            padding-left: calc((50vw - 500px) / 2);
            padding-right: calc((50vw - 500px) / 2);
        }
    }
}

/* Layout Grid - Mobile */
@media (max-width: 767px) {
    .kss-teaser-blog-articel:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__content {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "text";
    }

    .kss-teaser-blog-articel {
        --teaser-gap: 1.5rem;
    }

    /* Full-Width Mobile: Vertikal gestapelt */
    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__content {
        flex-direction: column !important;
        min-height: auto;
    }

    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__image {
        flex: none;
        width: 100%;
        height: 40vh;
    }

    .kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__text {
        flex: none;
        width: 100%;
        padding: 2rem 1.5rem;
    }
}

/* Image Section - nur grid-area wenn NICHT Full-Width */
.kss-teaser-blog-articel:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__image {
    grid-area: image;
    aspect-ratio: 16/10;
}

.kss-teaser-blog-articel__image {
    position: relative;
    overflow: hidden;
}

.kss-teaser-blog-articel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--teaser-transition);
}

/* Full-Width Bild: keine aspect-ratio, volle Höhe */
.kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__image {
    aspect-ratio: unset !important;
}

.kss-teaser-blog-articel--full-width .kss-teaser-blog-articel__image img {
    height: 100%;
    object-fit: cover;
}

.kss-teaser-blog-articel:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__content:hover .kss-teaser-blog-articel__image img {
    transform: scale(1.05);
}

/* Text Section - nur grid-area wenn NICHT Full-Width */
.kss-teaser-blog-articel:not(.kss-teaser-blog-articel--full-width) .kss-teaser-blog-articel__text {
    grid-area: text;
    padding: 2rem;
}

.kss-teaser-blog-articel__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767px) {
    .kss-teaser-blog-articel__text {
        padding: 1.5rem;
    }
}

/* Categories */
.kss-teaser-blog-articel__categories {
    margin-bottom: 0.75rem;
}

.kss-teaser-blog-articel__category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--teaser-category-bg, rgba(0, 0, 0, 0.1));
    color: var(--teaser-category-text, var(--kss-copy-text-color-secondary, #666));
    border-radius: calc(var(--teaser-border-radius) / 2);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Title */
.kss-teaser-blog-articel__title {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--teaser-title-color, var(--kss-copy-text-color-primary, #333));
}

@media (min-width: 768px) {
    .kss-teaser-blog-articel__title {
        font-size: 1.75rem;
    }
}

/* Excerpt */
.kss-teaser-blog-articel__excerpt {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--teaser-excerpt-color, var(--kss-copy-text-color-secondary, #666));
}

/* Meta Information */
.kss-teaser-blog-articel__meta {
    font-size: 0.875rem;
    color: var(--teaser-meta-color, var(--kss-copy-text-color-secondary, #888));
    font-weight: 500;
}

/* ===================================
   Text-Farbschemas (nur Textfarben)
   =================================== */

/* Light Text (Standard) */
.kss-teaser-blog-articel--text-light {
    --teaser-text-color: var(--kss-copy-text-color-primary, #333);
    --teaser-title-color: var(--kss-copy-text-color-primary, #333);
    --teaser-excerpt-color: var(--kss-copy-text-color-secondary, #666);
    --teaser-meta-color: var(--kss-copy-text-color-secondary, #888);
    --teaser-category-bg: rgba(0, 0, 0, 0.1);
    --teaser-category-text: var(--kss-copy-text-color-secondary, #666);
}

/* Dark Text */
.kss-teaser-blog-articel--text-dark {
    --teaser-text-color: var(--kss-color-white, #fff);
    --teaser-title-color: var(--kss-color-white, #fff);
    --teaser-excerpt-color: rgba(255, 255, 255, 0.8);
    --teaser-meta-color: rgba(255, 255, 255, 0.6);
    --teaser-category-bg: rgba(255, 255, 255, 0.1);
    --teaser-category-text: rgba(255, 255, 255, 0.8);
}

/* Primary Text */
.kss-teaser-blog-articel--text-primary {
    --teaser-text-color: var(--kss-primary-color, #007cba);
    --teaser-title-color: var(--kss-primary-color, #007cba);
    --teaser-excerpt-color: var(--kss-primary-color, #007cba);
    --teaser-meta-color: var(--kss-primary-color, #007cba);
    --teaser-category-bg: var(--kss-primary-color, #007cba);
    --teaser-category-text: var(--kss-color-white, #fff);
}

.kss-teaser-blog-articel--text-primary .kss-teaser-blog-articel__content:hover .kss-teaser-blog-articel__title {
    color: var(--kss-primary-hover-color, #005a87);
}

/* Secondary Text */
.kss-teaser-blog-articel--text-secondary {
    --teaser-text-color: var(--kss-secondary-color, #6c757d);
    --teaser-title-color: var(--kss-secondary-color, #6c757d);
    --teaser-excerpt-color: var(--kss-secondary-color, #6c757d);
    --teaser-meta-color: var(--kss-secondary-color, #6c757d);
    --teaser-category-bg: var(--kss-secondary-color, #6c757d);
    --teaser-category-text: var(--kss-color-white, #fff);
}

.kss-teaser-blog-articel--text-secondary .kss-teaser-blog-articel__content:hover .kss-teaser-blog-articel__title {
    color: var(--kss-secondary-hover-color, #545b62);
}

/* ===================================
   Hintergrund-Farbschemas
   =================================== */

/* Transparent Background (Standard) */
.kss-teaser-blog-articel--bg-transparent {
    --teaser-bg: transparent;
}

/* White Background */
.kss-teaser-blog-articel--bg-white {
    --teaser-bg: var(--kss-color-white, #fff);
}

/* Dark Background */
.kss-teaser-blog-articel--bg-dark {
    --teaser-bg: var(--kss-color-black, #212529);
}

/* Primary Background */
.kss-teaser-blog-articel--bg-primary {
    --teaser-bg: var(--kss-primary-color, #007cba);
}

.kss-teaser-blog-articel--bg-primary .kss-teaser-blog-articel__content:hover {
    background: var(--kss-primary-hover-color, #005a87);
}

/* Secondary Background */
.kss-teaser-blog-articel--bg-secondary {
    --teaser-bg: var(--kss-secondary-color, #6c757d);
}

.kss-teaser-blog-articel--bg-secondary .kss-teaser-blog-articel__content:hover {
    background: var(--kss-secondary-hover-color, #545b62);
}

/* ===================================
   Responsive Design - Mobile Optimierungen
   =================================== */

@media (max-width: 480px) {
    .kss-teaser-blog-articel {
        --teaser-gap: 1rem;
    }

    .kss-teaser-blog-articel__text {
        padding: 1.25rem;
    }

    .kss-teaser-blog-articel__title {
        font-size: 1.25rem;
    }

    .kss-teaser-blog-articel__excerpt {
        font-size: 0.9rem;
    }
}

/* ===================================
   AOS Animation Support
   =================================== */

.kss-teaser-blog-articel[data-aos] {
    transition-property: transform, opacity;
}



/* ===================================
   Border Radius Varianten
   =================================== */

/* Klein: 50% der Theme Border Radius Variable */
.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__content {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.5);
}

.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.5);
}

/* Medium: 100% der Theme Border Radius Variable (Standard) */
.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__content {
    border-radius: var(--kss-brand-border-radius-default, 8px);
}

.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__image img {
    border-radius: var(--kss-brand-border-radius-default, 8px);
}

/* Groß: 200% der Theme Border Radius Variable */
.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__content {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 2);
}

.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 2);
}

/* Kategorien auch anpassen wenn Border Radius aktiv */
.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__category {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.25);
}

.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__category {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.5);
}

.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__category {
    border-radius: var(--kss-brand-border-radius-default, 8px);
}

/* ===================================
   WICHTIG: Full-Width Border-Radius Varianten
   MUSS NACH den allgemeinen Border-Radius Regeln stehen!
   =================================== */

/* Full-Width: Alle Kanten abrunden - BILD TARGET */
.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-all.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.5) !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-all.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__image img {
    border-radius: var(--kss-brand-border-radius-default, 8px) !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-all.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 2) !important;
}

/* Full-Width: Nur linke Seite abrunden - BILD TARGET */
.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-left.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 0.5) 0 0 calc(var(--kss-brand-border-radius-default, 8px) * 0.5) !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-left.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__image img {
    border-radius: var(--kss-brand-border-radius-default, 8px) 0 0 var(--kss-brand-border-radius-default, 8px) !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-left.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__image img {
    border-radius: calc(var(--kss-brand-border-radius-default, 8px) * 2) 0 0 calc(var(--kss-brand-border-radius-default, 8px) * 2) !important;
}

/* Full-Width: Nur rechte Seite abrunden - BILD TARGET */
.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-right.kss-teaser-blog-articel--radius-small .kss-teaser-blog-articel__image img {
    border-radius: 0 calc(var(--kss-brand-border-radius-default, 8px) * 0.5) calc(var(--kss-brand-border-radius-default, 8px) * 0.5) 0 !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-right.kss-teaser-blog-articel--radius-medium .kss-teaser-blog-articel__image img {
    border-radius: 0 var(--kss-brand-border-radius-default, 8px) var(--kss-brand-border-radius-default, 8px) 0 !important;
}

.kss-teaser-blog-articel--full-width.kss-teaser-blog-articel--border-right.kss-teaser-blog-articel--radius-large .kss-teaser-blog-articel__image img {
    border-radius: 0 calc(var(--kss-brand-border-radius-default, 8px) * 2) calc(var(--kss-brand-border-radius-default, 8px) * 2) 0 !important;
}

/* ===================================
   Accessibility
   =================================== */

.kss-teaser-blog-articel__content:focus-within {
    outline: 2px solid var(--kss-primary-color, #007cba);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .kss-teaser-blog-articel__content,
    .kss-teaser-blog-articel__image img {
        transition: none;
    }

    .kss-teaser-blog-articel__content:hover {
        transform: none;
    }

    .kss-teaser-blog-articel__content:hover .kss-teaser-blog-articel__image img {
        transform: none;
    }
}