@layer ds.block {
    .forloeb-teaser__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--space-6);
        margin-bottom: var(--space-7);
    }

    .forloeb-teaser__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-weight-medium); color: var(--color-heading); }

    .forloeb-teaser__all {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
        color: var(--color-heading);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-small);
    }

    .forloeb-teaser__all-hit { position: absolute; inset: 0; color: transparent; text-decoration: none; }

    .forloeb-teaser__all:hover { color: var(--color-primary); }

    .forloeb-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

    .forloeb-teaser__card {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        background: var(--color-heading);
        color: var(--color-text-invert);
        border-radius: var(--radius-ui);
        padding: var(--space-7);
        transition: background-color var(--duration-fast) ease;
    }

    .forloeb-teaser__card-hit { position: absolute; inset: 0; border-radius: inherit; color: transparent; text-decoration: none; }

    .forloeb-teaser__card:hover { background: color-mix(in srgb, var(--color-heading) 85%, white); }

    .forloeb-teaser__icon { width: 1.5rem; height: 1.5rem; color: var(--brand-apricot); stroke-width: 1.2; }

    .forloeb-teaser__card-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-text-invert); }

    .forloeb-teaser__card-text { margin: 0; font-size: var(--text-body); line-height: var(--line-height-base); color: var(--brand-sage-pale); }

    .forloeb-teaser__price { margin-top: auto; font-size: var(--text-small); font-weight: var(--font-weight-bold); color: var(--brand-apricot); }

    .forloeb-teaser__notice {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin: var(--space-5) 0 0;
        font-size: var(--text-small);
        color: var(--color-text);
    }

    .forloeb-teaser__notice-icon { width: 1.15rem; height: 1.15rem; color: var(--brand-sage); flex-shrink: 0; }

    .forloeb-teaser__notice a { color: var(--color-primary); font-weight: var(--font-weight-bold); }

    @media (max-width: 64rem) {
        .forloeb-teaser__grid { grid-template-columns: 1fr; }
        .forloeb-teaser__head { flex-direction: column; align-items: flex-start; }
    }
}