.vacature-kaart {
    display: block;
    text-decoration: none;
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 18px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: white;
    color: inherit;
    margin-bottom: 0.8rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.vacature-kaart:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.vacature-kaart__titel {
    margin: 0 0 0.6rem 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.vacature-categorie {
    display: inline-block;
    background-color: #00a551;
    color: white;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;
    letter-spacing: 0.5px;
    margin-top: 0.4rem;
}

/* Grotere variant voor op vacaturepagina zelf */
.vacature-categorie-pagina {
    display: inline-block;
    background-color: #00a551;
    color: white;
    padding: 6px 20px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 999px;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Dynamische kleuren */
.vacature-categorie--algemeen,
.vacature-categorie-pagina--algemeen
{
    background-color: #00a551;
}

.vacature-categorie--leiding,
.vacature-categorie-pagina--leiding
{
    background-color: #e1071a;
}

.vacature-categorie--plusscouts,
.vacature-categorie-pagina--plusscouts
{
    background-color: #0066b2;
}

.vacature-categorie--ondersteuning,
.vacature-categorie-pagina--ondersteuning
{
    background-color: #f2940a;
}

.vacature-categorie--groepsbestuur,
.vacature-categorie-pagina--groepsbestuur
{
    background-color: #921c7f;
}

.vacature-categorie--stichtingsbestuur,
.vacature-categorie-pagina--stichtingsbestuur
{
    background-color: #646464;
}