:root {
	--kaart-bg: #141414;
	--kaart-bg-hover: #191919;
	--kaart-rand: rgba(255, 255, 255, 0.08);
	--kaart-rand-hover: rgba(238, 161, 44, 0.45);
	--kaart-radius: 14px;
	--kaart-schaduw: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
	--knop-zegel-bg: var(--knop-primair-bg);
	--knop-zegel-tekst: var(--knop-primair-tekst);
	--knop-zegel-hover: var(--knop-primair-hover);
}

.sectie--dossier,
.sectie--kurk,
.sectie--kaart,
.dossier-papier,
.briefje,
.stap,
.getuige,
.faq-item,
.hint-onderdeel,
.woocommerce-cart-form,
.cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout-review-order,
.levering,
.cadeaubon-inwisselen,
.woocommerce-form-coupon,
.bedankt,
.product-pagina .summary,
.woocommerce-tabs .panel,
.woocommerce-MyAccount-content,
.woocommerce-form-login,
.woocommerce-form-register,
.fb-form,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	--kleur-inkt: #f2f2f2;
	--kleur-inkt-zacht: #a3a3a3;
	--kleur-lijn-donker: rgba(255, 255, 255, 0.1);
	--kleur-papier: #141414;
	--kleur-papier-licht: #1c1c1c;
	--kleur-papier-donker: #262626;
	--kleur-zegel: var(--kleur-messing-licht);
	--papier-vlek: linear-gradient(transparent, transparent);
	--ruis: linear-gradient(transparent, transparent);
}

.sectie--dossier,
.sectie--kurk,
.sectie--kaart {
	background: var(--kleur-nacht);
	box-shadow: none;
	color: var(--kleur-tekst-licht);
}

.sectie--dossier a:not(.knop) {
	color: var(--kleur-messing-licht);
}

.label {
	color: var(--kleur-messing-licht);
}

.label--stempel {
	color: var(--kleur-messing-licht);
	background: rgba(238, 161, 44, 0.08);
}

input,
select,
textarea {
	background: #1c1c1c;
	border-color: rgba(255, 255, 255, 0.12);
	color: #f2f2f2;
}

input::placeholder,
textarea::placeholder {
	color: #777;
}

.punaise,
.stap-punaise,
.paperclip,
.tape,
.stappen-touw,
.stap-nr {
	display: none !important;
}

.briefje,
.stap,
.getuige,
.dossier-papier {
	background: var(--kaart-bg);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 45%);
	border: 1px solid var(--kaart-rand);
	border-radius: var(--kaart-radius);
	box-shadow: var(--kaart-schaduw);
	color: var(--kleur-tekst-licht);
}

.briefje,
.stap {
	position: relative;
	padding: 2rem 1.6rem 1.75rem;
	overflow: hidden;
	transform: none;
	transition: transform var(--duur) var(--ease-uit), border-color var(--duur), background-color var(--duur), box-shadow var(--duur);
}

.briefje::before,
.stap::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kleur-messing), transparent);
	transform: scaleX(0);
	transition: transform 600ms var(--ease-uit);
}

.briefje::after,
.stap::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(238, 161, 44, 0.14), transparent 70%);
	opacity: 0;
	transition: opacity var(--duur);
	pointer-events: none;
}

.briefje:hover,
.stap:hover {
	transform: translateY(-6px);
	background-color: var(--kaart-bg-hover);
	border-color: var(--kaart-rand-hover);
	box-shadow: 0 30px 60px -30px rgba(238, 161, 44, 0.35), var(--kaart-schaduw);
}

.briefje:hover::before,
.stap:hover::before {
	transform: scaleX(1);
}

.briefje:hover::after,
.stap:hover::after {
	opacity: 1;
}

.stap:nth-child(odd),
.stap:nth-child(even),
.js .stap[data-onthul].is-zichtbaar:nth-child(odd),
.js .stap[data-onthul].is-zichtbaar:nth-child(even),
.js [data-onthul="briefje"].is-zichtbaar {
	transform: none;
}

.js [data-onthul="briefje"] {
	transform: translateY(40px);
	transition: opacity 700ms var(--ease-uit) var(--vertraging, 0ms), transform 800ms var(--ease-uit) var(--vertraging, 0ms), border-color var(--duur), background-color var(--duur), box-shadow var(--duur);
}

.js [data-onthul="briefje"].is-zichtbaar:hover {
	transform: translateY(-6px);
}

.briefje h3,
.stap-titel,
.sectie--foto .briefje h3 {
	color: #fff;
	font-size: var(--fs-h4);
}

.briefje p,
.stap p {
	color: #a3a3a3;
}

.briefje-icoon,
.stap-icoon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.25rem;
	border: 0;
	border-radius: 12px;
	background: rgba(238, 161, 44, 0.12);
	color: var(--kleur-messing-licht);
	transition: background-color var(--duur), color var(--duur), transform var(--duur) var(--ease-veer);
}

.briefje:hover .briefje-icoon,
.stap:hover .stap-icoon {
	background: var(--kleur-messing);
	color: #0a0a0a;
	transform: rotate(-6deg) scale(1.05);
}

.stappen-lijst {
	counter-reset: stap;
}

.stap {
	counter-increment: stap;
}

.stap-titel::before {
	content: counter(stap, decimal-leading-zero) " ";
	color: var(--kleur-messing-licht);
	font-family: var(--font-type);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 0.35rem;
}

.dossier-tab {
	top: 12px;
	left: 12px;
	z-index: 3;
	height: auto;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--kleur-messing);
	color: #0a0a0a;
	font-family: var(--font-tekst);
	font-size: 0.7rem;
	font-weight: 700;
}

.dossier {
	padding-top: 0;
}

.dossier .dossier-papier {
	padding: 0 0 1.25rem;
	overflow: hidden;
}

.dossier .dossier-papier > *:not(.dossier-foto):not(.product-kaart-link) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

.product-kaart .dossier-papier > .product-kaart-link > *:not(.dossier-foto),
.product-kaart .dossier-papier > .dossier-voet {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

a.dossier-papier:hover,
.dossier:hover .dossier-papier {
	transform: translateY(-6px);
	border-color: var(--kaart-rand-hover);
	box-shadow: 0 30px 60px -30px rgba(238, 161, 44, 0.35), var(--kaart-schaduw);
}

.dossier-foto {
	margin: 0 0 1.25rem;
	border: 0;
	box-shadow: none;
	transform: none;
	overflow: hidden;
}

.dossier-foto img {
	filter: none;
	transition: transform 900ms var(--ease-uit);
}

.dossier:hover .dossier-foto {
	transform: none;
}

.dossier:hover .dossier-foto img {
	transform: scale(1.06);
}

.dossier-foto-leeg {
	background: radial-gradient(circle at 50% 40%, rgba(238, 161, 44, 0.12), transparent 60%), #101010;
}

.dossier-titel,
.dossier-prijs {
	color: #fff;
}

.dossier-tekst,
.spellen-sectie .dossiers .dossier-tekst {
	color: #a3a3a3;
}

.dossier-cta,
.spel-meta .icoon {
	color: var(--kleur-messing-licht);
}

.dossier.dossier--maatwerk .dossier-papier {
	padding: 1.75rem;
	background: rgba(20, 20, 20, 0.6);
	border: 1px dashed rgba(238, 161, 44, 0.35);
}

.dossier.dossier--maatwerk .dossier-papier > * {
	margin-left: 0;
	margin-right: 0;
}

.stempel {
	background: rgba(10, 10, 10, 0.8);
	mix-blend-mode: normal;
	color: var(--kleur-messing-licht);
	border-color: currentColor;
}

.getuige {
	transform: none !important;
	background-color: var(--kaart-bg);
}

.getuige::before {
	color: rgba(238, 161, 44, 0.18);
}

.getuige blockquote {
	color: #f2f2f2;
}

.getuige-naam {
	color: #a3a3a3;
}

.polaroid {
	padding: 0;
	background: none;
	border-radius: var(--kaart-radius);
	overflow: hidden;
	transform: none !important;
	box-shadow: 0 0 0 1px var(--kaart-rand), 0 40px 70px -30px rgba(0, 0, 0, 0.9);
}

.polaroid img {
	filter: none;
}

.polaroid-leeg {
	background: #141414;
	color: var(--kleur-messing);
}

.faq-item,
.faq-item[open],
.hint-onderdeel {
	background: var(--kaart-bg);
	border: 1px solid var(--kaart-rand);
	border-radius: 12px;
	box-shadow: none;
}

.faq-item[open] {
	border-color: rgba(238, 161, 44, 0.35);
}

.datum-kaart,
.slot-optie,
.bedankt-overzicht li,
.levering-soort,
.product-usps,
.lobby-spelers li,
.lobby-intro {
	background: #1c1c1c;
	border-color: rgba(255, 255, 255, 0.1);
	color: #f2f2f2;
}

.datum-kaart:has(input:checked) {
	background: var(--kleur-messing);
	border-color: var(--kleur-messing);
	color: #0a0a0a;
}

.slot-optie:has(input:checked) {
	border-color: var(--kleur-messing);
	box-shadow: inset 0 0 0 1px var(--kleur-messing);
}

.woocommerce-cart-form,
.cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout-review-order,
.levering,
.bedankt,
.product-pagina .summary,
.woocommerce-tabs .panel,
.woocommerce-MyAccount-content,
.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--kaart-bg);
	border: 1px solid var(--kaart-rand);
	border-radius: var(--kaart-radius);
	box-shadow: var(--kaart-schaduw);
}

.woocommerce-tabs .tabs a {
	background: #1c1c1c;
	color: #a3a3a3;
}

.woocommerce-tabs .tabs .active a {
	background: var(--kaart-bg);
	color: #fff;
}

.woocommerce-product-gallery {
	padding: 0;
	background: none;
	border-radius: var(--kaart-radius);
	overflow: hidden;
	transform: none;
	box-shadow: 0 0 0 1px var(--kaart-rand), var(--kaart-schaduw);
}

.product-pagina .summary .price,
.cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total td {
	color: var(--kleur-messing-licht);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #141414;
	color: #f2f2f2;
}

.sectie--dossier .tekst,
.pagina-tekst .tekst {
	color: #cfcfcf;
}

.leeg-dossier {
	color: #8a8a8a;
}

.bladwijzer {
	font-family: var(--font-boek);
}

.accent,
.sectie--dossier .accent,
.sectie--kurk .accent {
	color: var(--kleur-accent);
	font-style: normal;
}

h1,
h2,
.sectie-titel,
.hero-titel,
.cta-titel,
.paginakop-titel {
	font-weight: 800;
	letter-spacing: 0.005em;
}

.hero-titel {
	font-size: clamp(3rem, 2rem + 4.6vw, 6.25rem);
	line-height: 0.95;
}

.dossier-titel,
.stap-titel,
.briefje h3 {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.woordmerk,
.cw-titel {
	font-weight: 800;
}

.kop-logo-img {
	width: auto;
	height: var(--logo-kop, 84px);
	max-height: none;
	transform-origin: 50% 50%;
	transition: height var(--duur) var(--ease-uit), filter var(--duur);
	will-change: transform;
}

.kop.is-gescrold .kop-logo-img {
	height: var(--logo-kop-klein, 64px);
}

.kop-logo:hover .kop-logo-img,
.kop-logo:focus-visible .kop-logo-img {
	animation: logo-kraak 900ms var(--ease-veer);
	filter: drop-shadow(0 0 14px rgba(255, 176, 0, 0.45));
}

@keyframes logo-kraak {
	0% { transform: rotate(0) scale(1); }
	20% { transform: rotate(-14deg) scale(1.08); }
	40% { transform: rotate(10deg) scale(1.1); }
	60% { transform: rotate(-6deg) scale(1.06); }
	80% { transform: rotate(3deg) scale(1.04); }
	100% { transform: rotate(0) scale(1); }
}

.hero-binnen {
	grid-template-columns: minmax(0, 1fr);
}

.hero-tekst {
	max-width: 760px;
}

.hero-titel {
	max-width: 14ch;
}

.voet-logo {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: #fff;
	text-decoration: none;
}

.voet-logo img {
	flex: none;
	width: auto;
	height: var(--logo-voet, 96px);
	transition: transform var(--duur) var(--ease-veer);
}

.voet-logo-tekst {
	font-family: var(--font-kop);
	font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.voet-logo:hover {
	color: var(--kleur-accent);
}

.voet-logo:hover img {
	transform: rotate(-8deg) scale(1.05);
}

@media (max-width: 700px) {
	.kop-logo-img {
		height: var(--logo-kop-mobiel, 60px);
	}

	.kop.is-gescrold .kop-logo-img {
		height: 50px;
	}

	.voet-logo img {
		height: 76px;
	}
}

.stappen-lijst {
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.stappen-lijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.stappen-lijst:has(> .stap:nth-child(5):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.stappen-lijst:has(> .stap:nth-child(5):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}