/* UNIVERSELE RESET: Lost browser/margin/padding inconsistenties op */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* EINDE RESET */

/* --------- Algemene Stijl --------- */
body {
    font-family: -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0; /* Teruggezet naar 0, de Universele Reset doet het werk */
    background-color: #39868E;  
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Homepage content vult de ruimte */
.logo-container {
    flex: 1;
}

/* NIEUW: Mobiele Header Balk (NU ZONDER LOGO BINNENIN) */
.mobile-header-bar {
    display: none; /* Standaard verborgen op desktop */
    position: fixed;
    top: 0; /* FIX: Zorgt dat de balk bovenaan de viewport staat */
    left: 0;
    width: 100%;
    height: 75px; /* Vaste hoogte voor de balk */
    background-color: #E0F7FA; /* LICHTBLAUWE ACHTERGROND */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 1000; /* Z-index van de balk */
    
    /* Flexbox: Knop links, ruimte rechts */
    display: flex;
    justify-content: space-between; /* Zorgt dat de hamburgerknop links staat */
    align-items: center;
    padding: 0 10px; /* Padding aan de zijkanten */
    gap: 0; /* Geen gap nodig */
    box-sizing: border-box;
    /* VERWIJDERD: position: relative; */ /* Dit veroorzaakte het ruimteprobleem */
}

/* NIEUWE STIJL: Het logo als apart, gefixeerd element */
.mobile-logo-fixed {
    display: none; /* Standaard verborgen op desktop */
    position: fixed;
    z-index: 1001; /* Hoger dan de balk (1000), lager dan het menu (1002) */
    
    /* Centrering aan de top van de balk (75px) */
    top: 10px; /* Geeft 10px marge bovenaan de 75px balk */
    left: 50%;
    transform: translateX(-50%); /* Horizontaal centreren */
    
    /* Zorgt dat het logo de juiste grootte heeft binnen de link */
}

/* Stijl voor het logo in de mobiele balk (Centreren) */
.mobile-logo-img {
    height: 55px; /* Aangepaste grootte voor mobiel */
    width: auto;
    display: block;
    /* Alle oude absolute positionering is nu verplaatst naar .mobile-logo-fixed */
}
/* Einde NIEUW: Mobiele Header Balk & Logo */


/* --------- Navigatie Menu (Google-stijl) --------- */
nav {
    display: flex;
    flex-wrap: wrap;  
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.88);
    padding: 0 10px;  
    border-bottom: 1px solid #e0e0e0;  
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);  
    box-sizing: border-box;
}

/* Links & Knoppen in de nav */
nav > a, .drop-btn, .drop-btn-static {
    color: #555;  
    padding: 16px 18px;  
    text-decoration: none;
    font-weight: 600;  
    display: inline-block;
    border-bottom: 3px solid transparent;
    border-left: 1px solid #e0e0e0;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    white-space: nowrap;  
    position: relative;  
    box-sizing: border-box;
}

/* NIEUW: Span-wrapper voor de tekst (voor de underline) */
nav > a span, .drop-btn span, .drop-btn-static span {
    position: relative;
    display: inline-block;
}

/* OUDE underline (volledige breedte) uitschakelen */
nav > a::after, .drop-btn::after {
    display: none;
}

/* NIEUWE Groeiende menu-underline (onder de tekst) */
nav > a span::after, .drop-btn span::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -4px; /* Positie net onder de tekst */
    left: 0;
    right: 0;
    height: 3px;
    background-color: #39868E;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover voor klikbare links */
nav > a:hover, .drop-btn:hover {
    color: #333;
    background-color: #f0f0f0;  
}

/* Underline-effect bij hover/active */
nav > a:hover span::after,
nav > a.active span::after,
.drop-btn:hover span::after,
.drop-btn.active span::after {
    transform: scaleX(1);
}

/* Active-stijl voor alle knoppen (ook static) */
nav > a.active, .drop-btn.active, .drop-btn-static.active {
    color: #39868E;  
    border-bottom-color: transparent;  
}

/* NIEUW: Styling voor NIET-KLIKBARE knop */
.drop-btn-static {
    cursor: default;
}
.drop-btn-static:hover {
    color: #555; /* Blijf standaardkleur */
    background-color: transparent; /* Behoud standaard achtergrond */
}
.drop-btn-static.active {
    color: #39868E; /* Mag wel 'actief' tonen als sub-item actief is */
}
.drop-btn-static span::after {
    display: none !important; /* Nooit een underline */
}

/* NIEUW: Styling voor logo in menu */
.nav-logo-link {
    padding: 0 15px; /* Padding om het logo */
    background: transparent; /* Maak de knop-achtergrond transparant */
    position: relative;
    z-index: 101; /* Boven de nav */
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: none;
}
.nav-logo-link:hover {
    background: transparent; /* Behoud transparantie */
}
.nav-logo-link::after { display: none; } /* Geen underline */

.nav-logo-img {
    display: block;
    height: 70px; /* HOGER DAN HET MENU */
    width: auto;
    margin: -10px 0; /* Negatieve margin om het 'eruit te laten springen' */
    border-radius: 4px;  
}


/* --------- Homepage Specifiek --------- */
body.homepage {
    background-color: #39868E;  
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;  
    animation: fadeInPage 0.6s ease-out forwards;
}

.logo-container img {
    max-width: 60%;  
    height: auto;
    border-radius: 10px;
}

/* (Stijlen voor andere subpagina's) */
.content-wrapper { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex: 1; }
.content-wrapper h1 { color: #39868E; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }

/* Stijl voor dia's op contactpagina's (1200px) */
.content-wrapper.dia-pagina {
    max-width: 1200px;  
    margin: 20px auto;
    padding: 0; /* FIX: Geen dubbele padding */
    background-color: transparent;  
    box-shadow: none;  
    animation: fadeInPage 0.6s ease-out forwards;
}

/* Stijl voor dia-pagina's die 100% breedte moeten zijn */
.content-wrapper-fullscreen {
    flex: 1;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    animation: fadeInPage 0.6s ease-out forwards;
}


.slide-image { width: 100%; max-width: 960px; display: block; margin: 20px auto; border: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Zorgt dat slide-image de 960px limiet negeert als het fullscreen is */
.content-wrapper-fullscreen .slide-image {
    max-width: 100%;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0; /* Geen ronde hoeken op fullscreen */
}

/* --- VERNIEUWDE THUMBNAIL STIJLEN --- */
.image-gallery {  
    width: 100%;  
    max-width: 100%; /* Veranderd van 960px */
    margin: 0 auto 20px auto;  
    border: none; /* Veranderd */
    box-shadow: none; /* Veranderd */
    border-radius: 0; /* Veranderd */
}
.image-gallery #mainImage {  
    width: 100%;  
    height: auto;  
    display: block;  
    border-radius: 0; /* Veranderd */
}

.thumbnail-nav {  
    display: flex;  
    justify-content: center;  
    gap: 20px;
    margin: 20px auto 15px auto;  
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    /* Lijn uit met de fullscreen afbeelding (100% breedte) */
    max-width: 100%;  
    box-sizing: border-box;
}

/* Stijl voor de nieuwe 'knop' (de wrapper) */
.thumbnail-item {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;  
    overflow: hidden; /* Zorgt dat de afbeelding netjes meebuigt */
}

/* De afbeelding in de knop */
.thumbnail-img {
    display: block;
    width: 150px; /* Iets groter dan de oude 120px */
    height: auto;
}

/* Het label onder de knop */
.thumbnail-label {
    display: block;
    text-align: center;
    font-weight: 600;
    color: #333;
    padding: 8px 5px;
    background-color: #f4f4f4;
    font-size: 0.9rem;
}

.thumbnail-item:hover {
    border-color: #ccc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px) scale(1.05);
}

.thumbnail-item.active {  
    border-color: #000000;  /* AANGEPAST: nu zwart */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* AANGEPAST: nu zwarte schaduw */
    transform: translateY(-2px) scale(1.05);
}
/* --- EINDE VERNIEUWDE THUMBNAIL STIJLEN --- */


/* Header op subpagina's (zonder logo) */
.page-header {  
    align-items: center;  
    padding: 20px;  
    width: 100%;  
    box-sizing: border-box;  
}
.page-header h1 {  
    color: #FFFFFF;  
    text-align: center;  
    border-bottom: none;  
    margin: 0;  
    font-size: 2.2rem;  
    padding: 0;  
}


/* --------- Stijl voor Hamburger Menu (GEREPAREERD EN GESTYLED) --------- */
.hamburger-btn {
    display: flex; /* Zorgt ervoor dat de knop zichtbaar is en de streepjes centreren */
    position: relative;  
    z-index: 1001;  
    
    background-color: transparent;  
    border: none;
    border-radius: 0;  
    
    /* FIX: Geen verticale grenzen */
    border-left: none;  
    border-right: none;
    
    padding: 0 8px; /* Kleinere padding */
    height: 100%;  
    cursor: pointer;
    box-shadow: none;  
    transition: background-color 0.2s, transform 0.3s ease-in-out;  
    
    /* Nodig om streepjes te centreren */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Hover effect voor de knop */
.hamburger-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Lichte hover */
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 3px;
    background-color: #39868E;
    margin: 4px 0; /* Zorgt voor ruimte tussen de streepjes */
    border-radius: 1px;
    transition: all 0.3s;  
}

/* De 'X' transformatie (VERWIJDERD) */
/* De regels voor .hamburger-btn.is-open zijn weggelaten, de knop blijft nu een hamburger */

.mobile-nav {
    height: 100%;
    width: 280px;  
    position: fixed;
    z-index: 1002; /* Hoogste Z-index om over balk en logo heen te komen */
    top: 0;
    left: -280px;  
    background-color: rgba(255, 255, 255, 0.98);  
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    padding-top: 75px; /* De 75px hoogte van de header */
    overflow-x: hidden;
    transition: left 0.3s ease-in-out;  
}

.mobile-nav.open {
    left: 0;  
}

.mobile-nav a {
    padding: 12px 15px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: block;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav a:hover {
    background-color: #f9f9f9;
    color: #39868E;
}

/* Actief mobiel menu-item */
.mobile-nav a.active {
    background-color: #f0f0f0;  
    color: #39868E;  
    font-weight: 700;  
}

.mobile-nav .close-btn {
    position: absolute;
    top: 15px; /* Iets lager i.v.m. de nieuwe header hoogte */
    right: 20px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #aaa;
    border-bottom: none;
    padding: 0;
}
.mobile-nav .close-btn:hover {
    background-color: transparent;
    color: #333;
}

/* --------- Footer Stijl --------- */
.site-footer {
    background-color: #2c2c2c;  
    color: #aaa;  
    text-align: center;
    padding: 25px 20px;
    margin-top: 40px;  
    font-size: 0.9rem;
    border-top: 1px solid #444;
}
.site-footer p {
    margin: 6px 0;  
}
.site-footer a {
    color: #ffffff;  
    text-decoration: none;
    font-weight: 600;
}
.site-footer a:hover {
    text-decoration: underline;
}

/* 'Terug naar Boven' Knop Stijl */
#scrollTopBtn {
    display: none;  
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1000;
    border: none;
    outline: none;
    background-color: #39868E;
    color: white;
    cursor: pointer;
    padding: 12px 15px;
    border-radius: 50%;  
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

#scrollTopBtn:hover {
    background-color: #2e6a71;  
    transform: translateY(-2px);
}

/* Keyframe voor Fade-in */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(10px);  
    }
    to {
        opacity: 1;
        transform: translateY(0);  
    }
}

/* --------- Dropdown Stijlen (V2) --------- */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    min-width: 440px;  
    border-radius: 25px;  
    display: none;  
    padding: 20px;
    gap: 20px;
    left: 50%;
    transform: translateX(-50%);  
    position: absolute;
    background-color: rgba(255, 255, 255, 0.88); /* Transparantie 88% */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 100;
    border-top: 3px solid #39868E;
    margin-top: 5px; /* Kleine ruimte tussen menu en submenu */
    overflow: hidden;
}

/* Klasse voor JS om menu te tonen */
.dropdown-content.is-open {
    display: flex;
}

/* Titel-kolom in submenu */
.dropdown-title {
    flex: 0 0 160px; /* Breder voor één regel */
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #f0f0f0;
    padding-right: 20px;
}

.dropdown-title h3 {
    color: #333;  
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    white-space: nowrap; /* Zekerheid */
}

/* Link-kolom in submenu */
.dropdown-links {
    /* flex: 1; */
}

.dropdown-content a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    font-weight: 600;
    border-bottom: none;
    border-left: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: padding-left 0.2s ease-out;
    display: flex;
    align-items: center;
}
.dropdown-content a::after {
    display: none; /* Geen underline animatie */
}

/* De 'icoon' kolom */
.dropdown-content a .icon {
    display: inline-block;
    color: #39868E;
    margin-right: 15px; /* De vaste ruimte */
    font-weight: bold; /* Maakt de > duidelijker */
}

/* De 'tekst' kolom */
.dropdown-content a .text {
    display: inline-block;
}


.dropdown-content a:hover {
    background-color: #f0f0f0;
    font-weight: 700;
    padding-left: 20px; /* Schuift de HELE regel op */
}

.dropdown-content a.active {
    background-color: #f0f0f0;
    font-weight: 700;
    color: #39868E;
}

/* --------- Mobiele Menu Stijlen --------- */

.mobile-nav a.mobile-sub-item {
    padding-left: 30px;  
    font-size: 1.0rem;
    color: #444;
}

.mobile-nav a.mobile-sub-item.active {
    background-color: #f0f0f0;  
    color: #39868E;  
    font-weight: 700;  
}

/* Niet-klikbare titel in mobiel menu */
.mobile-nav a.mobile-main-item-static {
    color: #333;
    font-weight: 700;  
    background-color: #f9f9f9;
}
.mobile-nav a.mobile-main-item-static:hover {
    background-color: #f9f9f9;
    color: #333;
    cursor: default;
}
.mobile-nav a.mobile-main-item-static.active {
    background-color: #f0f0f0;
    color: #39868E;
}

/* --------- Contact Pagina Stijlen --------- */

/* Layout voor 2 kolommen (wordt nu ook voor 1 kolom gebruikt) */
.contact-layout-container {
    display: flex;  
    gap: 30px;  
    align-items: flex-start;  
}
.contact-image-column {
    flex: 1;  
    min-width: 0;  
    margin: 20px auto;
    max-width: 960px;  
}
.contact-form-column {
    flex: 1;  
    margin: 0 auto;
    max-width: 900px;  
}

/* Afbeelding-dia met overlay */
.contact-image-container {
    position: relative;  
    width: 100%;
}
.contact-background-image {
    width: 100%;
    height: auto;
    display: block;  
    border-radius: 4px;  
}
.contact-info.overlay-box {
    position: absolute;
    bottom: 16%; /* Jouw finetuning */
    left: 50%;
    transform: translateX(-50%);  
    width: 90%;
    max-width: 400px;
    text-align: center;
}
.contact-info.overlay-box h3 {
    color: #000000;  
    text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.7);  
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    white-space: nowrap;  
}
.contact-info.overlay-box p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 8px 0;
    color: #000000;  
    text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.7);  
}
.contact-info.overlay-box a {
    color: #000000;  
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.7);  
}
.contact-info.overlay-box a:hover {
    text-decoration: underline;
}

/* Formulier Stijlen */
.contact-form-section {
    padding: 0;  
}
.contact-form-section h2 {
    text-align: left;  
    margin-top: 0;  
    margin-bottom: 20px;
    color: #FFFFFF; /* Wit, zoals de H1 */
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #FFFFFF; /* Wit, om te lezen op de #39868E achtergrond */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;  
    font-size: 1rem;
    font-family: inherit;
}
.form-group textarea {
    resize: vertical;  
}
.form-group button[type="submit"] {
    display: block;
    width: auto;  
    min-width: 150px;  
    padding: 12px 25px;  
    background-color: #ffffff; /* Wit, zoals in oude CSS */
    color: #39868E; /* Thema-kleur tekst */
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.form-group button[type="submit"]:hover {
    background-color: #f0f0f0; /* Lichtgrijze hover */
}

/* Media queries voor de contact layout */
@media (max-width: 900px) {  
    .contact-layout-container {
        flex-direction: column;  
        gap: 40px;  
    }
    .contact-form-column {
        max-width: 100%;  
    }
    .contact-form-section h2 {
        text-align: center;  
    }
    .form-group button[type="submit"] {
        width: 100%;  
    }
    
    /* Overlay op mobiel */
    .contact-info.overlay-box {
        bottom: 5%; /* Op mobiel iets lager houden, anders te hoog */
        width: 90%;  
        max-width: 500px;  
    }
    .contact-info.overlay-box h3 {
        font-size: 0.8rem;  
        margin-bottom: 3px;  
    }
    .contact-info.overlay-box p {
        font-size: 0.65rem;  
        line-height: 1.3;  
        margin: 3px 0;  
    }

    /* Thumbnail nav op mobiel */
    .thumbnail-nav {
        gap: 10px;
        padding: 10px;
    }
    .thumbnail-img {
        width: 120px;
    }
    .thumbnail-label {
        font-size: 0.8rem;
        padding: 6px;
    }
}

/* --- Media Queries --- */

@media (max-width: 900px) {
    /* Leeg - wordt nu vooral door 1024px query beheerd, maar 900px blijft voor contact-layout */
}

/* --- AANGEPAST: Mobiele Weergave (<= 1024px) --- */
@media (max-width: 1024px) {
    
    /* Zorgt dat de content onder de vaste header begint */
    body {
        padding-top: 76px; /* Aangepast naar 75px + 1px fix */
    }
    
    /* TOON MOBIELE HEADER BALK */
    .mobile-header-bar {
        display: flex;  
        top: 0;  
    }
    
    /* TOON HET GEFIXEERDE LOGO (NIEUW) */
    .mobile-logo-fixed {
        display: block;  
    }

    /* VERBERG DESKTOP NAVIGATIE */
    nav, .nav-wrapper {
        display: none;
        /* FIX: Reset de margin van de desktop nav om witte ruimte bovenaan te verwijderen */
        margin: 0 !important;  
    }
    
    /* De hamburgerknop is nu al correct ingesteld op display: flex in .hamburger-btn */
    
    /* Aanpassing voor de homepage, zodat het logo niet te hoog begint */
    body.homepage .logo-container {
        /* Trek 75px af van de min-height om rekening te houden met de vaste header */
        min-height: calc(80vh - 75px);
    }
}


/* --- AANGEPAST: Desktop Weergave (> 1025px) --- */
@media (min-width: 1025px) {
    
    /* NIEUW: Cursor voor hoofdafbeelding op desktop */
    #mainImage {
        cursor: pointer;
    }
    
    /* Zorg dat de mobiele header en het gefixeerde logo verborgen blijven op desktop */
    .mobile-header-bar, .mobile-logo-fixed {
        display: none !important;  
    }
    
    /* Haal de body-padding weg op desktop */
    body {
        /* Reset de padding voor desktop */
        padding-top: 0;  
    }
    
    /* Wrapper om de nav te centreren */
    .nav-wrapper {
        width: 100%;
        text-align: center; /* Centreer de inline-flex nav */
        position: relative;
        z-index: 100; /* Zorg dat menu boven content staat */
    }

    nav {
        display: inline-flex; /* Krimp naar inhoud */
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center; /* Verticaal centreren voor logo */
        
        margin: 20px auto; /* Centreer de balk & geef ruimte voor logo */
        
        /* De 'pil' vorm */
        background-color: rgba(255, 255, 255, 0.88);
        border-radius: 100px;  
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        padding: 0; /* Padding zit nu op de knoppen */
        position: relative;  
    }

    /* Verwijder de stretch-eigenschap */
    nav > a, .dropdown {
        flex: 0 1 auto; /* Krimp/groei normaal, niet stretchen */
    }
    
    /* Knoppen in de pil */
    nav > a, .drop-btn, .drop-btn-static {
        padding: 16px 20px;
        border-left: 1px solid #e0e0e0;
        border-bottom: none; /* Geen bottom border meer nodig */
    }
    
    /* Knoppen hover in de pil */
    nav > a:hover, .drop-btn:hover {
        background-color: #f0f0f0;
    }
    
    /* Ronde hoeken voor eerste/laatste knop */
    nav > a:first-child {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        border-left: none; /* Eerste item heeft geen linker border */
    }
    .dropdown:last-child > [class*="drop-btn"] {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }

    /* Zorg dat de niet-klikbare knop ook rondingen krijgt */
    .dropdown:last-child .drop-btn-static {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    .dropdown:last-child .drop-btn-static:hover {
        background-color: transparent; /* Behoud transparantie, zelfs op :hover */
    }

    /* HERPOSITIONERING DROPDOWN */
    .dropdown {
        position: static;  
    }
    
    .dropdown-content {
        transform: translateX(0);  
        left: 15px;  
        right: 15px;  
        width: auto;  
        min-width: 0;  
        margin-left: auto;  
        margin-right: auto;
        max-width: 95%;  
        box-sizing: border-box;  
        margin-top: 0;
        top: 100%;

        /* --- DE OPLOSSING (Jouw wens) --- */
        justify-content: flex-end;
    }
    
    .hamburger-btn {
        display: none;  
    }
}


/* --------- NIEUW: Lightbox Stijlen (Basis) --------- */

/* De overlay (standaard verborgen) */
.lightbox-overlay {
    display: none; /* Standaard verborgen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Donkere achtergrond */
    z-index: 2000; /* Boven alles */
    
    /* Flexbox om de content te centreren */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* De klasse die de lightbox toont (via JS) */
.lightbox-overlay.is-open {
    display: flex;
}

/* De 'X' sluitknop */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 3rem; /* Groter */
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
}
.lightbox-close:hover {
    color: #ccc;
    transform: scale(1.1);
}

/* De vergrote afbeelding in de lightbox */
#lightboxImage {
    display: block;
    max-width: 90vw; /* Max 90% van de vensterbreedte */
    max-height: 75vh; /* Max 75% van de vensterhoogte (ruimte voor thumbnails) */
    width: auto;
    height: auto;
    object-fit: contain; /* Zorgt dat de verhouding klopt */
    cursor: pointer; /* Zoals gevraagd: klik om te sluiten */
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* De wrapper voor de thumbnails in de lightbox */
#lightboxThumbnailNavWrapper {
    margin-top: 20px;
    max-width: 90vw;
    overflow-x: auto; /* Mocht je veel thumbnails hebben */
}

/* We hergebruiken je .thumbnail-nav stijl, maar zorgen dat de achtergrond in de lightbox past */
#lightboxThumbnailNavWrapper .thumbnail-nav {
    background-color: rgba(0, 0, 0, 0.2); /* Donkere variant */
    padding: 10px;
    margin-bottom: 0; /* Geen extra marge onderaan */
}

/* --- NIEUW: Zwarte rand voor actieve thumbnail op mobiel --- */
/* DIT HELE BLOK VERWIJDEREN: */
@media (max-width: 1024px) {
    .thumbnail-nav .thumbnail-item.active {
        border-color: #000000; /* Zwarte rand */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
    }
}

/* ===============================================
  NIEUW: Instructietekst voor Lightbox (desktop)
===============================================
*/

/* Dit stelt de 'standaard' stijl in (wit, cursief, links)
  en verbergt het op mobiel (display: none).
*/
.image-click-prompt {
    display: none; /* Standaard verborgen */
    
    max-width: 100%; /* Volledige breedte */
    margin: 15px auto 0 auto; /* Ruimte boven de afbeelding */
    padding: 0 30px; /* Geeft 30px ruimte aan de linker- en rechterkant */
    text-align: left; /* Lijn tekst links uit */

    color: #FFFFFF;
    font-size: 0.95rem;
    font-style: italic;
    box-sizing: border-box;
}

/* Deze 'media query' zorgt ervoor dat de tekst
  alleen zichtbaar wordt op schermen breder dan 1024px.
*/
@media (min-width: 1025px) {
    .image-click-prompt {
        display: block; /* Maak zichtbaar op desktop */
    }
}

/* ===============================================
  NIEUW: Actieve thumbnail IN de lightbox (Dik & Donkerblauw)
===============================================
*/

#lightboxThumbnailNav .thumbnail-item.active {
    
    border-color: #000000; 
    
    /* Optioneel: een bijpassende blauwe schaduw */
    box-shadow: 0 0 10px rgba(0, 0, 139, 0.7);
}