/*!
 * Site ontwikkeld door De Studio van Jeff · destudiovanjeff.nl
 */
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/* ===== PIXELATED IMAGE LOADING EFFECT ===== */
.pixelate-load {
    filter: blur(20px);
    transform: scale(1.05);
    transition: filter 0.8s ease-out, transform 0.8s ease-out;
    will-change: filter, transform;
}

.pixelate-load.loading-stage-1 {
    filter: blur(15px);
    transform: scale(1.04);
}

.pixelate-load.loading-stage-2 {
    filter: blur(10px);
    transform: scale(1.03);
}

.pixelate-load.loading-stage-3 {
    filter: blur(5px);
    transform: scale(1.02);
}

.pixelate-load.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Container voor afbeeldingen met overflow hidden */
.pixelate-container {
    overflow: hidden;
}

/* ===== COOKIE BANNER ===== */
/* Cookie banner moet NIET beïnvloed worden door vacancy-mode */
.vacancy-mode .cookie-banner,
.vacancy-mode .cookie-banner * {
    background: initial;
    animation: none;
}

.vacancy-mode .cookie-banner {
    background-color: white !important;
    animation: cookieSlideIn 0.4s ease-out !important;
}

.vacancy-mode .cookie-banner [data-translate] {
    color: inherit !important;
    background: none !important;
}

.vacancy-mode .cookie-btn-primary {
    background-color: #008000 !important;
    color: white !important;
}

.vacancy-mode .cookie-btn-secondary {
    background-color: white !important;
    color: #333 !important;
}

.cookie-banner {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    max-width: 480px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 2rem;
    display: none;
    animation: cookieSlideIn 0.4s ease-out;
}

.cookie-banner.show {
    display: block;
}

/* Cookie banner slide down when modal opens from banner */
.cookie-banner.hidden-for-modal {
    transform: translateY(calc(100% + 3rem));
    transition: transform 0.3s ease-out;
}

.cookie-banner.show:not(.hidden-for-modal) {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

@keyframes cookieSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.cookie-content>p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.cookie-link {
    color: #008000;
    text-decoration: underline;
    font-weight: 500;
}

.cookie-link:hover {
    color: #006600;
}

.cookie-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.cookie-option input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: white;
    margin-top: 2px;
}

.cookie-option input[type="checkbox"]:checked+.checkbox-custom {
    background-color: #008000;
    border-color: #008000;
}

.checkbox-custom::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
}

.cookie-option input[type="checkbox"]:checked+.checkbox-custom::after {
    transform: rotate(45deg) scale(1);
}

/* Verplichte/technische cookies - altijd aangevinkt */
.cookie-option-required {
    opacity: 0.7;
    cursor: default;
}

.cookie-option-required .checkbox-custom {
    cursor: default;
}

.required-text {
    font-weight: normal;
    font-size: 0.8rem;
    color: #888;
}

.cookie-title-row {
    display: inline;
}

/* ===== LANGUAGE SWITCH SKELETON TRANSITION ===== */
.lang-switching {
    pointer-events: none;
}

.lang-switching [data-translate] {
    position: relative;
    color: transparent !important;
    background: linear-gradient(90deg, #e8f5e8 25%, #c8e6c8 50%, #e8f5e8 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1s ease-in-out infinite;
    border-radius: 4px;
}

.lang-switching .card-title[data-translate],
.lang-switching .card-subtitle[data-translate],
.lang-switching h3[data-translate] {
    min-height: 1.5em;
}

.lang-switching .card-text[data-translate],
.lang-switching p[data-translate],
.lang-switching span[data-translate] {
    min-height: 1em;
}

.lang-switching .header-button[data-translate] {
    background: linear-gradient(90deg, #006600 25%, #008800 50%, #006600 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonPulse 1s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Smooth fade-in na skeleton */
.lang-switched [data-translate] {
    animation: fadeInText 0.3s ease-out;
}

@keyframes fadeInText {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cookie-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cookie-option-text strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.cookie-option-text span {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.cookie-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cookie-btn-primary {
    background-color: #008000;
    color: white;
    border-color: #008000;
}

.cookie-btn-primary:hover {
    background-color: #006600;
    border-color: #006600;
}

.cookie-btn-secondary {
    background-color: white;
    color: #333;
    border-color: #333;
}

.cookie-btn-secondary:hover {
    background-color: #f5f5f5;
}

/* Cookie banner mobile */
@media (max-width: 768px) {
    .cookie-banner {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
        padding: 1.5rem;
        /* Op mobiel neemt banner volledige breedte */
    }

    .cookie-content h3 {
        font-size: 1rem;
    }

    .cookie-content>p {
        font-size: 0.9rem;
    }

    .cookie-buttons {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 100vh;
    color: #333;
    background-color: #f5f5f5;
}

a {
    cursor: pointer;
}

header {
    position: fixed;
    top: 1rem;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 0 1.5rem;
}

.logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: #008000;
}

.logo span {
    font-style: italic;
}

.logo-img {
    height: 2rem;
    width: auto;
    display: block;
}

.header-wrapper {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

.header-main {
    flex: 1 1 0;
    background-color: white;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    gap: 1rem;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    display: flex;
    align-items: center;
}

.menu-items {
    display: none;
    gap: 0.75rem;
    align-items: center;
}

.menu-items a {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    background: #f7f7f7;
    text-decoration: none;
    font-size: 0.85rem;
    color: #333;
}

.lang-switch {
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    background: #f7f7f7;
    text-decoration: none;
    font-size: 0.75rem;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lang-switch:hover {
    background: #e0e0e0;
}

.lang-switch.active {
    background: #008000;
    color: white;
}

.header-badge,
.header-button {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.header-badge {
    width: auto;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 2px solid #008000;
}

.badge-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #008000;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-button {
    width: 10vw;
    background-color: #008000;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    text-transform: none;
}

.header-main.expanded .menu-items {
    display: flex;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
    display: flex;
    height: calc(100vh - 86px);
    margin-top: 86px;
    /* header top (1rem=16px) + header height (70px) = 86px */
    transition: transform 0.05s ease-out;
    padding-left: 0rem;
    padding-right: 1rem;
}

/* All Cards Container */
.all-cards-container {
    display: flex;
    height: 100%;
    gap: 1rem;
    /* Verticale padding 1rem (=16px) zodat de afstand header->content en
       footer->onderkant gelijk is aan de afstand boven de header en tussen
       content en footerbalk. Horizontaal blijft 1.5rem. */
    padding: 1rem 1.5rem;
}

.card {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    min-width: 460px;
}

.card-white {
    background-color: white;
}

.card-green {
    background-color: #008000;
    color: white;
}

.card-yellow {
    background-color: #FFC107;
}

.card-blue {
    background-color: #0066cc;
    color: white;
}

.card-image {
    padding: 0;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Zorgt voor een vloeiende animatie */
}

.card-image:hover img {
    transform: scale(1.05);
    /* Zoomt iets in bij hover */
}

.card-small-title {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.card-title {
    font-size: 2.2rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.card-subtitle {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #008000;
    font-weight: bold;
}

.card-text {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    margin-top: auto;
    line-height: 1.6;
    margin-bottom: 0rem;
}

/* Service Tabs */
.service-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.service-tab {
    font-size: clamp(1.1rem, 2.5vw, 2rem);
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
    color: #ccc;
    margin: 0;
    line-height: 1.2;
}

.service-tab:hover {
    color: #008000;
}

.service-tab.active {
    color: #008000;
}

/* Klik-indicator: chevron toont aan dat een tab aanklikbaar is/geselecteerd is */
.service-tab::after {
    content: '›';
    display: inline-block;
    margin-left: 0.4rem;
    font-weight: bold;
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.service-tab:hover::after,
.service-tab.active::after {
    opacity: 1;
    transform: translateX(0);
}

.service-description {
    transition: opacity 0.3s ease;
}

/* Service Blocks */
.service-blocks {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
}

.service-block {
    flex: 1;
    padding: 1.5rem;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.service-block h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* Pas de footer-wrapper aan zodat deze de volledige hoogte van de card krijgt */
.footer-wrapper {
    flex: 0 0 100vw;
    display: grid;
    grid-template-rows: 90% auto;
    /* 80% voor de twee kolommen, 20% voor de footer */
    height: 100vh - 3rem;
    /* past zich aan aan de hoogte van het scherm */
    padding: 0 3rem 0rem 0rem;
    gap: 1rem;
}

/* Verdeel de interne onderdelen - linker kolom breder */
.footer-main {
    display: grid;
    grid-template-columns: 1fr auto;
    /* Linker kolom neemt beschikbare ruimte, rechter kolom past zich aan */
    gap: 1rem;
}

/* Tablet: keep two-column layout but with flexible widths */
@media (max-width: 1100px) and (min-width: 769px) {
    .footer-main {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .footer-left-card {
        min-width: 800px !important;
    }

    .footer-right-stack {
        min-width: 380px;
        flex-shrink: 0;
    }

    .footer-right-stack .card {
        min-width: 380px !important;
    }

    .footer-menus {
        gap: 2rem;
    }
}

.footer-taglines {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background-color: white;
    border-radius: 8px;
}

.footer-left-card {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 800px;
}

.footer-right-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-right-stack .card {
    min-width: 380px;
}

.company-name {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.footer-link {
    display: block;
    color: #008000;
    text-decoration: none;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #006600;
    text-decoration: underline;
}

.footer-link.underlined {
    text-decoration: underline;
}

/* Bedrijfsgegevens: gelijkmatige, nette regelafstand */
.footer-left-card > div:first-child .company-name {
    margin-bottom: 0.6rem;
}

.footer-left-card > div:first-child p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Kleine adempauze tussen het adresblok en de contactgegevens */
.footer-left-card > div:first-child p[data-translate="address-country"] {
    margin-bottom: 0.9rem;
}

.footer-left-card > div:first-child .footer-link.underlined {
    margin-bottom: 0.1rem;
    line-height: 1.55;
}

.footer-menus {
    display: flex;
    gap: 4rem;
    margin: 2rem 0;
}

.menu-title {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.footer-address {
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.footer-address p {
    margin-bottom: 0.3rem;
}

.footer-logo {
    max-width: 400px;
    width: 100%;
    margin-top: auto;
}

.footer-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-card {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.contact-card p {
    line-height: 1.6;
}

.mail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #f5f5f5;
    white-space: nowrap;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    margin-top: auto;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    color: #333;
}

/* Fix voor links die buttons bevatten */
a:has(.mail-button),
a:has(button) {
    text-decoration: none;
    color: inherit;
}

a .mail-button,
a button.mail-button,
a button {
    text-decoration: none;
}

a .mail-button span,
a button span {
    text-decoration: none;
    color: inherit;
}

.jobs-card {
    background-color: #008000;
    color: white;
    border-radius: 8px;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jobs-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.jobs-card p {
    line-height: 1.6;
}

.jobs-form {
    display: flex;
    margin-bottom: 1rem;
    margin-top: auto;
}

.jobs-form input {
    flex: 1;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 8px 0 0 8px;
    font-size: 0.9rem;
}

.jobs-form button {
    background-color: #333;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-size: 0.9rem;
}

.jobs-promise {
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.8;
    margin-top: 0.5rem;
}

.tag-line,
.green-future {
    font-size: 0.9rem;
}

/* Subtle sector links for SEO */
.footer-sectors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    font-size: 0.7rem;
    color: #999;
    border-top: 1px solid #eee;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.footer-sectors a {
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-sectors a:hover {
    color: #666;
}

.footer-sectors span {
    color: #ccc;
}

@media (max-width: 768px) {
    .footer-sectors {
        font-size: 0.65rem;
        gap: 0.4rem 0.8rem;
        padding: 0.5rem;
        border-top: none;
        margin-top: 0;
    }
}

.services-group {
    /* Dit bepaalt hoe breed/hoog deze hele groep is in je horizontale scroll. */
    flex: 0 0 100vw;
    /* Of 100vw, afhankelijk van je gewenste breedte */

    display: grid;
    grid-template-columns: 35vw repeat(2, 1fr);
    /* 1 vaste breedte + 3 gelijke kolommen */
    grid-template-rows: 1fr 1fr;
    /* 2 gelijke rijen (boven/onder) */
    gap: 1rem;
    /* Ruimte tussen de cards */
    height: 100%;
    /* Zorgt dat het de volledige hoogte van de horizontale container benut */
}

/* Grote witte card links: beslaat 2 rijen (hele hoogte) en 1 kolom */
.big-white-card {
    grid-area: 1 / 1 / 3 / 2;
    /* Dit betekent: 
     - Start bij row 1, eindig bij row 3 (dus 2 rijen hoog),
     - Start bij column 1, eindig bij column 2 (dus 1 kolom breed). */
}

/* Drie groene kolommen bovenin (elk 1 rij hoog) */
.green-card-1 {
    grid-area: 1 / 2 / 2 / 3;
    /* Rij 1, kolom 2 tot 3 */
}

.green-card-2 {
    grid-area: 1 / 3 / 2 / 4;
    /* Rij 1, kolom 3 tot 4 */
}

/* Onderste afbeelding (2e rij), beslaat kolommen 2-3 (onder de groene kaarten) */
.bottom-image {
    grid-area: 2 / 2 / 3 / 4;
    /* Rij 2, kolom 2 tot 4 => beslaat kolommen 2,3 - gelijk aan de groene kaarten erboven */
}

/* Standaard staat er geen animatie op de SVG */
.card-yellow .shock {
    transition: transform 0.1s ease;
}

/* Alleen als je over de hele kaart hovert, gaat de SVG 'shocken' */
.card-yellow:hover .shock {
    animation: electric-shock 0.15s infinite;
}

/* De 'shocking' animatie zelf */
@keyframes electric-shock {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-1px, 1px) rotate(-2deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(2deg);
    }

    60% {
        transform: translate(-1px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(1px, 1px) rotate(1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.card-yellow:hover .shock {
    animation: electric-shock 0.15s infinite;
    filter: drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 100px white);
}

/* VCA Badge icoon styling */
.vca-badge {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.card-yellow:hover .vca-badge {
    animation: badge-pulse 1s ease-in-out infinite;
    filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}

@keyframes badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Bliksemschicht filter voor intense effecten */
.lightning-filter {
    filter: url('#lightning-filter');
}

/* Elektriciteitsnet - het raster waarover elektriciteit stroomt */
.electricity-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    display: none;
}

.electricity-grid.active {
    display: block;
}

/* Elektrische cursor styling */
.electric-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 0, 0.7) 40%, rgba(255, 255, 0, 0) 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.6);
    filter: blur(1px);
    display: none;
}

.electric-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Muis elektrisch effect */
.mouse-spark {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            #ffff00,
            #ffffff,
            #ffff00,
            rgba(255, 255, 255, 0));
    border-radius: 2px;
    box-shadow: 0 0 5px 1px rgba(255, 255, 0, 0.6);
    opacity: 0;
    z-index: 1000;
    transform-origin: left center;
    animation: mouse-spark 0.4s ease-in-out forwards;
}

@keyframes mouse-spark {
    0% {
        opacity: 0;
        transform: scaleX(0.1);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* Bliksem/elektriciteit bolts */
.lightning-bolt {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.8),
            #ffff00,
            #ffffff,
            #ffff00,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0));
    border-radius: 4px;
    box-shadow:
        0 0 10px 2px rgba(255, 255, 0, 0.8),
        0 0 20px 4px rgba(255, 255, 255, 0.6);
    opacity: 0;
    z-index: 1000;
    transform-origin: left center;
    animation: lightning-flash 0.5s ease-in-out forwards;
}

/* Bliksem flits animatie */
@keyframes lightning-flash {
    0% {
        opacity: 0;
        transform: scaleX(0.1);
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0.8;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* Energieveld rond elementen */
.electric-active .card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background: transparent;
    z-index: 2;
    pointer-events: none;
    animation: energy-field 3s infinite;
}

/* Verschillende kleuren energievelden voor verschillende kaarten */
.electric-active .card-green::before {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6), inset 0 0 8px rgba(0, 255, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.6);
}

.electric-active .card-yellow::before {
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.6), inset 0 0 8px rgba(255, 255, 0, 0.4);
    border: 1px solid rgba(255, 255, 0, 0.6);
}

.electric-active .card-blue::before {
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.6), inset 0 0 8px rgba(0, 102, 255, 0.4);
    border: 1px solid rgba(0, 102, 255, 0.6);
}

.electric-active .card-white::before {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Energieveld pulsatie */
@keyframes energy-field {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.4;
    }
}

/* De "power on" status voor de header icon */
.header-icon.active {
    position: relative;
    overflow: visible;
}

.header-icon.active::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 0, 0.4) 0%, rgba(255, 255, 0, 0) 70%);
    animation: power-source 2s infinite;
}

.header-icon.active .shock {
    animation: mega-shock 0.5s infinite;
    filter: drop-shadow(0 0 10px #ffff00) drop-shadow(0 0 20px white);
    transform-origin: center;
}

@keyframes power-source {
    0% {
        transform: scale(0.8);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
}

@keyframes mega-shock {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.2) rotate(-5deg);
    }

    50% {
        transform: scale(1) rotate(0deg);
    }

    75% {
        transform: scale(1.2) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Elektrisch geladen elementen */
.electric-active .shock {
    animation: charged-shock 1s infinite;
    filter: drop-shadow(0 0 8px #ffff00);
}

@keyframes charged-shock {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Powerdots - kleine energiebollen op kruispunten */
.power-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ffff00;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 0, 0.8);
    z-index: 1001;
    animation: power-dot-pulse 2s infinite;
}

@keyframes power-dot-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

/* Sluit-knop styling */
.close-electric {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: #ff3300;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    color: white;
    font-size: 14px;
    font-weight: bold;
    pointer-events: all;
    z-index: 1002;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
}

.header-icon.active .close-electric {
    opacity: 1;
}

.close-electric:hover {
    transform: scale(1.2);
    background-color: #ff0000;
}

/* Extra elektrisch effect voor verschillende kaarten */
.electric-active .card-yellow .shock {
    animation: super-shock 0.2s infinite;
    filter: drop-shadow(0 0 30px #ffd700) drop-shadow(0 0 15px white);
}

@keyframes super-shock {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate(-3px, 3px) rotate(-5deg) scale(1.2);
    }

    40% {
        transform: translate(3px, -3px) rotate(5deg) scale(1.1);
    }

    60% {
        transform: translate(-3px, 2px) rotate(-3deg) scale(1.3);
    }

    80% {
        transform: translate(2px, 2px) rotate(3deg) scale(1.2);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

/* ===== MOBILE-ONLY CARD ===== */
.mobile-only-card {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only-card {
        display: flex !important;
        flex-direction: column;
        background: linear-gradient(135deg, #008000 0%, #006600 100%);
        color: white;
        padding: 1.5rem;
    }

    .mobile-only-card .card-small-title {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
    }

    .mobile-only-card .card-title {
        color: white;
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .mobile-only-card .card-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
        flex: 1;
    }

    .mobile-only-card .mail-button {
        background: white;
        color: #008000;
        font-weight: 600;
        align-self: flex-start;
        padding: 0.75rem 1.5rem;
        margin-top: auto;
    }

    .mobile-only-card .mail-button:hover {
        background: #f0f0f0;
    }

    /* Hide mobile-only-card in vacancy and history mode */
    .vacancy-mode .mobile-only-card,
    .history-mode .mobile-only-card {
        display: none !important;
    }
}

/* ===== MOBILE OPTIMALISATIES ===== */

/* Basis mobiele aanpassingen */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Header aanpassingen voor mobiel */
    header {
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        height: auto;
        padding: 0;
    }

    .header-wrapper {
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .header-main {
        flex: 1;
        min-width: 0;
        padding: 0.9rem 1rem;
        gap: 0.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .logo-img {
        height: 1.6rem;
        flex-shrink: 0;
    }

    .menu-items {
        gap: 0.25rem;
        margin-left: auto;
    }

    .lang-switch {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
        min-height: 36px;
        min-width: 36px;
        border-radius: 8px;
        font-weight: 700;
        background: #f0f0f0;
    }

    .lang-switch.active {
        background: #008000;
        color: white;
        box-shadow: 0 2px 4px rgba(0, 128, 0, 0.3);
    }

    /* Badge - verborgen op kleine schermen, getoond op grotere mobiel */
    .header-badge {
        display: none;
    }

    /* Header button - compact en mooi */
    .header-button {
        width: auto;
        min-width: 70px;
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 128, 0, 0.25);
        white-space: nowrap;
    }

    /* Horizontale scroll container wordt verticaal op mobiel */
    .horizontal-scroll-container {
        flex-direction: column;
        height: auto;
        margin-top: 90px;
        /* Ruimte voor de header */
        padding: 0;
        overflow-x: hidden;
    }

    .all-cards-container {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
        padding: 0.5rem;
        height: auto;
    }

    /* Alle cards krijgen volledige breedte en automatische hoogte */
    .card {
        width: 100% !important;
        flex: none !important;
        min-height: auto;
        height: auto !important;
        margin-bottom: 0;
        min-width: 0 !important;
    }

    /* Card content aanpassingen */
    .card-small-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .card-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
        margin-bottom: 0.25rem;
        line-height: 1.2;
    }

    .card-subtitle {
        font-size: clamp(1.4rem, 5vw, 2rem);
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .card-text {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        line-height: 1.5;
        margin-top: 1rem;
    }

    /* Groene kaarten met alleen tekst - verticaal gecentreerd */
    .card-green {
        justify-content: center;
    }

    .card-green .card-text {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Services group wordt een normale verticale layout */
    .services-group {
        flex: none !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: auto !important;
    }

    .big-white-card,
    .green-card-1,
    .green-card-2,
    .green-card-3 {
        grid-area: unset !important;
        width: 100% !important;
    }

    /* Verberg bottom-image op mobiel */
    .bottom-image {
        display: none !important;
    }

    /* Service cards groter op mobiel - titel boven, tekst onder */
    .green-card-1,
    .green-card-2 {
        min-height: 280px;
        padding: 1.75rem;
        justify-content: flex-start;
    }

    .green-card-1 .card-text,
    .green-card-2 .card-text {
        margin-top: auto;
    }

    .big-white-card {
        min-height: 320px;
    }

    /* Footer aanpassingen */
    .footer-wrapper {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
    }

    .footer-wrapper .footer-main {
        order: 1;
    }

    .footer-wrapper .footer-taglines {
        order: 2;
    }

    .footer-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem;
    }

    /* Reorder footer on mobile: right-stack first, left-card second-to-last */
    .footer-right-stack {
        order: 1;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
    }

    .footer-right-stack .card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .footer-left-card {
        order: 2;
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0;
        padding: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Reorder content within footer-left-card on mobile */
    /* Logo bovenaan, company-name tekst verborgen */
    .footer-left-card .footer-logo {
        order: 1;
        max-width: 160px;
        margin: 0 auto 0.75rem;
        padding: 0;
    }

    .footer-left-card>div:first-child {
        order: 2;
        text-align: center;
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    .footer-left-card>div:first-child .company-name {
        display: none;
        /* Verberg tekst, logo is nu bovenaan */
    }

    .footer-left-card .footer-address {
        order: 3;
    }

    .footer-left-card .footer-menus {
        order: 4;
    }

    .footer-left-card .footer-sectors {
        order: 5;
    }

    .footer-left-card .footer-link.underlined {
        display: block;
        margin-bottom: 0.3rem;
        font-size: 1rem;
    }

    .footer-menus {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1rem !important;
        margin: 0 !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .menu-column {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .menu-column:nth-child(3) {
        grid-column: 1 / -1;
        padding-top: 0.25rem;
    }

    .menu-title {
        font-size: 0.7rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #008000 !important;
        font-weight: 600;
        margin-bottom: 0.15rem !important;
    }

    .footer-link {
        font-size: 0.85rem !important;
        padding: 0.2rem 0 !important;
        line-height: 1.3;
    }

    .footer-address {
        text-align: center;
        margin: 0 !important;
        padding-top: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }

    .footer-address p {
        font-size: 0.85rem;
        color: #666;
        line-height: 1.4;
    }

    /* Footer taglines as last card on mobile */
    .footer-taglines {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 1.5rem;
        text-align: center;
        margin-top: 0.5rem;
        background: linear-gradient(135deg, #008000 0%, #006600 100%);
        border-radius: 8px;
        min-height: 100px;
    }

    .footer-taglines .tag-line,
    .footer-taglines .green-future {
        color: white !important;
        font-size: 1.1rem;
        font-weight: 500;
    }

    /* Contact en jobs cards */
    .contact-card,
    .jobs-card {
        margin-bottom: 0.5rem;
        padding: 1.5rem;
    }

    .contact-card p,
    .jobs-card p {
        margin-bottom: 1.25rem;
    }

    .mail-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        margin-top: 1rem;
    }

    /* Service tabs groter op mobiel */
    .service-tabs {
        gap: 0.15rem;
        margin-bottom: 1.25rem;
    }

    .service-tab {
        font-size: 1.3rem;
        padding: 0.15rem 0;
        line-height: 1.2;
    }

    /* SVG iconen aanpassen voor mobiel */
    .header-icon .shock {
        width: 60px;
        height: 60px;
    }

    /* Storingsdienst kaart (geel) - groot en opvallend */
    .card-yellow {
        min-height: 75vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem;
    }

    .card-yellow .card-small-title {
        order: 1;
    }

    .card-yellow .shock {
        order: 2;
        width: 100px;
        height: 100px;
        margin: auto 0;
        align-self: center;
    }

    .card-yellow .vca-badge {
        order: 2;
        width: 100px;
        height: 100px;
        margin: auto 0;
        align-self: center;
    }

    .card-yellow .card-text {
        order: 3;
        margin-top: auto;
    }

    /* Paneelbouw kaart (blauw) - 75vh op mobiel */
    .card-blue {
        min-height: 75vh !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem;
    }

    .card-blue .card-title {
        order: 1;
    }

    .card-blue .card-text {
        order: 2;
        margin-top: auto;
    }

    /* Vacature specifieke aanpassingen */
    .vacancy-content {
        margin-top: 15px !important;
        gap: 15px !important;
    }

    .vacancy-section {
        margin-bottom: 1rem;
    }

    .vacancy-section ul {
        margin-top: 8px !important;
        padding-left: 15px !important;
    }

    .vacancy-section li {
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

    /* Kaart container voor vacature pagina */
    .map-card {
        height: 300px !important;
        margin-top: 15px !important;
    }

    #map-container {
        height: 100% !important;
    }
}

/* Extra kleine schermen (onder 480px) */
@media (max-width: 480px) {
    .card {
        padding: 1.5rem;
    }

    .card-title,
    .card-subtitle {
        font-size: 2.2rem;
    }

    header {
        top: 0.4rem;
        left: 0.4rem;
        right: 0.4rem;
    }

    .header-wrapper {
        gap: 0.4rem;
    }

    .header-main {
        padding: 0.5rem 0.6rem;
        border-radius: 8px;
    }

    .logo-img {
        height: 1.4rem;
    }

    .lang-switch {
        padding: 0.35rem 0.4rem;
        font-size: 0.65rem;
        min-height: 32px;
        min-width: 32px;
        border-radius: 6px;
    }

    .header-button {
        min-width: 60px;
        padding: 0.5rem 0.8rem;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .badge-text {
        font-size: 0.45rem;
    }

    .footer-wrapper {
        padding: 0.5rem !important;
    }

    .footer-left-card {
        padding: 1.5rem;
    }

    /* Taal switcher compacter maken */
    .lang-switch {
        padding: 0.25rem 0.4rem;
        font-size: 0.6rem;
        min-height: 28px;
        min-width: 28px;
    }

    /* Header badge kleiner op 480px */
    .header-badge {
        padding: 0.3rem 0.5rem;
    }

    .badge-text {
        font-size: 0.5rem;
    }
}

/* Zeer kleine schermen (kleine telefoons) */
@media (max-width: 380px) {
    header {
        top: 0.3rem;
        left: 0.3rem;
        right: 0.3rem;
    }

    .header-wrapper {
        gap: 0.3rem;
    }

    .header-main {
        padding: 0.45rem 0.5rem;
        border-radius: 8px;
    }

    .logo-img {
        height: 1.25rem;
    }

    .header-button {
        min-width: 55px;
        padding: 0.45rem 0.6rem;
        font-size: 0.65rem;
        border-radius: 8px;
    }

    .lang-switch {
        padding: 0.3rem 0.35rem;
        font-size: 0.6rem;
        min-height: 28px;
        min-width: 28px;
        border-radius: 6px;
    }

    /* Footer op kleine schermen */
    .footer-menus {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .menu-column:nth-child(3) {
        grid-column: 1;
    }
}

/* Extreem kleine schermen */
@media (max-width: 340px) {
    header {
        top: 0.25rem;
        left: 0.25rem;
        right: 0.25rem;
    }

    .header-wrapper {
        gap: 0.25rem;
    }

    .header-main {
        padding: 0.4rem 0.45rem;
    }

    .header-button {
        min-width: 50px;
        padding: 0.4rem 0.5rem;
        font-size: 0.6rem;
    }

    .lang-switch {
        min-height: 26px;
        min-width: 26px;
        font-size: 0.55rem;
    }

    .logo-img {
        height: 1.15rem;
    }
}

/* Tablet modus (iPad portrait en landscape) */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Header button fix voor tablet - voorkom tekst wrapping */
    .header-button {
        width: auto;
        min-width: 120px;
        padding: 0.8rem 1.2rem;
        white-space: nowrap;
    }

    .card {
        flex: 0 0 max(45vw, 460px) !important;
        min-width: 460px !important;
    }

    .card-title,
    .card-subtitle {
        font-size: 2.2rem;
    }

    .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .footer-left-card h3.company-name {
        font-size: 2.5rem;
    }

    /* Services group aanpassing voor tablets */
    .services-group {
        flex: 0 0 120vw !important;
        grid-template-columns: 40vw repeat(2, 1fr);
    }

    .services-group .card-title {
        font-size: 1.5rem;
    }

    .services-group .card-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Service tabs responsive voor tablets */
    .service-tab {
        font-size: 1.3rem;
    }

    .services-group .card-small-title {
        font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    }

    /* Overflow handling voor groene cards */
    .green-card-1,
    .green-card-2 {
        overflow-y: auto;
    }

    /* History mode footer fix voor tablets */
    .history-mode .footer-wrapper {
        grid-template-rows: 1fr auto !important;
    }

    .history-mode .footer-taglines {
        min-height: 60px;
        flex-shrink: 0;
    }

    /* Vacancy mode footer fix voor tablets */
    .vacancy-mode .footer-wrapper {
        grid-template-rows: 1fr auto !important;
    }

    .vacancy-mode .footer-taglines {
        min-height: 60px;
        flex-shrink: 0;
    }

    /* Vacancy mode card fonts - vaste groottes */
    .vacancy-mode .card-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .vacancy-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* History mode card fonts - vaste groottes */
    .history-mode .card-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .history-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Landscape modus voor tablets */
@media (max-width: 1024px) and (orientation: landscape) {
    .horizontal-scroll-container {
        margin-top: 86px;
    }

    .card-title,
    .card-subtitle {
        font-size: 2.2rem;
    }

    .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Services group landscape - nog compacter */
    .services-group .card-title {
        font-size: 1.5rem;
    }

    .services-group .card-text {
        font-size: clamp(0.7rem, 1.2vw, 0.85rem);
        line-height: 1.35;
    }

    /* Service tabs responsive voor landscape */
    .service-tab {
        font-size: clamp(0.85rem, 2vw, 1.3rem);
    }

    .services-group .card-small-title {
        font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    }

    .green-card-1,
    .green-card-2 {
        overflow-y: auto;
    }

    /* History/vacancy mode footer fix voor landscape tablets */
    .history-mode .footer-wrapper,
    .vacancy-mode .footer-wrapper {
        grid-template-rows: 1fr auto !important;
    }

    /* Vacancy/history mode card fonts - vaste groottes */
    .vacancy-mode .card-title,
    .history-mode .card-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .vacancy-mode .card-text,
    .history-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .history-mode .footer-taglines,
    .vacancy-mode .footer-taglines {
        min-height: 50px;
        flex-shrink: 0;
    }
}

/* Verbeterde touch targets voor mobiel */
@media (max-width: 768px) {

    .header-icon,
    .mail-button,
    button:not(.lang-switch):not(.header-button) {
        min-height: 44px;
        /* Apple's aanbevolen minimum touch target */
    }

    /* Header button en lang-switch kleiner houden */
    .header-button {
        min-height: 36px;
    }

    .lang-switch {
        min-height: 32px;
    }

    /* Zorg ervoor dat klikbare elementen genoeg ruimte hebben */
    .footer-link {
        padding: 0.5rem 0;
        display: block;
    }

    /* Back button optimalisatie */
    #back-button {
        min-height: 44px !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Fix voor electricity effects op mobiel */
@media (max-width: 768px) {
    .electricity-grid {
        display: none !important;
        /* Schakel elektrische effecten uit op mobiel voor betere performance */
    }

    .electric-cursor {
        display: none !important;
    }
}

/* Zorg ervoor dat afbeeldingen responsive blijven */
@media (max-width: 768px) {

    /* Afbeeldingskaarten volledig vullend op mobiel */
    .card-image {
        padding: 0 !important;
        border-radius: 8px;
        overflow: hidden;
    }

    .card-image img {
        width: 100%;
        height: 90vw;
        /* Proportionele hoogte gebaseerd op schermbreedte */
        min-height: 380px;
        max-height: 520px;
        object-fit: cover;
        display: block;
    }

    /* Voor grotere afbeelding cards */
    .card-image[style*="50vw"] img,
    .card-image[style*="80vw"] img {
        height: 70vw;
        max-height: 400px;
    }
}

/* Loading states verbeteren voor mobiel */
@media (max-width: 768px) {
    #loader {
        backdrop-filter: blur(5px);
    }

    .loader-spinner {
        padding: 15px !important;
    }

    .loader-spinner .shock {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Specifieke styling voor vacature pagina op desktop - behoudt horizontale scroll */
@media (min-width: 769px) {

    /* Wanneer we in vacature mode zijn, behoudt horizontale scroll maar maakt kaarten breder */
    .vacancy-mode .all-cards-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        gap: 1rem;
        padding: 1.5rem;
        width: auto;
        /* Laat de breedte automatisch berekenen */
    }

    /* Maak vacature cards breder en beter leesbaar */
    .vacancy-mode .card {
        flex: 0 0 460px;
        /* Bredere cards voor betere leesbaarheid */
        min-height: 400px;
        min-width: 460px !important;
    }

    /* Maak enkele specifieke cards nog breder voor meer content */
    .vacancy-mode .card:nth-child(4),
    /* Hoofdvacature details */
    .vacancy-mode .card:nth-child(5) {
        /* Wat bieden wij */
        flex: 0 0 600px;
        width: 600px !important;
        min-height: 500px;
    }

    /* Footer past zich aan in vacancy mode */
    .vacancy-mode .footer-wrapper {
        flex: 0 0 calc(100vw - 3rem);
        width: calc(100vw - 3rem) !important;
    }

    /* Card titels en tekst - vaste groottes */
    .vacancy-mode .card-title {
        font-size: 2.2rem;
        line-height: 1.2;
        font-weight: bold;
    }

    .vacancy-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .vacancy-mode .vacancy-section {
        margin-bottom: 1rem;
    }

    .vacancy-mode .vacancy-section strong {
        font-size: clamp(0.85rem, 1.6vw, 1.1rem);
        display: block;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .vacancy-mode .vacancy-section ul {
        margin-top: 8px;
        padding-left: 20px;
    }

    .vacancy-mode .vacancy-section li {
        margin-bottom: 0.3rem;
        line-height: 1.35;
        font-size: clamp(0.7rem, 1.3vw, 0.9rem);
    }

    /* Verbeter de kaart layout */
    .vacancy-mode .map-card {
        height: 400px;
    }

    /* Zorg dat de horizontale scroll container zijn eigenschappen behoudt */
    .vacancy-mode .horizontal-scroll-container {
        display: flex;
        margin-top: 86px;
        height: calc(100vh - 86px);
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ===== VACANCY MODE SPECIFIC FIXES ===== */

/* Vacancy mode specific styles */
.vacancy-mode .all-cards-container {
    gap: 1rem !important;
    /* Rechterpadding = 0. Safari telt eind-padding NIET mee in scrollWidth en
       Chrome wél; door 0 te gebruiken is de scrollbreedte in beide browsers
       gelijk. De 24px witruimte aan het eindpunt wordt via JS geklemd
       (horizontal-scroll.js), zodat de footer in álle browsers exact onder de
       'bel ons direct'-knop uitlijnt. */
    padding: 1rem 0 1rem 1.5rem !important;
    width: max-content !important;
}

.vacancy-mode .horizontal-scroll-container {
    margin-top: 86px !important;
    height: calc(100vh - 86px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Vacancy cards padding consistent met main page */
.vacancy-mode .card {
    padding: 2rem;
    min-width: 460px;
}

/* Vacancy mode font sizes - same as normal mode */
.vacancy-mode .card-title,
.vacancy-mode .card-subtitle {
    font-size: 2.2rem;
}

.vacancy-mode .card-text {
    font-size: 1rem;
    line-height: 1.5;
}

/* Afbeelding cards moeten geen padding hebben */
.vacancy-mode .card-image {
    padding: 0 !important;
}

/* Remove viewport width constraints for vacancy mode on desktop */
@media (min-width: 769px) {
    .vacancy-mode .horizontal-scroll-container {
        width: 100vw !important;
        max-width: none !important;
        margin-top: 86px !important;
        height: calc(100vh - 86px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .vacancy-mode .all-cards-container {
        display: flex !important;
        flex-direction: row !important;
    }

    /* Remove any flex constraints that limit width */
    .vacancy-mode .footer-wrapper {
        flex: 0 0 calc(100vw - 3rem) !important;
        width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
    }

    /* Ensure individual cards don't get constrained */
    .vacancy-mode .card {
        flex-shrink: 0 !important;
        max-width: none !important;
    }

    /* Override body overflow for vacancy mode */
    body.vacancy-mode {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* Fix any remaining 100vw constraints */
    .vacancy-mode * {
        max-width: none;
    }

    .vacancy-mode .card[style*="100vw"],
    .vacancy-mode .footer-wrapper[style*="100vw"] {
        width: calc(100vw - 1.5rem) !important;
    }
}

/* Hide scrollbar for vacancy mode */
.vacancy-mode .horizontal-scroll-container {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.vacancy-mode .horizontal-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

body.vacancy-mode {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.vacancy-mode::-webkit-scrollbar {
    display: none;
}

/* Ensure vacancy cards have proper dimensions on desktop */
@media (min-width: 769px) {
    .vacancy-mode .all-cards-container {
        align-items: stretch !important;
    }

    .vacancy-mode .card {
        flex-shrink: 0;
        min-width: 460px;
        max-width: 600px;
        /* Verwijder min-height zodat cards de container hoogte vullen */
        height: auto;
        align-self: stretch;
    }

    /* Specific widths for different vacancy cards */
    .vacancy-mode .card:nth-child(1),
    /* Werken bij Dralco */
    .vacancy-mode .card:nth-child(2),
    /* Elektrisch vakmanschap */
    .vacancy-mode .card:nth-child(6),
    /* Solliciteer */
    .vacancy-mode .card:nth-child(7) {
        /* Contact */
        flex: 0 0 460px;
        min-width: 460px;
    }

    .vacancy-mode .card:nth-child(3) {
        /* Afbeelding */
        flex: 0 0 460px;
        min-width: 460px;
    }

    .vacancy-mode .card:nth-child(4),
    /* Hoofdvacature details */
    .vacancy-mode .card:nth-child(5) {
        /* Wat bieden wij */
        flex: 0 0 600px;
        width: 600px;
    }

    /* Make sure map container works properly */
    .vacancy-mode #map-container {
        min-height: 200px !important;
        width: 100% !important;
    }

    /* Footer in vacancy mode - identiek aan normale weergave */
    .vacancy-mode .footer-wrapper {
        height: 100% !important;
        display: grid !important;
        grid-template-rows: 90% auto !important;
        padding: 0 !important;
        gap: 1rem !important;
    }

    .vacancy-mode .footer-main {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

}

/* Tablet fixes for vacancy mode footer */
@media (max-width: 1100px) and (min-width: 769px) {
    .vacancy-mode .footer-main {
        grid-template-columns: 1fr auto !important;
    }

    .vacancy-mode .footer-left-card {
        min-width: 800px !important;
    }

    .vacancy-mode .footer-right-stack {
        min-width: 380px;
    }

    .vacancy-mode .footer-right-stack .card {
        min-width: 380px !important;
    }
}

/* Tablet fixes for history mode footer */
@media (max-width: 1100px) and (min-width: 769px) {
    .history-mode .footer-main {
        grid-template-columns: 1fr auto !important;
    }

    .history-mode .footer-left-card {
        min-width: 800px !important;
    }

    .history-mode .footer-right-stack {
        min-width: 460px;
    }

    .history-mode .footer-right-stack .card {
        min-width: 460px !important;
    }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .vacancy-mode .horizontal-scroll-container {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    .vacancy-mode .all-cards-container {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    .vacancy-mode .card {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 0;
        min-width: 0 !important;
    }

    /* Werken bij Dralco card - iets groter */
    .vacancy-mode .card.card-green:first-child {
        min-height: 220px;
    }

    /* Elektrisch vakmanschap card - groter */
    .vacancy-mode .card.card-yellow {
        min-height: 280px;
        padding: 1.5rem;
    }

    /* Vacancy mode mobile card fonts - zelfde als normale modus */
    .vacancy-mode .card-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
        line-height: 1.2;
    }

    .vacancy-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Footer wrapper geen extra ruimte */
    .vacancy-mode .footer-wrapper {
        margin-top: 0 !important;
        padding: 0 !important;
    }
}

/* Fix for text overflow in vacancy cards */
.vacancy-content {
    overflow-y: auto;
    max-height: calc(100% - 80px);
    /* Leave space for title and subtitle */
}

.vacancy-section {
    margin-bottom: 1rem;
}

.vacancy-section ul {
    margin-top: 0.4rem;
    padding-left: 1.2rem;
}

.vacancy-section li {
    margin-bottom: 0.3rem;
    line-height: 1.35;
    font-size: clamp(0.7rem, 1.3vw, 0.9rem);
}

/* ===== VACANCY WIDE CARD ===== */
.vacancy-wide-card {
    padding: 2rem 2.5rem;
    min-width: 820px;
}

.vacancy-wide-card .card-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #008000;
    line-height: 1.2;
}

.vacancy-meta {
    font-size: clamp(0.7rem, 1.3vw, 0.95rem);
    color: #666;
}

.vacancy-meta strong {
    color: #333;
}

.vacancy-columns {
    font-size: clamp(0.7rem, 1.3vw, 0.95rem);
}

.vacancy-column-left,
.vacancy-column-right {
    display: flex;
    flex-direction: column;
}

.vacancy-section strong {
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
    color: #008000;
    display: block;
    margin-bottom: 0.4rem;
}

@media (max-width: 768px) {
    .vacancy-wide-card {
        padding: 1.5rem;
        overflow-y: auto;
    }

    .vacancy-wide-card .card-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .vacancy-meta {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .vacancy-columns {
        display: block !important;
        grid-template-columns: 1fr !important;
        font-size: 0.95rem !important;
    }

    .vacancy-column-left,
    .vacancy-column-right {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    /* Vacancy intro paragraphs - zelfde grootte als list items */
    .vacancy-column-left p,
    .vacancy-column-right p {
        font-size: 0.95rem !important;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .vacancy-column-right {
        margin-top: 0;
    }

    .vacancy-section {
        margin-bottom: 1.25rem;
    }

    .vacancy-section strong {
        font-size: 1.05rem;
        display: block;
        margin-bottom: 0.5rem;
        color: #008000;
    }

    .vacancy-section ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .vacancy-section li {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.35rem;
    }

    .vacancy-disclaimer {
        font-size: 0.85rem;
        margin-top: 1rem;
    }
}

/* ===== VACANCY TABS ===== */
.vacancy-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vacancy-tab {
    padding: 0.5rem 1rem;
    border: 2px solid #008000;
    background: transparent;
    color: #008000;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.vacancy-tab:hover {
    background: rgba(0, 128, 0, 0.1);
}

.vacancy-tab.active {
    background: #008000;
    color: white;
}

.vacancy-tab.active:hover {
    background: #006600;
}

/* Klik-indicator: chevron toont aan dat een vacaturetab aanklikbaar/geselecteerd is */
.vacancy-tab::after {
    content: '›';
    display: inline-block;
    margin-left: 0.4rem;
    font-weight: bold;
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.vacancy-tab:hover::after,
.vacancy-tab.active::after {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .vacancy-tabs {
        gap: 0.4rem;
    }

    .vacancy-tab {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        flex: 1 1 auto;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vacancy-tab {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }
}

/* ===== VACANCY SWITCHING SKELETON EFFECT ===== */
.vacancy-switching .vacancy-title,
.vacancy-switching .vacancy-meta,
.vacancy-switching .vacancy-column-left,
.vacancy-switching .vacancy-column-right {
    position: relative;
    color: transparent !important;
    background: linear-gradient(90deg, #e8f5e8 25%, #c8e6c8 50%, #e8f5e8 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1s ease-in-out infinite;
    border-radius: 4px;
}

.vacancy-switching .vacancy-title *,
.vacancy-switching .vacancy-meta *,
.vacancy-switching .vacancy-column-left *,
.vacancy-switching .vacancy-column-right * {
    visibility: hidden;
}

.vacancy-switched .vacancy-title,
.vacancy-switched .vacancy-meta,
.vacancy-switched .vacancy-column-left,
.vacancy-switched .vacancy-column-right {
    animation: fadeInText 0.3s ease-out;
}

/* ===== VACANCY SKELETON EFFECT ON LANGUAGE SWITCH ===== */
body.vacancy-mode.lang-switching .vacancy-title,
body.vacancy-mode.lang-switching .vacancy-meta,
body.vacancy-mode.lang-switching .vacancy-column-left,
body.vacancy-mode.lang-switching .vacancy-column-right,
body.vacancy-mode.lang-switching .vacancy-disclaimer {
    position: relative;
    color: transparent !important;
    background: linear-gradient(90deg, #e8f5e8 25%, #c8e6c8 50%, #e8f5e8 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1s ease-in-out infinite;
    border-radius: 4px;
}

body.vacancy-mode.lang-switching .vacancy-title *,
body.vacancy-mode.lang-switching .vacancy-meta *,
body.vacancy-mode.lang-switching .vacancy-column-left *,
body.vacancy-mode.lang-switching .vacancy-column-right *,
body.vacancy-mode.lang-switching .vacancy-disclaimer * {
    visibility: hidden;
}

body.vacancy-mode.lang-switched .vacancy-title,
body.vacancy-mode.lang-switched .vacancy-meta,
body.vacancy-mode.lang-switched .vacancy-column-left,
body.vacancy-mode.lang-switched .vacancy-column-right,
body.vacancy-mode.lang-switched .vacancy-disclaimer {
    animation: fadeInText 0.3s ease-out;
}

/* ===== BUTTON INTERACTION FIXES ===== */

.jobs-card .mail-button {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
}

/* Make sure parent elements don't block clicks */
.jobs-card {
    position: relative;
    z-index: 1;
}

/* Fix for electricity grid overlay blocking clicks */
.electricity-grid {
    pointer-events: none !important;
}

.electricity-grid * {
    pointer-events: none !important;
}

/* Ensure all interactive elements are above overlays */
.mail-button,
.lang-switch,
.header-button,
.header-icon,
.footer-link {
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

/* Button improvements */
.vacancy-mode .mail-button {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Back button mobile improvements */
.vacancy-mode #back-button {
    min-height: 48px !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
    display: flex;
    align-items: center;
    text-align: center;
}

/* Reset any desktop-specific transforms */
.vacancy-mode .horizontal-scroll-container {
    transform: none !important;
}

/* Desktop: geen verticaal scrollen in vacancy mode */
@media (min-width: 769px) {
    body.vacancy-mode {
        overflow: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .vacancy-mode .horizontal-scroll-container {
        margin-top: 86px !important;
        height: calc(100vh - 86px) !important;
        max-height: calc(100vh - 86px) !important;
    }

    .vacancy-mode .all-cards-container {
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* Mobile: wel verticaal scrollen in vacancy mode */
@media (max-width: 768px) {
    body.vacancy-mode {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* SVG icons in vacancy cards */
.vacancy-mode .card-yellow .shock,
.vacancy-mode .card .shock {
    width: 60px !important;
    height: 60px !important;
}

/* ===== HISTORY MODE SPECIFIC STYLES ===== */

/* Hide header badge (familiebedrijf sinds 2006) in history mode */
.history-mode .header-badge {
    display: none !important;
}

/* History mode specific styles - inherit from vacancy mode */
.history-mode .all-cards-container {
    gap: 1rem !important;
    /* Zie vacancy: rechterpadding 0 (browseronafhankelijk); de eindwitruimte
       komt uit de ::after-spacer. */
    padding: 1rem 0 1rem 1.5rem !important;
    width: max-content !important;
}

.history-mode .horizontal-scroll-container {
    margin-top: 86px !important;
    height: calc(100vh - 86px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.history-mode .card {
    padding: 2rem;
    min-width: 460px;
}

/* History mode font sizes - same as normal mode */
.history-mode .card-title,
.history-mode .card-subtitle {
    font-size: 2.2rem;
}

.history-mode .card-text {
    font-size: 1rem;
    line-height: 1.5;
}

.history-mode .card-image {
    padding: 0 !important;
}

/* History mode cookie banner fix */
.history-mode .cookie-banner,
.history-mode .cookie-banner * {
    background: initial;
    animation: none;
}

.history-mode .cookie-banner {
    background-color: white !important;
    animation: cookieSlideIn 0.4s ease-out !important;
}

.history-mode .cookie-banner [data-translate] {
    color: inherit !important;
    background: none !important;
}

.history-mode .cookie-btn-primary {
    background-color: #008000 !important;
    color: white !important;
}

.history-mode .cookie-btn-secondary {
    background-color: white !important;
    color: #333 !important;
}

/* Desktop history mode */
@media (min-width: 769px) {
    .history-mode .horizontal-scroll-container {
        width: 100vw !important;
        max-width: none !important;
        margin-top: 86px !important;
        height: calc(100vh - 86px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .history-mode .all-cards-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }

    .history-mode .card {
        flex-shrink: 0 !important;
        min-width: 460px !important;
        max-width: none !important;
        height: auto;
        align-self: stretch;
    }

    .history-mode .footer-wrapper {
        flex: 0 0 calc(100vw - 3rem) !important;
        width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
        height: 100% !important;
        display: grid !important;
        grid-template-rows: 90% auto !important;
        padding: 0 !important;
        gap: 1rem !important;
    }

    .history-mode .footer-main {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    body.history-mode {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .history-mode .card-title {
        font-size: 2.2rem;
        line-height: 1.2;
        font-weight: bold;
    }

    .history-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Mobile history mode */
@media (max-width: 768px) {
    .history-mode .horizontal-scroll-container {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    .history-mode .all-cards-container {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    .history-mode .card {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 0;
        min-width: 0 !important;
    }

    body.history-mode {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* History mode mobile card fonts - zelfde als normale modus */
    .history-mode .card-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
        line-height: 1.2;
    }

    .history-mode .card-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Footer wrapper geen extra ruimte */
    .history-mode .footer-wrapper {
        margin-top: 0 !important;
        padding: 0 !important;
    }
}

/* History mode button improvements */
.history-mode .mail-button {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-mode #back-button {
    min-height: 48px !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
    display: flex;
    align-items: center;
    text-align: center;
}

.history-mode .horizontal-scroll-container {
    transform: none !important;
}

/* Hide scrollbar for history mode */
.history-mode .horizontal-scroll-container {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.history-mode .horizontal-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

body.history-mode {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.history-mode::-webkit-scrollbar {
    display: none;
}

/* Header badge hover effect */
.header-badge {
    transition: all 0.2s ease;
}

.header-badge:hover {
    background-color: #008000;
    cursor: pointer;
}

.header-badge:hover .badge-text {
    color: white;
}

/* ===== LEGAL MODALS ===== */

/* Block all scrolling when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

body.modal-open .horizontal-scroll-container {
    pointer-events: none;
}

.legal-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.legal-modal.show {
    display: flex;
}

.legal-modal-content {
    background-color: white;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.legal-modal-content h2 {
    font-size: 2rem;
    color: #008000;
    margin: 0;
    padding: 2rem 3rem 1rem;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.legal-modal-body {
    padding: 1.5rem 3rem 2rem;
    color: #333;
    line-height: 1.7;
}

.legal-modal-body h3 {
    font-size: 1.2rem;
    color: #008000;
    margin: 1.5rem 0 0.75rem;
}

.legal-modal-body h3:first-child {
    margin-top: 0;
}

.legal-modal-body p {
    margin: 0 0 1rem;
}

.legal-modal-body ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
}

.legal-modal-body li {
    margin-bottom: 0.5rem;
}

.legal-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
    z-index: 2;
}

.legal-modal-close:hover {
    background: #008000;
    color: white;
}

/* Mobile modal styles */
@media (max-width: 768px) {
    .legal-modal {
        padding: 1rem;
    }

    .legal-modal-content {
        max-height: 95vh;
    }

    .legal-modal-content h2 {
        font-size: 1.5rem;
        padding: 1.5rem 1.5rem 1rem;
        padding-right: 3rem;
    }

    .legal-modal-body {
        padding: 1rem 1.5rem 1.5rem;
    }

    .legal-modal-body h3 {
        font-size: 1.1rem;
    }

    .legal-modal-close {
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   NORMALE MODUS — footer uitlijning & kolombreedte gelijk aan geschiedenis-modus
   ========================================================================== */
@media (min-width: 769px) {
    /* Footer even breed als in geschiedenis-modus zodat het einde netjes
       uitlijnt en de linkerkaart niet meer wordt afgesneden. */
    body:not(.history-mode):not(.vacancy-mode) .footer-wrapper {
        flex: 0 0 calc(100vw - 3rem) !important;
        width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
        padding: 0 !important;
    }

    /* Zelfde kolomverhouding (~2:1) als in geschiedenis-modus. In
       geschiedenis-modus is .all-cards-container width:max-content, waardoor
       1fr 1fr daar content-gestuurd naar ±2:1 oplost. In normale modus heeft
       de container een vaste breedte, dus leggen we die 2:1 verhouding hier
       expliciet vast zodat de Contact- en Werken-kaarten niet te breed worden. */
    body:not(.history-mode):not(.vacancy-mode) .footer-main {
        grid-template-columns: 2fr 1fr !important;
    }
}

/* ==========================================================================
   SEO-sectorlinks in de footer verbergen (pagina's staan op redirect → home).
   Links + scheidingstekens wit zodat bezoekers ze niet zien; ook geen
   zichtbare scheidingslijn of hover-onthulling meer.
   ========================================================================== */
.footer-sectors {
    border-top: none;
}

.footer-sectors a,
.footer-sectors span,
.footer-sectors a:hover {
    color: #fff;
    text-decoration: none;
    cursor: default;
}

/* ==========================================================================
   GESCHIEDENIS- & VACATURES-MODUS — geen overscroll/trillen aan het einde
   (eindpunt = eindpunt; beide gebruiken native horizontaal scrollen)
   ========================================================================== */
.history-mode .horizontal-scroll-container,
.vacancy-mode .horizontal-scroll-container {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}

body.history-mode,
body.vacancy-mode {
    overscroll-behavior: none;
}

/* ==========================================================================
   VACATURES-MODUS — footerbreedte gelijktrekken met geschiedenis-modus.
   Een eerdere regel ([style*="100vw"]) forceerde de footer naar
   calc(100vw - 1.5rem), terwijl de container 3rem rechterpadding heeft.
   Dat verschil van 24px zorgde ervoor dat de footer aan het einde tegen de
   linkerrand plakte en het eindpunt niet "schoon" uitlijnde. Nu identiek
   aan geschiedenis-modus: calc(100vw - 3rem).
   ========================================================================== */
@media (min-width: 769px) {
    .vacancy-mode .footer-wrapper[style*="100vw"] {
        width: calc(100vw - 3rem) !important;
        flex: 0 0 calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
    }

    /* Vacatures-footer dezelfde kolomindeling als geschiedenis-modus
       (repeat(2,1fr)). Met de oude '1fr auto' kon de rechterkolom
       (Contact/Benieuwd-kaarten) door de max-content-breedte + de inline
       'width:65vw' van de linkerkaart buiten de footer uitsteken — afhankelijk
       van het lettertype en de schermbreedte. Daardoor lijnde de rechterkant
       niet uit met de 'bel ons direct'-knop. repeat(2,1fr) houdt de
       rechterkolom netjes binnen de footerrand, net als in geschiedenis-modus. */
    .vacancy-mode .footer-main {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   Eind-witruimte voor de native-scroll modussen (vacatures + geschiedenis).
   Een onzichtbare spacer ná de footer levert 24px scrollbare ruimte, zodat de
   footer aan het einde 24px van de schermrand staat (uitgelijnd met de
   'bel ons direct'-knop). Dit is ECHTE content (geen padding), dus telt mee in
   scrollWidth in álle browsers — ook Safari, dat eind-padding negeert.
   De .all-cards-container heeft gap:1rem, dus de netto ruimte = 1rem (gap) +
   spacerbreedte. Voor 24px totaal: spacer = 24px - 1rem = 8px.
   ========================================================================== */
.vacancy-mode .all-cards-container::after,
.history-mode .all-cards-container::after {
    content: "";
    flex: 0 0 8px;
    align-self: stretch;
    pointer-events: none;
}

/* ==========================================================================
   Leaflet/OpenStreetMap-credit subtieler maken. De vermelding blijft staan en
   leesbaar (verplicht volgens de OSM-licentie), maar valt minder op.
   ========================================================================== */
.leaflet-control-attribution {
    opacity: 0.55;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.55) !important;
}

.leaflet-control-attribution a {
    color: #777;
}

/* ==========================================================================
   Klik-indicator: subtiele kleurwijziging bij hover (geen schaduw, geen lift).
   We gebruiken filter: brightness() zodat het op elke knopkleur werkt — ook
   op knoppen met een inline-achtergrond (#back-button, "Solliciteer nu").
   ========================================================================== */
.mail-button,
.header-button,
#back-button {
    transition: filter 0.2s ease, background-color 0.2s ease;
}

.mail-button:hover,
.header-button:hover,
#back-button:hover {
    filter: brightness(0.93);
    cursor: pointer;
}

.mail-button:active,
.header-button:active,
#back-button:active {
    filter: brightness(0.86);
}

/* Taalknoppen (NL/EN/DE): subtiele achtergrond bij hover. */
.lang-switch {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch:not(.active):hover {
    background-color: #ececec;
    cursor: pointer;
}