/* ==========================================================================
   Teaser Kontakt Block
   Yellow arrow/chevron-shaped CTA banner on black background
   Desktop: centered ~70% width, horizontal layout
   Mobile:  full-width, stacked layout
   ========================================================================== */

.cf-teaser-kontakt {
    position: relative;
    width: 100%;
    background-color: #000000;
}

/* === Section === */
.cf-teaser-kontakt__inner {
    padding-top: clamp(5rem, 8.33vw, 7.5rem);
    padding-bottom: clamp(5rem, 8.33vw, 7.5rem);
    padding-left: clamp(0.75rem, 2.78vw, 2.5rem);
    padding-right: clamp(0.75rem, 2.78vw, 2.5rem);
}

/* === Banner: flex row with edges + content === */
.cf-teaser-kontakt__banner {
    display: flex;
    align-items: stretch;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* === Diagonal edges using rectangle-small.svg mask === */
.cf-teaser-kontakt__edge {
    flex-shrink: 0;
    background-color: #F9E62B;
    -webkit-mask-image: url('../../assets/img/rectangle-small.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('../../assets/img/rectangle-small.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

/* Left edge: 180° — mirrors the arrow button left edge */
.cf-teaser-kontakt__edge--left {
    width: clamp(2.9375rem, 6.46vw, 5.8125rem);
    transform: rotate(180deg);
    margin-right: -1px;
}

/* Right edge: original SVG orientation — mirrors the arrow button right edge */
.cf-teaser-kontakt__edge--right {
    width: clamp(3rem, 6.46vw, 5.8125rem);
    margin-left: -1px;
}

/* === Content area === */
.cf-teaser-kontakt__content {
    flex: 1;
    background-color: #F9E62B;
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5.56vw, 5rem);
    padding: clamp(2rem, 2.78vw, 2.5rem) clamp(0.75rem, 0.83vw, 0.75rem) clamp(2rem, 2.78vw, 2.5rem) clamp(1.5rem, 2.78vw, 2.5rem);
}

/* === Headline === */
.cf-teaser-kontakt__headline {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 1rem + 2.22vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #000000;
    margin: 0;
    flex-shrink: 1;
}

/* === Mobile: full-width yellow block, no diagonal spikes === */
@media (max-width: 767px) {
    /* Full-bleed: escape parent's global padding via WP CSS-Variablen.
       Kein 100vw, da vw auf Windows die Scrollbar-Breite enthält
       und so einen horizontalen Overflow verursacht. */
    .cf-teaser-kontakt {
        margin-left: calc(var(--wp--style--root--padding-left, 12px) * -1);
        margin-right: calc(var(--wp--style--root--padding-right, 12px) * -1);
        width: calc(100% + var(--wp--style--root--padding-left, 12px) + var(--wp--style--root--padding-right, 12px));
    }

    .cf-teaser-kontakt__inner {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Banner fills full width; edges hidden */
    .cf-teaser-kontakt__banner {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Hide the diagonal spike elements on mobile */
    .cf-teaser-kontakt__edge--left,
    .cf-teaser-kontakt__edge--right {
        display: none;
    }

    /* Content: stacked, full-width yellow block with generous padding */
    .cf-teaser-kontakt__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.75rem 1.5rem;
    }

    .cf-teaser-kontakt__headline {
        font-size: clamp(1.25rem, 4vw + 0.5rem, 1.5rem);
        line-height: 1.3;
    }

    /* Button: full-width */
    .cf-teaser-kontakt__content .cf-btn-cta-arrow {
        width: 100%;
        align-self: auto;
    }

    .cf-teaser-kontakt__content .cf-btn-cta-arrow__label {
        flex: 1;
        white-space: nowrap;
        justify-content: center;
        text-align: center;
    }
}