Bootstrap Modal ist nicht anklickbar

[Werner S]

Grüß euch!

ich habe folgenden Code

<div class="card m-b-30">
    <div class="card-header" id="headingOne">
        <h2 class="mb-0">
            {{ $managers->prefix }} {{ $managers->title }} {{ $managers->firstname }} {{ $managers->lastname }}
            <a data-toggle="modal" data-target="#destroyManager" class="card-del">
                <i class="fa fa-times-circle red-icon"></i>
            </a>
            <div
                class="modal fade"
                id="destroyManager"
                tabindex="-1"
                role="dialog"
                data-backdrop="false"
                aria-hidden="true"
            >
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Ansprechpartner löschen?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Soll das Unternehmen
                            <b>{{$company->name}}</b>
                            wirklich gelöscht werden?
                            <br />
                            Alle Zugehören Dateien, Notizen etc. werden ebenfalls gelöscht.
                            <br />
                            Eine wiederherstellung ist nicht möglich.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                            <form action="{{route('companies.destroy', $company->id)}}" method="post">
                                @csrf {{ method_field('delete') }}
                                <button class="btn btn-danger" type="submit">Unwiderruflich Löschen</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </h2>
    </div>
</div>

.card-del {
    float: right;
    display: inline-block;
    font-size: 0.75rem;
    margin-top: -20px;
}

/* icon is going on the top right corner  */

#headingOne h2.mb-0 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Problem ist, das icon in Zeile 5 ist nicht anklickbar. Selbst wenn es nur ein <a href wäre lässt es sich nicht anklicken.