:root {
	/* Dagmodus (standaard) */
	--bg:         					#ffffff;
	--bg-surface: 					rgba(255, 255, 255, 1);
	--bg-footer: 					#eef5f8;
	--text:       					#1a1a1a;
	--text-contrast: 				#FFF;
	--text-muted: 					#6b6b6b;
	--accent:     					#2c5f8a;
	--border:     					rgba(0, 0, 0, 0.1);
	--overlay:    					rgba(0, 0, 0, 0.04);

	--header-h1: 					linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--nav-a-lijn: 					#1E88E5;

	--logo-voorpagina: 				#1a1a1a;
	--sticky-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	--bg-hero: 						linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-hero-transparent:			linear-gradient(to right, rgba(30, 136, 229, 0.9) 0%, rgba(40, 53, 147, 0.9) 100%);
	--bg-contact: 					linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-hero-projecten:			linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-hero-projecten-shadow:		0 0 10px rgba(0,0,0,0.2);
	--bg-contact-hover: 			#FFF;
	--bg-hero-grijs: 				#f4f4f5;
	--bg-infoblok: 					#f4f4f5;
	--infoblok-kop: 				#283593;
	--hr: 							#283593;

	--a: 							#1E88E5;
	--a-hover: 						#2b3894;

	--btn-zwart: 					#000;
	--btn-nav-hover:				#1e88e5;

	--transition-theme: background-color 0.3s ease, color 0.3s ease;
	--bite-depth: 25px; /* Hoe diep het hapje is */
	 --bite-width: 50px; /* Hoe breed het hapje is */
}

/* ============================================
	2A. AUTOMATISCH: OS-instelling detecteren
	============================================ */

@media (prefers-color-scheme: dark) {
	:root {
	 	--bg:         					#111111;
		--bg-surface: 					rgba(30, 30, 30, 1);
		--bg-footer: 					rgba(30, 30, 30, 1);
		--text:       					#e8e8e4;
		--text-contrast: 				#FFF;
		--text-muted: 					#9a9a94;
		--accent:     					#6aa3d0;
		--border:     					rgba(255, 255, 255, 0.08);
		--overlay:    					rgba(255, 255, 255, 0.04);

		--header-h1: 					linear-gradient(to right, #FFFFFF 0%, #CFD8DC 100%);
		--nav-a-lijn:  					#CFD8DC;

		--sticky-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

		--logo-voorpagina: 				#FFF;

		--bg-hero: 						rgba(30, 30, 30, 1);
		--bg-hero-transparent: 			rgba(30, 30, 30, 0.9);
		--bg-contact: 					rgba(238, 238, 238, 1);
		--bg-contact-hover: 			#1e1e1e;
		--bg-hero-projecten:			rgba(30, 136, 229, 0.5);
		--bg-hero-projecten-shadow: 	none;
		--bg-infoblok: 					rgba(30, 30, 30, 1);
		--bg-hero-grijs: 				#1e1e1e;
		--infoblok-kop: 				#e8e8e4;
		--hr: 							rgba(30, 30, 30, 1);

		--a: 							#1E88E5;
		--a-hover: 						#CFD8DC;

		--btn-zwart: 					#FFF;
		--btn-nav-hover:				#1e88e5;
	}
}

.laatste-element{
	padding-bottom: 50px !important;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html{
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: 'f_r', serif; /* pas aan naar jouw keuze */
	transition: var(--transition-theme);
}

strong{
	font-family: 'f_sb';
	font-weight: normal;
	letter-spacing: -0.005em;
	padding-left: 5px;
}
.f_b{
    font-family: 'f_b';
    font-style: normal;
}
.f_sb{
    font-family: 'f_sb';
    font-style: normal;
}
.f_l{
    font-family: 'f_l';
    font-style: normal;
}

.btn{
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    font-family: 'f_b';
    border: none;
    cursor: pointer;
}
.btn:not(.btn-not-active):active{
    position: relative;
    top: 2px;
}
    .btn-cursor-move{
        cursor: move;
    }
    .btn-inline{
        display: inline-block;
        margin-left: 10px;
    }
    .btn-small{
        padding: 5px;
    }
    .btn-xsmall{
        padding: 4px;
        font-size: 12px;
        font-family: 'f_r';
    }
    .btn-inline{
        display: inline-block;
    }
    .btn-disabled{
        opacity: 0.4;
        cursor: not-allowed;
    }
    .btn-disabled:active{
        top: 0;
    }

    .btn-x-small{
        font-size: 13px;
        padding: 3px;
        line-height: 35px;
    }
    .btn-y-small{
        font-size: 12px;
        padding: 3px;
        position: relative;
        top: -2px;
        left: 10px;
    }

    .btn-white{
        border: 2px solid #FFF;
        color: #FFF;
    }
    .btn-white-bg{
        background: #FFF;
        color: #0d47a1;
    }
    .btn-white-bg:hover{
        background: rgba(255,255,255,0.8);
    }
    .btn-white:hover{
        background: rgba(255,255,255,0.8);
        color: rgba(53, 71, 84, 1.00);
    }
    .btn-blauw{
        background: #283593;
        background: linear-gradient(to bottom, #1E88E5 0%, #283593 100%);
        color: #FFF;
        white-space: nowrap;
    }
    .btn-blauw:hover{
        transform: scale(1.02);
        color: #FFF !important;
        background: linear-gradient(to bottom, #1E88E5 100%, #283593 0%);
    }
    .btn-groen{
        background: #43a047;
        background: linear-gradient(to bottom, #43a047 0%, #2e7d32 100%);
        color: #FFF;
    }
    .btn-groen:hover{
        transform: scale(1.02);
    }
    .btn-grijs{
        border: 2px solid #edf4f8;
        color: #354754;
        background: #FFF;
    }
    .btn-grijs i.eva{
        padding: 0 3px 0 3px;
    }
    .btn-grijs:hover{
        background: #edf4f8;
        color: #1e88e5;
    }
    .btn-grijs-rood{
        color: #9e9e9e;
        background: #f5f5f5;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        border-right: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
    .btn-grijs-rood:hover{
        background: rgba(211, 47, 47, 1.00);
        color: #FFF;
    }
    a.div-btn-grijs{
        color: #000 !important;
        text-decoration: none;
    }
        a.div-btn-grijs i.ti-x{
            color: #e53935;
        }

    .btn-blauw-outline{
        border: 2px solid #293593;
        color: #354754;
    }
    .btn-blauw-outline i.eva{
        padding: 0 3px 0 3px;
    }
    .btn-blauw-outline:hover{
        background: #293593;
        color: #FFF !important;
    }

    .btn-rood-outline{
        border: 2px solid #d32f2f;
        color: #d32f2f;
    }
    .btn-rood-outline i.eva{
        padding: 0 3px 0 3px;
    }
    .btn-rood-outline:hover{
        background: #d32f2f;
        color: #FFF;
    }

    .btn-rood{
        background: #d32f2f;
        color: #FFF;
    }
    .btn-zwart{
        border: 2px solid var(--btn-zwart);
        color: var(--btn-zwart);
    }
    .btn-zwart:hover{
        color: rgba(30, 136, 229, 1.00);
        border: 2px solid rgba(30, 136, 229, 1.00);
    }
    .btn-paars-gradient{
        background: linear-gradient(42deg, #1e88e5 0%, #e43daf 100%);
        color: #FFF;
    }
    .btn-paars-gradient:hover{
        background: linear-gradient(42deg, #05549B 0%, #CB0089 100%);
    }

    a.btn.btn-blauw{
    	color: #FFF;
    }

    #container{
    	max-width: 1800px;
    	margin-left: auto;
    	margin-right: auto;
    	box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }


/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */

.pagina-hero{
	width: 100%;
	height: calc(100vh - 100px);
	position: relative;
	top: 0;
	background: var(--bg);
}
	/* De wrapper container */
	.pagina-hero-bg {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    max-width: 1800px;
	    margin: 0 auto;
	    overflow: hidden;
	}

	.pagina-hero-bg picture {
	    display: block;
	    width: 100%;
	    height: 100%;
	}

	.pagina-hero-bg img.hero-image {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    object-position: var(--hero-pos, center center);
	    display: block;
	}

	.pagina-hero-schaduw{
		width: 100%;
		height: 50px;
		background: #000;
		background: linear-gradient(180deg,rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
		z-index: 250;
		position: absolute;
		top: 0;
		left: 0;
	}

	.pagina-hero-overlay{
		position: absolute;
		transform: none;
		z-index: 300;
		color: #FFF;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,0.4);
		padding: 1.5vw 2vw;
		backdrop-filter: blur(2px);
		/* border-top-left-radius: 10px; */
		transition: 0.2s ease-in all;
	}

	/* ==========================================================================
	   Portfolio Overzicht Hero's (2 naast elkaar)
	   ========================================================================== */

	@media (min-width: 768px) {
	    .pagina-hero.portfolio {
	        width: 50%;
	        float: left;
	        height: 50dvh !important; 
	        max-height: 500px;
	        min-height: 350px;
	    }

	    .pagina-hero.portfolio .pagina-hero-overlay {
	        padding: 20px;
	        max-width: 100%;
	    }

	    .pagina-hero.portfolio .pagina-hero-overlay-titel {
	        font-size: 1.5rem;
	    }
	    .laatste-portfolio-hero{

	    }
	}

	@media (max-width: 767px) {
	    .pagina-hero.portfolio {
	        width: 100%;
	        height: 40dvh !important;
	        min-height: 280px;
	    }
	}

	.pagina-hero.portfolio:nth-of-type(2n)::after {
	    content: "";
	    display: table;
	    clear: both;
	}

	.pagina-hero.portfolio .hero-image {
	    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	    will-change: transform;
	}

	.pagina-hero.portfolio a {
	    display: block;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	}

	.pagina-hero.portfolio a:hover .hero-image,
	.pagina-hero.portfolio .pagina-hero-bg:hover .hero-image {
	    transform: scale(1.05);
	}


	@media all and (max-width: 700px){
		.pagina-hero-overlay{
			width: 100%;
		}
	}
	@media all and (min-width: 701px){
		.pagina-hero-overlay{
			width: 100%;
		}
	}
		.pagina-hero-overlay-link{
			display: inline-block;
			padding: 5px 10px 5px 10px;
			margin: 10px 0 10px 0;
			border-radius: 10px;
			font-size: clamp(16px, 1.5vw, 22px);
			text-shadow: 0 0 5px rgba(0,0,0,0.2);
			transition: all 0.2s ease-in;
		}
		.pagina-hero-overlay a .pagina-hero-overlay-link.zwart{
			color: #000;
		}
		.pagina-hero-overlay a .pagina-hero-overlay-link.wit{
			color: #FFF;
		}
		.pagina-hero-overlay a:hover .pagina-hero-overlay-link.zwart{
			background: #000;
			color: #FFF;
		}
		.pagina-hero-overlay a:hover .pagina-hero-overlay-link.wit{
			background: #FFF;
			color: #000;
		}
		.pagina-hero-overlay-link.zwart{
			border: 1px solid #000;
		}
		.pagina-hero-overlay-link.wit{
			border: 1px solid #FFF;
		}
		.pagina-hero-overlay-link i{
			position: relative;
			top: 1px;
		}
		.pagina-hero-gradient{
			background: #000;
			background: rgba(0,0,0,0.6);
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			h1{
				color: #FFF;
				font-family: 'f_sb';
				font-size: clamp(24px, 4vw, 42px);
				text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
			}
			h2, .hero-subline{
				color: #FFF;
				font-family: 'f_r';
				font-size: clamp(14px, 2vw, 24px);
				text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
				margin: 1.5vh 0 0 0;
			}
		}
			.pagina-hero-gradient-overlay{
				position: absolute;
				width: calc(100%);
				padding: 20px 20px 40px 20px;
				text-align: center;
			}
			.pagina-hero-overlay-titel{
				font-size: clamp(22px, 2.5vw, 36px);
				font-family: 'f_b';
				text-shadow: 0 0 5px rgba(0,0,0,0.2);
				transition: all 0.2s ease-in;
				color: #FFF;
			}
			.pagina-hero-overlay-omschrijving{
				font-family: 'Poppins';
				font-weight: 300;
				margin-top: 10px;
				font-size: clamp(16px, 2.0vw, 24px);
				text-shadow: 0 0 5px rgba(0,0,0,0.2);
				transition: all 0.2s ease-in;
				color: #FFF;
				max-width: 900px;
				width: calc(100% - 60px);
				margin-left: auto;
				margin-right: auto;
				text-align: justify;
			}
			.pagina-hero-overlay .pagina-hero-overlay-omschrijving{
				text-align: left;
				margin-left: 0;
				margin-right: 0;
			}
		


	

section.pagina-tekstvak{
	width: 100%;
	position: relative;
	top: 0;
	background: var(--bg);
}	
	section.pagina-tekstvak.actueel-eerste-element .pagina-tekstvak-container{
		padding-top: 0;
	}
	.pagina-tekstvak-container.actueel-bovenste-vak{
		padding-bottom: 0;
	}

	.actueel-bovenste-vak h3{
		color: var(--btn-nav-hover);
		font-size: clamp(14px, 2.5vw, 18px);
		font-family: 'f_sb';
	}
	
	 .pagina-tekstvak:not(.portfolio):not(.bouwfotograaf) .pagina-tekstvak-container{
		margin: 0 auto;
		font-size: clamp(16px, 2.5vw, 20px);
		padding: 25px 10px 25px 10px;
		width: calc(100% - 60px);
		max-width: 900px;
		font-family: 'f_l';
		line-height: clamp(30px, 3vh, 36px);
	 }

	 .pagina-tekstvak-container ul{
	 	margin: 0;
	 	padding: 25px 0 0 25px;
	 }
	 	.pagina-tekstvak-container ul li{
	 		padding: 0 0 0 0;
	 	}
	 .pagina-tekstvak-container a{
	 	color: var(--a);
	 }
	 .pagina-tekstvak-container a:hover{
	 	color: var(--a-hover);
	 }
	 .pagina-tekstvak-container{
	 	font-size: 18px;
	 }
		 .pagina-tekstvak:not(.portfolio) h1{
		 	font-size: 2.5rem;
		 	font-family: 'f_sb';
		 	padding: 0 0 5px 0;
		 	margin: 0;
		 	background: var(--header-h1);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		 }
		 .pagina-tekstvak:not(.portfolio) .pagina-tekstvak-container h2{
		 	font-family: 'f_sb';
		 	font-size: 1.75rem;
		 	padding: 0;
		 	margin: 0;
		 	a{
		 		text-decoration: none;
		 		color: var(--color);
		 		&:hover{
		 			color: var(--color);
		 		}
		 	}
		 }

	section.pagina-over {
	    display: flex;
	    align-items: flex-start;
	    gap: 40px;
	    width: 100%;
	    max-width: 900px;
	    margin: 7vh auto 7vh auto;
	    box-sizing: border-box;
	}

	.pagina-over-foto {
	    flex: 0 0 15dvw;
	    max-width: 300px;
	    width: 100%;
	    text-align: center;
	}

	.pagina-over-foto img {
	    width: 100%;
	    height: auto;
	    border-radius: 50%;
	    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	    display: block;
	    margin: 0 auto; /* Zorgt dat de afbeelding altijd netjes centreert */
	}

	@media (max-width: 768px) {
	    section.pagina-over {
	        flex-direction: column;
	        align-items: center; /* Centreert alle flex-children (foto & tekst) horizontaal */
	        text-align: left;
	        gap: 20px;
	        padding: 0 20px;
	    }

	    .pagina-over-foto {
	        width: 100%;
	        max-width: 200px; /* De gewenste grootte op mobiel */
	    }
	}

	.pagina-over-informatie {
	    flex: 1;
	    z-index: 400;

	    h2 {
	        margin: 0 0 15px 0;
	        padding: 0;
	        font-size: clamp(22px, 4vw, 32px);
			background: var(--header-h1);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	    }

	    p {
	        margin: 10px 0 30px 0;
	        line-height: 1.75em;
	        font-size: clamp(16px, 2dvw, 20px);
	    }
	}

	/* Mobiele responsive fix */
	@media (max-width: 768px) {
	    section.pagina-over {
	        flex-direction: column;
	        text-align: left;
	        gap: 20px;
	        padding: 0 20px;
	    }

	    .pagina-over-foto {
	        flex: 0 0 auto;
	        max-width: 200px; /* Iets kleiner op mobiel */
	    }
	}
	 
	.pagina-over-kop{
		font-size: clamp(60px, 6vw, 100px);
		color: rgba(0,0,0,0.015);
		font-family: 'f_b';
		position: absolute;
		top: -6vh;
		left: 25px;
		width: calc(100% - 25px);
		overflow: hidden;
		word-wrap: none;
		text-align: left;
		white-space: nowrap;
		z-index: 300;
	}
	@media (prefers-color-scheme: dark) {
		.pagina-over-kop{
			color: rgba(255,255,255,0.04);
		}
	}

section.pagina-gallery {
    width: 100%;
    min-height: 200px;
    position: relative;
    top: 0;
    background: var(--bg);
    padding: 10px 0;
}    

.pagina-gallery-container {
    display: flex;
    gap: 2dvw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: 5dvw;
    scroll-padding-inline: 5dvw;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch; /* Zorgt voor soepele swipe op iOS */
}

.pagina-gallery-container::-webkit-scrollbar {
    display: none;
}

.pagina-gallery-container.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.pagina-gallery-item {
    flex: 0 0 auto;
    height: min(80vh, 50dvw); 
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 0.4;
    transition: opacity 0.15s ease-out;
    cursor: pointer;
    /* Forceer GPU-hardwareversnelling in iOS Safari */
    will-change: opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* AFBEELDING STYLING (SAFARI FIX) */
.pagina-gallery-item img {
    height: 100%;
    width: auto; /* Dwingt de browser de breedte via aspect-ratio te berekenen */
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Aspect-ratio rechtstreeks op de img toepassen */
.pagina-gallery-item.landscape img { aspect-ratio: 3 / 2; }
.pagina-gallery-item.portrait img  { aspect-ratio: 2 / 3; }
.pagina-gallery-item.square img    { aspect-ratio: 1 / 1; }

.pagina-gallery-item:last-child {
    scroll-snap-align: end;
}

.pagina-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Navigatieknoppen */
.pagina-gallery-nav {
    position: absolute;
    top:  calc(50% - 3dvh);
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
@media all and (max-width: 600px){
	.pagina-gallery-nav{
		top:  calc(50% - 3dvh);
	}
}

.pagina-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: translateY(-50%) scale(1.05);
}

.pagina-gallery-nav-prev { left: 1.5rem; }
.pagina-gallery-nav-next { right: 1.5rem; }

.pagina-gallery-nav.is-disabled {
    opacity: 0.3 !important;
    pointer-events: none;
    cursor: default;
}

/* Dots / Indicatoren */
.pagina-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    position: relative;
    padding: 8px 0;
}

.pagina-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d1d5db; 
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    outline: none;
}

.pagina-gallery-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    border: 2px solid #b0b0b0;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

.pagina-gallery-dot:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.pagina-gallery-dot-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1e88e5;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   PAGINA GRID LAYOUT (Masonry / CSS Columns)
   ========================================================================== */

section.pagina-grid {
    width: 100%;
    min-height: 200px;
    position: relative;
    background: var(--bg);
    padding: 10px 0;
}

.pagina-grid-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Maximale breedtes per type */
.pagina-grid-2 .pagina-grid-wrapper {
    max-width: 950px;
}

.pagina-grid-3 .pagina-grid-wrapper,
.pagina-grid .pagina-grid-wrapper {
    max-width: 1380px;
}

/* MASONRY CONTAINER (CSS Columns) */
.pagina-grid-container {
    column-count: 3; /* Standaard 3 kolommen op desktop */
    column-gap: 12px;  /* Horizontale ruimte tussen de kolommen */
}

.pagina-grid-2 .pagina-grid-container {
    column-count: 2;
}

/* GRID ITEM STYLING */
.pagina-grid-item {
    width: 100%;
    margin-bottom: 12px; /* Verticale ruimte onder elke foto */
    break-inside: avoid;  /* ESSENTIEEL: Voorkomt dat een foto wordt doorgesneden */
    overflow: hidden;
    position: relative;
    display: block;
}

.pagina-grid-item.landscape,
.pagina-grid-item.orientatie-liggend { 
    aspect-ratio: 3 / 2; 
}

.pagina-grid-item.portrait,
.pagina-grid-item.orientatie-staand { 
    aspect-ratio: 2 / 3; 
}

.pagina-grid-item.square,
.pagina-grid-item.orientatie-vierkant { 
    aspect-ratio: 1 / 1; 
}

.pagina-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- Responsive Breekpunten --- */

/* Schermen tussen 800px en 1200px: 2 kolommen */
@media (max-width: 1200px) {
    .pagina-grid-container,
    .pagina-grid-3 .pagina-grid-container {
        column-count: 2;
        column-gap: 20px;
    }
    .pagina-grid-item {
        margin-bottom: 20px;
    }
}

/* Schermen kleiner dan 800px: 1 kolom */
@media (max-width: 800px) {
    .pagina-grid-container,
    .pagina-grid-2 .pagina-grid-container,
    .pagina-grid-3 .pagina-grid-container {
        column-count: 1;
        column-gap: 0;
    }
    .pagina-grid-item {
        margin-bottom: 16px;
    }
}

.pagina-onder-elkaar-container {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.pagina-onder-elkaar-container .pagina-onder-elkaar-item {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
}

	.pagina-onder-elkaar-container .pagina-grid-item {
	    display: block;
	    margin: 0 auto;
	    max-width: 100%;
	    height: auto;
	}

	.pagina-onder-elkaar-container .pagina-onder-elkaar-item.orientatie-staand img,
	.pagina-onder-elkaar-container .pagina-grid-item.orientatie-staand {
	    max-height: 80dvh;
	    max-width: 100%;
	    width: auto;
	    height: auto;
	}

	.pagina-onder-elkaar-container .pagina-grid-item.orientatie-staand,
	.pagina-onder-elkaar-container .pagina-grid-item.orientatie-liggend,
	.pagina-onder-elkaar-container .pagina-grid-item.orientatie-vierkant{
		aspect-ratio: auto;
		margin: 20px auto;
		display: block; /* Zorgt ervoor dat margin: auto goed centreert */
	    max-width: 100%; /* Voorkomt dat foto's buiten het scherm vallen */
	}

	.pagina-onder-elkaar-container .pagina-grid-item.orientatie-staand {
	    max-height: 80dvh;
	    max-width: 100%; /* Bepaling dat hij nooit breder mag worden dan het scherm */
	    width: auto;
	    height: auto; /* Zorgt dat de hoogte meeschaalt als max-width activeert */
	}

	.leesmeer{
		width: calc(100% - 15px);
		max-width: 900px;
		margin: 30px auto;
		padding: 20px;
		box-sizing: border-box;
		background: var(--bg-footer);
		text-align: center;
		border-radius: 10px;
	}
	.pagina-tekstvak-container hr,
	.actueel-section hr{
		height: 1px;
		border: none;
		width: 100%;
		max-width: 900px;
		background: var(--border);
		margin: 40px auto 20px auto;
	}
		.pagina-tekstvak-container .pagina-infoblok hr{
			margin: 10px auto;
		}

 section.pagina-fotoinfoblok{
    width: 100%;
    min-height: 200px;
    position: relative;
    top: 0;
    background: var(--bg);
    padding: 10px 0;
    margin: 0 auto 40px auto;
}

figure.pagina-fotoinfoblok-foto {
	display: table;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

section.pagina-fotoinfoblok img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 75vh; 
	object-fit: contain;
	margin: 0 auto;
}

.pagina-infoblok-beschrijving {
	display: table-caption;
	caption-side: bottom;
	background-color: var(--bg-infoblok);
	padding: 12px 16px 22px 16px;
	margin: 0;
	border: none;
	box-sizing: border-box;
	text-align: left;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
@media all and (max-width: 900px){
	.pagina-infoblok-beschrijving{
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.pagina-infoblok-beschrijving .kop {
	font-family: 'f_b';
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: clamp(30px, 2vh, 36px);
	margin: 0 0 4px 0;
	color: var(--text);
}

.pagina-infoblok-beschrijving .tekst {
	font-family: 'f_r';
	font-size: clamp(16px, 2.5vw, 16px);
	line-height: clamp(26px, 2vh, 36px);
	margin: 0;
	color: var(--text);
}
	.pagina-infoblok-beschrijving .tekst a{
		color: var(--text);
		text-decoration: none;
		border: 1px solid var(--text);
		padding: 5px 10px 5px 10px;
		border-radius: 5px;
		font-family: 'f_sb';
		font-size: 1.1rem;
		transition: 0.1s ease-in all;
	}
	.pagina-infoblok-beschrijving .tekst a:hover{
		background: var(--text);
		color: var(--text-contrast);
	}
		.pagina-infoblok-beschrijving .tekst a:active{
			position: relative;
			top: 2px;
		}

.pagina-fotoinfoblok-foto.orientatie-liggend {
	max-width: 900px;
	width: 100%;
}

.pagina-fotoinfoblok-foto.orientatie-staand {
	max-width: 60%;
}

.pagina-fotoinfoblok-foto.orientatie-vierkant {
	max-width: 75%;
}

@media (max-width: 768px) {
	.pagina-fotoinfoblok-foto.orientatie-staand,
	.pagina-fotoinfoblok-foto.orientatie-vierkant {
		max-width: 90%;
	}
}

/* ==========================================================================
   FOTO-INFOBLOK (TEKST NAAST FOTO MET SCHUINE RAND)
   ========================================================================== */

section.pagina-fotoinfoblok {
    width: 100%;
    padding: 20px 0;
    position: relative;
}

/* 1. De wrapper pakt de blauwe achtergrond (verloop) over de VOLLEDIGE breedte */
.pagina-fotoinfoblok-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 25px rgba(0,0,0,0.15);
}
.pagina-fotoinfoblok-wrapper.blauw{
	background: var(--bg-hero);      /* Blauw verloop staat op het hele blok */
}
.pagina-fotoinfoblok-wrapper.grijs{
	background: var(--bg-hero-grijs);
}

	@media all and (max-width: 900px){
		.pagina-fotoinfoblok-wrapper{
			border-radius: 0;
		}
	}


/* LINKERBLOK (FOTO CONTAINER) */
.pagina-fotoinfoblok-blok-links {
    flex: 0 0 52%;
    min-height: 350px;
    position: relative;
    
    /* Schuine rand uitsnijden */
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
}

/* Figure pinnen aan alle hoeken van de container */
.pagina-fotoinfoblok-blok-links-foto {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Verhoogde specificiteit om eerdere 'height: auto' regels te overschrijven */
section.pagina-fotoinfoblok .pagina-fotoinfoblok-blok-links img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
}

/* 3. Rechterblok heeft GEEN eigen background meer (laat de wrapper erdoorheen zien) */
.pagina-fotoinfoblok-blok-rechts {
    flex: 1;
    padding: 40px 35px 40px 25px; /* Iets minder padding links i.v.m. de schuine hoek */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.pagina-fotoinfoblok-blok-rechts .kop {
    font-size: 1.4rem;
    font-family: 'f_sb';
    margin: 0 0 12px 0;
    line-height: 1.3;
}
.pagina-fotoinfoblok-wrapper.blauw .kop{
	color: #FFF;
}
.pagina-fotoinfoblok-wrapper.grijs .kop{
	color: var(--text);
}

.pagina-fotoinfoblok-blok-rechts .tekst {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-family: 'f_l';
}

.pagina-fotoinfoblok-wrapper.blauw .tekst{
	color: #FFF;
}
.pagina-fotoinfoblok-wrapper.grijs .tekst{
	color: var(--text);
}
	
	.pagina-fotoinfoblok-wrapper.blauw{
		.pagina-fotoinfoblok-blok-rechts a{
			color: #FFF;
			text-decoration: none;
			border: 1px solid #FFF;
			padding: 5px 10px 5px 10px;
			border-radius: 5px;
			font-family: 'f_sb';
			font-size: 1.1rem;
			transition: 0.1s ease-in all;
		}
		.pagina-fotoinfoblok-blok-rechts a:hover{
			background: #FFF;
			color: #1e1e1e;
		}
	}
	.pagina-fotoinfoblok-wrapper.grijs{
		.pagina-fotoinfoblok-blok-rechts a{
			color: var(--text);
			text-decoration: none;
			border: 1px solid var(--text);
			padding: 5px 10px 5px 10px;
			border-radius: 5px;
			font-family: 'f_sb';
			font-size: 1.1rem;
			transition: 0.1s ease-in all;
		}
		.pagina-fotoinfoblok-blok-rechts a:hover{
			background: var(--text);
			color: var(--bg);
		}
	}
		.pagina-fotoinfoblok-blok-rechts a:active{
			position: relative;
			top: 2px;
		}

/* --- Responsive (Mobiel) --- */

@media (max-width: 768px) {
    .pagina-fotoinfoblok-wrapper {
        flex-direction: column;
    }

    .pagina-fotoinfoblok-blok-links {
        flex: 1 1 auto;
        width: 100%;
        min-height: 250px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), 0 100%);
    }

    .pagina-fotoinfoblok-blok-rechts {
        padding: 24px 20px;
    }
}

.laatste-element{
	box-shadow: 0 25px 25px rgba(0,0,0,0.025);
	z-index: 300;
}



/* ==========================================================================
   Blok 2
   ========================================================================== */

.mesh-gradient-banner {
    width: 100dvw;
    min-height: 550px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* Gestapelde gradients voor de 'glowing' sfeer */
    background:
        /* 1. Felrode gloeivlek rechts-midden */
        radial-gradient(circle at 85% 45%, #ff3300 0%, transparent 55%),
        
        /* 2. Warme geel-oranje gloeivlek linksboven */
        radial-gradient(circle at 15% 15%, #ff9e29 0%, transparent 50%),
        
        /* 3. Basisverloop: Oranje -> Donkerrood -> Diepzwart onderaan */
        linear-gradient(180deg, #f8931d 0%, #d82b00 42%, #22090f 75%, #090407 100%);
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
	clear: both;
    background-color: var(--bg-footer);
    color: var(--text);
    padding: 80px 20px 30px 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 60dvh;
}

	.footer-container {
	    max-width: 1140px;
	    margin: 0 auto;
	}

	.footer-contact{
		font-size: 100px;
		color: rgba(0,0,0,0.02);
		font-family: 'f_b';
		position: absolute;
		top: 10px;
		left: 25px;
		width: calc(100% - 25px);
		overflow: hidden;
		word-wrap: none;
		text-align: left;
		white-space: nowrap;
	}
	@media (prefers-color-scheme: dark) {
		.footer-contact{
			color: rgba(255,255,255,0.04);
		}
	}

		/* --- HERO & TITEL --- */
		.footer-hero {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    gap: 40px;
		    margin-bottom: 50px;
		}

		.footer-gradient-title {
		    font-size: clamp(2rem, 4vw, 3.2rem);
		    font-family: 'f_sb';
		    line-height: 1.15;
		    margin: 0;
		    background: var(--header-h1);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		}
		.footer-call2action {        
		    font-size: clamp(1.2rem, 2.5vw, 2.2rem); 
		    font-weight: 800;
		    line-height: 1.4;
		    margin: 15px 0 0 0;

		    a {
		        color: var(--text);
		        text-decoration: none;
		        position: relative;
		        display: inline-block;
		        z-index: 1; /* Zorgt dat de tekst Boven de achtergrond blijft zweven */
		        
		        /* Subtiele padding & negatieve margin zodat het vlak op hover net wat ademruimte krijgt om de letters */
		        padding: 2px 8px;
		        margin: 0 -4px;
		        
		        transition: color 0.2s ease-in-out;

		        &::after {
		            content: '';
		            position: absolute;
		            left: 0;
		            width: 100%;
		            background: var(--bg-contact); /* Pakt jouw verloopkleur */
		            z-index: -1;
		            
		            /* RUSTSTAND: Een strakke onderlijn */
		            bottom: -2px;
		            height: 3px;
		            opacity: 0.85;

		            /* Vloeiende uitvouw-animatie */
		            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

		        }

		        &:hover {
		            color: var(--bg-contact-hover); /* Tekst wordt strak wit zodra de achtergrond vult */


		            &::after {
		                /* HOVERSTAND: Vult de volledige hoogte van de tekst */
		                bottom: 0;
		                height: 100%;
		                opacity: 1; /* Volledig dekkend */
		                border-radius: 4px; /* Subtiel afgeronde hoekjes voor het vlak */
		            }
		        }
		    }
		}

		.footer-portrait-wrapper {
		    flex-shrink: 0;
		}

		.viewfinder-frame {
		    position: relative;
		    width: 110px;
		    height: 110px;
		    padding: 8px;
		    box-sizing: border-box;
		}

		.viewfinder-frame > div {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    border-radius: 50%;
		    display: block;
		    box-shadow: 0 0 10px rgba(0,0,0,0.1);
		}

		/* --- SCHEIDINGSLIJN --- */
		.footer-divider {
		    border: none;
		    height: 1px;
		    background: var(--border);
		    margin: 0 0 50px 0;
		}

		/* --- GRID LAYOUT --- */
		.footer-grid {
		    display: grid;
		    grid-template-columns: 1.2fr 1.2fr 1fr;
		    gap: 40px;
		    margin-bottom: 60px;
		}

		.col-title {
		    font-size: 1.1rem;
		    font-weight: 700;
		    margin-top: 0;
		    margin-bottom: 20px;
		    color: var(--text);
		}

		/* --- KOLOM 1: CONTACT --- */
		.company-name {
		    font-weight: 600;
		    margin-bottom: 15px;
		    color: var(--text-muted);
		}

		.contact-details, .legal-links {
		    list-style: none;
		    padding: 0;
		    margin: 0;
		}

		.contact-details li {
		    display: flex;
		    align-items: center;
		    gap: 12px;
		    margin-bottom: 12px;
		    font-size: 0.95rem;
		}

		.contact-icon {
		    font-size: 1.1rem;
		    width: 20px;
		    text-align: center;
		}

		.contact-details a, .legal-links a {
		    color: var(--text);
		    text-decoration: none;
		    transition: color 0.2s ease;
		}

		.contact-details a:hover, .legal-links a:hover {
		    color: var(--a);
		}

		.kvk-row {
		    margin-top: 15px;
		    color: var(--text-muted);
		    font-size: 0.85rem;
		}

		.kvk-label {
		    font-weight: 600;
		}

		/* --- KOLOM 2: CERTIFICATEN CARD --- */
		.cert-text {
		    font-size: 0.9rem;
		    color: var(--text-muted);
		    margin-bottom: 20px;
		    line-height: 1.5;
		}

		/* Donkere badge-card zodat witte logo's altijd matchen (ook in light theme) */
		.cert-card {
		    background: var(--bg-hero);
		    padding: 16px 20px;
		    border-radius: 10px;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 15px;
		    box-shadow: 0 0 5px rgba(0,0,0,0.2);
		}

		.cert-card a {
		    display: inline-flex;
		    align-items: center;
		    transition: transform 0.2s ease, opacity 0.2s ease;
		}

		.cert-card a:hover {
		    transform: translateY(-2px);
		    opacity: 1;
		}

		.cert-card img {
		    height: 32px;
		    width: auto;
		    object-fit: contain;
		}
		@media all and (max-width: 450px){
			.cert-card img{
				height: 20px;
				width: auto;
				object-fit: contain;
			}
		}

		/* --- KOLOM 3: JURIDISCH --- */
		.legal-links li {
		    margin-bottom: 10px;
		    font-size: 0.9rem;
		}

		.legal-links a {
		    color: var(--text-muted);
		}

	/* --- BOTTOM BAR --- */
	.footer-bottom {
	    border-top: 1px solid var(--border);
	    padding-top: 25px;
	    text-align: center;
	    font-size: 0.85rem;
	    color: var(--text-muted);
	}

/* --- RESPONSIVE / MOBIEL --- */
@media (max-width: 850px) {
    .footer-hero {
        flex-direction: column-reverse;
        text-align: center;
        gap: 25px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .status-badge {
        justify-content: center;
    }

    .cert-card {
        justify-content: space-around;
    }
}

.theme-toggle {
    position: fixed;
    bottom: 70px;
    right: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: var(--transition-theme);
    z-index: 4000;
}

.ga-naar-hoofdsite{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	max-width: 575px;
	color: #FFF;
	background: var(--bg-hero-transparent);
	z-index: 1000;
	box-sizing: border-box;
	border-top-left-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	.ga-naar-hoofdsite-container{
		max-width: 1800px;
		width: 100%;
		text-align: center;
	}
	a{
		color: #FFF;
		text-decoration: none;
		font-family: 'f_sb';
		text-shadow: 1px 1px 1px rgba(0,0,0,0.5);	
		display: block;
		padding: 10px;
		transition: 0.1s ease-in all;
	}
	a:hover{
		transform: scale(1.025);
	}
}
@media (max-width: 768px) {
    .ga-naar-hoofdsite {
        text-align: right;
        padding: 10px 30px 10px 5px;
        font-size: 13px;
    }
}
@media all and (max-width: 575px){
	.ga-naar-hoofdsite{
		border-radius: 0px;
	}
}
ul.pbm-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0 !important;
}

ul.pbm-list li {
    position: relative;
    padding-left: 28px; /* Maakt links ruimte vrij waar het vinkje precies in past */
    margin-bottom: 12px;
    line-height: 1.4;
    font-size: clamp(14px, 3vw, 18px);
    text-align: left;
}

ul.pbm-list li::before { 
    content: "\ea5e";
    font-family: 'tabler-icons' !important; 
    font-style: normal;
    font-weight: normal;
    color: #ff5500; 
    
    /* Zet het vinkje vast in de vrijgemaakte linkerruimte */
    position: absolute;
    left: 0;
    top: 2px; /* Lijn uit op de eerste regel */
    line-height: 1;
}

.pagina-over-informatie .cert-card{
	width: 100%;
	max-width: 500px;
	background: var(--bg-footer);
	margin: 20px auto;
	padding: 20px 50px;
	box-sizing: border-box;
}
@media (prefers-color-scheme: light) { 
	.pagina-over-informatie .cert-card img{
		filter:invert(1);
	}
}
@media all and (max-width: 900px){
	.pagina-over.veiligheid{
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   PAGINA DOORVERWIJZING (GECENTREERD & 900PX MAX-WIDTH)
   ========================================================================== */

.pagina-doorverwijzing {
    background: var(--bg-hero);
    padding: 45px 40px;
    border-radius: 12px;
    max-width: 900px;
    margin: -70px auto 50px auto;
    text-align: left;
    box-shadow: var(--bg-hero-projecten-shadow);
}


.pagina-doorverwijzing h2 {
    font-family: 'f_b', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    color: #FFF;
    margin: 0 0 20px 0 !important;
}

.pagina-doorverwijzing p {
    font-family: 'f_r', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 35px 0 !important;
}


.btn-white-bg {
    background: #FFF;
    color: #0d47a1;
}

.btn-white-bg:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #0d47a1 !important; 
}

.btn-white {
    border: 2px solid #FFF;
    color: #FFF;
}

.btn-white:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000 !important;
}

/* Responsiveness voor mobiel */
@media (max-width: 950px) {
    .pagina-doorverwijzing {
        padding: 40px 20px;
        margin: -70px 15px 40px 15px;
    }
}

.ga-naar-contact {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid #FFF;
    border-radius: 10px;
    z-index: 10000;
    overflow: hidden;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease-in all;
    &:hover{
    	transform: scale(1.1);
    }

    a {
        display: block;
        padding: 10px;
        color: #FFF;
        text-decoration: none;
    }
}

section[data-section-id='voorpagina-klanten']{
		width: 100%;
		padding: min(25vh, 10px) 0 min(25vh, 25px) 0;
		background: var(--bg);
		text-align: center;
	}
		.voorpagina-klanten h1{
			font-family: 'f_r';
		}
		.voorpagina-klanten h1 .vet{
			font-family: 'f_b';
		}
	
		.logo-carousel {
			 overflow: hidden;
			 width: 100%;
			background: var(--bg);
			 margin: 10vh 0 10vh 0;
		}


		.logo-track {
			 display: flex;
			 width: max-content;
			 animation: scroll 30s linear infinite;
			 align-items: center;
		}
		.logo-track.reverse {
			 display: flex;
			 width: max-content;
			 animation: scroll-reverse 30s linear infinite;
		}

		.logo-track img {
			 height: auto;
			 max-height: 100px;
			 max-width: 150px;
			 margin: 0 30px;
			 object-fit: contain;
		}

		@media (prefers-color-scheme: dark) {
			 .logo-track img {
				filter: grayscale(1) invert(1) contrast(2);
				opacity: 0.9;
			}	
		}

		/* animatie */
		@keyframes scroll {
			 0% {
				  transform: translateX(0);
			 }
			 100% {
				  transform: translateX(-50%);
			 }
		}
		/* animatie */
		@keyframes scroll-reverse {
			 0% {
				  transform: translateX(-50%);
			 }
			 100% {
				  transform: translateX(0);
			 }
		}

		.opdrachtgevers-achtergrond{
			font-size: 100px;
			color: rgba(0,0,0,0.02);
			font-family: 'f_b';
			position: absolute;
			top: -65px;
			left: 25px;
			width: calc(100% - 25px);
			overflow: hidden;
			word-wrap: none;
			text-align: left;
			white-space: nowrap;
		}
		@media (prefers-color-scheme: dark) {
			.opdrachtgevers-achtergrond{
				color: rgba(255,255,255,0.02);
			}
		}