/* CTA Button base */
.cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding: 0.95rem 2.2rem;   /* breiter */
    min-width: 240px;          /* optisch “CTA” */
    border-radius: 0;
    text-decoration:none;

    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;

    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    will-change: transform;
}

.cta-btn__icon{
    transition: transform .2s ease;
}

.cta-btn:hover{
    transform: translateY(-2px);
}

.cta-btn:hover .cta-btn__icon{
    transform: translateX(3px);
}

.cta-btn:active{
    transform: translateY(0) scale(.98);
}

.cta-btn:focus-visible{
    outline: none;
}

/* Variant: ON DARK BACKGROUND (button cyan) */
.cta-btn--ondark{
    background: #0FF2FF;
    color: #192139;
    border: 1px solid rgba(15, 242, 255, .45);
    box-shadow: 0 12px 28px rgba(15, 242, 255, .18);
}

.cta-btn--ondark:hover{
    box-shadow:
            0 16px 38px rgba(15, 242, 255, .28),
            0 0 0 4px rgba(15, 242, 255, .12);
}

.cta-btn--ondark:focus-visible{
    box-shadow:
            0 0 0 4px rgba(15, 242, 255, .35),
            0 16px 38px rgba(15, 242, 255, .22);
}

/* Variant: ON WHITE BACKGROUND (button dark) */
.cta-btn--onwhite{
    background: #192139;
    color: #0FF2FF;
    border: 1px solid rgba(15, 242, 255, .55);
    box-shadow: 0 12px 28px rgba(25, 33, 57, .18);
}

.cta-btn--onwhite:hover{
    box-shadow:
            0 16px 38px rgba(25, 33, 57, .26),
            0 0 0 4px rgba(15, 242, 255, .14);
}

.cta-btn--onwhite:focus-visible{
    box-shadow:
            0 0 0 4px rgba(15, 242, 255, .35),
            0 16px 38px rgba(25, 33, 57, .22);
}