/* 1) Basis: Bebas voor koppen, per preset wissel je alleen --ui-font */
:root{
	--display-font: 'Bebas Neue', Arial, sans-serif;
	--ui-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
body{
	font-family: var(--ui-font);
	font-weight: 450;            /* tussen 400 en 500: optisch minder “iel” dan Inter 400 */
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}

/* 2) Preset: Inter (iets steviger) */
.font-inter{
	--ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 3) Preset: IBM Plex Sans (technisch, rustig) */
.font-ibmplex{
	--ui-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 4) Preset: Roboto (stabiel, pragmatisch) */
.font-roboto{
	--ui-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* 5) Preset: Noto Sans (vlak, consistent) */
.font-noto{
	--ui-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 6) Preset: Source Sans 3 (alleen voor vergelijking) */
.font-sourcesans{
	--ui-font: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}


body {
	--textcolor: color-mix(in srgb, var(--bordercolor) 60%, black);
}
body, input, p, ul, li, ol, input, textarea, blockquote, button, table *:is(td, th, p), a.button, button, select {
	line-height: 24px;
	font-size: 16px;
		font-family: var(--ui-font);
	font-weight: 500;
	letter-spacing: 0.005em;
	font-optical-sizing: auto;
	
	color: var(--textcolor);
}
strong, .button-group > label  {
	color: color-mix(in srgb, var(--textcolor) 75%, black);
} 

a.button, button, main a, strong, .button-group > label   {
	font-weight: 600!important;
}
a.button, button, main a  {
	color:var(--frontcolor);
	border-color:var(--frontcolor);
	user-select: none;
	cursor: pointer;
}

*:is(a.button, button, main a):hover {
	color:var(--secondarycolor, #2a2a86);
}
h1, h2, h3 {
	font-weight: 300;
		font-family: var(--display-font);
	letter-spacing: 0.02em;
	font-optical-sizing: auto;
}
h1 {
	font-size:40px;
}

body[data-domain*="ledenportaal"] h1  {
	font-size:120px;
	line-height: 100px;
	padding-top: 25px;
	padding-bottom: 25px;
} 
@media (max-width: 1400px){
	body[data-domain*="ledenportaal"] h1{
		font-size: 60px;
		line-height: 40px;
	}
}

h2, h3.jumbo {
	font-size:40px;
}

h2.jumbo {
	line-height: 60px;
	font-size: 60px;
}
h3 {
	font-size: 20px;
}

h1, h2, h3,  th, a.button, button {
	color:var(--frontcolor_dark);
}
h4, strong {
	font-weight: 500;
}
.small, table *:is(td, th, p), small {
	font-size:13px;
	line-height: 24px;
}
.small, table p, small {

	line-height: 18px;
}
table * {
	font-family: var(--ui-font);
	font-variant-numeric: tabular-nums; /* getallen mooi onder elkaar */
}
table *:is(td, th, p) *:is(.small, small) {
	font-size:11px;
}
.light {
	filter: opacity(75%) grayscale(100%);
}
.light a {
	display: inline-block;
	border-bottom: 1px dotted var(--frontcolor_dark);
}
.light a:hover {
	
	border-bottom: 1px solid var(--frontcolor_dark);
}
.light:has(a:hover) {
	filter: opacity(75%);
}

.menu-open nav, form input {
	z-index: 999998;
}
.menu-button {
	z-index: 999999!important;
}

body.menu-open .menu-button * {
	
}

.bro-masked-video {
	position: absolute!important;
	top: 0px;
	right: 90px;
	width: calc(50vw - 180px)!important;
	height: calc(50vw - 180px)!important;
	
	top:5vh;
}
.bro-masked-video > *, .bro-masked-video > * > *, .bro-masked-video > * > * > *  {
	width: 100%!important;
	height: 100%!important;
}
.bro-masked-video svg {

}

.card:has(.jumbo) {
	padding: 30px;
}