/*
 * Link-Varianten für Redaktions-Texte (agenturwerk, 13.10.2026)
 * - .link-dark:  Text wird beim Hover etwas dunkler (aus der Seitenfarbe --main-color abgeleitet)
 * - .link-arrow: wie .link-dark, zusätzlich das Pfeil-Icon der Website (arrow-right9.svg)
 *                in Linkfarbe, das beim Hover leicht nach rechts rutscht (wie .job-list-small-link)
 * Ziel live: theme/public/assets/frontend/dist/css/links.css, eingebunden im Template 2 (METAHEAD).
 */
a.link-dark,
a.link-arrow {
    transition: color .2s ease;
}

a.link-dark:hover,
a.link-dark:focus-visible,
a.link-arrow:hover,
a.link-arrow:focus-visible {
    color: color-mix(in srgb, var(--main-color) 70%, #000);
    text-decoration: none;
}

a.link-arrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

a.link-arrow::after {
    content: "";
    flex: none;
    width: 20px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("/theme/public/assets/frontend/dist/img/arrow-right9.svg") no-repeat center / contain;
    mask: url("/theme/public/assets/frontend/dist/img/arrow-right9.svg") no-repeat center / contain;
    transition: transform .3s ease;
}

a.link-arrow:hover::after,
a.link-arrow:focus-visible::after {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    a.link-arrow::after {
        transition: none;
    }
}