.kloos-teaser {

}

.kloos-teaser .kloos-teaser-text {

}

.kloos-teaser .wp-block-post-title a {
    text-decoration: none !important;
}

.kloos-teaser .wp-block-post-excerpt__more-link {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}

/* Chevron wie bei .svf-service */
.kloos-teaser .wp-block-post-excerpt__more-link::after {
    content: "\203A";
    font-size: 1.3em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.kloos-teaser .wp-block-post:hover .wp-block-post-excerpt__more-link::after,
.kloos-teaser .wp-block-post-excerpt__more-link:hover::after {
    transform: translateX(5px);
}

/* === Teaser-Grid (Query Loop) ===
   Mobil 1 Spalte, Tablet 2 Spalten, Desktop 4 Spalten.
   Standard: jeder Beitrag 1 Spalte.
   Mit zusaetzlicher Klasse .kloos-teaser-highlight ist der erste Beitrag
   2 Spalten breit (Bild links, Text rechts), alle weiteren 1 Spalte.
   Weitere Beitraege laufen in zusaetzliche Zeilen. */

.wp-block-query .wp-block-post-template.kloos-teaser {
    display: grid !important;
    grid-template-columns: minmax(0, 318px) !important;
    gap: 24px !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1344px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Feste li-Breite aus text-styles.css aufheben – das Grid bestimmt die Breite */
.wp-block-query .wp-block-post-template.kloos-teaser > li {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    grid-column: span 1 !important;
}

/* Kachel-Inhalt fuellt die Zelle komplett aus */
.wp-block-query .wp-block-post-template.kloos-teaser > li > .wp-block-group {
    height: 100% !important;
}

/* Tablet: 2 Spalten, erster Beitrag ueber die volle Breite */
@media (min-width: 768px) {
    .wp-block-query .wp-block-post-template.kloos-teaser {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child {
        grid-column: span 2 !important;
    }
}

/* Desktop: 4 Spalten – erster Beitrag 2 Spalten, danach je 1 Spalte */
@media (min-width: 1200px) {
    .wp-block-query .wp-block-post-template.kloos-teaser {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child {
        grid-column: span 2 !important;
    }
}

/* === Erster Beitrag: Bild links, Text rechts (nur .kloos-teaser-highlight, ab Tablet) === */
@media (min-width: 768px) {
    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child > .wp-block-group {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* Bild: 50 % der Breite, volle Hoehe.
       Das Bild liegt absolut im Rahmen, damit seine Eigenhoehe (height-Attribut)
       nicht die Hoehe der Kachel bzw. der Grid-Zeile bestimmt. */
    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child .wp-block-post-featured-image {
        position: relative !important;
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
        overflow: hidden !important;
        border-radius: 8px 0 0 8px !important;
    }

    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child .wp-block-post-featured-image a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        height: 100% !important;
    }

    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child .wp-block-post-featured-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* Text: restliche Breite, oben ausgerichtet */
    .wp-block-query .wp-block-post-template.kloos-teaser.kloos-teaser-highlight > li:first-child .kloos-teaser-text {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        padding-top: var(--wp--preset--spacing--10) !important;
        padding-bottom: var(--wp--preset--spacing--10) !important;
    }
}