@import url("colors.css");
@import url("fonts.css");

@view-transition {
	navigation: auto;
}

:root {
	interpolate-size: allow-keywords;
	
	--contentWidth: min(92vw, 1500px);
	--maxWindowWidth: min(92vw, 1200px);
	--colorCopyright: #fff;
	--bgCopyright: #eb5c40;
	--sectionPaddingTop: 1rem;
	--sectionPaddingBottom: 1rem;
	
	--menuAnimationTime: 250ms;
	--menuAnimationFunction: ease-in-out;
	
	--chunkoSpacing: 1px;
	
	--bounceAnimationFunction: linear(0, 1 44.7%, 0.898 51.8%, 0.874 55.1%, 0.866 58.4%, 0.888 64.3%, 1 77.4%, 0.98 84.5%, 1);
}

* {
	padding: 0;
	box-sizing: border-box;
	font-family: 'droid_sans';
	transition-behavior: allow-discrete;
}

html {
	font-size: 12px;
	font-weight: 300;
}
@media (min-width: 320px) {
	html {
		font-size: 14px;
	}
}
@media (min-width: 800px) {
	html {
		font-size: 16px;
	}
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html,
body {
	margin: 0px;
	color: var(--colorTextDefault);
}

img {
	max-width: 100%;
}

p img {
	margin: 1rem;
}

h1, h2, h3, h4, h5 {
	font-family: 'ChunkoBold';
	letter-spacing: calc(var(--chunkoSpacing) * 1.5);
	text-decoration: underline;
	margin-block: 0.5em;
	line-height: 1.2em;
	font-weight: 100;
    text-transform: uppercase;
	color: var(--colorSpecialDefault);
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 0.25rem;
}

h2:has(+h1) {
	margin-bottom: 0px;
}

h2 + h1 {
	margin-top: 0px;
}

h1 { font-size: 3rem;}
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }


@media (min-width: 800px) {
	h1 { font-size: 4rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 2rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.25rem; }
}
hr {
    width: 100%;
}
b, strong {
    font-weight: bold;
}

a {
	color: var(--colorTextDefault);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.center {
	text-align: center;
}

.centeronmobile {
	text-align: center;
}
@media (min-width: 800px) {	
	.centeronmobile {
		text-align: left;
	}
}

@media (max-width: 800px) {
	button.hideonmobile,
	.button.hideonmobile,
	section .content a.button.hideonmobile {
		display: none;
	}
}
.left {
	text-align: left;
}

.right {
	text-align: right;
}

.spaceafter {
    padding-bottom: 1rem;
}

.spaceafterelement {
    margin-bottom: 1rem;
}

.small {
    font-size: 0.8rem;
}

.unavailable {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    opacity: 0.25;
}

.error {
    border: 2px solid red;
    background: #f44;
    padding: 0.5rem;
    color: #fff;
    text-align: center;
}

.error.verborgen {
	display: none;
}

.error a {
	color: #fff;
}

.styled {
	text-wrap-style: balance;
    font-family: 'droid_sans_mono';
	margin-block: 0.5em;
}

.iconlink {
	display: inline-block;
    padding: 0.5rem;
}

.iconlink:hover {
	filter: brightness(0.5);
}

.iconlink i {
    font-size: 2.5rem;
}

.smalltext {
    font-size: 0.8rem;
}

.smalltext p {
	text-wrap-style: pretty;
	margin-block: 0.5em;
}

.sitewarninglabel {
    position: absolute;
    background: red;
    color: white;
    text-align: center;
    font-weight: 900;
	font-size: 1.25rem;
    padding: 0.5rem;
    rotate: 22.5deg;
    width: 22rem;
    top: calc(100vh - 4rem);
    left: -6rem;
    box-shadow: 0px 1px 3px #000;
    text-shadow: -1px 1px 3px #000;
    pointer-events: none;
    text-shadow: -1px 1px 3px #000;
}

table {
	width: 100%;
}

table.list {
	border-collapse: collapse;
}

table.list tr:nth-child(2n) td {
	background: #fff1;
}
table.list tr:nth-child(2n + 1) td {
	background: #0001;
}

table.list td {
    border-top: 1px solid #0004;
    padding: 0.25rem;
}


/* inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    appearance: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    border: none;
    padding: 0.5rem 1rem;
	margin-block: 0.25rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    width: 100%;
    color: var(--colorTextDefault);
	background: var(--colorBGInputDefault);
}

input[type="range"].vertical {
	writing-mode: vertical-lr;
}

input[type="text"]:disabled,
input[type="text"].disabled {
	pointer-events: none;
    background: hsl(from var(--colorBGInputDefault) h s calc(l * 0.9));
}

select.half {
    width: calc(50% - 0.25rem);
}

div select.half:first-child {
    margin-right: 0.5rem;
}

textarea.grow {
	min-height: 5.5rem;
	overflow: clip;
    field-sizing: content;
	display: block;
}

.window input[type="text"],
.window input[type="email"],
.window input[type="password"],
.window input[type="tel"],
.window select,
.window textarea {
    /* color: var(--colorPanelSpecialDefault); */
    color: var(--colorPanelTextDefault);
}

input[type="text"].border,
input[type="email"].border,
input[type="password"].border {
    border: 2px solid var(--colorTextDefault);
}

.window input[type="text"].border,
.window input[type="email"].border,
.window input[type="password"].border {
    border: 2px solid var(--colorSpecialInvertDefault);
}

@container (min-width: 512px) {
	input:has(+ input):nth-child(2n - 1) {
		margin-right: 0.25rem;
		width: calc(50% - 0.25rem);
	}
	input:has(+ input):nth-child(2n - 1) + input {
		margin-left: 0.25rem;
		width: calc(50% - 0.25rem);
	}
}

input[type="color"] {
    display: inline-block;
    appearance: none;
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
    border-radius: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch {
    border-radius: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0px;
}

input.hidden {
	position: absolute;
    opacity: 0;
    pointer-events: none;
}

input[type="checkbox"].hidden ~ .showonunchecked,
input[type="checkbox"].hidden:checked ~ .showonchecked {
	display: inline-block;
}

div:has(>input[type="checkbox"].hidden:checked) ~ .showoncheckedline {
	display: block;
}

input[type="checkbox"].hidden:checked ~ .showonunchecked,
input[type="checkbox"].hidden ~ .showonchecked,
div:has(>input[type="checkbox"].hidden) ~ .showoncheckedline {
	display: none;
}

input[type="checkbox"].hidden.styledcheckbox + label {
	padding-left: 2rem;
	position: relative;
	margin-block: 0.25rem;
	display: inline-block;
	cursor: pointer;
	user-select: none;
}

input[type="checkbox"].hidden.styledcheckbox + label:has(+input[type="checkbox"]) {
	padding-right: 2rem;
}

input[type="checkbox"].hidden.styledcheckbox + label::before {
	content: "";
	position: absolute;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--colorBGInputDefault);
	border-radius: 0.5rem;
	left: 0px;
	top: calc(50% - 0.75rem);
}

input[type="checkbox"].hidden.styledcheckbox:focus-visible + label::before {
	outline: 2px solid var(--colorTextDefault);
}

input[type="checkbox"].hidden.styledcheckbox.darkborder + label::before {
	outline: 1px solid var(--colorPanelSpecialDefault);
}

input[type="checkbox"]:user-invalid.hidden.styledcheckbox + label::before {
	--borderWidth: 2px;
	box-shadow: var(--borderWidth) var(--borderWidth) 1px red inset, var(--borderWidth) calc(var(--borderWidth) * -1) 1px red inset, calc(var(--borderWidth) * -1) var(--borderWidth) 1px red inset, calc(var(--borderWidth) * -1) calc(var(--borderWidth) * -1) 1px red inset;
}

input[type="checkbox"]:checked.hidden.styledcheckbox + label::before {
	content: '\2713';
}

input[type="search"] {
	width: 100%;
	border: none;
	font-size: 1rem;
	font-family: 'droid_sans_mono';
	outline: none;
	line-height: 2.5rem;
	color: var(--colorTextDefault);
	background: var(--colorBGInputDefault);
}
@media (min-width: 800px) {
	input[type="search"] {
		line-height: calc(3rem - 2px);
	}
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

input[type="checkbox"].slider + label {
	position: relative;
	padding-left: 5rem;
	isolation: isolate;
	line-height: 2rem;
    display: inline-block;
    width: fit-content;
	cursor: pointer;
}

input[type="checkbox"].slider + label::before {
	content: "";
	position: absolute;
	background: hsl(from var(--colorSpecialInvertDefault) h s l / 0.5);
	border: 2px solid var(--colorSpecialInvertDefault);
	width: calc(4rem - 4px);
    height: calc(2rem - 4px);
	border-radius: 1rem;
	top: 0px;
	left: 0px;
	transition: background 250ms;
}

input[type="checkbox"].slider:checked + label::before {
	background: var(--colorSpecialInvertDefault);
}

.windowcontent input[type="checkbox"].slider + label::before {
	background: hsl(from var(--colorSpecialDefault) h s l / 0.5);
	border: 2px solid var(--colorSpecialDefault);
}

input[type="checkbox"].slider + label::after {
	content: "";
	position: absolute;
	background: var(--colorSpecialDefault);
    width: 1.5rem;
    height: 1.5rem;
	border-radius: 1rem;
	top: 0.25rem;
	left: 0.25rem;
	transition: left 250ms;
}

input[type="checkbox"].slider:checked + label::after {
	left: 2.25rem;
}

input[type="checkbox"].slider + label:hover::after {
	filter: brightness(0.9);
}

input[type="checkbox"].slider:disabled + label {
	cursor: default;
}

input[type="checkbox"].slider:disabled + label::before,
input[type="checkbox"].slider:disabled + label:hover::before {
	filter: grayscale(1) opacity(0.5);
}

input[type="checkbox"].slider:disabled + label::after,
input[type="checkbox"].slider:disabled + label:hover::after {
	filter: brightness(1) grayscale(0.5) opacity(0.5);
}


.smallsearch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: center;
}

.smallsearch input[type="search"] {
    line-height: 2rem;
    border-radius: 0.25rem;
	padding-inline: 0.5rem;
}

.smallsearch input[type="checkbox"].slider + label {
    position: relative;
    padding-left: 0rem;
    line-height: 2rem;
    height: 2rem;
    width: 4rem;
    margin-top: 0.25rem;
}
.smallsearch label i {
    position: absolute;
    color: #fff;
    z-index: 5;
    line-height: 2rem;
    left: 0.5rem;
    font-size: 0.75rem;
	transition: 250ms left, 250ms color;
}

.smallsearch input[type="checkbox"]:checked + label i {
    color: #fff4;
    left: 2.5rem;
}




/* buttons */

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

button,
.button,
section .content a.button {
	display: inline-block;
    font-family: 'ChunkoBold';
    background: var(--colorSpecialDefault);
    color: var(--colorSpecialInvertDefault);
	letter-spacing: var(--chunkoSpacing);
    padding: 0.5rem 1rem;
    text-transform: uppercase;
	text-align: center;
    appearance: none;
    border: none;
    border-radius: 3rem;
    font-size: 1.5rem;
    font-weight: 100;
    cursor: pointer;
	text-decoration: none;
	box-shadow: 1px 2px 3px #0008;
    padding-top: 0.75rem;
	transition: 250ms scale;
	user-select: none;
	text-wrap-style: pretty;
}

button:hover,
.button:hover {
	text-decoration: none;
	scale: 1.1;
}

.button.huidig,
section .content a.button.huidig {
    box-shadow: none;
    background: var(--colorSpecialInvertDefault);
    color: var(--colorSpecialDefault);
    cursor: default;
}

.button.huidig:hover,
button:disabled:hover,
.button:disabled:hover,
.tox button:hover {
	scale: 1;
}

.button.disabled,
button:disabled,
.button:disabled {
    filter: contrast(0.25) grayscale(1) brightness(1.5);
    cursor: not-allowed;
	pointer-events: none;
}

.iconbutton {
	width: 100cqw;
	height: 100cqw;
	background-color: var(--colorTextDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
	cursor: pointer;
	transition: 250ms background, 250ms filter;
}
.iconbutton:hover {
	filter: brightness(0.75);
}

.iconbutton.disabled,
.iconbutton.disabled:hover {
    cursor: default;
	background-color: hsl(from var(--colorBGDefault) h s calc(l * 0.95));
	filter: unset;
}

.smalliconbutton {
    width: fit-content;
    border-radius: 0.25rem;
    padding: 0.25rem;
	cursor: pointer;
}
.smalliconbutton:hover {
	filter: brightness(0.75);
}
.smalliconbutton i {
	pointer-events: none;
}

.pijllinks {
    mask-image: url(../images/pijllinks.svg);
}


.pijlrechts {
    mask-image: url(../images/pijlrechts.svg);
}

button[type="reset"] {
    background: transparent;
    font-size: 1.5rem;
    padding-inline: 0px;
	box-shadow: none;
}
@media (min-width: 800px) {
	button[type="reset"] {
		font-size: 2rem;
	}
}

.window button[type="reset"].button {
    font-size: 1.5rem;
    padding-inline: 1rem;
    box-shadow: 1px 2px 3px #0008;
}


/* sections */
section,
footer {
    padding-block: var(--sectionPaddingTop) var(--sectionPaddingBottom);
	background: var(--colorBGDefault);
	color: var(--colorTextDefault);
	position: relative;
	overflow: clip visible;
}

header + section {
	--sectionPaddingTop: 1rem;
}
@media (min-width: 800px) {
	header + section {
		--sectionPaddingTop: 2rem;
	}
}
@media (min-width: 1200px) {
	header + section {
		--sectionPaddingTop: 3rem;
	}
}
header + section:has(.hero),
header + section.hero {
	padding-top: 0px;
	padding-bottom: 0px;
}

footer {
	padding-bottom: 0px;
}

div.content {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0px 0.5rem;
	width: var(--contentWidth);
    margin-inline: auto;
	scroll-margin-top: 7rem;
}

.fullwidth {
    grid-column: 1 / -1;
}

.largewidth {
    grid-column: 2 / -2;
}

.largewidthextended {
	grid-column: 1 / -1;
}
@media (min-width: 800px) {
	.largewidthextended {
		grid-column: 2 / -2;
	}
}

.controlicons {
    position: absolute;
    right: 1rem;
    top: 1rem;
	z-index: 20;
    display: flex;
    gap: 0.5rem;
}

.controlicons.hidden {
	display: none;
}

.controlicons div {
	cursor: pointer;
}

.controlicons div:hover {
	filter: brightness(0.75);
}


.content .cols2,
.content .cols3 {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
}

.cols2 > *:nth-child(2n + 1),
.cols3 > *:nth-child(2n + 1) {
	grid-column: var(--colFirst);
	container-type: inline-size;
}

.cols2 > *:nth-child(2n),
.cols3 > *:nth-child(2n) {
	grid-column: var(--colSecond);
	container-type: inline-size;
}

.cols3 > *:nth-child(3) {
	grid-column: var(--colThird);
	container-type: inline-size;
}


.col3-7, .col4-6, .col5-5 { --colFirst: 2 / -2; --colSecond: 2 / -2; }
.col4-8, .col5-7, .col6-6 { --colFirst: 1 / -1; --colSecond: 1 / -1; }

@media (min-width: 800px) {
	.col3-7 { --colFirst: 2 / 5; --colSecond: 5 / 12; }
	.col4-6 { --colFirst: 2 / 6; --colSecond: 6 / 12; }
	.col5-5 { --colFirst: 2 / 7; --colSecond: 7 / 12; }

	.col4-8 { --colFirst: 1 / 5; --colSecond: 5 / 13; }
	.col5-7 { --colFirst: 1 / 6; --colSecond: 6 / 13; }
	.col6-6 { --colFirst: 1 / 7; --colSecond: 7 / 13; }
}






/* Randen */
.rand1::before, .rand2::before, .rand3::before, .rand4::before, .rand5::before, .rand6::before, .rand7::before, .rand8::before,
.rand1inverse::before, .rand2inverse::before, .rand3inverse::before, .rand4inverse::before, .rand5inverse::before, .rand6inverse::before, .rand7inverse::before, .rand8inverse::before {
    content: "";
    width: 100%;
    position: absolute;
	background-color: var(--colorBGDefault);
    left: 0px;
	mask-repeat: no-repeat;
    mask-position: 50% 100%;
	mask-size: cover;
	z-index: 1;
}

.rand1::before, .rand2::before, .rand3::before, .rand4::before, .rand5::before, .rand6::before, .rand7::before, .rand8::before {
    bottom: calc(100% - 1px);
}

.rand1inverse::before, .rand2inverse::before, .rand3inverse::before, .rand4inverse::before, .rand5inverse::before, .rand6inverse::before, .rand7inverse::before, .rand8inverse::before {
    top: -1px;
	rotate: 180deg;
}

.rand1::before,
.rand5::before,
.rand1inverse::before,
.rand5inverse::before {
	aspect-ratio: 55 / 1;
	mask-image: url(../images/rand1.svg);
}

section:has(+ .rand1),
section:has(+ .rand5) {
	padding-bottom: calc(var(--sectionPaddingBottom) + 1.8vw);
}

.rand2::before,
.rand6::before,
.rand2inverse::before,
.rand6inverse::before {
	aspect-ratio: 50 / 1;
	mask-image: url(../images/rand2.svg);
}

section:has(+ .rand2),
section:has(+ .rand6) {
	padding-bottom: calc(var(--sectionPaddingBottom) + 2vw);
}

.rand3::before,
.rand7::before,
.rand3inverse::before,
.rand7inverse::before {
	aspect-ratio: 25 / 1;
	mask-image: url(../images/rand3.svg);
}

section:has(+ .rand3),
section:has(+ .rand7) {
	padding-bottom: calc(var(--sectionPaddingBottom) + 4vw);
}
.rand4::before,
.rand8::before,
.rand4inverse::before,
.rand8inverse::before {
	aspect-ratio: 40 / 1;
	mask-image: url(../images/rand4.svg);
}

section:has(+ .rand4),
section:has(+ .rand8) {
	padding-bottom: calc(var(--sectionPaddingBottom) + 2.5vw);
}

.rand5::before, .rand6::before, .rand7::before, .rand8::before,
.rand5inverse::before, .rand6inverse::before, .rand7inverse::before, .rand8inverse::before {
	scale: -1 1;
}


/* header */
header {
	position: sticky;
	top: 0px;
	z-index: 20;
	background: var(--colorBGDefault);
	filter: drop-shadow(0px 0px 2px var(--colorBackdropDefault));
	overflow: clip visible;
	isolation: isolate;
	--headerSize: 4rem;
}
@media (min-width: 800px) {
	header {
		--headerSize: 5rem;
	}
}

.headercontent {
	display: grid;
    grid-template-columns: auto 1fr;
	gap: 0.25rem;
	width: var(--contentWidth);
	margin-inline: auto;
	grid-column: 1 / 13;
}
@media (min-width: 500px) {
	.headercontent {
		grid-column: 2 / 12;
		width: 100%;
	}
}

header.rand1::before, header.rand2::before, header.rand3::before, header.rand4::before, header.rand5::before, header.rand6::before, header.rand7::before, header.rand8::before {
    bottom: auto;
    top: calc(100% - 1px);
	rotate: 180deg;
	z-index: -2;
}

header .logo {
	padding: 1rem 0.5rem 0px 0.5rem;
}
@media (min-width: 800px) {
	header .logo {
		padding: 1rem 1rem 0px 1rem;
	}
}

header .logo img {
	display: block;
	height: var(--headerSize);
    transition: 150ms scale;
}

header .logo a:hover img {
    scale: 1.25;
}

header .icons {
    display: flex;
    position: relative;
    justify-content: flex-end;
    width: 100%;
	gap: 0.5rem;
}

header .icons:has(form:focus-within) .icon,
header .icons:not(:has(form > input:placeholder-shown)) .icon {
	opacity: 0;
	pointer-events: none;
}

header .searchbar {
	position: absolute;
    margin-top: 1.25rem;
	padding-bottom: 1rem;
    padding-right: 1.5rem;
    opacity: 0;
    pointer-events: none;
	display: grid;
	grid-template-columns: 1fr auto;
    width: 4rem;
    overflow: clip;
}
@media (prefers-reduced-motion: no-preference) {
	header .searchbar {
		transition: width 250ms ease-in-out, opacity 100ms;
	}
}
@media (min-width: 800px) {
	header .searchbar {
		margin-top: 1.5rem;
		padding-right: 1.75rem;
	}
}

header .searchbar:has(form:focus-within),
header .searchbar:not(:has(form > input:placeholder-shown)) {
    opacity: 1;
    pointer-events: all;
    width: 100%;
}

header .searchbar::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	right: 0px;
	bottom: 1rem;
	background: var(--colorTextDefault);
}

/* header .searchbar input { */
	/* background: transparent; */
/* } */

header .icon {
	padding-top: 1rem;
}

header .icon > * {
	display: grid;
    height: var(--headerSize);
	align-items: end;
    align-content: center;
    justify-items: center;
}
@media (min-width: 600px) {
	header .icon > * {
		min-width: var(--headerSize);
	}
}

header .icon label:hover,
header .icon a:hover {
	cursor: pointer;
	text-decoration: none;
	filter: brightness(0.75);
}

header .icon label.menuopen:hover {
	filter: brightness(1);
}

header .icon i {
	color: var(--colorTextDefault);
	font-size: 2rem;
}

header .icon span {
	color: var(--colorTextDefault);
	font-size: 0.75rem;
	font-family: 'droid_sans_mono';
	white-space: nowrap;
	padding-inline: 0.25rem;
    text-align: center;
}

header :nth-last-child(1 of .icon) {
    padding-right: 0.75rem;
}

.menu,
.login {
    position: absolute;
    background: var(--colorPanelBGDefault);
    color: var(--colorPanelSpecialDefault);
    width: 100%;
	top: calc(100% - 1px);
	left: 0px;
	overflow: clip auto;
	max-height: calc(100vh - 5rem);
	height: 0px;
	scrollbar-color: hsl(from var(--colorPanelBGDefault) h s calc(l * 1.25)) hsl(from var(--colorPanelBGDefault) h s calc(l * 0.75));
}
@media (prefers-reduced-motion: no-preference) {
	.menu,
	.login {
		transition: var(--menuAnimationTime) height var(--menuAnimationFunction);
	}
}
@media (min-width: 800px) {
	.menu,
	.login {
		max-height: calc(100vh - 6rem);
	}
}

.menucontent,
.logincontent {
	width: var(--contentWidth);
	padding: 1rem 3rem;
	margin-inline: auto;
}
.logincontent {
	display: grid;
	gap: 1rem;
	justify-items: center;
    align-items: center;
	width: calc(var(--contentWidth) / 12 * 10);
}
@media (min-width: 800px) {
	.menucontent {
		column-count: 2;
	}
}
@media (min-width: 1000px) {
	.logincontent {
		/* column-count: 2; */
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1200px) {
	.menucontent {
		column-count: 3;
	}
}
.logincontent div {
    text-align: center;
}
.logincontent span {
	font-family: 'droid_sans_mono';
	font-size: 1.25rem;
}
.logincontent form {
    padding-block: 1rem;
    text-align: left;
}
.logincontent input {
    margin-bottom: 1rem;
	background: var(--colorPanelBGInputDefault);
}
.logincontent button {
    margin-top: 1rem;
}
.logincontent a,
.logincontent label[data-openloginwindow] {
    color: var(--colorSpecialDefault);
    text-decoration: underline;
    font-family: 'droid_sans_mono';
    margin-block: 1rem;
    display: block;
	cursor: pointer;
}
.logincontent a:hover,
.logincontent label[data-openloginwindow]:hover {
	text-decoration: none;
}


.menu div.menublock {
    padding-block: 0.5rem;
	break-inside: avoid;
}

header .menu a {
	color: var(--colorPanelSpecialInvertDefault);
	display: block;
	font-family: 'droid_sans_mono';
	padding-block: 0.25rem;
	text-wrap-style: pretty;
}

header .logintoggle,
header .menutoggle {
	appearance: none;
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
}

header .logintoggle + .icon label.loginclosed:hover,
header .menutoggle + .icon label.menuclosed:hover,
header .icon label[for="search"]:hover {
	filter: brightness(0.75);
	cursor: pointer;
}
header .menutoggle:checked + .icon label.menuopen,
header .logintoggle:checked + .icon label.loginopen {
	display: grid;
	cursor: pointer;
}
header .logintoggle + .icon label.loginopen,
header .logintoggle:checked + .icon label.loginclosed,
header .menutoggle + .icon label.menuopen,
header .menutoggle:checked + .icon label.menuclosed {
	display: none;
}

header .logintoggle:checked + .icon label,
header .menutoggle:checked + .icon label {
	background: var(--colorPanelBGDefault);
	border-radius: 0.5rem 0.5rem 0px 0px;
	height: var(--headerSize);
}
header .logintoggle:checked + .icon i,
header .logintoggle:checked + .icon span,
header .menutoggle:checked + .icon i,
header .menutoggle:checked + .icon span {
	color: var(--colorPanelSpecialDefault);
}

header:has(.logintoggle:checked) .login,
header:has(.menutoggle:checked) .menu {
	height: auto;
}








/* hero */
section.hero {
	position: relative;
	container-type: inline-size;
	height: 50vh;
}

.heroitems {
    display: block;
	white-space: nowrap;
	overflow: hidden;
	scroll-snap-type: x mandatory;
}

.herocontent {
	width: var(--contentWidth);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0.5rem;
}
@media (min-width: 800px) {
	.herocontent {
		gap: 1rem;
	}
}

.videoslide .herocontent {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
	z-index: 2;
	pointer-events: none;
}

.videoslide .herocontent a {
	/* pointer-events: all; */
}

.heroitem {
	isolation: isolate;
    justify-content: center;
    align-items: center;
	display: inline-flex;
	background: var(--colorBGDefault);
    width: 100cqw;
    height: 50vh;
	scroll-snap-align: start;
	position: relative;
	vertical-align: top;
}

.heroitem::before {
	content: '';
	inset: 0px;
	background: var(--background);
	background-size: cover;
	background-position: 50% 50%;
	position: absolute;
	z-index: -2;
}

/* .heroitem::after { */
	/* content: ''; */
	/* inset: 0px; */
	/* background: var(--colorBackdropDefault); */
	/* background-size: cover; */
	/* background-position: 50% 50%; */
	/* position: absolute; */
	/* z-index: -1; */
/* } */

.hero .foto {
	filter: brightness(0.5);
    position: absolute;
    z-index: -1;
    inset: 0px;
}

.hero .foto img {
    object-position: 50% 50%;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.hero .titel {
	grid-column: 2 / 12;
    grid-row: 1 / 2;
    color: var(--colorTextDefault);
    font-family: 'ChunkoBold';
	letter-spacing: var(--chunkoSpacing);
    text-decoration: underline;
    font-size: 2rem;
    line-height: 1em;
    font-weight: 100;
    text-transform: uppercase;
    max-width: 100%;
    text-wrap-style: balance;
    white-space: normal;
}
@media (min-width: 800px) {
	.hero .titel {
		grid-column: 2 / -2;
		font-size: 2.5rem;
	}
}

.hero .beschrijving {
	grid-column: 2 / 12;
	grid-row: 2 / 3;
	color: var(--colorTextDefault);
	font-size: 1.25rem;
	white-space: normal;
    text-wrap-style: balance;
}
@media (min-width: 800px) {
	.hero .beschrijving {
		grid-column: 2 / -2;
	}
}

.hero .aanbieder {
	grid-column: 2 / 12;
	grid-row: 3 / 4;
	color: var(--colorTextDefault);
    text-transform: uppercase;
    max-width: 100%;
    font-family: 'ChunkoBold';
	letter-spacing: var(--chunkoSpacing);
	font-size: 1.25rem;
	white-space: normal;
    text-wrap-style: balance;
}
@media (min-width: 800px) {
	.hero .aanbieder {
		grid-column: 2 / 7;
	}
}

.hero .link {
	grid-column: 2 / 12;
	grid-row: 4 / 5;
	/* padding-top: 1rem; */
}
@media (min-width: 800px) {
	.hero .link {
		/* grid-column: 7 / 12; */
		grid-column: 2 / 12;
		grid-row: 3 / 4;
	}
}

.hero .link a {
	white-space: normal;
    text-wrap-style: balance;
	max-width: 100%;
	width: fit-content;
	text-align: center;
	font-size: 1rem;
}
@media (min-width: 800px) {
	.hero .link a {
		font-size: 1.5rem;
	}
}

.hero .navprev {
    container-type: inline-size;
	grid-column: 1 / 3;
	grid-row: 1 / 4;
	align-self: center;
	/* display: none; */
		display: block;
	position: relative;
    filter: drop-shadow(-4px 4px 0px var(--colorSpecialInvertDefault));
}
@media (min-width: 512px) {
	.hero .navprev {
		/* display: block; */
		grid-column: 1 / 2;
	}
}

.hero .navnext {
	container-type: inline-size;
	grid-column: 11 / 13;
	grid-row: 1 / 4;
	align-self: center;
	/* display: none; */
	display: block;
	position: relative;
    filter: drop-shadow(4px 4px 0px var(--colorSpecialInvertDefault));
}
@media (min-width: 512px) {
	.hero .navnext {
		/* display: block; */
		grid-column: 12 / 13;
	}
}

section.herofoto {
    padding-block: 0;
}



/* agendaitems */
.agendaitems {
    display: grid;
    grid-template-columns: subgrid;
	grid-column: 1 / -1;
	
	--itemBorder: 0.5rem;
}
@media (min-width: 800px) {
	.agendaitems {
		--itemBorder: 1rem;
	}
}

.agendaitems .navprev {
	container-type: inline-size;
	display: flex;
    align-items: center;
	grid-column: 1 / 2;
}

.agendaitems .navnext {
	container-type: inline-size;
	display: flex;
    align-items: center;
	grid-column: 12 / 13;
}

.agendaitems .items {
	grid-column: 2 / 12;
	display: flex;
	overflow: scroll clip;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    container-type: inline-size;
    justify-content: space-around;
}

.item {
	position: relative;
	display: grid;
	flex-shrink: 0;
	scroll-snap-align: start;
	z-index: 3;
}
.item:hover {
	z-index: 4;
}

.agendaitems .itemcontent {
	padding: 1.5rem;
}
@media (min-width: 800px) {
	.agendaitems .itemcontent {
		padding: 2rem;
	}
}

.agendaitems .item {
	padding: calc(var(--itemBorder) * 2);
    grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto auto;
	gap: var(--itemBorder);
	width: 100cqw;
	text-decoration: none;
}
@media (min-width: 1000px) {
	.agendaitems .item {
		width: 50cqw;
	}
}
@media (min-width: 1500px) {
	.agendaitems .item {
		width: 33.33cqw;
	}
}

.agenda .item .foto img,
.agendaitems .item .foto img {
	aspect-ratio: 2;
	mask-image: url(../images/vorm8.svg);
}

.itemcontent {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
	display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
	transition: 250ms scale;
	position: relative;
}

.itemcontent:hover {
	text-decoration: none;
	scale: 1.1;
}

.item .datum,
.item .tijd {
	font-family: 'ChunkoBold';
	font-weight: 100;
    text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: var(--chunkoSpacing);
}

.item .foto {
	grid-column: 1 / 3;
}
.item .foto img {
	display: block;
	mask-image: url(../images/vorm7.svg);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
	object-fit: cover;
	width: 100%;
}

.item .foto .geenthumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
	background: #fff8;
    mask-image: url(../images/vorm7.svg);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
	aspect-ratio: 2;
}

.item .categorie {
	grid-column: 1 / 3;
	font-family: 'ChunkoBold';
	font-weight: 100;
    text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: var(--chunkoSpacing);
}

.item .titel {
	grid-column: 1 / 3;
	font-weight: bold;
}

.itemcontent::before {
    background-color: var(--colorBackdropDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
	mask-size: 100% 100%;
    content: '';
    position: absolute;
    z-index: -2;
    top: var(--itemBorder);
    bottom: calc(var(--itemBorder) * -1);
    left: var(--itemBorder);
    right: calc(var(--itemBorder) * -1);
}

.itemcontent::after {
    background-color: var(--colorPanelBGDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
	mask-size: 100% 100%;
    content: '';
    inset: 0px;
    position: absolute;
    z-index: -1;
}



/* Vraag en aanbod */
.aanboditem {
    display: grid;
	gap: 0rem 1rem;
    grid-template-columns: 33% 1fr auto;
	grid-template-rows: auto 1fr auto;
	position: relative;
	padding-block: 1rem;
    margin-inline: 1rem;
	transition: 250ms scale;
	
	--itemBorder: 0.5rem;
}
@media (min-width: 800px) {
	.aanboditem {
		--itemBorder: 1rem;
	}
}
section .content a.aanboditem,
.aanboditem:hover {
	text-decoration: none;
}

.aanboditem::before,
.aanboditem::after {
	position: absolute;
	height: 5px;
	left: 0px;
	width: 100%;
	background: var(--colorTextDefault);
	aspect-ratio: 210 / 1;
    background-color: var(--colorTextDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/lijn.svg);
    mask-size: 100% 100%;
}

.aanboditem:nth-child(1)::before {
	top: 0px;
	content: "";
	rotate: 180deg;
}

.aanboditem::after {
	bottom: 0px;
	content: "";
}

@media (min-width: 800px) {
	.aanboditem:nth-last-child(2)::after {
		bottom: 0px;
		content: "";
	}
	.aanboditem:nth-child(2)::before {
		top: 0px;
		content: "";
		rotate: 180deg;
	}

}


.aanboditem .foto {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.aanboditem .foto img {
	mask-image: url(../images/vorm8_3.svg);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.aanboditem .titel {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    font-weight: bold;
	font-size: 1.25rem;
}

.aanboditem .beschrijving {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
	font-size: 1.125rem;
}
.aanboditem .beschrijving span {
	font-weight: bold;
	padding-top: 0.5rem;
	display: block;
}
.aanboditem:hover .beschrijving span {
	text-decoration: underline;
}

.beschrijvingtekst {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aanboditem .aanbieder {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
	display: flex;
    align-items: center;
}

.aanboditem .aanbieder i {
	padding-right: 0.5rem;
}

.aanboditem .aanbodtype {
	position: relative;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
	font-family: 'ChunkoBold';
	font-weight: 100;
    text-transform: uppercase;
	font-size: 1.25rem;
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
	letter-spacing: var(--chunkoSpacing);
	color: var(--colorPanelSpecialInvertDefault);
}

.aanbodtype::after {
    content: '';
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--colorPanelSpecialDefault);
}

.aanbodtype.gezocht::after {
    mask-image: url(../images/vorm44.svg);
}

.aanbodtype.aangeboden::after {
    mask-image: url(../images/vorm45.svg);
}

/* Maps */
.filter-switch {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	margin-bottom: 1rem;
}
@media (min-width: 800px) {
	.filter-switch {
		display: none;
	}
}

.map-filter-label {
	display: none;
}
@media (min-width: 800px) {
	.map-filter-label {
		display: block;
        color: var(--colorPanelTextDefault);
        text-decoration: none;
        margin-top: 0;
	}
}

.filters {
	grid-column: 1 / -1;
	grid-row: 3 / 4;
	margin-bottom: 0px;
	height: 0px;
	overflow: hidden;
	z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
	.filters {
		transition: height 250ms, margin 250ms, overflow 250ms;
	}
}
@media (min-width: 800px) {
	.filters {
		grid-column: 1 / 5;
		grid-row: 4 / 6;
	}
}

.filter-switch:has(input:checked) + .filters {
	height: auto;
	margin-bottom: 1rem;
}

@media (min-width: 800px) {
	.filter-switch + .filters {
		height: fit-content;
        position: relative;
	}
	.filter-switch + .filters.shape {
        padding: 2rem;
	}
	.filter-switch + .filters.shape::before {
		background-color: var(--colorBackdropDefault);
		mask-repeat: no-repeat;
		mask-position: 50% 50%;
		mask-image: url(../images/vorm3.svg);
		mask-size: 100% 100%;
		content: '';
		position: absolute;
		z-index: -2;
		inset: 0px;
	}
}
.filters input[type="search"] {
    border-radius: 0.5rem;
    padding-inline: 1rem 2rem;
	color: var(--colorPanelTextDefault);
}

.map-filter-select div,
.map-filter-search {
	position: relative;
}

.map-filter-select select {
	width: 100%;
	appearance: none;
	padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: none;
    font-family: 'droid_sans_mono';
	color: var(--colorPanelTextDefault);
}
@media (min-width: 800px) {
	.map-filter-select select {
		padding: 1rem;
	}
}

.map-filter-select select option {
    font-family: 'droid_sans_mono', monospace, sans-serif;
}

.map-filter-select div::after {
	content: "\f0d7";
	font-family: "Font Awesome 7 Pro";
	font-weight: 900;
	position: absolute;
    right: 0.5rem;
    color: var(--colorPanelTextDefault);
    height: 100%;
    line-height: 2.5rem;
    font-size: 1.5rem;
	pointer-events: none;
}
@media (min-width: 800px) {
	.map-filter-select div::after {
		line-height: 3.5rem;
	}
}

.map-filter-search::after {
	content: "\f002";
	font-family: "Font Awesome 7 Pro";
	font-weight: 900;
	position: absolute;
    right: 0.5rem;
    color: var(--colorPanelTextDefault);
    height: 100%;
    line-height: 2.5rem;
    font-size: 1.5rem;
	pointer-events: none;
}
@media (min-width: 800px) {
	.map-filter-search::after {
		line-height: 3rem;
	}
}

.map-filter-select {
	margin-top: 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
@media (min-width: 800px) {
	.map-filter-select {
		grid-template-columns: 1fr;
		margin-top: 1rem;
		gap: 1rem;
	}
}

.map-zoom {
    grid-column: -5 / -1;
    grid-row: 4 / 5;
    z-index: 2;
    gap: 0.5rem;
	display: none;
    justify-content: flex-end;
	pointer-events: none;
}
@media (min-width: 800px) {
	.map-zoom {
		gap: 1rem;
		display: flex;
	}
}

.map-zoom .button {
    height: 3rem;
    width: 3rem;
    padding: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
	pointer-events: all;
}

.map-zoom .button:nth-child(1) {
    background: url(../images/plus.svg);
}

.map-zoom .button:nth-child(2) {
    background: url(../images/min.svg);
}

.map-helekaart {
	grid-column: 1 / 13;
	grid-row: 6 / 7;
	height: fit-content;
	z-index: 1;
	text-align: right;
}
@media (min-width: 800px) {
	.map-helekaart {
		grid-column: 7 / 13;
		grid-row: 5 / 6;
		align-self: end;
        margin-bottom: 1rem;
	}
}

.map-aanbieders {
	grid-column: 1 / -1;
	grid-row: 7 / 8;
	display: grid;
	grid-template-columns: subgrid;
	z-index: 1;
}
@media (min-width: 800px) {
	.map-aanbieders {
		grid-row: 6 / 7;
	}
}

.map-aanbieders .navprev {
	grid-column: 1 / 3;
	container-type: inline-size;
	display: flex;
    align-items: center;
}
@media (min-width: 800px) {
	.map-aanbieders .navprev {
		grid-column: 1 / 2;
	}
}

.map-aanbieders .navnext {
	grid-column: 11 / 13;
	container-type: inline-size;
	display: flex;
    align-items: center;
}
@media (min-width: 800px) {
	.map-aanbieders .navnext {
		grid-column: 12 / 13;
	}
}

.map-aanbieders .items {
	grid-column: 3 / 11;
	display: flex;
    overflow: scroll clip;
    scrollbar-width: none;
	scroll-snap-type: x mandatory;
	container-type: inline-size;
	justify-content: space-around;
}
@media (min-width: 800px) {
	.map-aanbieders .items {
		grid-column: 2 / 12;
	}
}

.map-aanbieders .item {
	padding-block: 2rem;
	padding-inline: 6cqw;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 0.5rem;
	align-items: center;
	width: 100cqw;
	--itemBorder: 0.5rem;
}
@media (min-width: 500px) {
	.map-aanbieders .item {
		width: 50cqw;
		padding-inline: 3cqw;
	}
}
@media (min-width: 750px) {
	.map-aanbieders .item {
		width: 33.33cqw;
		padding-inline: 2cqw;
	}
}
@media (min-width: 1000px) {
	.map-aanbieders .item {
		width: 25cqw;
	}
}

.map-aanbieders .itemcontent {
	padding: 2rem 1.5rem 1.5rem 1.5rem;
}

.map-aanbieders .itemcontent::before,
.map-aanbieders .itemcontent::after {
    mask-image: url(../images/vorm4.svg);
}

.map-aanbieders .item img {
	display: block;
	aspect-ratio: 1;
	object-fit: contain;
	/* height: 6rem; */
	
	mask-image: url(../images/vorm7.svg);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
}

.map-aanbieders .item .foto {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: center;
}

.map-aanbieders .item .titel {
	color: var(--colorPanelTextDefault);
	font-weight: bold;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	text-align: center;
	text-wrap-style: pretty;
    overflow: hidden;
    overflow-wrap: break-word;
}
@media (min-width: 800px) {
	.map-aanbieders .item .titel {
		font-family: 'ChunkoBold';
		letter-spacing: var(--chunkoSpacing);
		font-weight: 100;
		font-size: 1.25rem;
	}
}

.map-aanbieders .item .slogan {
	color: var(--colorPanelTextDefault);
	font-family: 'droid_sans_mono';
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	font-size: 0.8rem;
	text-align: center;
	text-wrap-style: balance;
}

.map-overlay-wrapper {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 4 / 6;
	aspect-ratio: 8 / 5;
	background-color: var(--colorBGDefault);
}
@media (min-width: 800px) {
	.map-overlay-wrapper {
		grid-column: 4 / -1;
	}
}
.map-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--colorSpecialDefault);
	mask-image: url('../images/logovormrand.svg');
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center;
}
.map-cutout-container {
	position: relative; 
	z-index: 1;
	width: 100%;
	height: 100%;
	mask-image: url('../images/logovorm.svg');
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center;
}

.map-overlay-wrapper:has(input[type="checkbox"].hiddenclose:checked) .map-cutout-container {
	pointer-events: none;
}

.map-cutout-container iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.marker-pin {
	width: 48px;
    height: 48px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
	isolation: isolate;
	scale: 1;
	transform-origin: 50% 100%;
}

.marker-pin::before {
    content: '';
	z-index: -2;
	width: 48px;
	height: 48px;
	top: 0px;
	left: 0px;
	border-radius: 50% 50% 50% 0;
	background: var(--colorBGDefault);
	position: absolute;
	transform: rotate(-45deg);
}

.marker-pin.active::before {
    background: var(--colorRood);
}

.marker-pin::after {
    content: '';
	z-index: -1;
	top: 4px;
	left: 4px;
	width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
	position: absolute;
}

.custom-div-icon {
	overflow: visible;
}

.custom-div-icon i {
   font-size: 24px;
   color: #000;
}

.map-popup {
	display: none;
    position: absolute;
    bottom: 50%;
    left: 50%;
    translate: -50% -15px;
    z-index: 3;
	--popupWidth: min(18rem, 96vw);
}
.map-popup:has(input[type="checkbox"].hiddenclose:checked) {
	display: block;
}

.map-popup input[type="checkbox"].hiddenclose {
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
	pointer-events: none;
}

.map-popup input[type="checkbox"].hiddenclose + label {
    position: absolute;
    right: -1rem;
    top: -1rem;
    font-size: 1.5rem;
    color: var(--colorPanelTextDefault);
    cursor: pointer;
    background: url(../images/plus.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 3rem;
    height: 3rem;
    rotate: 45deg;
}
.map-popup input[type="checkbox"].hiddenclose + label:hover {
	filter: brightness(0.75);
}

.map-popup .map-popup-content {
	position: relative;
	isolation: isolate;
    color: var(--colorPanelTextDefault);
    padding: 2rem 1.75rem;
    width: var(--popupWidth);
}

.map-popup .map-popup-content::before {
    content: '';
    z-index: -1;
    position: absolute;
    background-color: var(--colorPanelBGDefault);
    mask-image: url(../images/vorm4.svg);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.map-popup .map-popup-content::after {
    content: '';
    z-index: -2;
    position: absolute;
    background-color: var(--colorBackdropDefault);
    mask-image: url(../images/vorm4.svg);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 100%;
    height: 100%;
    left: 0.25rem;
    top: 0.25rem;
}

.map-popup-title {
	font-size: 1.25rem;
	font-weight: bold;
    color: var(--colorPanelTextDefault);
	padding-block: 0.5rem;
}

.map-popup-content img {
	display: block;
    width: calc(var(--popupWidth) - 3rem);
    object-fit: contain;
    /* aspect-ratio: 3 / 1; */
    aspect-ratio: 1;
    border-radius: 1rem;
}

a.item:hover {
	text-decoration: none;
}

.map-aanbieders .item:hover {
    cursor: pointer;
}

.map-aanbieders .map-geenresultaat:hover,
.map-aanbieders .map-geenresultaat .itemcontent:hover {
    scale: 1;
    cursor: default;
}

@keyframes markerDrop {
	0% {
		transform: translate3d(0, -500px, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.marker-pin {
		animation: markerDrop 750ms var(--bounceAnimationFunction) both;
	}
	@keyframes scale-once {
		0% {
			scale: 1;
		}
		100% {
			scale: 2;
		}
	}

	.marker-pin.active {
		animation: markerDrop 750ms var(--bounceAnimationFunction) both, scale-once 1s linear(0, 0.76 4.4%, 0.928 6.2%, 0.984 8%, 0.92 9.9%, 0.731 11.9%, 0.2 20.3%, 0.1 22.2%, 0 24%, 0 24.8%, 0.02 25.7%, 0.1 27.5%, 0.252 35.9%, 0.4 38.1%, 0.463 40.3%, 0.455 41.9%, 0.399 43.7%, 0.1 51.9%, 0.05 54.1%, 0 56.3%, 0 57.9%, 0 59.7%, 0.019 67.5%, 0.061 69.6%, 0.082 71.7%, 0.085 73.3%, 0.077 75.1%, 0.011 81.9%, 0 85.5%, 0) forwards;
	}

}

section:has(#showpopup:checked)::before {
    background-color: hsl(from var(--colorBGDefault) h s calc(l * 0.5));
}

section:has(#showpopup:checked)::after {
    content: "";
    backdrop-filter: brightness(0.5);
    inset: 1px 0px 0px 0px;
    position: absolute;
    z-index: 2;
}

.item.verborgen {
	display: none;
}

.titelplusknop {
	display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
	padding-inline: 1rem;
}






/* Aanbieders */
.aanbiederlijst.items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    --itemBorder: 0.5rem;
}

.aanbiederlijst .itemcontent::before,
.aanbiederlijst .itemcontent::after {
	mask-image: url(../images/vorm4.svg);
}

@media (min-width: 500px) {
	.aanbiederlijst.items {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 850px) {
	.aanbiederlijst.items {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (min-width: 1200px) {
	.aanbiederlijst.items {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.aanbiederlijst .itemcontent {
	padding: 1.5rem;
}
	
.aanbiederlijst .item {
	grid-template-rows: auto auto auto 1fr;
	gap: 0.5rem;
}

.aanbiederlijst .item .foto {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aanbiederlijst .item .foto img {
    aspect-ratio: 1;
    object-fit: contain;
}

.aanbiederlijst .item .cat {
	font-family: 'ChunkoBold';
    letter-spacing: calc(var(--chunkoSpacing) * 1.5);
    font-weight: 100;
    font-size: 1.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
	
.aanbiederlijst .item .titel {
	font-size: 1.25rem;
}




/* Footer */

footer .directelinks {
    grid-column: 2 / -2;
}
@media (min-width: 512px) {
	footer .directelinks {
		grid-column: 2 / 7;
		grid-row: 1 / 2;
	}
}
@media (min-width: 800px) {
	footer .directelinks {
		grid-column: 5 / 9;
		grid-row: 1 / 2;
	}
}

footer .contact {
    grid-column: 2 / -2;
}
@media (min-width: 512px) {
	footer .contact {
		grid-column: 7 / 12;
		grid-row: 1 / 2;
	}
}
@media (min-width: 800px) {
	footer .contact {
		grid-column: 9 / 12;
		grid-row: 1 / 2;
	}
}

footer .logo {
    grid-column: 2 / 7;
    padding-block: 2rem;
}
@media (min-width: 512px) {
	footer .logo {
		grid-column: 2 / 7;
		grid-row: 2 / 3;
	}
}
@media (min-width: 800px) {
	footer .logo {
		grid-column: 2 / 4;
		grid-row: 1 / 2;
	}
}

footer a {
    font-family: 'droid_sans_mono';
}

.copyright {
	background-color: var(--bgCopyright);
	padding-block: 1rem;
	text-align: center;
}

.copyright > div * {
    position: relative;
    font-family: 'droid_sans_mono';
    color: var(--colorCopyright);
    text-decoration: none;
	padding-inline: 1em;
    font-size: 0.75rem;
}
@media (min-width: 480px) {
	.copyright > div * {
		font-size: 0.875rem;
	}
}
@media (min-width: 512px) {
	.copyright > div * {
		font-size: 1rem;
	}
}

.copyright > div a:hover {
	text-decoration: underline;
}

.copyright > div *::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 2px;
    height: 100%;
    background: var(--colorCopyright);
}

.copyright > div *:first-child::before {
	content: unset;
}


.windowblock {
	position: fixed;
    inset: 0px;
	z-index: 100;
    backdrop-filter: brightness(0.75) blur(2px);
}

.windowblock.hidden {
	display: none;
}

.window {
	position: relative;
    display: grid;
	grid-template-rows: auto 1fr;
    /* color: var(--colorPanelSpecialDefault); */
    color: var(--colorPanelTextDefault);
    width: fit-content;
	max-width: var(--maxWindowWidth);
	max-height: calc(100vh - 2rem);
	margin-inline: auto;
	top: 1rem;
    background: var(--colorPanelBGDefault);
    border: 2px solid var(--colorPanelSpecialInvertDefault);
    border-radius: 1rem;
	scroll-margin-top: 7rem;
}

.windowinline {
	display: inline-grid;
}

.window.mediumwidth {
    max-width: 40rem;
}

.window.nosetheight {
    max-height: unset;
}

.windowheader {
	position: relative;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    background: var(--colorPanelSpecialInvertDefault);
    border-radius: calc(1rem - 4px) calc(1rem - 4px) 0px 0px;
    color: var(--colorPanelSpecialDefault);
	align-items: center;
}

.window a.link {
	color: var(--colorPanelTextDefault);
	text-decoration: underline;
}

.window a.link:hover {
	text-decoration: none;
}

.windowheader div {
	font-family: 'ChunkoBold';
	letter-spacing: var(--chunkoSpacing);
	font-weight: 100;
	text-transform: uppercase;
	font-size: 1.5rem;
	padding-block: 0.5rem;
}

.windowheader input + label,
.windowheader a {
    color: var(--colorPanelSpecialDefault);
    font-size: 1.25rem;
	cursor: pointer;
}

.windowheader input + label:hover,
.windowheader a:hover {
	filter: brightness(0.75);
}

.window .windowclosebutton {
    color: var(--colorPanelTextDefault);
    cursor: pointer;
    background: url(../images/plus.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 3rem;
    height: 3rem;
    rotate: 45deg;
}
.window .windowclosebutton.hidden {
	display: none;
}

.window .windowclosebutton:hover {
	filter: brightness(0.75);
}

.windowcontent {
    padding: 1rem;
    display: grid;
    gap: 0.5rem 1rem;
	overflow: auto;
}

.windowcontentrow {
    display: grid;
    grid-column: 1 / 4;
    grid-template-columns: subgrid;
	align-items: center;
}

.windowcontentrow.double {
    grid-template-columns: unset;
    display: block;
}

.windowcontent .row {
    display: flex;
    gap: 0.5rem;
    margin-block: 0.25rem;
}
.windowcontent .row.vcenter {
	align-items: center;
}

.windowcontent .row.nowrap {
	white-space:  nowrap;
}

.windowcontent .rowinput {
    padding-bottom: 0.5rem;
}

.windowcontent .rowhidden {
	display: none;
}

.doublebutton {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}

.triplebutton {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    justify-items: center;
    align-items: start;
}

.triplebutton .button,
.doublebutton .button {
    width: fit-content;
}

.panel {
    color: var(--colorPanelTextDefault);
}

.panel .button {
    background: var(--colorPanelSpecialInvertDefault);
    color: var(--colorPanelSpecialDefault);
}


.inputiconlabel {
    position: relative;
}

.inputiconlabel input + i {
    position: absolute;
    top: 1rem;
    left: 50%;
    display: none;
}

.inputiconlabel input.disabled {
    pointer-events: none;
    filter: grayscale(1) opacity(0.5);
}

.inputiconlabel input.disabled + i {
	display: block;
}
.inputiconlabel label {
    position: absolute;
	left: 2px;
    top: calc(0.25rem + 2px);
    font-size: 1.25rem;
    width: 2.5rem;
	height: calc(2.5rem - 2px);
	display: flex;
	align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: calc(0.5rem - 4px) 0px 0px calc(0.5rem - 4px);
    border-right: 2px solid var(--colorPanelTextDefault);
    background: var(--colorPanelTextDefault);
    color: var(--colorPanelBGDefault);
}
.inputiconlabel:has(input.disabled) label {
	filter: grayscale(1) opacity(0.5);
}


.inputiconlabel input {
    padding-left: 3rem;
    color: var(--colorPanelTextDefault);
}

.window .button {
	background: var(--colorSpecialDefault);
    color: var(--colorSpecialInvertDefault);
}

/* .window input[type="email"], */
/* .window input[type="password"] { */
.inputiconlabel  input[type="email"],
.inputiconlabel  input[type="password"] {
    background: var(--colorPanelBGDefault);
    border: 2px solid var(--colorPanelTextDefault);
}

.window input[type="email"]:disabled,
.window input[type="password"]:disabled {
    filter: grayscale(1);
    background: #eee;
}

.cookie {
	position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    display: block;
    padding: 1rem;
    color: var(--colorSpecialInvertDefault);
    width: fit-content;
    text-align: center;
	margin-inline: auto;
	z-index: 100;
}

.cookie::before {
    background-color: var(--colorSpecialDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
    mask-size: 100% 100%;
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0px;
}

.cookie::after {
	background-color: #0004;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
    mask-size: 100% 100%;
    content: '';
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    left: 0.5rem;
    top: 0.5rem;
}

.cookie div {
    text-align: left;
    width: fit-content;
    margin-inline: auto;
}

.cookie h3 {
	color: var(--colorSpecialInvertDefault);
}

.cookie button {
	display: block;
    margin-block: 0.5rem;
    margin-inline: auto;
}

.cookie button:nth-child(1) {
	background: var(--colorSpecialInvertDefault);
	color: var(--colorSpecialDefault);
	border: 2px solid var(--colorSpecialInvertDefault);
}

.cookie button:nth-child(2) {
	border: 2px solid var(--colorSpecialInvertDefault);
	font-size: 1.25rem;
}

.cookie label {
	margin-bottom: 1rem;
}


.blob {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	--rotationDuration: 10s;
	--animateAmount: 30px;
	--animationDelayLeft: 0s;
	--animationDelayRight: -5s;
}

.blobimage {
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/logovormrand.svg);
    mask-size: 100% 100%;
	transform-origin: 50% 50%;
	width: calc(var(--contentWidth) * 0.5);
	background-color: var(--blobColor);
	aspect-ratio: 8 / 5;
}

.blob.left {
	left: 0px;
	top: var(--ypos);
	translate: -75% -50%;
}

.blob.right {
	right: 0px;
	top: var(--ypos);
	translate: 85% -50%;
}


@media (prefers-reduced-motion: no-preference) {
	.blob.animated.left {
		/* animation: blobrotation var(--rotationDuration) linear var(--animationDelayLeft) infinite, blobmovefromleft 2s ease-out; */
		animation: blobrotation var(--rotationDuration) linear var(--animationDelayLeft) infinite, blobmovefromleft 2s cubic-bezier(0.01, 0.58, 0.55, 0.98);
		transform-origin: calc(50% + var(--animateAmount));
	}

	.blob.animated.right {
		animation: blobrotation var(--rotationDuration) linear var(--animationDelayRight) infinite reverse, blobmovefromright 4s cubic-bezier(0.01, 0.58, 0.55, 0.98);
		transform-origin: calc(50% - var(--animateAmount));
	}

	.blob.animated.left .blobimage {
		animation: blobrotation var(--rotationDuration) linear var(--animationDelayLeft) infinite reverse;
	}

	.blob.animated.right .blobimage {
		animation: blobrotation var(--rotationDuration) linear infinite var(--animationDelayRight);
	}
}


@keyframes morph{
  0%,100%{
    transform: translate3d(0,0,0) rotateZ(0deg);
  }
  34%{
    transform:  translate3d(0,5px,0) rotateZ(5deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(10deg);
  }
  67%{
    transform: translate3d(0,-3px,0) rotateZ(5deg);
  }
}
section:has(+section .blob) {
	--sectionPaddingBottom: 3rem;
}
@media (min-width: 512px) {
	section:has(+section .blob) {
		--sectionPaddingBottom: 4rem;
	}
}
@media (min-width: 800px) {
	section:has(+section .blob) {
		--sectionPaddingBottom: 5rem;
	}
}

header .blob.left {
    translate: -1px 0px;
    z-index: -1;
	--ypos: 0px;
}

header .blob.right {
    translate: unset;
	z-index: -1;
	--ypos: 0px;
}

header .blob.left .blobimage {
    mask-image: url(../images/blobheaderlinks.svg);
	/* height: 13rem; */
	aspect-ratio: 300 / 121;
	max-width: 35vw;
    width: 32rem;
}

header .blob.right .blobimage {
    mask-image: url(../images/blobheaderrechts.svg);
	/* height: 10rem; */
	aspect-ratio: 300 / 140;
    max-width: 25vw;
    width: 25rem;
	/* margin-right: -2px; */
}



.grid {
    display: grid;
	grid-template-columns: repeat(var(--columns), auto);
    gap: 0.25rem;
}

.grid .gridrow {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
	align-items: center;
}

input[type=radio].hidden + label.kleur {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 2rem;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
    background: var(--kleur);
}

input[type=radio].hidden:checked + label.kleur {
    border: 2px solid #000;
}

input[type=radio].hidden:checked + label.kleur::before {
    position: absolute;
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 1px solid #fff;
    border-radius: 50%;
    top: 1px;
    left: 1px;
}


ul.list {
    list-style: none;
}

ul.list li {
    padding-block: 0.5rem;
}

ul.list li i {
	font-size: 1.25rem;
	vertical: middle;
}



/* hero */
.hero {
    width: 100%;
    height: 50vh;
}

.heroimage {
    background: var(--background);
	background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
}


/* agenda */
.filters:has(.filterblok) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
	z-index: 4;
}

.filterblok {
    width: 100%;
	min-width: min(300px, 80vw);
	position: relative;
	padding-bottom: 2rem;
	flex: 1;
}

.filter-switch:has(input:checked) + .filters:has(.filterblok) {
	overflow: visible;
}
@media (min-width: 800px) {
	.filters:has(.filterblok) {
		overflow: visible;
	}
}

.filterblok > input[type="checkbox"] + .dropdownchecklist .dropdown {
    height: 0px;
	transition: 250ms height, 250ms filter;
}

.filterblok > input[type="checkbox"]:checked + .dropdownchecklist .dropdown {
    height: auto;
	filter: drop-shadow(0px 3px 5px #0004);
	z-index: 5;
}

.filterblok input[type="search"] {
    color: var(--colorBGDefault);
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
}

.filterblok input[type="search"]::placeholder {
    color: var(--colorBGDefault);
}

.filterblok input[type="search"] + i {
	position: absolute;
    color: var(--colorBGDefault);
    right: 0.625rem;
    pointer-events: none;
    font-size: 1.5rem;
    line-height: 2.5rem;
}
@media (min-width: 800px) {
	.filterblok input[type="search"] + i {
		line-height: 3rem;
	}
}

.filterblok ul {
    list-style: none;
    margin-block: 0px;
    background: var(--colorBGInputDefault);
    color: var(--colorBGDefault);
	border-radius: 0px 0px 0.5rem 0.5rem;
	border: 1px solid var(--colorBGDefault);
}

.filterblok .dropdownchecklist {
    position: relative;
	background: var(--colorBGInputDefault);
    color: var(--colorBGDefault);
    border-radius: 0.25rem;
	text-align: left;
}
.activefilters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.activefilters:not(:empty) {
    padding-top: 1rem;
}

.activefilters label {
    position: relative;
	display: block;
    isolation: isolate;
    color: var(--colorSpecialInvertDefault);
    padding: 1rem;
	font-family: 'ChunkoBold';
    font-weight: 100;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: var(--chunkoSpacing);
	cursor: pointer;
    transition: 150ms scale, 150ms filter;
    z-index: 1;
	user-select: none;
}

.activefilters label:hover {
    scale: 1.1;
    filter: drop-shadow(0px 1px 3px #0008);
    z-index: 2;
}

.activefilters label::before {
    background-color: var(--colorSpecialDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
    mask-size: 100% 100%;
    content: '';
    inset: 0px;
    position: absolute;
    z-index: -1;
}

label.dropdownselect {
    display: block;
    width: 100%;
    padding: 0.5rem 2.75rem 0.5rem 0.75rem;
	position: relative;
	font-family: 'droid_sans_mono';
	white-space: nowrap;
	user-select: none;
}

@media (min-width: 800px) {
	label.dropdownselect {
		padding: 0.75rem 3rem 0.75rem 0.75rem;
	}
}

label.dropdownselect::after {
	content: "\f0d7";
	font-family: "Font Awesome 7 Pro";
	font-size: 1.5rem;
	font-weight: 900;
    position: absolute;
    right: 1rem;
	transition: 250ms rotate;
}

.filterblok > input[type="checkbox"]:checked + .dropdownchecklist label.dropdownselect::after {
	rotate: 180deg;
}

.filterblok .dropdown {
    overflow: hidden;
    position: absolute;
    z-index: 4;
    width: calc(100% - 1rem);
    left: 0.5rem;
}

.filterblok .radioswitches {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.filters.filtergrid {
    display: grid;
    grid-template-columns: 1fr;
	margin-bottom: 1rem;
}

@media (min-width: 800px) {
	.filters.filtergrid {
		grid-template-columns: 1fr 1fr;
	}
}

.filters.filtergrid .filterblok:last-child {
    grid-column: 1 / -1;
}

label.radioswitch {
    padding: 0.75rem 1rem;
    display: block;
    background: var(--colorPanelBGDefault);
    color: var(--colorPanelTextDefault);
    margin-inline: 1px;
    font-family: 'droid_sans_mono';
    cursor: pointer;
	flex-grow: 1;
    text-align: center;
	border-radius: 0.25rem;
	user-select: none;
}

label.radioswitch:hover {
    filter: brightness(0.75);
}

input:checked + label.radioswitch {
    background: var(--colorPanelSpecialDefault);
    color: var(--colorPanelSpecialInvertDefault);
}

.dropdown label {
	display: block;
    position: relative;
	white-space: nowrap;
	cursor: pointer;
	
	padding: 0.5rem 2rem 0.5rem 2.5rem;
	user-select: none;
}

.dropdown label::before {
    position: absolute;
	left: 0.5rem;
	content: "\f0c8";
	font-family: "Font Awesome 7 Pro";
	font-size: 1.5rem;
	font-weight: 500;
}

.dropdown input:checked + label::before {
	font-weight: 900;
}

.dropdown input:checked + label::after {
    position: absolute;
	left: 0.5rem;
	font-family: "Font Awesome 7 Pro";
	font-size: 1rem;
    padding: 0.25rem;
	content: "\f00c";
	font-weight: 900;
	color: var(--colorTextDefault);
}

.dropdown li:last-child {
	border-radius: 0px 0px 0.5rem 0.5rem;
}


.dropdown li:hover {
	background: hsl(from var(--colorBGDefault) h s l / 0.2);
	cursor: pointer;
}

.agenda .item {
	padding: var(--itemBorder) calc(var(--itemBorder) * 2);
    grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto auto;
	gap: var(--itemBorder);
	width: 100cqw ;
}
@media (min-width: 1000px) {
	.agenda .item {
		width: 50cqw;
	}
}
@media (min-width: 1500px) {
	.agenda .item {
		width: 33.33cqw;
	}
}
.agenda {
    --itemBorder: 1rem;
    container-type: inline-size;
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
	.agenda {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1500px) {
	.agenda {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.agenda .itemcontent {
    padding: calc(var(--itemBorder) * 2);
}

.content ol,
.content ul,
.windowcontent ol,
.windowcontent ul {
    padding-left: 2rem;
    padding-bottom: 1rem;
}

.dropdown ul {
    padding-left: 0rem;
    padding-bottom: 0rem;
}

section .content a {
	text-decoration: underline;
}
section .content a.item,
section .content a:hover {
	text-decoration: none;
}

/* .content a { */
	/* text-decoration: underline; */
/* } */
/* .content a:hover { */
	/* text-decoration: none; */
/* } */



/* vraagenaanbod */
.vraagenaanbod {
    display: grid;
    gap: 3rem;
    --itemBorder: 0.5rem;
}
@media (min-width: 600px) and (max-width: 1000px) {
	.vraagenaanbod {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 0rem;
	}
}

.vraagenaanbod a.item {
    padding: 0rem 2rem 0rem 1rem;
}
@media (min-width: 1000px) {
	.vraagenaanbod a.item {
		padding: 0;
	}
}

.vraagenaanbod .itemcontent {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	grid-template-areas: "foto foto" "titel titel" "beschrijving beschrijving" "naam naam" "categorie categorie" "reacties label";
	padding: 2rem;
	gap: 0.5rem;
}
@media (min-width: 1000px) {
	.vraagenaanbod .itemcontent {
		grid-template-columns: auto 1fr 1fr 1fr auto;
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "foto titel titel titel titel" "foto beschrijving beschrijving beschrijving beschrijving" "foto naam categorie reacties label";
		gap: 1rem;
	}
}

.vraagenaanbod .itemcontent .foto {
	grid-area: foto;
}

.vraagenaanbod .itemcontent .foto img {
    width: auto;
    object-fit: cover;
	aspect-ratio: 2;
}
@media (min-width: 1000px) {
	.vraagenaanbod .itemcontent .foto img {
		height: 10rem;
		aspect-ratio: 1;
	}
}

.vraagenaanbod .itemcontent .titel {
	grid-area: titel;
}

.vraagenaanbod .itemcontent .beschrijving {
	grid-area: beschrijving;
}

.vraagenaanbod .itemcontent .aanbieder {
	grid-area: naam;
	align-self: center;
	font-weight: bold;
}

.vraagenaanbod .itemcontent .categorienaam {
	grid-area: categorie;
	align-self: center;
	font-weight: bold;
}

.vraagenaanbod .itemcontent .reacties {
	grid-area: reacties;
	align-self: center;
	font-weight: bold;
}

.vraagenaanbod .itemcontent .aanbieder i,
.vraagenaanbod .itemcontent .categorienaam i,
.vraagenaanbod .itemcontent .reacties i {
	margin-right: 0.5rem;
}

.vraagenaanbod .itemcontent .aanbodtype {
	grid-area: label;
	position: relative;
    font-family: 'ChunkoBold';
    font-weight: 100;
    text-transform: uppercase;
    font-size: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    letter-spacing: var(--chunkoSpacing);
	color: var(--colorPanelSpecialInvertDefault);
}

.vraagaanbodtitel h2 {
	text-decoration: none;
}

.vraagaanbodtitel span {
    font-family: 'ChunkoBold';
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: var(--chunkoSpacing);
	margin-right: 2rem;
	white-space: nowrap;
	font-size: 1.25rem;
}

.vraagaanbodhero {
    height: auto;
    aspect-ratio: 1.5;
}
@media (min-width: 600px) {
	.vraagaanbodhero {
		aspect-ratio: 2;
	}
}
@media (min-width: 1000px) {
	.vraagaanbodhero {
		aspect-ratio: 2.5;
	}
}

.textpluspanel .social {
	margin-bottom: 1rem;
}

.textpluspanel .social h3 {
    text-decoration: none;
}

.textpluspanel .social a {
    font-size: 2rem;
    margin-right: 0.5rem;
    display: inline-block;
    transition: 150ms scale;
}

.textpluspanel .social a:hover {
	scale: 1.1;
}




/* paginering */
.paginering {
	grid-column: 1 / -1;
    display: grid;
    margin-block: 1rem;
    align-items: center;
    gap: 2rem;
    justify-items: end;
}
@media (min-width: 600px) {
	.paginering {
		grid-template-columns: auto 1fr;
	}
}

.pagineringknoppen {
    grid-column: -2 / -1;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.paginering .button {
    font-size: 1rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
}
@media (min-width: 450px) {
	.paginering .button {
		padding: 0.75rem 1rem 0.5rem 1rem;
	}
}
@media (min-width: 850px) {
	.paginering .button {
		font-size: 1.25rem;
	}
}
@media (min-width: 900px) {
	.paginering .button {
		font-size: 1.5rem;
	}
}

.pagineringknoppen span {
	display: none;
}
@media (min-width: 1000px) {
	.pagineringknoppen span {
		display: inline;
	}
}

.paginering .button.special {
    padding: 0.5rem 0.25rem 0.25rem;
}
@media (min-width: 450px) {
	.paginering .button.special {
		padding: 0.75rem 0.5rem 0.5rem;
	}
}




/* tekst */
.okcancel {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-block: 1rem;
}

.okcancel.hidden {
    display: none;
}

.okcancel button:nth-child(1) {
    background: green;
    color: #fffc;
}

.okcancel button:nth-child(2) {
    background: red;
    color: #fffc;
}



/* downloads */
.downloads {
	display: flex;
	flex-wrap: wrap;
}

section .content a.knopdownload {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
	background: var(--colorPanelBGDefault);
    border: 1px solid var(--colorPanelTextDefault);
	color: var(--colorPanelTextDefault);
    padding: 1rem 0.5rem;
    margin: 0.25rem;
    border-radius: 0.5rem;
    /* min-width: 10rem; */
    text-align: center;
	text-decoration: none;
	align-items: center;
    gap: 0.5rem;
}
i.bestandstype {
    grid-column: 1 / -1;
    justify-self: center;
    font-size: 2rem;
}
a.knopdownload label {
    display: inline-block;
    vertical-align: bottom;
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
a.knopdownload span {
    font-size: 0.9rem;
    font-weight: 600;
	white-space: nowrap;
}
a.knopdownload:before {
    content: '';
    position: absolute;
    right: -1px;
    top: -1px;
    border-bottom-left-radius: 0.5rem;
    width: 0;
    height: 0;
	border-top: 1rem solid var(--colorBGDefault);
    border-left: 1rem solid var(--colorPanelTextDefault);
    border-bottom: 1rem solid var(--colorPanelTextDefault);
    border-right: 1rem solid var(--colorBGDefault);
    transition: 0.25s border-width, opacity 0.05s;
}
a.knopdownload:hover:before {
    border-width: 0;
    opacity: 0;
    transition: 0.25s border-width, opacity 0.1s linear 0.15s;
}



/* youtube */
.video-hero-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.youtubeplayer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}


/* video */
section:has(.videocontainer),
section:has(.videocontainer):has(+ section .blob),
section:has(.videocontainer):has(+ .rand2),
section:has(.videocontainer):has(+ .rand6) {
	--sectionPaddingBottom: 0rem;
	padding-bottom: 0px;
	height: fit-content;
}
	
.videocontainer {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    isolation: isolate;
}

.videoslide {
    position: relative;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
	/* width: 100vw; */
	width: 100%;
    display: grid;
    justify-items: center;
    align-items: end;
	/* grid-template-rows: 1fr 3rem; */
	grid-template-rows: 1fr auto;
    isolation: isolate;
	pointer-events: none;
	opacity: 0;
	transition: 1000ms opacity;
	gap: 1rem;
}
@media (min-width: 1000px) {
	.videoslide {
		grid-template-rows: 1fr 4rem;
		align-items: center;
	}
}
@media (min-width: 1500px) {
	.videoslide {
		grid-template-rows: 1fr 5rem;
	}
}

.videoslide a {
	pointer-events: none;
}
.videocontainer input:checked + .videoslide {
	pointer-events: all;
	opacity: 1;
}

.videocontainer input:checked + .videoslide a {
	pointer-events: all;
}
.videoslide::before {
	content: '';
	inset: 0px;
	background: #0004;
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.hero video {
    aspect-ratio: 12 / 9;
    width: 100%;
	height: 75vw;
    min-height: calc(100% + 4rem);
    object-fit: cover;
    object-position: 50% 50%;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    z-index: -1;
}
@media (min-width: 800px) {
	.hero video {
		aspect-ratio: 16 / 9;
		height: 42vw;
	}
}

@media (min-width: 1200px) {
	.hero video {
		aspect-ratio: 27 / 9;
		height: 33vw;
	}
}

.videooverlay {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: 1rem 4rem 2rem 4rem;
    background: #0008;
    border-radius: 1rem;
	margin-block: 4rem;
}

.videocontrols {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
	display: flex;
	gap: 1rem;
	align-self: self-start;
	z-index: 3;
	margin-bottom: 3rem;
}

.videocontrols label {
    background: #fffa;
    border: 1px solid #0004;
    width: 1rem;
    height: 1rem;
    display: block;
    border-radius: 50%;
	cursor: pointer;
	transition: 150ms scale;
}

.videocontrols label:hover {
	scale: 1.25;
}

.videocontrols label.active {
	background: #fff;
	scale: 1.25;
}



/* profiel */
.menupluscontent {
    display: grid;
    grid-template-columns: auto 1fr;
	gap: 1rem;
}

.menupluscontent .sidemenu {
    display: grid;
    gap: 0.5rem;
	height: fit-content;
	grid-column: 1 / 2;
}

.menupluscontent .window,
.menupluscontent .windowcontainer {
    margin-inline: 0;
    top: 0px;
	height: fit-content;
	grid-column: 2 / 3;
}

.menupluscontent .windowcontainer .window {
	margin-block: 1rem;
}

section .content .sidemenu a.button {
	position: relative;
    display: grid;
    justify-items: center;
    padding: 0.25rem 0.5rem;
	border: 2px solid var(--colorSpecialDefault);
}

.sidemenu .button[data-teller]::before {
	content: attr(data-teller);
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    font-family: 'droid_sans_mono';
    font-size: 1rem;
	background: var(--colorPanelSpecialDefault);
    color: var(--colorPanelSpecialInvertDefault);
    border: 2px solid var(--colorPanelSpecialInvertDefault);
    border-radius: 2rem;
    padding: 0.25rem 0.5rem;
}

.sidemenu .button.active {
	color: var(--colorSpecialDefault);
    background: var(--colorSpecialInvertDefault);
}

.sidemenu .button span {
	display: none;
    font-size: 0.8rem;
    font-family: 'droid_sans_mono';
}
@media (min-width: 800px) {
	.sidemenu .button span {
		display: block;
	}
}
label.upload {
    display: block;
    position: relative;
    text-align: center;
    padding: 0.5rem;
    width: fit-content;
    height: fit-content;
    border-radius: 0.25rem;
	background-color: #fff;
    color: var(--colorPanelTextDefault);
    border: 1px dotted var(--colorPanelTextDefault);
    cursor: pointer;
	margin-block: 0.5rem;
}

label.upload:hover {
	filter: brightness(0.75);
}

label.upload.avatar img {
	max-height: 10rem;
	max-width: 10rem;
}

.upload.omslagfoto:has(+.cropwindow.imgc) {
	display: none;
}
.removecrop,
.removevideo {
	display: none;
}

div:has(>.removecrop):has(~.cropwindow.imgc) .removecrop {
	display: inline-block;
}

div:has(>.removevideo):has(~.accountvideo > video) .removevideo {
	display: inline-block;
}

.omslagvoorbeeldgroot {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 10px;
	margin-block: 0.5rem;
}

.omslagvoorbeeldmiddel {
    display: block;
    width: 50%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
	margin-block: 0.5rem;
}

.accountvideo video {
	max-width: 100%;
}

.rij2 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0px 0.5rem;
    position: relative;
	align-items: center;
}

.rij3 {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0px 0.5rem;
    position: relative;
	align-items: center;
}

.rij4 {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 1rem;
}

.rij4_2 {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 1rem;
}

.rij4 > div {
    position: relative;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
    align-items: center;
}

.rij6 {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    gap: 1rem;
    position: relative;
}

.rij7 {
    display: grid;
    grid-template-columns: 6rem auto auto 1fr auto auto auto;
    gap: 1rem;
    position: relative;
}

.rij8 {
    display: grid;
    grid-template-columns: 6rem auto auto auto 1fr auto auto auto;
    gap: 1rem;
    position: relative;
}


.rij2::after,
.rij3::after,
.rij4 > div::after,
.rij6::after,
.rij7::after,
.rij8::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0px;
    background: #0004;
    bottom: -0.25rem;
}

.rij2:last-child::after,
.rij2.noborder::after,
.rij3:last-child::after,
.rij3.noborder::after,
.rij4 > div:last-child::after,
.rij6:last-child::after,
.rij7:last-child::after,
.rij8:last-child::after {
    content: unset;
}


span.statusoff {
    opacity: 0.2;
}

.rij2 a:hover,
.rij3 a:hover,
.rij3 label:hover,
.rij6 a:hover,
.rij7 a:hover,
.rij8 a:hover {
	filter: brightness(0.75);
	cursor: pointer;
}

.rij2::before,
.rij3::before {
    content: "\f054";
    position: absolute;
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
	top: 0px;
    line-height: 1.5rem;
	transition: 150ms rotate;
	pointer-events: none;
}

.rij2:has(> input:checked)::before,
.rij3:has(input:checked)::before {
	rotate: 90deg;
}

.rij2.verborgen,
.rij3.verborgen {
    display: none;
}

.rij2 > label {
	padding-left: 1rem;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	position: relative;
}

.rij2 > label[data-counter]::after {
    position: absolute;
    content: attr(data-counter);
	color: var(--colorPanelBGDefault);
    background: var(--colorPanelTextDefault);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    top: 0px;
    margin-left: 0.5rem;
}

.rij3 label {
	padding-left: 1.5rem;
}

.rij2 .rijexpandable {
    height: 0px;
    overflow: hidden;
    grid-column: 1 / -1;
    transition: 150ms height;
}
.rij3 .rijexpandable {
    height: 0px;
    overflow: hidden;
    grid-column: 1 / -1;
    transition: 150ms height;
	padding-left: 1.5rem;
}
.rij2 input[type="checkbox"]:checked ~ .rijexpandable {
    height: auto;
	padding-block: 0.25rem;
	border-top: 1px solid #0004;
}
.rij3 input[type="checkbox"]:checked ~ .rijexpandable {
    height: auto;
	padding-block: 0.25rem;
	border-top: 1px solid #0004;
}
.rijexpandable.rij3_2 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.rijexpandable.rij3_3 {
    display: block;
}
.rijexpandable.rij3_3 img {
    max-height: 10rem;
}
.uitleg {
	text-decoration: underline;
}
.uitleg:hover {
	text-decoration: none;
}
img.echtklein {
    max-height: 4rem;
    vertical-align: middle;
}

.uitleggrid {
	display: grid;
	grid-template-columns: 1fr auto;
}







.radioselectlist {
    position: relative;
	width: fit-content;
}

label.radioselectswitch:has(input:checked) {
    display: none;
}
label.radioselectswitch {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
	cursor: pointer;
	background: #0001;
}

label.radioselectswitch:hover {
	background: #0002;
}

.radioselectlist > div {
    background: #ddd;
	overflow: clip;
    height: 0px;
    transition: 150ms height;
}

.radioselectlist > div:hover {
	background: #eee;
}

.radioselectlist > div label {
	cursor: pointer;
	display: block;
    padding: 0.5rem;
}

.radioselectlist > div:has(input:checked) {
	background: #fff;
	height: fit-content;
    border: 1px solid #888;
}

.radioselectlist:has(.radioselectswitch input:checked) > div:first-of-type {
	border-radius: 0.5rem 0.5rem 0px 0px;
}

.radioselectlist:has(.radioselectswitch input:checked) > div:last-child {
	border-radius: 0px 0px 0.5rem 0.5rem;
}

.radioselectlist:has(.radioselectswitch input:checked) > div {
    height: auto;
    border: 1px solid #888;
    border-bottom: none;
}

.radioselectlist:has(.radioselectswitch input:checked) > div:last-child {
    border-bottom: 1px solid #888;
}




/* Zoeken */
section .content a.resultaat {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: auto 1fr auto;
    justify-items: start;
    text-decoration: none;
    position: relative;
    gap: 0.5rem;
    padding-block: 0.5rem;
	background: var(--colorPanelBGDefault);
}

section .content a.resultaat.resultaatzonderfoto {
    grid-template-columns: auto 1fr;
}

a.resultaat:hover {
	filter: brightness(0.9);
}

a.resultaat::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--colorBackdropDefault);
    bottom: -0.25rem;
}

section .content a.resultaat:last-child::after {
	content: unset;
}

.resultaat_foto {
	grid-column: 1 / 2;
	grid-row: 1 / -1;
	min-height: 8rem;
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resultaat_foto img {
    max-height: 8rem;
}

.resultaat_titel {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-weight: bold;
}

.resultaat_tekst {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    max-height: 4rem;
    overflow: hidden;
    position: relative;
}

.resultaat_tekst::after {
    position: absolute;
    width: 100%;
    height: 2rem;
    background: linear-gradient(0deg, var(--colorPanelBGDefault), transparent);
    content: '';
    left: 0px;
    top: 2rem;
}

.resultaat_url {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
	font-size: 0.75rem;
}

.infopanel {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
    background-color: var(--colorPanelBGDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm4.svg);
    mask-size: 100% 100%;
    padding: 2rem;
    display: grid;
    gap: 0.5rem;
    height: fit-content;
}

.textpluspanel {
    display: grid;
    grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 1000px) {
	.textpluspanel {
		grid-template-columns: 2fr 1fr;
		gap: 1rem 2rem;
	}
}

.textpluspanel .textcontent {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.textpluspanel .list,
.textpluspanel .social {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.textpluspanel .buttons {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.textpluspanel .infopanel {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

@media (min-width: 1000px) {
	.textpluspanel .infopanel {
		grid-column: 2 / 3;
		grid-row: 1 / 4;
	}
}

.textpluspanel .infopanel img {
    height: 10rem;
}

.textpluspanel .infopanel .naamorganisator {
    font-weight: bold;
}
.textpluspanel .infopanel p a {
    text-decoration: underline;
}


/* pics*/

.pics5 {
    display: grid;
    gap: 0.5rem;
}

.pics5 > * {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorPanelBGDefault);
    cursor: pointer;
	position: relative;
}

.pics5 > *:last-child {
    background: var(--colorPanelTextDefault);
}
.pics5 > *:last-child:hover {
	background: hsl(from var(--colorPanelTextDefault) h s calc(l * 0.75));
}

.pics5 > * span {
	display: none;
	position: absolute;
    font-size: 1.5rem;
    color: #000;
    width: 4rem;
    height: 4rem;
    background: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0px 0px 3px black);
}

.pics5 > *:hover span {
    display: flex;
}

.pics5 label[data-nieuw] {
	border: 2px dashed var(--colorPanelTextDefault);
}

.pics5 label:has(input:checked) {
    display: none;
}

.pics5 > :nth-child(n + 6 of label:not(:has(:checked))) {
    display: none;
}



/* locaties */
.locaties {
	display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1rem;
	align-items: start;
}

@media (min-width: 900px) {
	.locaties {
		grid-template-columns: auto 1fr;
		grid-template-columns: subgrid;
		grid-template-rows: auto 1fr;
	}
}

.locaties_titel {
	grid-column: 1 / 3;
	text-align: center;
}
@media (min-width: 900px) {
	.locaties_titel {
		grid-column: 1 / -1;
	}
}

.locaties_zoeken {
	grid-column: 1 / 3;
	text-align: center;
}
@media (min-width: 900px) {
	.locaties_zoeken {
		grid-column: 4 / 10;
	}
}

.locaties_zoeken.filterblok input[type="search"],
.locaties_zoeken.filterblok input[type="search"] + i {
	color: var(--colorPanelTextDefault);
}

.locaties_zoeken input[type="search"]::placeholder {
    color: hsl(from var(--colorPanelTextDefault) h s l / 0.5);
}

.locaties_filters {
    grid-column: 1 / 3;
    padding-top: 0.5rem;
	width: fit-content;
    width: 100%;
    max-width: 100%;
	position: relative;
	isolation: isolate;
	color: var(--colorPanelTextDefault);
}
@media (min-width: 900px) {
	.locaties_filters {
		/* top: 12rem; */
		width: unset;
		grid-column: 1 / 4;
		padding-top: unset;
		padding-right: 1rem;
	}
}

/* @media (min-width: 900px) and (min-height: 750px) { */
	/* .locaties_filters { */
		/* position: sticky; */
		/* max-height: calc(100vh - 15rem); */
		/* overflow: auto; */
	/* } */
/* } */

.locaties_filters_container {
	position: relative;
}
.locaties_filters_container::after {
    background-color: var(--colorPanelBGDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm8.svg);
    mask-size: 100% 100%;
    content: '';
    inset: 0px;
    position: absolute;
    z-index: -1;
}

.locaties_filters_container > label {
	font-size: 1.25rem;
	padding: 1rem;
	display: block;
	position: relative;
	cursor: pointer;
}

.locaties_filters_container > label::after {
	content: "\f054";
    position: absolute;
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    top: 1rem;
    right: 1rem;
    line-height: 1.5rem;
    transition: 150ms rotate;
    pointer-events: none;
}

@media (min-width: 900px) {
	.locaties_filters_container > label::after {
		content: unset;
	}
}

.locaties_filters_container > input.hidden[type=checkbox]:checked + label::after {
	rotate: 90deg;
}

.locaties_filters_container > div {
	display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    align-items: start;
	gap: 0.5rem 2rem;
	padding-inline: 1rem;
	overflow: hidden;
    height: 0px;
	transition: 250ms height, 250ms padding;
}

@media (min-width: 900px) {
	.locaties_filters_container > div {
		height: auto;
		padding-block: 1rem;
	}
}

.locaties_filters_container > input.hidden[type=checkbox]:checked + label + div {
    height: auto;
	padding-block: 1rem;
}

@media (min-width: 500px) {
	.locaties_filters_container > div {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.locaties_filters_container > div {
		grid-template-columns: 1fr;
		padding: 1rem;
	}
}

.locaties_filters input[type="checkbox"].hidden.styledcheckbox + label::before {
    border: 1px solid var(--colorPanelTextDefault);
}

.locaties_lijst {
    grid-column: 1 / 2;
    display: grid;
    gap: 1rem;
	--itemBorder: 0.5rem;
}
@media (min-width: 900px) {
	.locaties_lijst {
		grid-column: 4 / -1;
	}
}

.locaties_resultatentotaal {
    grid-column: 1 / -1;
	font-weight: bold;
}

.locaties_resultaten {
    grid-column: 1 / -1;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
}

@media (min-width: 500px) {
	.locaties_resultaten {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1200px) {
	.locaties_resultaten {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.locaties_resultaten .button:hover {
	scale: 1;
}

.locaties_resultaten .functies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.locaties_resultaten .item {
    grid-template-rows: repeat(4, auto) 1fr auto;
	gap: 0.5rem;
	color: var(--colorPanelTextDefault);
}

.locaties_resultaten .item.hidden {
    display: none;
}

.locaties_resultaten .itemcontent {
    padding: 2rem 1.5rem 1.5rem;
}

.locaties_resultaten .item img {
	aspect-ratio: 21 / 9;
}

.locaties_resultaten .titel {
	font-size: 1.5rem;
}

.locaties_resultaten .aanbieder {
	font-size: 1rem;
    font-weight: 600;
}

.locaties_resultaten .functies span {
	position: relative;
    display: inline-block;
    isolation: isolate;
    color: var(--colorSpecialInvertDefault);
	padding: 0.5rem;
    font-family: 'ChunkoBold';
    font-weight: 100;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: var(--chunkoSpacing);
    cursor: pointer;
    transition: 150ms scale, 150ms filter;
    z-index: 1;
    user-select: none;
}

.locaties_resultaten .functies span::before {
    background-color: var(--colorSpecialDefault);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
    mask-size: 100% 100%;
    content: '';
    inset: 0px;
    position: absolute;
    z-index: -1;
}

.locatie.textpluspanel {
	grid-template-columns: auto;
}

@media (min-width: 800px) {
	.locatie.textpluspanel {
		grid-template-rows: auto auto 1fr auto;
		grid-template-columns: 1fr auto;
	}
}

.locatienaam {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
	grid-column: 1 / 3;
	/* gap: 0.5rem; */
}
@media (min-width: 800px) {
	.locatienaam {
		grid-template-columns: 1fr auto;
	}
}

.locatietitel {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.locatietitel h3 {
    /* margin-bottom: 0px; */
	text-decoration: none;
}
.locatiesubtitel {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.locatiecontact {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}
@media (min-width: 800px) {
	.locatiecontact {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}
.locatieeigenschappen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    padding-bottom: 1rem;
}

.locatieeigenschappen div {
    font-family: 'ChunkoBold';
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: var(--chunkoSpacing);
	white-space: nowrap;
	font-size: 1.25rem;
}
.locatieeigenschappen span {
    font-family: 'ChunkoBold';
    font-size: 1.125rem;
}
/* .locatiekaart { */
    /* display: grid; */
    /* grid-template-columns: 2fr 1fr 1fr; */
    /* gap: 1rem; */
    /* padding-bottom: 1rem; */
    /* border-bottom: 1px solid #8884; */
    /* margin-bottom: 1rem; */
/* } */
.googlemaps {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}
@media (min-width: 800px) {
	.googlemaps {
		grid-column: 1 / 2;
	}
}
.locatiekosten {
	grid-column: 1 / 3;
    grid-row: 3 / 4;
}
@media (min-width: 800px) {
	.locatiekosten {
		grid-column: 1 / 2;
	}
}

/* .locatiecapaciteit { */
    /* grid-row: 2 / 3; */
    /* grid-column: 2 / 3; */
/* } */
/* .locatiegrootte { */
    /* grid-row: 2 / 3; */
    /* grid-column: 3 / 4; */
/* } */
.locatiebeschrijving {
    position: relative;
    /* padding-bottom: 1rem; */
    /* border-bottom: 1px solid #8884; */
    /* margin-bottom: 1rem; */
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
@media (min-width: 800px) {
	.locatiebeschrijving {
		grid-column: 1 / 2;
	}
}
	

.locatie.textpluspanel .iconrow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.iconrow > h3 {
	grid-column: 1 / 3;
}

.iconrow > div {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
}

.iconrow i {
    font-size: 2rem;
    vertical-align: middle;
}

.locatie.textpluspanel .locatieinfo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    grid-column: 1 / 3;
	grid-row: 5 / 6;
}
@media (min-width: 800px) {
	.locatie.textpluspanel .locatieinfo {
		grid-column: 2 / 3;
		grid-row: 2 / 6;
	}
}

.locatieinfo > div > div {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
}

.locatieinfo > div > div > h4,
.locatieinfo > p,
.locatieinfo > div:last-child {
	grid-column: 1 / 3;
	text-decoration: none;
}

.locatieinfo > p,
.locatieinfo > div:last-child > * {
	grid-column: 1 / 3;
}

.locatiesocialshare {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
	grid-column: 1 / 3;
	grid-row: 6 / 7;
}
@media (min-width: 1000px) {
	.locatiesocialshare {
		grid-column: 1 / 2;
		grid-row: 5 / 6;
	}
}
.locatiesocialshare .social a {
    font-size: 2rem;
}
.locatiefaciliteiten {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
}

.locatietoegankelijk {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
}
@media (min-width: 500px) and (max-width: 799px) {
	.locatie.textpluspanel .locatieinfo {
		grid-template-columns: 1fr 1fr;
	}
	.locatiefaciliteiten {
		grid-column: 1 / 2;
		grid-template-columns: auto 1fr;
		gap: 1rem;
		height: fit-content;
	}
	.locatietoegankelijk {
		grid-column: 2 / 3;
		grid-template-columns: auto 1fr;
		gap: 1rem;
		height: fit-content;
	}
	.locatie.textpluspanel .locatieinfo p {
		text-align: center;
	}
}

.locatiefaciliteiten div,
.locatietoegankelijk div {
    padding-block: 0.25rem;
}

.locatieinfo i {
    font-size: 2rem;
    vertical-align: middle;
}



.doubleslider_inputs {
	position: relative;
	padding-block: 2rem;
	margin-bottom: 1rem;
	margin-inline: 0.25rem;
}

.doubleslider_inputs .slider-track {
    width: 100%;
    height: 0.25rem;
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0px;
    border-radius: 0.25rem;
	background: linear-gradient(to right, hsl(from var(--colorPanelTextDefault) h s l / 0.25) calc((var(--min) / var(--limit)) * 100 * 1%), var(--colorPanelTextDefault) calc((var(--min) / var(--limit)) * 100 * 1%), var(--colorPanelTextDefault) calc((var(--max) / var(--limit)) * 100 * 1%), hsl(from var(--colorPanelTextDefault) h s l / 0.25) calc((var(--max) / var(--limit)) * 100 * 1%));
}

.doubleslider label {
	font-weight: bold;
}
.doubleslider_inputs input[type="range"] {
    appearance: none;
    width: calc(100% + 0.5rem);
    outline: none;
    position: absolute;
    margin: auto;
	left: -0.25rem;
    top: 0px;
    bottom: 0px;
    background-color: transparent;
    pointer-events: none;
}
.doubleslider_inputs input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 1rem;
    width: 1rem;
	background-color: var(--colorPanelTextDefault);
	cursor: pointer;
	pointer-events: auto;
	border-radius: 50%;
}
.doubleslider_inputs input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	height: 1rem;
    width: 1rem;
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--colorPanelTextDefault);
	pointer-events: auto;
	border: none;
}

.doubleslider_inputs input[type="range"]:active::-webkit-slider-thumb {
	background-color: var(--colorPanelBGDefault);
	border: 1px solid var(--colorPanelTextDefault);
}

.doubleslider_inputs .slider-track-labelmin {
    position: absolute;
	top: 0.25rem;
	left: calc((var(--min) / var(--limit)) * 100 * 1%);
    translate: calc(0% - (var(--min) / var(--limit)) * 100 * 1%);
    font-size: 0.75rem;
    font-weight: 600;
}

.doubleslider_inputs .slider-track-labelmax {
    position: absolute;
	top: 0.25rem;
	left: calc((var(--max) / var(--limit)) * 100 * 1%);
    translate: calc(0% - (var(--max) / var(--limit)) * 100 * 1%);
	font-size: 0.75rem;
    font-weight: 600;
}

.slider-track-labels div:nth-child(1) {
	left: 0px;
}

.slider-track-labels div:nth-child(2) {
    left: 33%;
    translate: -33%;
}
.slider-track-labels div:nth-child(3) {
    left: 67%;
    translate: -67%;
}
.slider-track-labels div:nth-child(4) {
    right: 0px;
}
.slider-track-labels div::before {
	content: '';
	position: absolute;
	top: -0.5rem;
    height: 0.5rem;
    width: 1px;
    background: #888;
    margin-left: 50%;
}
.slider-track-labels div:nth-child(1)::before {
    margin-left: 4px;
}
.slider-track-labels div:nth-child(4)::before {
    margin-left: calc(100% - 4px);
}

.slider-track-labels div {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
}

.slider-track-labels {
    position: absolute;
    width: 100%;
    bottom: 1rem;
}

label.en_of {
    display: block;
    position: relative;
    width: 4rem;
    height: calc(2rem + 2px);
    border: 1px solid var(--colorTextDefault);
    border-radius: 0.5rem;
	isolation: isolate;
	cursor: pointer;
}
label.en_of::before {
    content: 'en';
    position: absolute;
    left: 0.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
	z-index: 1;
}
label.en_of::after {
    content: 'of';
    position: absolute;
    right: 0.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
	z-index: 1;
}
label.en_of span {
    display: block;
    width: calc(2rem - 2px);
    height: calc(2rem - 2px);
    top: 1px;
    left: 1px;
    /* background: linear-gradient(90deg, hsl(from var(--colorTextDefault) h s l), hsl(from var(--colorTextDefault) h s calc(l * 2)) calc(50% - 3px), hsl(from var(--colorTextDefault) h s l) calc(50% - 1px), hsl(from var(--colorTextDefault) h s l) calc(50% + 1px), hsl(from var(--colorTextDefault) h s calc(l * 2)) calc(50% + 3px), hsl(from var(--colorTextDefault) h s l)); */
    background: hsl(from var(--colorTextDefault) h s calc(l * 2));
    position: absolute;
    border-radius: 0.5rem;
    border: 1px solid var(--colorTextDefault);
	transition: 250ms left;
	z-index: 2;
}
input:checked + label.en_of span {
	left: 50%;
}





/* toast */
.toast {
    position: fixed;
    justify-self: center;
    top: -4rem;
    z-index: 20;
    transition: 250ms top ease-in-out;
}
.toast.show {
	top: 0px;
}
.toastcontent {
    background-color: var(--colorGeel);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-image: url(../images/vorm3.svg);
    mask-size: 100% 100%;
    padding: 1rem 2rem;
    color: var(--colorBlauw);
    font-weight: bold;
    font-family: 'droid_sans_mono';
}





@supports (font: -apple-system-body) and (-webkit-appearance: none) {
	/* Fix voor oude Safari-versie */
	header {
		overflow: visible;
	}
}

@keyframes blobrotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes blobrotationb {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes blobmovefromleft {
	0% {
		translate: -150% -50%;
	}
	100% {
		translate: -75% -50%;
	}
}

@keyframes blobmovefromright {
	0% {
		translate: 150% -50%;
	}
	100% {
		translate: 85% -50%;
	}
}




.cubeanimation {
	--cubeBG: var(--colorRoze);
	--cubeColor1: var(--colorGroen);
	--cubeColor2: var(--colorBlauw);
	--cubeColor3: var(--colorRood);
	--cubeColor4: var(--colorGeel);
	--animationSpeed: 3;
	
	height: 33.3vh;
	background-color: var(--cubeBG);
	background-image: conic-gradient(at 1em 1em, transparent 270deg, var(--cubeColor1) 270deg), conic-gradient(at 1em 1em, transparent 270deg, var(--cubeColor2) 270deg), conic-gradient(at 1em 1em, transparent 270deg, var(--cubeColor3) 270deg), conic-gradient(at 1em 1em, transparent 270deg, var(--cubeColor4) 270deg);
	background-size: 4em 4em, 4em 4em, 4em 4em, 4em 4em;
	animation: bpx calc(var(--animationSpeed) * 6s) infinite, bpy calc(var(--animationSpeed) * 6s) calc(var(--animationSpeed) * -1.875s) infinite;
}

@keyframes bpx {
	0%, 7.5%, 100% {
		background-position-x: 0, 1em, 2em, 3em;
	}
	12.5%, 20% {
		background-position-x: 1em, 0, 3em, 2em;
	}
	25%, 32.5% {
		background-position-x: -1em, -2em, 5em, 4em;
	}
	37.5%, 45% {
		background-position-x: 1em, -4em, 7em, 2em;
	}
	50%, 57.5% {
		background-position-x: -2em, -5em, 8em, 5em;
	}
	62.5%, 70% {
		background-position-x: -3em, -4em, 7em, 6em;
	}
	75%, 82.5% {
		background-position-x: -1em, -2em, 5em, 4em;
	}
	87.5%, 95% {
		background-position-x: -3em, 0, 3em, 6em;
	}
}

@keyframes bpy {
	0%, 7.5%, 100% {
		background-position-y: 0, 1em, 2em, 3em;
	}
	12.5%, 20% {
		background-position-y: 1em, 0, 3em, 2em;
	}
	25%, 32.5% {
		background-position-y: -1em, -2em, 5em, 4em;
	}
	37.5%, 45% {
		background-position-y: 1em, -4em, 7em, 2em;
	}
	50%, 57.5% {
		background-position-y: -2em, -5em, 8em, 5em;
	}
	62.5%, 70% {
		background-position-y: -3em, -4em, 7em, 6em;
	}
	75%, 82.5% {
		background-position-y: -1em, -2em, 5em, 4em;
	}
	87.5%, 95% {
		background-position-y: -3em, 0, 3em, 6em;
	}
}