@view-transition {
	navigation: auto;
}

:root {
	--colorBG: #fcf8ef;
    --colorBGMenu: #fcf8ef;
	--colorBGSpecial: #353539;
	--colorText: #444;
	--colorTextMenu: #864f17;
	--colorSpecialMenu: #bc8c48;
	--colorSpecial: #864f17;
	/* --colorBGFooter: #20201f; */
	--colorTextFooter: #ccc;
	
	--colorBGFooter: #464544;
	--contentWidth: min(94vw, 1200px);
	interpolate-size: allow-keywords;
	
	
	--btnPrimaryBG: #fcf8ef;
	--btnPrimaryColor: #864f17;
	
	--navHeight: 5rem;
	--navLogoExtraHeight: 0.25;
	--navLogoBorderHeight: 0.25;
	--navAnimationTime: 100ms;
	--navContentDisplay: grid;
	--navContentGap: 0px;
	--navLabelDisplay: flex;
	--navMobileIcon: inline;
}


@media (min-width: 1000px) {
	:root {
		--navHeight: 5rem;
		--navLogoExtraHeight: 0.5;
		--navLogoBorderHeight: 0.25;
		--navContentDisplay: flex;
		--navContentGap: 0.5rem;
		--navLabelDisplay: none;
		--navMobileIcon: none;
	}
}

@media (min-width: 1100px) {
	:root {
		--navContentGap: 2rem;
	}
}

*, *::before, *::after {
	box-sizing: border-box;
	transition-behavior: allow-discrete;
	scroll-behavior: smooth;
}

html, body {
	width: 100%;
	/* height: 100%; */
	background: var(--colorBG);
	color: var(--colorText);
	margin: 0px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
}

a.link {
	text-decoration: underline;
}

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

h1, h2, h3, .nav-item, .button {
    /* font-family: 'Oswald', 'Arial Black', sans-serif; */
	text-transform: uppercase;
    font-weight: 500;
}

h1, h2, h3 {
    font-family: "Baskervville", serif;
	margin-block: 0.5em;
	color: var(--colorSpecial);
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

/* @media (min-width: 900px) { */
	/* h1 { */
		/* font-size: 3rem; */
	/* } */
	/* h2 { */
		/* font-size: 2.5rem; */
	/* } */
	/* h3 { */
		/* font-size: 2rem; */
	/* } */
/* } */

.hidden {
	display: none;
}

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

a:hover {
	text-decoration: underline;
}

.button {
	/* border: 2px solid currentColor; */
	padding: 0.5rem 2rem;
}

.button:hover {
	text-decoration: none;
	filter: brightness(0.8);
}

.button-primary {
	background: var(--btnPrimaryBG);
	color: var(--btnPrimaryColor);
}


/* Voor alle overige, reguliere tekst */
body {
    /* font-family: 'Open Sans', 'Lato', sans-serif; */
    font-weight: 400;
    color: var(--colorText);
}

section {
	margin-bottom: 1rem;
}

nav {
	position: sticky;
    top: 0px;
    z-index: 10;
    background: var(--colorBGMenu);
	filter: drop-shadow(0px 0px 2px #000);
	color: var(--colorTextMenu);
}

nav a {
	color: var(--colorTextMenu);
	text-transform: uppercase;
}

nav a.active,
nav a.link.active,
nav a:hover,
nav a.link:hover {
    text-underline-offset: calc(2rem - 6px);
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-decoration-color: var(--colorSpecialMenu);
}
nav .nav-group a:hover {
	filter: brightness(0.9);
}

@media (min-width: 900px) {
	nav .nav-group a:hover {
		filter: unset;
	}
}

nav img.lang {
    display: block;
    height: 0.8rem;
}

nav .content {
	/* display: flex; */
	display: var(--navContentDisplay);
	gap: var(--navContentGap);
	height: var(--navHeight);
	padding-block: 0.5rem;
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-rows: 4.5rem;
}

nav label {
	/* flex: 1; */
	display: var(--navLabelDisplay);
    align-items: center;
	grid-row: 1 / 2;
	cursor: pointer;
	justify-self: start;
    padding-inline: 0.5rem;
}

nav label div {
    width: 1rem;
    height: 2px;
    background: var(--colorTextMenu);
    position: relative;
	transition: var(--navAnimationTime) background;
}

nav label div::before {
	content: "";
    width: 1rem;
    height: 2px;
    background: var(--colorTextMenu);
    position: absolute;
	top: -0.25rem;
	transition: var(--navAnimationTime) top, var(--navAnimationTime) rotate;
}

nav label div::after {
	content: "";
    width: 1rem;
    height: 2px;
    background: var(--colorTextMenu);
    position: absolute;
	top: 0.25rem;
	transition: var(--navAnimationTime) top, var(--navAnimationTime) rotate;
}

nav label:has(:checked) div {
    background: transparent;
}

nav label:has(:checked) div::before {
	top: 0px;
	rotate: 45deg;
}

nav label:has(:checked) div::after {
	top: 0px;
	rotate: -45deg;
}

nav .link .mobile-icon {
    margin-right: 1rem;
	width: 1rem;
	justify-content: center;
	display: var(--navMobileIcon);
}

nav a.link {
    grid-column: 1 / 5;
    background: var(--colorBGMenu);
    z-index: 1;
    padding: 0px 1.5rem;
    margin-left: -1rem;
	overflow: clip;
	height: 0px;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--navAnimationTime) height, var(--navAnimationTime) padding;
}

@media (min-width: 1000px) {
	nav a.link {
		padding: 0.5rem 1rem;
		margin-left: 0rem;
		overflow: visible;
		height: auto;
		background: transparent;
	}
}

nav label:has(:checked) ~ div .link {
	height: 2.5rem;
	padding-block: 0.5rem;
}

nav label:has(:checked) ~ .nav-group:first-of-type .link:first-of-type {
	box-shadow: 0px -1px 0px #0002;
}

@media (min-width: 1000px) {
	nav label:has(:checked) ~ .nav-group:first-of-type .link:first-of-type {
		box-shadow: none;
	}
}

nav .iconlinks {
    display: flex;
    gap: 0.5rem;
    align-items: center;
	grid-column: 5 / 6;
	grid-row: 1 / 2;
	justify-self: end;
}

nav .iconlinks a {
	padding-inline: 0.5rem;
}

nav .iconlinks a:hover {
	color: #444;
	text-decoration: none;
}

@media (min-width: 900px) {
	nav .cart {
		/* flex: 0; */
		/* grid-column: unset; */
		/* grid-row: unset; */
	}
}

nav .cart {
	position: relative;
}

nav .cart[data-count]:not([data-count="0"]):after {
	content: attr(data-count);
    position: absolute;
	top: -1rem;
    right: 1.25rem;
    font-size: 0.75rem;
    background: var(--colorSpecial);
    font-family: monospace;
    color: #fff;
    height: 1.25rem;
    min-width: 1rem;
    padding: 0px 0.375rem;
    text-align: center;
    line-height: 1.25rem;
    border-radius: 50%;
    box-shadow: 0 0 1px var(--colorSpecial);
}

.nav-group {
	flex: 1;
	/* display: flex; */
	display: contents;
	gap: 0.5rem;
	align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    grid-row: 2 / 3;
    background: white;
    position: relative;
}
@media (min-width: 1000px) {
	.nav-group {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: transparent;
	}
}

@media (min-width: 1100px) {
	.nav-group {
		gap: 1rem;
	}
}

@media (min-width: 1000px) {
	.nav-group.nav-left{
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.nav-group.nav-right{
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
}

.nav-right {
	/* justify-content: flex-end; */
}

nav input.hidden {
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
	pointer-events: none;
	appearance: none;
}

nav a.logo {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	position: relative;
	height: calc(var(--navHeight) * (1 + var(--navLogoExtraHeight)));
	margin-bottom: -50%;
}

nav a.logo:hover img {
	background: url(/images/logo_vorm_wit.svg) 50% 50% no-repeat;
}

nav a.logo::before {
    mask: url(/images/logo_vorm_wit.svg) center / contain no-repeat;
    background: var(--colorBGMenu);
    content: "";
    position: absolute;
    inset: calc(-1 * var(--navLogoBorderHeight) * var(--navHeight) * var(--navLogoExtraHeight));
    z-index: -1;
}

img {
	max-width: 100%;
	display: inline-block;
}

.wrapper {
	min-height: 100vh;
	display: grid;
    grid-template-rows: auto 1fr auto;
}

.content,
.textcontent {
	width: var(--contentWidth);
	margin-inline: auto;
}

.center {
	margin-inline: auto;
}

.centercontent {
	text-align: center;
}

.alignright {
	text-align: right;
}

/* nav .content { */
    /* display: grid; */
    /* grid-template-columns: auto 1fr; */
	/* position: relative; */
/* } */

.menuswitch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
	@media (min-width: 900px) {
		display: none;
	}
}

.menuswitch label {
    padding: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}
nav img {
	height: calc(var(--navHeight) * (1 + var(--navLogoExtraHeight)));
    /* padding-block: 1rem;	*/
	
}

nav ul {
	position: absolute;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
	top: 100%;
	flex-direction: column;
    z-index: 10;
    width: 100%;
    padding-inline: 0px;
    background: var(--colorBG);
	margin-block: 0px;
    height: 0px;
    overflow: hidden;
	transition: 250ms height;
    transition-behavior: allow-discrete;
	@media (min-width: 900px) {
		position: static;
		flex-direction: row;
		width: auto;
		background: transparent;
		gap: 4rem;
		height: auto;
	}
}

nav input.hidden:checked + ul {
	height: auto;
}

nav li a {
    padding-block: 1rem;
    padding-inline: 1rem;
    text-transform: uppercase;
    font-weight: 600;
	display: block;
	border-bottom: 2px solid transparent;
	@media (min-width: 900px) {
		padding-block: 0.25rem;
		padding-inline: 0px;
	}
}

nav a.active {
    color: var(--colorSpecial);
}

nav ul a:hover {
	text-decoration: none;
	background: var(--colorBGSpecial);
	@media (min-width: 900px) {
		background: transparent;
		border-bottom: 2px solid var(--colorSpecial);
	}
}

nav li {
    width: 100%;
    text-align: right;
	@media (min-width: 900px) {
		width: auto;
		text-align: center;
	}
}

main {
    /* overflow: auto; */
	/* min-height: calc(100vh - var(--navHeight)); */
}

main .textcontent {
    display: grid;
    min-height: 100%;
    align-content: space-evenly;
    gap: 1rem;
	padding-bottom: 1rem;
}

.hero {
    display: grid;
    align-items: end;
	/* width: var(--contentWidth); */
    margin-inline: auto;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
    position: relative;
    isolation: isolate;
    justify-items: center;
	min-height: 33vh;
	@media (min-width: 1200px) {
		/* margin-block: 2rem; */
	}
}

@media (min-width: 600px) {
    .hero {
        min-height: fit-content;
        height: 33vh;
    }
}

.heroimage {
    position: relative;
    isolation: isolate;
	grid-column: 1 / 4;
    grid-row: 1 / 2;
	height: 100%;
    overflow: hidden;
}

.heroimage::after {
    /* background: linear-gradient(90deg, var(--colorBG) 25%, transparent 50%, transparent 75%, var(--colorBG)); */
    /* content: ""; */
    /* position: absolute; */
    /* inset: 0px; */
    /* z-index: 1; */
}

.heroimage img {
	width: 100vw;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
	display: block;
}

.herocontent {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    z-index: 2;
    color: #fff;
    align-self: end;
    padding-top: 4rem;
	padding-bottom: 2rem;
    width: var(--contentWidth);
	text-align: center;
}

.hero:has(.herocontent)::before {
    content: '';
    inset: 0px;
    position: absolute;
    background: linear-gradient(#0002, #000);
    z-index: 2;
}

/* .herocontent a { */
    /* text-transform: uppercase; */
    /* font-weight: 600; */
    /* background: var(--colorBGSpecial); */
    /* padding: 1rem 2rem; */
    /* display: inline-block; */
    /* border: 2px solid var(--colorBGSpecial); */
/* } */

/* .herocontent a:hover { */
	/* text-decoration: none; */
    /* border: 2px solid var(--colorSpecial); */
/* } */

.herocontent h2 {
    filter: drop-shadow(0px 1px 2px #000);
    margin-block: 0.25rem;
    color: #fff;
	text-transform: none;
	font-size: 2.5rem;
	font-weight: 400;
}

.herocontent p {
    font-size: 1rem;
    filter: drop-shadow(0px 1px 2px #000);
    margin-block: 1rem;
    text-wrap-style: pretty;
	font-size: 1.25rem;
	font-weight: 200;
}
@media (min-width: 900px) {
	.herocontent h2 {
		font-size: 3rem;
	}

	.herocontent p {
		font-size: 1.5rem;
	}
}

.imgtxt3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* gap: 0.5rem; */
	@media (min-width: 750px) {
		grid-template-columns: 1fr 1fr 1fr;
	}
	@media (min-width: 1200px) {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

.imgtxt3 h3 {
    margin-top: 0px;
}

.imgtxt3 > :nth-child(2),
.imgtxt3 > :nth-child(4),
.imgtxt3 > :nth-child(6) {
	padding-inline: 1rem;
}

@media (max-width: 750px) {
	.imgtxt3 > :nth-child(3) {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
	.imgtxt3 > :nth-child(4) {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.imgtxt3 > :nth-child(2),
	.imgtxt3 > :nth-child(4),
	.imgtxt3 > :nth-child(6) {
		padding: 0.5rem;
	}

}

.htmlimage,
.imagehtml {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
	.htmlimage,
	.imagehtml	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
}

@media (min-width: 750px) {
	.htmlimage {
		grid-template-columns: 2fr 1fr;
	}
	.imagehtml {
		grid-template-columns: 1fr 2fr;
	}
}


@media (min-width: 1000px) {
	.htmlimage {
		grid-template-columns: 3fr 1fr;
	}
	.imagehtml {
		grid-template-columns: 1fr 3fr;
	}
	.imglogoshape .htmlimage {
		grid-template-columns: 2fr 1fr;
	}
	.imglogoshape .imagehtml {
		grid-template-columns: 1fr 2fr;
	}
}

.htmlimage .image,
.imagehtml .image {
	margin-block: 1rem;
}

.imglogoshape .htmlimage .image,
.imglogoshape .imagehtml .image {
    align-content: center;
}

.fullwidth img {
    width: 100%;
}

.imgs2 content,
.imgs3 content,
.imgs4 content {
    display: grid;
    gap: 1rem;
}

.imgs1 content > *,
.imgs2 content > *,
.imgs3 content > *,
.imgs4 content > * {
    position: relative;
}

.imgs1 content > * span,
.imgs2 content > * span,
.imgs3 content > * span,
.imgs4 content > * span {
    position: absolute;
    bottom: 0px;
    padding: 0.5rem;
    width: 100%;
    backdrop-filter: brightness(0.5) blur(3px);
    pointer-events: none;
    text-align: center;
}

.imgs1 content > a,
.imgs2 content > a,
.imgs3 content > a,
.imgs4 content > a {
    transition: 0.25s filter;
}

.imgs1 content > a:hover,
.imgs2 content > a:hover,
.imgs3 content > a:hover,
.imgs4 content > a:hover {
    filter: brightness(1.25);
}

@media (min-width: 600px) {
	.imgs2 content,
	.imgs3 content {
		grid-template-columns: 1fr 1fr;
	}
	.imgs4 content {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.imgs3 content div:first-child {
		grid-column: 1 / 3;
	}
	
	.imgs4 img {
		display: block;
	}
	.imgs4 content > :nth-child(1) img,
	.imgs4 content > :nth-child(8) img,
	.imgs4 content > :nth-child(11) img,
	.imgs4 content > :nth-child(18) img {
		object-fit: cover;
		height: 100%;
	}
	.imgs4 content > :nth-child(1),
	.imgs4 content > :nth-child(8),
	.imgs4 content > :nth-child(11),
	.imgs4 content > :nth-child(18) {
		grid-row: span 2;
		grid-column: span 2;
	}
}

@media (min-width: 750px) {
	.project {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;
		width: var(--contentWidth);
        margin-inline: auto;
		gap: 1rem;
	}
}

.projectfoto {
    position: relative;
	display: flex;
    align-items: center;
	@media (min-width: 750px) {
		position: static;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
}

.projectfoto::after {
    content: "";
    position: absolute;
    height: 8rem;
    width: 100%;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(0deg, var(--colorBG) 1rem, transparent 8rem);
	pointer-events: none;
}

.projecttekst {
    width: var(--contentWidth);
    margin-inline: auto;
    margin-top: -5rem;
    position: relative;
	@media (min-width: 750px) {
		width: unset;
		margin-top: 0rem;
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}

.projecttekst h2 {
    font-size: 2rem;
    position: relative;
    width: fit-content;
}

.projecttekst h2::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    width: 100%;
    background: var(--colorSpecial);
}

.projectthumbs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    width: var(--contentWidth);
    margin-inline: auto;
	@media (min-width: 750px) {
		width: unset;
	}
}

.projectthumbs input.hidden,
.projecten input.hidden {
    position: absolute;
    appearance: none;
    opacity: 1;
    width: 0px;
    height: 0px;
    pointer-events: none;
}

.projectthumbs label:has(input:checked) {
    border-bottom: 2px solid var(--colorSpecial);
}

.projectthumbs label {
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
	cursor: pointer;
	overflow: hidden
}

.projectthumbs label img {
    transition: scale 250ms;
}
.projectthumbs label:hover img {
    scale: 1.1;
}

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

.projecten h2 {
    grid-column: 1 / -1;
    margin-bottom: 0px;
}

.projectselect {
    position: relative;
	overflow: hidden;
    cursor: pointer;
}

.projectselect img {
    transition: 250ms scale;
}
.projectselect:hover img {
    scale: 1.1;
}

.projectselect::after {
    content: attr(data-title);
    position: absolute;
    inset: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px black;
    font-weight: 600;
    border-radius: 0.5rem;
}

.projectselect.activeproject::after {
    background: #8884;
}

.projectselect.activeproject img {
    filter: brightness(0.5) blur(1px);
}

.projectselect img {
    border-radius: 0.5rem;
}

section.form {
    /* width: var(--contentWidth); */
    background: var(--colorBG);
    /* margin-inline: auto; */
}

.form label {
    display: block;
    padding: 0.25rem 0.5rem;
}

.form form table {
	width: min(96vw, 600px);
}

input[type=text],
input[type=search],
input[type=email],
input[type=tel],
input[type=password],
select,
textarea {
	background: #fff;
    border: 1px solid var(--colorSpecial);
    padding: 0.5rem;
    font-size: 1rem;
    /* color: #fff; */
    width: 100%;
    /* margin-bottom: 1rem; */
}

input[type=number] {
	background: #fff;
    border: 1px solid var(--colorSpecial);
    padding: 0.5rem;
    font-size: 1rem;
	text-align: center;
}

[type=submit] {
    text-transform: uppercase;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--colorSpecial);
    color: #444;
    padding: 0.75rem 2rem;
    display: inline-block;
    /* border: none; */
    cursor: pointer;
}

[type=submit]:hover {
    text-decoration: none;
    filter: brightness(0.75);
}

button + [type=number]:has(+button) {
    margin-inline: 0.25rem;
	-moz-appearance: textfield;
}

button + [type=number]:has(+button)::-webkit-outer-spin-button,
button + [type=number]:has(+button)::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
textarea {
	min-height: 7rem;
	overflow: clip;
    field-sizing: content;
}

footer {
	/* position: sticky; */
    /* bottom: 0px; */
    /* z-index: 9; */
    background: var(--colorBGFooter);
    color: var(--colorTextFooter);
	/* padding: 1rem; */
    line-height: 1.5rem;
}

footer a {
    color: var(--colorTextFooter);
}

footer a:hover {
	filter: brightness(1.5);
}

footer a.social {
    font-size: 2rem;
    margin-inline: 0.5rem;
}

footer .content {
    display: grid;
	gap: 1rem;
}

@media (min-width: 600px) {
	footer .content {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 900px) {
	footer .content {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

footer .content > div {
	position: relative;
	padding-block: 1rem;
	text-align: center;
	text-wrap-style: pretty;
}
footer .content > div::after {
	content: "";
	position: absolute;
	height: 1px;
	width: 80%;
    left: 10%;
	bottom: -0.5rem;
	background: var(--colorBG);
}

footer .content > div:nth-child(4)::after {
	content: unset;
}

@media (min-width: 600px) {
	footer .content > div:nth-child(3)::after {
		content: unset;
	}
}
@media (min-width: 900px) {
	footer .content > div:nth-child(1)::after,
	footer .content > div:nth-child(2)::after {
		content: unset;
	}
}
footer table {
	margin-inline: auto;
}

footer table td {
	text-align: left;
}
/* footer .content div:nth-child(2) { */
	/* text-align: right; */
/* } */

footer input[type=email] {
	max-width: 16rem;
}

footer form [type=submit] {
	border: none;
    background: var(--colorBG);
    color: #444;
	margin-top: 0.5rem;
}

@media (max-width: 400px) {
	.hideonmobile {
		display: none;
	}
}



.slideshow content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
	min-height: 50vh;
	isolation: isolate;
	overflow: hidden;
}
@media (min-width: 600px) {
	.slideshow content {
		min-height: fit-content;
		height: 50vh;
	}
}

.slideshow content > .slide {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
	align-items: center;
    position: relative;
    isolation: isolate;
	justify-items: center;
	pointer-events: none;
	opacity: 0;
	transition: var(--slideSwapTime) opacity;
}

.slideshow content > :checked + .slide {
	pointer-events: all;
	opacity: 1;
}

.slideshow content > .slide::before {
    content: '';
    inset: 0px;
    position: absolute;
    background: #0004;
    z-index: 2;
}

.slideshow content > .slide .slideshow_left,
.slideshow content > .slide .slideshow_right {
	grid-row: 1 / 3;
	z-index: 2;
	padding: 1rem;
	/* opacity: 0.1; */
    transition: 100ms scale;
    cursor: pointer;
    font-size: 2rem;
    color: #fff;
    filter: drop-shadow(0px 0px 1px #000);
}

.slideshow content > .slide .slideshow_left:hover,
.slideshow content > .slide .slideshow_right:hover {
	scale: 1.25;
}

.slideshow content > .slide .slideshow_left {
	grid-column: 1 / 2;
}

.slideshow content > .slide .slideshow_right {
	grid-column: 3 / 4;
}


.slideshow content > .slide .slideshow_controls {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	z-index: 3;
	display: flex;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
	flex-wrap: wrap;
}
.slideshow_controls label {
	width: 1.5rem;
	height: 1rem;
	background: url(../images/boonwit.svg) 50% 50% no-repeat;
    opacity: 0.5;
    transition: 100ms opacity;
	cursor: pointer;
}

.slideshow_controls label:hover,
.slideshow_controls label.active {
	opacity: 1;
}

.slideshow content > .slide .slide_content {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	z-index: 3;
	color: #fff;
	align-self: end;
	padding-top: 4rem;
	text-align: center;
}

.slideshow content > .slide .slideshow_img {
	grid-column: 1 / 4;
	grid-row: 1 / 3;
	z-index: 1;
	height: 100%;
	overflow: hidden;
}

.slideshow content > .slide .slideshow_img img {
	width: 100%;
	min-width: 100vw;
	height: 100%;
	object-fit: cover;
}

.slides-move .slideshow_img img.animated {
	transform: scale(1);
	transition: transform 0.1s ease var(--slideSwapTime);
}

.slideshow.slides-move content > :checked + .slide .slideshow_img img.animated {
	transform: scale(var(--slideScale));
	transition: transform calc(var(--slideTime) + var(--slideSwapTime)) ease 0.5s;
	@starting-style {
		transform: scale(1);
	}
}

.slide_content h2 {
    /* font-family: "Times New Roman", serif; */
    /* font-size: 2rem; */
    filter: drop-shadow(0px 1px 2px #000);
    margin-block: 0.25rem;
	color: #fff;
}

.slide_content p {
    font-size: 1rem;
    filter: drop-shadow(0px 1px 2px #000);
    margin-block: 1rem;
	text-wrap-style: pretty;
}

.slide_content .button {
	display: inline-block;
	width: fit-content;
    margin-block: 1rem;
}

@media (min-width: 900px) {
	.slide_content h2 {
		font-size: 3rem;
		margin-block: 0.5rem;
	}
	
	.slide_content p {
		font-size: 1.25rem;
		margin-block: 1rem;
	}
}

.bonen {
	background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('../images/bonen.jpg');
	background-size: cover;
	background-position: center;
	animation: move-bg linear forwards;
	animation-timeline: scroll();
	padding-block: 1rem;
	border-radius: 0.5rem;
	/* --contentWidthAdjusted: calc(var(--contentWidth) - 3rem); */
}

.bonen > .content {
	background: var(--colorBG);
	padding: 1rem;
	border: 1px solid var(--colorSpecial);
	/* --contentWidth: var(--contentWidthAdjusted); */
}

.imglogoshape .image {
    filter: drop-shadow(0px 1px 3px #0008);
}

.imglogoshape img {
	mask: url(/images/logo_vorm_wit.svg) center / contain no-repeat;
}

@keyframes move-bg {
	from { background-position: 50% 30%; }
	to { background-position: 50% 70%; }
}



.nextsectionoverlap {
	height: 20rem;
	overflow: hidden;
}
.nextsectionoverlap img {
	min-width: 100%;
	height: 20rem;
	object-fit: cover;
}

.nextsectionoverlap + section {
    margin-top: -10rem;
    z-index: 1;
    position: relative;
	isolation: isolate;
}

.defaultbg .content {
    background: var(--colorBG);
    padding: 1rem 2rem;
}

.menukaart {
	width: var(--contentWidth);
	margin-inline: auto;
    background: var(--colorBG);
	filter: drop-shadow(0px 1px 3px #0004);
}

.menukaart h2 {
    font-size: 2.5rem;
    /* margin-top: 0px; */
    text-align: center;
}

.menukaart content {
    display: block;
    padding: 0.5rem 0.5rem 1rem;
}

.menukaart content > div {
	/* margin-bottom: 1rem; */
	/* padding: 1rem; */
}

.menukaart_grid {
	display: grid;
	gap: 0.5rem 3rem;
	margin-top: 3rem;
}

.menukaart .gerechtenlijst {
	columns: 1;
	column-gap: 4rem;
}

@media (min-width: 600px) {
	.menukaart_grid {
		/* grid-template-columns: 1fr 1fr; */
	}
	
	.menukaart .gerechtenlijst {
		columns: 2;
	}
	
	.menukaart content > div {
		/* padding: 2rem; */
	}
	.menukaart content {
		padding: 1rem 1rem 2rem;
	}
}

@media (min-width: 900px) {
	.menukaart_grid {
		/* grid-template-columns: 1fr 1fr 1fr; */
	}
	
	.menukaart .gerechtenlijst {
		columns: 3;
	}
}


.gerechtfoto {
	display: none;
}
@media (min-width: 900px) {
	.menukaart_grid.imgleft {
		grid-template-columns: 1fr 5fr;
		/* columns: 2; */
	}
	.menukaart_grid.imgleft .gerechtfoto {
		display: block;
		grid-row: 1 / -1;
		grid-column: 1 / 2;
	}
	.menukaart .imgleft .gerechtenlijst,
	.menukaart .imgright .gerechtenlijst {
		columns: 2;
	}
	.menukaart_grid.imgleft .gerecht {
		/* column-span: 3; */
		/* display: block; */
		/* grid-row: 1 / -1; */
		/* grid-column: 1 / 2; */
	}
	.menukaart_grid.imgright {
		grid-template-columns: 5fr 1fr;
		/* columns: 2; */
	}
	.menukaart_grid.imgright .gerechtfoto {
		display: block;
		grid-row: 2 / 3;
        grid-column: 2 / 3;
		padding-right: 1rem;
	}
	.menukaart_grid.imgleft .gerechtfoto {
		display: block;
		grid-row: 2 / 3;
        grid-column: 1 / 2;
		padding-left: 1rem;
	}
}

.menukaart_grid h3 {
	grid-column: 1 / -1;
	margin-block: 0.25rem;
	padding-inline: 0.5rem;
}

@media (min-width: 900px) {
	.menukaart_grid h3 {
		padding-inline: 1rem;
	}
}

.gerecht {
	break-inside: avoid;
	page-break-inside: avoid;
}

.gerechtcontent {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.25rem 0.5rem;
	break-inside: avoid;
	page-break-inside: avoid;
	padding-block: 0.5rem;
	padding-inline: 0.5rem;
}
@media (min-width: 900px) {
	.gerechtcontent {
		padding-inline: 1rem;
	}
}

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

.gerecht_spacer {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    position: relative;
}

.gerecht_spacer::after {
    width: 100%;
    height: 2px;
    border-bottom: 2px dotted #888;
    position: absolute;
    content: "";
    bottom: calc(0.25rem + 2px);
}

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

.gerechtbeschrijving {
	font-weight: 300;
	font-style: italic;
	grid-column: 1 / 4;
}

.gerechtcontent[data-label] {
    border: 2px solid var(--colorSpecial);
    /* padding-inline: 1rem; */
    position: relative;
    margin-top: 2rem;
}

.gerechtcontent[data-label]::before {
    content: attr(data-label);
    right: -2px;
    top: calc(-2rem - 2px);
    position: absolute;
    background: var(--colorSpecial);
    color: #fff;
    padding: 0.25rem 0.5rem;
}
@media (min-width: 900px) {
	.gerechtcontent[data-label]::before {
		padding: 0.25rem 1rem;
	}
}




section.webshop {
    background: var(--colorBG);
}

.webshop .content {
	display: grid;
	gap: 1rem;
	padding-block: 1rem;
}

@media (min-width: 900px) {
	.webshop .content.plusfilter {
		grid-template-columns: auto 1fr;
	}
}

.webshopheader {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
    /* padding-top: 2rem; */
    display: grid;
    grid-template-columns: 1fr auto;
	align-items: center;
}

.webshopheader.filter {
	grid-row: 2 / 3;
}

.webshopheader .breadcrumb {
	display: none;
}

@media (min-width: 900px) {
	.webshopheader,
	.webshopheader.filter {
		grid-row: 1 / 2;
	}
	.webshopheader .breadcrumb {
		display: flex;
		gap: 1.5rem;
	}
}

.webshopheader .breadcrumb a {
    display: inline-block;
    position: relative;
    opacity: 0.75;
}

.webshopheader .breadcrumb a::before {
    content: "/";
    position: absolute;
    right: -1rem;
}

.webshopheader .breadcrumb a:last-child::before {
    content: unset;
}

.webshopheader select {
    appearance: base-select;
    /* width: fit-content; */
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--colorSpecial);
    border-radius: 0.25rem;
    font-size: 1rem;
	background: #fff;
}

.webshopheader select::picker(select) {
	appearance: base-select;
}

.webshopheader option {
    padding-block: 0.25rem;
}

.webshopheader .sort {
    grid-column: 2 / 3;
}
/* .webshopheader .links { */
	/* grid-column: 2 / 3; */
/* } */

/* .webshopheader .links a { */
	/* font-size: 1.25rem; */
    /* height: 2rem; */
    /* width: 2rem; */
    /* display: inline-flex; */
    /* margin-inline: 0.5rem; */
    /* color: var(--colorText); */
    /* transition: filter 100ms, color 100ms, background 100ms; */
    /* background: var(--colorBG); */
    /* border-radius: 50%; */
    /* align-items: center; */
    /* justify-content: center; */
/* } */

/* .webshopheader .links a:hover i { */
	/* font-weight: 500; */
    /* color: var(--colorSpecial); */
/* } */

.webshopfilters {
    border: 1px solid var(--colorSpecialMenu);
	border-radius: 0.25rem;
	background: #fff;
    /* padding: 1rem; */
    padding: 0.25rem;
    overflow: auto;
	height: fit-content;
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
@media (min-width: 900px) {
	.webshopfilters {
		position: sticky;
		top: 6rem;
        max-height: calc(100vh - 7rem);
		grid-row: 2 / 3;
		padding-inline: 0.5rem;
	}
}

input.showfilters ~ .showfilters,
input.showfilters:checked ~ .hidefilters {
    display: block;
}

input.showfilters ~ .showfilters label {
	display: block;
	cursor: pointer;
	text-align: center;
}

.hidefilters label {
    border: 1px solid var(--colorText);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}
.hidefilters label:hover {
	background: #eee;
}

input.showfilters:checked ~ .hidefilters {
	margin-bottom: 1rem;
	display: grid;
	grid-template-columns: auto 1fr;
	justify-items: end;
	align-items: center;
}

input.showfilters:checked ~ .showfilters,
input.showfilters ~ .hidefilters {
    display: none;
}

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

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

.filtergroep:has(> input:checked)::before {
    rotate: 90deg;
}

.filtergroep .filtersexpandable {
    height: 0px;
    overflow: hidden;
    grid-column: 1 / -1;
    transition: 150ms height;
}

.filtergroep input[type="checkbox"]:checked ~ .filtersexpandable {
    height: auto;
    padding-block: 0.25rem;
    border-top: 1px solid #0004;
}

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

.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;
}

.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(--colorSpecial) h s l / 0.25) calc((var(--min) / var(--limit)) * 100 * 1%), var(--colorSpecial) calc((var(--min) / var(--limit)) * 100 * 1%), var(--colorSpecial) calc((var(--max) / var(--limit)) * 100 * 1%), hsl(from var(--colorSpecial) h s l / 0.25) calc((var(--max) / var(--limit)) * 100 * 1%));
}

.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(--colorSpecial);
    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(--colorSpecial);
	pointer-events: auto;
	border: none;
}

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

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

.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:nth-child(1)::before {
    margin-left: 4px;
}

.slider-track-labels div:nth-child(4)::before {
    margin-left: calc(100% - 4px);
}

.slider-track-labels div::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    height: 0.5rem;
    width: 1px;
    background: #888;
    margin-left: 50%;
}
.webshopfilters [type=submit] {
    background: var(--colorSpecial);
    color: #fff;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    width: fit-content;
    border: none;
    text-transform: none;
    font-weight: normal;
	margin-left: auto;
}

.webshopfilters input.showfilters ~ form {
	display: none;
}

.webshopfilters input.showfilters:checked ~ form {
	display: grid;
	gap: 1rem;
}

@media (min-width: 900px) {
	input.showfilters ~ .showfilters,
	input.showfilters:checked ~ .hidefilters {
		display: none;
	}
	.webshopfilters input.showfilters ~ form {
		display: grid;
		gap: 1rem;
	}
}
.webshopfilters label.filtercat {
    display: flex;
    padding-block: 0.25rem;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}


.webshoplist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
	grid-row: 3 / 4;
}
@media (min-width: 600px) {
	.webshoplist {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 900px) {
	.webshoplist {
		grid-row: 2 / 3;
	}
}
@media (min-width: 1200px) {
	.webshoplist {
		grid-template-columns: repeat(4, 1fr);
	}
}
.webshoplist .product {
	border: 1px solid var(--colorSpecialMenu);
    border-radius: 0.25rem;
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 1rem;
	align-items: center;
	cursor: pointer;
}

.webshoplist .product:hover {
}

.webshoplist .product:hover {
	/* background: #fff; */
	text-decoration: none;
	border: 1px solid var(--colorSpecial);
}

.webshoplist .product .product_img {
	grid-column: 1 / 3;
	display: flex;
    justify-content: center;
    align-items: center;
}

.webshoplist .product .product_img img {
	transition: scale 100ms;
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1;
}

.webshoplist .product:hover .product_img img {
	scale: 1.1;
}

.webshoplist .product .product_name {
	grid-column: 1 / 3;
	font-weight: bold;
}

.webshoplist .product .product_brand {
	grid-column: 1 / 3;
}
.webshoplist .product .product_price {
	grid-column: 1 / 2;
	font-weight: bold;
}
.webshoplist .product .product_orderbutton {
	grid-column: 2 / 3;
}

.webshop .imgbutton {
    background: var(--colorSpecial);
    color: #fff;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
	border: none;
}

.webshop .imgbutton:hover {
    background: var(--colorSpecialMenu);
}


.productdetails {
    display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	gap: 0.5rem 1rem;
}
@media (min-width: 600px) {
	.productdetails {
		grid-template-columns: 2fr 4fr;
		grid-template-rows: auto auto 1fr auto;
	}
}

.productdetails_images {
    grid-column: 1 / 2;
    grid-row: 1 / 7;
	display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.productdetails_image {
	padding: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
}

.productdetails_thumbs {
    display: flex;
    width: 100%;
    overflow: auto;
    gap: 0.5rem;
	justify-content: space-around;
}

.productdetails_thumbs img {
    width: calc((100% - 1rem) / 3);
    background: #fff;
    border: 1px solid #ddd;
}

.productdetails_title {
    font-size: 1.25rem;
    font-weight: 600;
}

.productdetails_subtitle {
    font-style: italic;
    font-weight: 200;
}

.productdetails_price {
    display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    align-items: center;
    gap: 1rem;
}

.productdetails_price .amount {
    font-size: 1.5rem;
    font-weight: 500;
    position: relative;
    background: var(--colorSpecial);
    color: #fff;
    padding: 0.25rem 0.5rem 0.25rem 0px;
    border-radius: 0px 0.25rem 0.25rem 0px;
    margin-left: 2rem;
    isolation: isolate;
    height: 3rem;
    display: flex;
    align-items: center;
}

.productdetails_price .amount::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: -2rem;
    border-style: solid;
    border-width: 1.5rem 2rem 1.5rem 0px;
    border-color: transparent var(--colorSpecial) transparent transparent;
}
.productdetails_price .amount::after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    background: var(--colorBG);
    z-index: 1;
    left: -1rem;
}

.productdetails_status,
.cartproduct_status {
    border: 1px solid;
    width: fit-content;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    vertical-align: middle;
	background: #fff;
}

.productdetails_status::before,
.cartproduct_status::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
    margin-right: 0.5rem;
    border-radius: 50%;
    vertical-align: middle;
}

.productdetails_status.statusok::before,
.cartproduct_status.statusok::before {
    background: forestgreen;
}
.productdetails_status.statuslow::before,
.cartproduct_status.statuslow::before {
    background: orange;
}
.productdetails_status.statussoldout::before,
.cartproduct_status.statussoldout::before {
    background: red;
}

.productdetails_order {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr 1fr 1fr;
}
@media (min-width: 900px) {
	.productdetails_order {
		grid-template-columns: auto 6rem auto 1fr;
	}
}

.webshop input[type="number"] {
    width: 100%;
    font-size: 1rem;
    height: 2.5rem;
	text-align: center;
	-moz-appearance: textfield;
}

.webshop input[type="number"]::-webkit-outer-spin-button,
.webshop input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.productdetails_order .button {
    border: 1px solid var(--colorSpecial);
    background: var(--colorSpecial);
	color: #fff;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    height: 2.5rem;
	cursor: pointer;
}

.productdetails_order .button[type=submit] {
    padding: 0.5rem 2rem;
	grid-column: 1 / 4;
}
@media (min-width: 900px) {
	.productdetails_order .button[type=submit] {
		grid-column: 4 / 5;
	}
}

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

.productdetails_specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    height: fit-content;
}

.productdetails_specs span:nth-child(2n + 1) {
    font-weight: bold;
}

.cartproduct {
    display: grid;
	grid-template-columns: 5rem 1fr 5rem;
    gap: 0.25rem 0.5rem;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    padding: 0.25rem;
    background: #fff;
}
@media (min-width: 900px) {
	.cartproduct {
		grid-template-columns: 6rem 1fr auto 10rem auto;
	}
}

.cartproduct_img {
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
}

.cartproduct_name {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
	font-weight: bold;
}

.cartproduct_subtitle {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    font-style: italic;
    font-weight: 200;
}

.cartproduct_status {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}
@media (min-width: 900px) {
	.cartproduct_status {
		height: fit-content;
		align-self: end;
	}
}

.cartproduct_amount {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
	gap: 0.25rem;
}
@media (min-width: 900px) {
	.cartproduct_amount {
		grid-column: 4 / 5;
		grid-row: 3 / 4;
	}
}
.cartproduct_remove {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

@media (min-width: 900px) {
	.cartproduct_remove {
		grid-column: 5 / 6;
		grid-row: 1 / 2;
        justify-self: end;
	}
}
.cartproduct_remove form {
    display: flex;
    align-items: center;
    height: 100%;
}

.cartproduct_remove form [type=submit] {
    background: transparent;
    border: none;
    font-size: 1rem;
    padding: 0.25rem;
	color: var(--colorSpecial);
}

.cartproduct_pricetotal {
    grid-column: 3 / 4;
	grid-row: 4 / 5;
    align-self: center;
    font-weight: bold;
	text-align: right;
}
@media (min-width: 900px) {
	.cartproduct_pricetotal {
		grid-column: 5 / 6;
		grid-row: 3 / 4;
	}
}
/* .cartproduct_amount input[type=number] { */
	/* width: 4rem; */
/* } */







section.columns .content {
    display: grid;
    gap: 1rem;
}
@media (min-width: 900px) {
	section.columns .content {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

.singlecolumn {
    grid-column: 1 / -1;
    width: fit-content;
    margin-inline: auto;
}

.inlinewindow {
    border: 1px solid var(--colorSpecial);
    border-radius: 0.25rem;
    padding: 1rem;
	display: grid;
    gap: 1rem;
}

.inlinewindow .doublerow_sl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
}

.inlinewindow .doublerow_ls {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
}

.inlinewindow .doublerow_mm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.inlinewindow .window_row label {
    display: block;
    font-weight: 500;
}

.inlinewindow .window_row.error {
    background: red;
    color: #fff;
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
}

.inlinewindow .window_row.checkbox label {
    display: inline;
    padding-left: 0.5rem;
    cursor: pointer;
}

.inlinewindow .window_row .smallbutton,
.inlinewindow .window_row .button,
.inlinewindow .window_row [type="submit"] {
    appearance: none;
    border: none;
    background: var(--colorSpecial);
    color: #fff;
    padding: 0.75rem 1rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.inlinewindow .window_row .smallbutton {
    width: 2rem;
    display: inline-block;
    text-align: center;
    padding: 0.5rem;
	border: 1px solid var(--colorSpecial);
}

.inlinewindow .window_row .button {
    display: block;
    text-align: center;
    padding: 0.5rem;
}

/* .inlinewindow .window_row [type="submit"]:hover { */
	/* filter: brightness(1.25); */
/* } */




div.kalender {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    width: 100%;
}

.kalenderwindow {
    position: relative;
    width: 100%;
    background: #fff;
    max-width: var(--contentWidth);
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: 2px solid #000;
	justify-self: center;
}

.kalender .knopnav {
    text-align: center;
}

.knopnav button {
    appearance: none;
	border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 1rem;
}

.kalender .maand {
    grid-column: span 5;
    text-align: center;
}
.kalender .daglabel {
    font-size: 0.75rem;
    text-align: center;
    color: #444;
}

.kalender .dag {
    padding: 0.25rem;
    border: 1px solid #0004;
    border-radius: 0.25rem;
}

.kalender div.dag {
    background: #fff;
}

.kalender label.dag {
    background: #cfc;
    text-align: center;
	position: relative;
}

.kalender label.dag:hover {
    background: #8c8;
    cursor: pointer;
}

.kalender input:disabled + .dag::after {
    background: linear-gradient(to top left, transparent calc(50% - 2px), #ccc 50%, transparent calc(50% + 2px));
    position: absolute;
    content: '';
    inset: 0px;
    overflow: hidden;
	pointer-events: none;
}

.kalender input:disabled + .dag.nietbeschikbaar::after {
	content: unset;
}

.kalender input:disabled + .dag,
.kalender input:disabled + .dag:hover {
    background: #eee;
    color: #fff;
	cursor: default;
}

.kalender input:disabled + .dag.nietbeschikbaar,
.kalender input:disabled + .dag.nietbeschikbaar:hover {
    background: #ddd;
}

.kalender input:checked + .dag {
    background: #4a4;
    color: #fff;
}
.kalender_tijd {
    padding-block: 1rem 0.25rem;
    display: flex;
	align-items: center;
    gap: 1rem;
}

.kalender input.hidden {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    left: 50%;
    top: 50%;
}

input[type=time] {
    background: #fff;
    border: 1px solid var(--colorSpecial);
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

.inlinewindow h4 {
    margin-block: 0px;
}
.inlinewindow.fit-content {
    width: fit-content;
}

a.kader {
    border: 1px solid var(--colorText);
    display: block;
    color: var(--btnPrimaryColor);
    background: #fff;
    text-wrap-style: balance;
    padding: 1rem;
    width: fit-content;
    max-width: 90%;
    margin-inline: auto;
	position: relative;
}

a.kader strong {
	text-decoration: underline;
}

a.kader:hover {
	text-decoration: none;
	background: #eee;
}

a.kader:hover::after {
    content: '>';
    position: absolute;
    right: 0px;
    align-content: center;
    height: 100%;
    top: 0px;
    font-size: 2rem;
    opacity: 0.5;
}

object.pdf {
    width: 100%;
    min-height: 60vh;
}

canvas {
    filter: drop-shadow(0px 1px 3px #0004);
    margin-bottom: 1rem;
}