/* ==========================================================================
   1. COLOR VARIABLE DEFINITIONS (DEFAULT / DAY MODE)
   ========================================================================== */
:root {
    --bg-header: #ffffff;        /* Wit zodat de logo-bg onzichtbaar versmelt */
    --text-main: #4f5154;        /* De chique logo-grafiettint */      
    --text-logo: #0f172a;
    --text-muted: #6b7280;       
    --shadow-color: rgba(0, 0, 0, 0.05);

    --link-color: #168383;       /* Het prachtige diepe petroleum-groen uit de S */       

    /* Stevige, harmonieuze achtergronden per sectie (Dag) */
    --bg-home: #f5f5f5;          /* Sectie 1 kleur */
    --bg-expertise: #e0e0e0;     /* Sectie 2 kleur */
    --bg-quote: #b0bec5;         /* Sectie 3 kleur */
    --bg-terms: #78909c;         /* Sectie 4 kleur */ 

    --bg-expertise-flap: var(--bg-expertise);
    --bg-quote-flap: var(--bg-quote);
    --bg-terms-flap: var(--bg-terms);
    
    /* De vertrouwde diepe menubalk- en contactkleur */
    --bg-contact: #2c3e50;       
    --text-contact: #ffffff;
    --link-contact: #9fe0f6;     /* Helder ijsblauw voor perfect contrast op het donkere marineblauw */         

    --logo-bg: transparent;
    --logo-padding: 0;
    --logo-radius: 0;
}
html {
  -webkit-text-size-adjust: 100%; /* Voorkomt dat iOS zelf de font-size aanpast in landscape */
}


/* ==========================================================================
   2. AUTOMATIC & MANUAL DARK MODE CONFIGURATION
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-header: #24292e;    
        --text-main: #e2e8f0;    
        --text-muted: #9ca3af;
        --shadow-color: rgba(0, 0, 0, 0.4);
        --link-color: #9fe0f6;   

        --bg-home: #1f2428;      
        --bg-expertise: #1a1e22; 
        --bg-quote: #15181b;     
        --bg-terms: #0e1012;     /* Hier stond gisteren die foute transparante rgba code! */

        --bg-expertise-flap: #1a1e22;
        --bg-quote-flap: #15181b;
        --bg-terms-flap: #0e1012;
        
        --logo-bg: #ffffff;
        --logo-padding: 4px 8px;
        --logo-radius: 4px;
    }
}

body.dark-mode {
    --bg-header: #24292e;
    --text-main: #e2e8f0;
    --text-muted: #9ca3af;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --link-color: #9fe0f6;   

    --bg-home: #1f2428;      
    --bg-expertise: #1a1e22; 
    --bg-quote: #15181b;     
    --bg-terms: #0e1012;

    --bg-expertise-flap: #1a1e22;
    --bg-quote-flap: #15181b;
    --bg-terms-flap: #0e1012;
    
    --logo-bg: #ffffff;
    --logo-padding: 4px 8px;
    --logo-radius: 4px;
}

/* ==========================================================================
   3. GLOBAL STYLES & ACCESSIBLE TYPOGRAPHY
   ========================================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.7;
    color: var(--text-main);
    background-color: var(--bg-home);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Sticky Navigation Header Layout */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-header);
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 40px;
    transition: background-color 0.3s ease;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    height: 48px;       
    width: auto;        
    display: block;
    background-color: var(--logo-bg);
    padding: var(--logo-padding);
    border-radius: var(--logo-radius);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ffffff;
}

.nav-menu a, .lang-switcher a {
    text-decoration: none;
    color: var(--text-main); 
    margin: 0 12px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.lang-switcher a {
    font-size: 0.95rem; 
    margin: 0 6px;      
}

.lang-switcher a.active {
    font-weight: bold;
    color: var(--link-color);
    border-bottom: 2px solid var(--link-color);
    padding-bottom: 2px;
}

.nav-menu a:hover {
    color: var(--link-color);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   GECORRIGEERDE MINIMALISTISCHE ZON/MAAN KNOP (0% OPVALLEND GEEL)
   ========================================================================== */
/* ==========================================================================
   GEOPTIMALISEERD DUN LIJNSYMBOOL (100% UNIVERSEEL EN HERKENBAAR)
   ========================================================================== */
#theme-toggle {
    background: transparent !important;
    border: none;
    font-size: 1.4rem;             /* Iets groter gezet omdat het lijnsymbool heel elegant en dun is */
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, color 0.2s ease;
    
    /* GECORRIGEERD: Kleurt direct 100% perfect mee met uw petroleumgroene linkkleur! */
    color: var(--link-color) !important; 
    filter: none !important;
}

#theme-toggle:hover {
    transform: scale(1.15);
}

/* Wanneer de dark-mode handmatig of automatisch actief is, kleurt de maan ijsblauw */
body.dark-mode #theme-toggle {
    color: #9fe0f6 !important;     /* Direct gekoppeld aan uw prachtige ijsblauwe nachtkleur */
    filter: none !important;
}

/* Fluid Multi-device Section Structure */
.content-container {
    margin-top: 65px;
}

.site-section {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    box-sizing: border-box;
}

.section-inner {
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
}

h1, h2 {
    color: var(--link-color) !important; 
    margin-top: 0;
}

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 1.8rem; margin-bottom: 35px; }

.subtitle {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.spec-list {
    padding-left: 20px;
}

.spec-list li {
    margin-bottom: 12px;
}

.contact-grid {
    display: flex;
    gap: 40px;
}
/* ==========================================================================
   4. GEPERFECTIONEERDE VISUELE BRUG VIA PSEUDO-ELEMENT (0% OVERLAPPING) background mapping
   ========================================================================= */
#home { 
    background-color: var(--bg-home);
    padding-bottom: 0 !important; 
    /* HIER GECORRIGEERD: Marge weer terug naar 0 zodat er niets meer door de tekst heen snijdt */
    margin-bottom: 0 !important; 
    position: relative;
    z-index: 1;
}

#home .section-inner {
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;
}

#expertise { 
    background-color: var(--bg-expertise); 
    padding-top: 50px !important;    /* Ruimte boven de H2-titel hersteld */
    padding-bottom: 0 !important;   /* NIEUW: Dwingt de grijsblauwe achtergrond om direct te stoppen */
}

#quote { 
    background-color: var(--bg-quote); 
    padding-top: 50px !important;    /* Ruimte boven de H2-titel hersteld */
    padding-bottom: 0 !important;   /* NIEUW: Dwingt de zand/crème achtergrond om direct te stoppen */
}

#terms { 
    background-color: var(--bg-terms); 
    padding-top: 50px !important;    /* Ruimte boven de H2-titel hersteld */
}

#contact {
    background-color: var(--bg-contact);
    color: var(--text-contact);
}

#contact .contact-link {
    color: var(--link-contact);
    text-decoration: none;
    font-weight: bold;
}

#contact .contact-link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   GECORRIGEERDE STRECH-BOX MET AUTOMATISCH VERLENGSTUK (100% CONTROLEROUTE)
   ========================================================================== */
.home-image-container {
    flex: 0.7;
    display: flex;
    align-items: center !important;    
    justify-content: center;
    background-color: var(--bg-expertise) !important; 
    
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: none !important;
    
    padding: 12px !important;
    padding-top: 60px !important;    /* HIER: Zorgt voor de extra ademruimte boven de foto */
    padding-bottom: 25px !important; 
    border-radius: 10px 10px 0 0 !important; 
    max-width: 284px !important;
    margin: 0 auto;
    
    margin-top: -50px !important;    /* HIER: Trekt de balk chic omhoog in het okervlak */
    margin-bottom: 0 !important; 
    
    /* HIER AANGEVULD: Deze twee regels bepalen de positie ten opzichte van het verlengstuk */
    position: relative !important;
    z-index: 5 !important;
}
 /* <--- HIER GECORRIGEERD: Zorg dat deze sluitaccolade er absoluut staat! */

/* HIER GEBEURT DE MAGIE: Dit tekent een onzichtbaar grijsblauw vlak onder de box 
   dat het okerbruine randje volledig afdekt, zonder de tekst te verschuiven! */
.home-image-container::after {
    content: "" !important;
    position: absolute !important;
    bottom: -40px !important; /* Loopt 40 pixels door onder de grens */
    left: -1px !important;    /* Lijn exact uit met de linkerboxlijn */
    right: -1px !important;   /* Lijn exact uit met de rechterboxlijn */
    height: 42px !important;
    background-color: var(--bg-expertise) !important; /* Exact dezelfde kleur */
    z-index: -1 !important;
}

/* ==========================================================================
   5. DEFINITIEVE ZIGZAG GRID-INDELING EN STRETCH-KOPPELING
   ========================================================================== */
.expertise-grid {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;
    gap: 60px; 
    width: 100%;
}

/* HIER NIEUW: Dwingt nu ook de kolommen in de offertesectie strak tot aan de bodem van de sectie */
.quote-grid {
    display: flex;
    flex-direction: row; 
    align-items: stretch !important; /* NIEUW: Uitrekken tot aan de absolute bodem */
    justify-content: space-between;
    gap: 60px; 
    width: 100%;
}

.home-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch !important; 
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    margin-bottom: 0 !important;
}

.home-text, .expertise-text, .quote-text {
    flex: 1.3; 
}

/* De stethoscoop-box sluit nu gegarandeerd 100% randloos aan */
.home-image-container {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;    
    justify-content: center !important;
    background-color: var(--bg-expertise) !important; 
    
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: none !important;
    
    padding: 12px !important;
    padding-top: 40px !important;    /* Verhoogd van 12px naar 60px */
    padding-bottom: 80px !important; 
    border-radius: 10px 10px 0 0 !important; 
    max-width: 284px !important;
    margin: 0 auto;
    
    margin-top: -50px !important; 
    margin-bottom: 0 !important; 
    position: relative !important;
    z-index: 5 !important;
}
/* NIEUW: Hoogte-camouflage voor de Stethoscoop (sluit aan op Sectie 2) */
.home-image-container::after {
    content: "" !important;
    position: absolute !important;
    bottom: -36px !important; /* Trekt de flap chic achter de ronde hoek */
    left: -1px !important;    
    right: -1px !important;   
    height: 44px !important;
    background-color: var(--bg-expertise) !important; /* Gekoppeld aan Expertise-kleur */
    z-index: -1 !important;
}

.home-img {
    width: 100%;
    max-width: 240px; 
    height: auto;
    border-radius: 6px;
    display: block;
}

/* De Expertise-sectie (Duo box) */
.expertise-image-container.flex-duo {
    display: flex;
    flex-direction: column; 
    gap: 20px;              
    align-items: center;
    
    /* GECORRIGEERD: Krijgt exact de zand/crèmekleur van de Offerte-sectie daaronder */
    background-color: var(--bg-quote) !important; 
    
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: none !important; /* Onderkant open voor overloop */
    
    padding: 15px !important;
    padding-top: 60px !important;    /* Luxe ademruimte aan de bovenkant */
    padding-bottom: 25px !important; 
    border-radius: 10px 10px 0 0 !important; 
    max-width: 250px !important;
    margin: 0 auto;
    
    margin-top: -50px !important;    /* Trekt de box chic omhoog */
    margin-bottom: 0 !important; 
    position: relative !important;
    z-index: 5 !important;
}
/* GECORRIGEERD: Hoogte-camouflage voor de Expertise-duobox (sluit aan op Sectie 3) */
.expertise-image-container.flex-duo::after {
    content: "" !important;
    position: absolute !important;
    bottom: -36px !important; /* Trekt de flap chic achter de ronde hoek */
    left: -1px !important;    
    right: -1px !important;   
    height: 44px !important;
    background-color: var(--bg-quote) !important; /* Gekoppeld aan Quote-kleur */
    z-index: -1 !important;
}

/* ==========================================================================
   DEFINITIEVE CORRECTIE VOOR PERFECT AFGERONDE EXPERTISE-PLAATJES
   ========================================================================== */
.expertise-img {
    display: block;
    
    /* HIER ZIT DE DOORBRAAK: We dwingen de plaatjes via de CSS naar exact 
       dezelfde vierkante verhoudingen als in uw succesvolle HTML-test! */
    width: 140px !important;        
    height: 140px !important;       
    object-fit: cover !important;   /* Zorgt dat de foto's prachtig vullen zonder te vervormen */
    
    border-radius: 6px !important;  /* De perfecte, zachte hoek */
    
    /* We halen de experimentele clip-path en mix-blend-mode van net weer netjes weg */
}

/* De Quote-afbeeldingsbox */
.quote-image-container {
    display: flex;
    justify-content: center;
    
    /* GECORRIGEERD: Krijgt exact de kiezeltint van de Voorwaarden-sectie daaronder */
    background-color: var(--bg-terms) !important;
    
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: none !important;
    
    padding: 12px !important;
    padding-top: 60px !important;    /* Luxe ademruimte aan de bovenkant */
    padding-bottom: 25px !important; 
    border-radius: 10px 10px 0 0 !important; 
    max-width: 284px !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important; 
    
    margin-top: -50px !important;    /* Trekt de laboratorium-box chic omhoog */
    position: relative !important;
    z-index: 5 !important;}

/* Het automatische verlengstuk voor de laboratorium-box */
.quote-image-container::after {
    content: "" !important;
    position: absolute !important;
    bottom: -36px !important; 
    left: -1px !important;    
    right: -1px !important;   
    height: 44px !important;
    background-color: var(--bg-terms) !important; /* Exact dezelfde kiezeltint */
    z-index: -1 !important;
}

.quote-img {
    width: 100%;
    max-width: 240px; 
    height: auto;
    border-radius: 6px;
    display: block;
}


/* ==========================================================================
   6. ACCORDION & QUOTE LINKS FORMATTING
   ========================================================================== */
.voorwaarden-samenvatting {
    background-color: rgba(255, 255, 255, 0.35); 
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid var(--bg-contact); 
    border-top: 1px solid rgba(0,0,0,0.02);
    border-right: 1px solid rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.02);
    margin-bottom: 25px;
}

.voorwaarden-klapper summary {
    background-color: var(--bg-contact); 
    color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    list-style: none;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.voorwaarden-klapper summary:hover {
    background-color: #1e293b; 
}

.voorwaarden-tekst {
    background-color: rgba(255, 255, 255, 0.35); 
    padding: 25px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 400px;
    overflow-y: auto;
    color: #252525;              
}

.voorwaarden-tekst h3 {
    color: var(--bg-contact);
    margin-top: 20px;
    font-size: 1.1rem;
}

#quote .quote-actions p {
    color: var(--text-main); 
    font-size: 1.05rem;
    margin: 8px 0;
}

#quote .quote-actions .contact-link {
    color: var(--link-color); 
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

#quote .quote-actions .contact-link:hover {
    text-decoration: underline;
    filter: brightness(85%); 
}

/* ==========================================================================
   MINIMALE HOOGTE VOOR MAXIMALE RUST EN RECHTSTREEKSE BALANS
   ========================================================================== */
.home-text, .expertise-text, .quote-text {
    /* Dwingt de tekstkolommen op desktop tot een chique, minimale hoogte */
    min-height: 280px; 
}

@media (prefers-color-scheme: dark) {
    #quote .quote-actions .contact-link { color: var(--link-color); }
}

body.dark-mode #quote .quote-actions .contact-link { color: var(--link-color); }

/* ==========================================================================
   DESKTOP HEADER BEGRENZING (VOOR ALLE GROTE PC-SCHERMEN VLIJMSCHERP)
   ========================================================================== */
@media screen and (min-width: 1025px) {
    header.main-header {
        /* De witte balk zelf blijft ALTIJD 100% breed over je hele monitor rollen */
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;

        /* DE REVOLUTIONAIRE FIX: We dwingen de inhoud via padding naar binnen. 
           Dit werkt gegarandeerd op landscape én op portrait zonder te krimpen! */
        padding-left: calc((100% - 1040px) / 2) !important;
        padding-right: calc((100% - 1040px) / 2) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Zorg dat het menu op elk groot scherm mathematisch in het dode midden blijft */
    header.main-header .nav-menu {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 0 28px !important; /* Vaste, chique ademruimte tussen de items */
    }
}


/* ==========================================================================
   7. SMARTPHONE & TABLET ADAPTIVE LAYOUTS (DEFINITIEVE TWEE-RIJEN HEADER)
   ========================================================================== */
@media (max-width: 768px) {

    /* Dwingt de hoofdcontainer ALTIJD naar een strakke horizontale rij met wrap */
    /* ==========================================================================
       DEFINITIEVE ORDERSWITCH (320PX SUPERCOMPACT NAAR 2 RIJEN)
       ========================================================================== */
    header.main-header {
        display: flex !important;
        flex-direction: row !important;      
        flex-wrap: wrap !important;          
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 6px 12px !important;        
        gap: 4px !important;

    }


    
    /* Rij 1 Links: Het logo krijgt order 1 */
    header.main-header .logo-link {
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        order: 1 !important; /* NIEUW */
    }
    
    header.main-header .site-logo {
        height: 32px !important;             
        width: auto !important;
    }

    /* Rij 1 Rechts: De controls krijgen order 2 en vliegen OMHOOG naar rij 1! */
    header.main-header .header-controls {
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        border-top: none !important;         
        padding-top: 0 !important;
        margin-left: auto !important;        
        order: 2 !important; /* NIEUW: Vliegt direct naast het logo */
    }
    
    header.main-header .lang-switcher a {
        font-size: 0.85rem !important;
        margin: 0 3px !important;
    }

    /* Rij 2: De menu-links krijgen order 3 en claimen de volledige tweede regel */
    header.main-header .nav-menu {
        width: 100% !important;              
        margin: 6px 0 0 0 !important;        
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* Dwingt de links nu écht naar het absolute midden */
        align-items: center !important;
        gap: 0 6px !important;                 
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important; 
        padding: 8px 4px 4px 4px !important; 
        order: 3 !important; 
        
        flex-wrap: nowrap !important; 
/* Zorgt dat het menu op mini-schermen netjes naar een extra regel mag breken in plaats van links te plakken */
    }    
    /* Verbergt de scrollbalk in Chrome en Edge */
    header.main-header .nav-menu::-webkit-scrollbar {
        display: none !important;
    }
    
    header.main-header .nav-menu a {
        margin: 0 !important;
        font-size: 0.85rem !important;        
        white-space: nowrap !important;      /* Dwingt 'Contact' om heel te blijven en niet af te breken! */
        display: inline-block !important;
	padding: 4px 1px !important; /* Voeg deze regel toe */
    }

    /* Inhoud schuift chique omhoog omdat de header nu superlaag is */
    .content-container { 
        margin-top: 85px !important; 
    }

    /* Algemene mobiele grid-aanpassingen voor de binnensecties */
    .home-grid, .expertise-grid, .quote-grid {
        flex-direction: column !important; 
        gap: 30px !important;
    }
    
    .expertise-grid { 
        flex-direction: column-reverse !important; 
    }
    
    .contact-grid { 
        flex-direction: column !important; 
        gap: 20px !important; 
    }
    
    h1 { font-size: 1.8rem !important; }
    .home-img, .quote-img { max-width: 200px !important; }
    
    .expertise-image-container.flex-duo {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;     
        justify-content: center !important;
        gap: 15px !important;
        border-radius: 10px !important;
        padding: 12px !important;
        max-width: 100% !important; 
    }
    
    .expertise-img { 
        width: 90px !important;       /* Veranderd van max-width naar width */
        height: 90px !important; 
        object-fit: cover !important; /* Dwingt de plaatjes om ALTIJD perfect vierkant te blijven op mobiel! */
        border-radius: 6px !important;
    }
    
    .expertise-image-container.flex-duo, 
    .quote-image-container {
        margin-top: 0 !important;       
        margin-bottom: 0 !important;
        border-radius: 10px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
        padding-top: 12px !important;   
        padding-bottom: 12px !important;
    }

    #home.site-section {
        min-height: auto !important; 
        padding-top: 100px !important;
        padding-bottom: 0 !important;
    }
    
    .home-image-container {
        display: block !important;         
        height: auto !important;           
        padding-top: 15px !important;      
        padding-bottom: 15px !important;   
        margin-top: 0 !important;       
        margin-bottom: 0 !important;
        border-radius: 10px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    }
}

.terms-block {
    text-align: left;
    margin-top: 40px;
}

.terms-section {
    margin-bottom: 40px;
}

.terms-section h3 {
    color: var(--link-color) !important; /* Het mooie blauw voor de hoofdtitels! */
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.terms-section p {
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 1rem;
}

.terms-section strong {
    color: var(--link-color); /* Maakt ook de subnummers subtiel blauw, erg chique! */
    margin-right: 5px;
}
/* ==========================================================================
   PROZ PROFILE LINKS STYLING
   ========================================================================== */
.proz-badge-line {
    margin-top: 25px;
}

.quote-meta-line {
    margin-top: 15px;
    font-size: 1rem;
}

.meta-label {
    color: var(--text-muted);
    margin-right: 8px;
    font-weight: 500;
}

.proz-link {
    color: var(--link-color) !important;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.proz-link:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}
.proz-contact-line {
    margin-top: 12px;
    font-size: 1rem;
}
/* ==========================================================================
   8. TARGETED TABLET & LARGE SCREEN HEIGHT RESET (100% COMPLEET)
   ========================================================================== */
/* We verlagen de startgrens naar 701px zodat de iPad mini en Galaxy Tab in portrait direct de stabiele desktop-regels oppakken! */
@media screen and (min-width: 701px), 
       screen and (max-height: 768px) and (orientation: landscape) { /* Hoogte verhoogd naar 768px voor de 1366x768 PC-schermen */

    /* Voorkom dat secties kunstmatig hoog worden en geef ze rustige basismarges */
    .site-section {
        min-height: auto !important; 
        padding: 100px 20px !important; 
    }

    /* Dwing de grids tot een absolute verticale stretch-koppeling */
    .expertise-grid, .quote-grid, .home-grid {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important; /* Metselt de kieren onderin onvoorwaardelijk dicht */
        justify-content: space-between !important;
        gap: 60px !important; 
        width: 100%;
    }

    /* Witruimte onder de tekstregels */
    .home-text, .expertise-text, .quote-text {
        padding-bottom: 60px !important; 
    }

    /* De plaatjesboxen rekken mee tot de bodem, inhoud start strak bovenaan */
    .home-image-container, 
    .expertise-image-container.flex-duo, 
    .quote-image-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        height: auto !important;
        align-self: stretch !important; 
        
        max-width: 284px !important;
        width: 100% !important;
        padding: 12px !important;
        padding-top: 60px !important; 
        padding-bottom: 25px !important;
        
        margin-top: -50px !important; 
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        border-radius: 10px 10px 0 0 !important; 
    }

    /* Jouw perfecte balans-marges voor de rode strepen */
    .expertise-image-container.flex-duo { 
        max-width: 250px !important;
        margin-top: -20px !important; 
    }
    
    .quote-image-container { 
        margin-top: -20px !important; 
    }

    /* Foto's behouden hun scherpe, originele verhoudingen */
    .home-img {
        width: 100% !important;
        max-width: 240px !important;
        height: auto !important;
        margin-bottom: auto !important; 
    }

    .expertise-img {
        width: 180px !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }
    
    .expertise-image-container.flex-duo img:first-child {
        margin-bottom: 20px !important;
    }

    .expertise-image-container.flex-duo img:last-child {
        margin-bottom: auto !important; 
    }

    .quote-img {
        width: 100% !important;
        max-width: 240px !important;
        height: 280px !important;      
        object-fit: cover !important;   
        margin-bottom: auto !important; 
    }

    /* De camouflageflappen sluiten onwrikbaar aan op de bodem */
    .home-image-container::after,
    .expertise-image-container.flex-duo::after,
    .quote-image-container::after {
        content: "" !important;
        position: absolute !important;
        bottom: -36px !important; 
        left: -1px !important;
        right: -1px !important;
        height: 44px !important;  
        z-index: -1 !important;
        display: block !important;
 
    }
    
    .home-image-container::after { background-color: var(--bg-expertise-flap) !important; }
    .expertise-image-container.flex-duo::after { background-color: var(--bg-quote-flap) !important; }
    .quote-image-container::after { background-color: var(--bg-terms-flap) !important; }

    #home::before, #expertise::before, #quote::before,
    .home-grid::before, .expertise-grid::before, .quote-grid::before,
    .home-image-container::before, .expertise-image-container.flex-duo::before, .quote-image-container::before {
        display: none !important;
    }
}

/* Specificaties voor Tablets en Compacte PC-schermen (Lucht-correctie) */
@media screen and (min-width: 701px) and (max-width: 1366px), 
       screen and (max-height: 768px) and (orientation: landscape) {
    .home-text, .expertise-text, .quote-text {
        min-height: auto !important; 
        padding-bottom: 80px !important; /* Dwingt extra ademruimte af tegen het knellen op tablets/PC */
    }
    .site-section {
        padding: 90px 20px !important; 
    }
}

/* Standaard styling (Geldt voor mobiel): plaatjes staan netjes compact onder elkaar */
.flex-duo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Klein beetje ademruimte op mobiel */
}







@media screen and (max-width: 850px) and (orientation: landscape) {
  body header.main-header {
    position: relative !important; /* Maakt de header het vaste ankerpunt */
  }

  body header.main-header .nav-menu {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    
    /* Het menu exact in het geografische midden verankeren */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
/* GECORRIGEERD: Verschuif het menu optisch een fractie extra naar links (-53.5%) */
    transform: translate(-54.5%, -50%) !important;
    
    width: max-content !important;
    margin: 0 !important; 
    gap: 0 14px !important; /* Vaste, nette tussenruimte tussen de items */
    padding: 0 !important;
    border-top: none !important;
  }

  body header.main-header .nav-menu a {
    font-size: 0.85rem !important; 
    white-space: nowrap !important;
    margin: 0 !important; /* Verwijdert de storende globale marges */
    padding: 4px 2px !important; 
  }
  /* ==========================================================================
     IPHONE SE LANDSCAPE: CHIRURGISCHE BREEDTE-FIX (100% RISICOLOOS)
     ========================================================================== */
  body .expertise-image-container.flex-duo {
    /* We slanken de container als één geheel af van 250px naar 175px. 
       Dit dwingt de box om binnen de randen te blijven en sluit de kieren! */
    max-width: 175px !important;
    width: 100% !important;
  }

  body .expertise-text {
    /* Geeft de tekstkolom links direct zijn verdiende breedte terug */
    flex: 2 !important;
  }
  /* ==========================================================================
     SECTIE 3 BREEDTE-FIX (LABORATORIUM)
     ========================================================================== */
  body .quote-image-container {
    /* Slankt ook de offertebalk af naar exact dezelfde chique 175px breedte */
    max-width: 175px !important;
    width: 100% !important;
  }

  body .quote-text {
    /* Geeft de tekst in de offertesectie zijn ademruimte terug */
    flex: 2 !important;
  }



}

/* ==========================================================================
   HIERONDER STAAN DE STANDAARD INSTELLINGEN (GELDEN VOOR ELK SCHERM)
   ========================================================================== */

/* PROZ-FIX: Zorg dat Sibylle's verificatielink nooit lelijk afbreekt */
.home-text a[href*="proz.com"] {
    display: inline-block !important;
    white-space: nowrap !important;        /* Verbiedt het breken van de zin */
    font-size: clamp(0.75rem, 2.1vw, 0.95rem) !important; /* Schaalt veilig mee tussen tablet en pc */
}

/* ==========================================================================
   TABLET PORTRAIT TOTAALPAKKET: Lost de menu-breuk, de plaatjes én de lucht op!
   ========================================================================== */
@media screen and (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  
  /* 1. Dwing de complete header (Logo + Menu + Knoppen) verplicht op één regel */
  header.main-header {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 20px !important;
  }

  header.main-header .logo-link {
    order: 1 !important;
  }

  /* Reset de mobiele 100% breedte en schiet het menu naar het midden van regel 1 */
  header.main-header .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    order: 2 !important;            
    width: auto !important;          
    flex-grow: 1 !important;         
    margin: 0 15px !important;
    gap: 0 16px !important;          
    border-top: none !important;     
    padding: 0 !important;
  }

  header.main-header .header-controls {
    order: 3 !important;
    display: flex !important;
  }

  header.main-header .nav-menu a {
    font-size: 0.85rem !important; 
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 4px 2px !important;
  }

  /* 2. Herstel de luchtruimte onderaan de complete secties */
  .site-section {
    padding-top: 80px !important;
    padding-bottom: 120px !important; 
  }

  /* Zorg dat de hoofdcontainer van de sectie flexibel omgaat met de breedte */
  .site-section .flex-duo {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: space-between !important;
    gap: 30px !important; 
  }

  /* De tekstkolom krijgt de absolute overhand in de breedte */
  .expertise-text, .quote-text, .home-text {
    flex: 2 !important; 
    padding: 0 10px !important;
    padding-bottom: 50px !important; /* Extra ademruimte onder de tekst zelf */
  }

  /* 3. Centreer de plaatjes in Sectie 2 en dwing een strakke uitlijning */
  .expertise-image-container.flex-duo,
  .quote-image-container,
  .home-image-container {
    flex: 1 !important;
    max-width: 250px !important; 
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    justify-content: flex-start !important; 
  }

  /* Zorg dat de afbeeldingen zelf ook netjes gecentreerd blijven binnen hun eigen box */
  .expertise-image-container.flex-duo img,
  .expertise-img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }


}

/* ==========================================================================
   DEFINITIEVE EN WATERDICHTE HIERARCHIE VOOR DE RADARTJES (100% EXCEL MATCH)
   ========================================================================== */

/* KAMER 1: PORTRAIT SMARTPHONES (Regel 4, 7, 10, 13) */
.radartjes-icon {
    margin-top: 0 !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* KAMER 2: LANDSCAPE SMARTPHONES (Regel 6, 9, 12) */
@media screen and (min-width: 671px) and (max-width: 920px) and (orientation: landscape) {
    body .radartjes-icon {
        margin-top: 390px !important; /* Jouw exacte Excel-waarde voor de moderne telefoons! */
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan*/
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 450px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
}

/* KAMER 2B: EXCLUSIEVE IPHONE SE LANDSCAPE FIX (Regel 3) */
@media screen and (max-width: 670px) and (orientation: landscape) {
    body .radartjes-icon {
        margin-top: 500px !important; /* Jouw exacte Excel-waarde voor het lage SE-scherm! */
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 580px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan*/
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 580px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
}

/* KAMER 3A: SLANKERE TABLETS PORTRAIT (Regel 19 & 25 + Lange Android Tablets / Foldables) 
   GECORRIGEERD: Loopt nu verticaal oneindig door, dus geen gaten meer bij extreme hoogtes! */
@media screen and (min-width: 700px) and (max-width: 799px) and (orientation: portrait) {
    body .radartjes-icon {
        margin-top: 440px !important; 
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 530px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan*/
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 545px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
}

/* KAMER 3B: BREDERE TABLETS PORTRAIT (Regel 16 & 22) 
   GECORRIGEERD: Ook hier is het hoogte-plafond weg voor een 100% waterdicht resultaat. */
@media screen and (min-width: 800px) and (max-width: 1024px) and (orientation: portrait) {
    body .radartjes-icon {
        margin-top: 400px !important; 
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 460px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan */
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 450px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
}

/* KAMER 4A: GROTE PC-SCHERMEN & DESKTOP IN LANDSCAPE (Regel 15, 18, 21, 24, 27, 30) */
@media screen and (min-width: 1025px) and (orientation: landscape) {
    body .radartjes-icon {
        margin-top: 390px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan */
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 455px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }

}

/* KAMER 4B: EXCLUSIEF VOOR PC EN HD SCHERMEN RECHTOP IN PORTRAIT (Regel 28 & 31) 
   Dit filter reageert nu specifiek op de extreme hoogte van staande computermonitoren! */
@media screen and (orientation: portrait) and (min-height: 1300px) {
    body .radartjes-icon {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        margin-top: 400px !important; /* Trekt de radartjes op de rechtopstaande pc-monitoren strak omhoog! */
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand gedaan*/
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }

}
/* ==========================================================================
   OPVANGNET VOOR HET GAT TUSSEN 921PX EN 1024PX IN LANDSCAPE (100% VEILIG)
   ========================================================================== */
@media screen and (min-width: 921px) and (max-width: 1024px) and (orientation: landscape) {
    body .radartjes-icon {
        margin-top: 390px !important; /* Dwingt de radartjes in het overgangsgat ook naar de nette 390px stand! */
    }
   html[lang="nl"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }
   html[lang="de"] body .radartjes-icon {
        margin-top: 470px !important; /* Jouw perfecte, universele landscape desktop-stand */
    }

}

/* ==========================================================================
   HET COMPLETE MEERTALIGE NAVIGATION FRAMEWORK - MARK & SVEN (DEFINITIEF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GROTE DESKTOP & HD MONITOREN (Vanaf 1024px breed) - CHIQUE BREEDTE FIX
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
    header.main-header .nav-menu {
        display: flex !important;
        align-items: center !important;
        
        /* GECORRIGEERD: Dwingt het menu om ook op grote HD-schermen prachtig uit te waaieren! */
        justify-content: space-around !important; 
        
        /* DE DESKTOP ADEMRUMTE: Dit slokt alle vrije ruimte op tussen het logo en de zon */
        flex-grow: 1 !important; 
        
        /* Zorgt voor een chique, vaste afstand vanaf de buitenkanten (logo en zon) */
        margin: 0 40px !important; 
        width: auto !important;
        transform: translateY(5px) !important; /* Behoudt onze perfecte horizontale middellijn */
    }

    header.main-header .nav-menu a {
        white-space: nowrap !important; 
        margin: 0 !important; /* Wissen we volledig: flexbox regelt nu de brede ademruimte! */
        padding: 0 !important;
    }

    header.main-header .nav-menu a.home-link {
        font-size: 2.2rem !important;    
        line-height: 0 !important;       
        display: inline-block !important; 
        margin: 0 !important;
        transform: translateY(-2px) !important; /* Lijn het huisje strak uit op HD */
    }

    header.main-header .header-controls {
        margin-left: 10px !important;    
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;  
        white-space: nowrap !important;  
        transform: translateY(5px) !important; /* Talen stabiel op de HD-middellijn */
    }

    header.main-header #theme-toggle {
        padding: 0 !important;
        margin: 0 10px 0 0 !important;   
        line-height: 1 !important;
        display: inline-block !important;
        transform: translateY(-4px) !important; /* De zon bevroren op de perfecte hoogte */
    }

    header.main-header .lang-switcher {
        display: flex !important;
        flex-direction: row !important;  
        white-space: nowrap !important;
        line-height: 0.8 !important; 
    }
}

/* --------------------------------------------------------------------------
   1B. TUSSENSCHERMEN / SMALLERE DESKTOPS EN TABLETS (Van 701px tot 1050px breed)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width: 1050px) {
    header.main-header .logo-link img {
        height: 48px !important;
        width: auto !important;
    }

    header.main-header .nav-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important; 
        flex-grow: 1 !important; 
        margin: 0 15px !important; 
        width: auto !important;
        transform: translateY(2px) !important; 
    }

    header.main-header .nav-menu a {
        white-space: nowrap !important; 
        margin: 0 !important; 
        padding: 0 !important;
        transform: translateY(5px) !important; 
    }

    header.main-header .nav-menu a.home-link {
        font-size: 2.2rem !important;    
        line-height: 0 !important;       
        display: inline-block !important; 
        margin: 0 !important;
        transform: translateY(-2px) !important; 
    }

    header.main-header .header-controls {
        margin-left: 10px !important;    
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;  
        white-space: nowrap !important;  
        transform: translateY(7px) !important; 
    }

    header.main-header #theme-toggle {
        padding: 0 !important;
        margin: 0 10px 0 0 !important;   
        line-height: 1 !important;
        display: inline-block !important;
        
        /* GECORRIGEERD: Van 'none' naar '-4px' om het zonnetje weer perfect te centreren naast de talen! */
        transform: translateY(-4px) !important; 
    }

    header.main-header .lang-switcher {
        display: flex !important;
        flex-direction: row !important;  
        white-space: nowrap !important;
        line-height: 0.8 !important; 
    }
}
/* --------------------------------------------------------------------------
   2 & 3. SMARTPHONES EN MICRO-TELEFOONS (Tot en met 700px breed)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
    header.main-header {
        display: flex !important;
        flex-direction: column !important; 
        align-items: stretch !important;
        padding: 10px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        padding-top: 50px !important; 
    }

    header.main-header .logo-link {
        position: absolute !important;
        top: 10px !important;
        left: 15px !important;
    }

    header.main-header .header-controls {
        position: absolute !important;
        top: 10px !important;
        right: 15px !important;
        display: flex !important;
        align-items: center !important;
    }

    header.main-header .nav-menu {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        margin: 0 !important;
    }

    header.main-header .nav-menu a.home-link {
        font-size: 1.9rem !important; 
        display: inline-flex !important;
        align-items: center !important;
        line-height: 0 !important; 
        margin-right: 12px !important; 
        margin-left: 0 !important;
        transform: translateY(-3px) !important; 
    }

    header.main-header {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    h1:first-of-type {
        margin-top: -110px !important; /* Onze eerdere witruimte-temmer voor mobiel */
    }
}

/* De ultieme vloeibare micro-correctie voor mobiele schermen tot 390px (zoals S25) */
@media screen and (max-width: 390px) {
    header.main-header .nav-menu {
        display: flex !important;
        flex-wrap: wrap !important;       
        justify-content: center !important; 
        gap: 6px 14px !important;         
        width: 88% !important;            
        margin: 0 auto !important;        
    }

    header.main-header .nav-menu a, 
    header.main-header .nav-menu a:link, 
    header.main-header .nav-menu a:visited {
        font-size: 0.84rem !important;    
        margin: 0 !important;             
        padding: 0 !important;
        white-space: nowrap !important;   
    }
    
    header.main-header .nav-menu a.home-link {
        font-size: 1.6rem !important;     
        transform: translateY(-2px) !important; 
    }
}