/* ============================================================
   Textlinks im Fließtext – erkennbar durch feine Linie und
   kleinen Pfeil (Font Awesome Light), analog Wollmarshöhe.
   Einsatz: <a class="textlink" href="…">Linktext<i class="fal fa-arrow-right" aria-hidden="true"></i></a>
   ============================================================ */

.textlink {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--jadegruen);
    color: var(--darkblue);
    font-weight: 400;
    text-decoration: none;
    transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.textlink .fal,
.textlink .fa-light {
    font-size: 0.85em;
    color: var(--jadegruen);
    transition: transform .2s ease-in-out, color .2s ease-in-out;
}

.textlink:hover,
.textlink:focus-visible {
    color: var(--jadegruen);
    border-color: var(--darkblue);
}

.textlink:hover .fal,
.textlink:hover .fa-light {
    color: var(--darkblue);
    transform: translateX(3px);
}

/* E-Mail-Adressen können in schmalen Spalten umbrechen */
.textlink.textlink--mail {
    display: inline;
    padding-right: 0.45em;
}
.textlink.textlink--mail .fal {
    margin-left: 0.4em;
}