/* Generieke zwarte dienst-hero — HOTFIX 53aj (herbruikbaar op alle dienst-pagina's) */

.dienst-hero {
    background-color: #0a0a0a !important;
    background-image: none;
    color: #fff;
    padding: 70px 20px 80px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.dienst-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 106, 26, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.dienst-hero > *,
.dienst-hero .container {
    position: relative;
    z-index: 1;
}

.dienst-hero h1,
.dienst-hero h2 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.dienst-hero .hero-eyebrow,
.dienst-hero [class*='__eyebrow'] {
    color: #ff6a1a !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dienst-hero p,
.dienst-hero .hero-intro,
.dienst-hero [class*='__sub'],
.dienst-hero [class*='__stats'] {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dienst-hero ul,
.dienst-hero li,
.dienst-hero .hero-usp,
.dienst-hero .hero-usp li,
.dienst-hero [class*='__usps'] li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dienst-hero li::marker,
.dienst-hero .hero-usp li::before,
.dienst-hero [class*='__usps'] li::before {
    color: #ff6a1a !important;
}

.dienst-hero .hero-pill,
.dienst-hero [class*='-pill'] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e4e4e7 !important;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    display: inline-block;
}

.dienst-hero .btn-secondary,
.dienst-hero .btn-outline-light,
.dienst-hero [class*='btn-outline'] {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.dienst-hero .btn-secondary:hover,
.dienst-hero .btn-outline-light:hover,
.dienst-hero [class*='btn-outline']:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.dienst-hero .aanpak-card,
.dienst-hero [class*='-aanpak'] {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
    .dienst-hero {
        padding: 50px 20px 60px;
    }

    .dienst-hero h1 {
        font-size: clamp(1.65rem, 6vw, 2rem);
    }
}