/*
 * Vertel het nu — huisstijl frontend.
 * Geel/goud op zwart, sfeervol, rustig (DP-005: rust creëert emotionele
 * ruimte). Kleuren afgeleid van www.vertelhetnu.nl: goud #deb358, zwart,
 * warme crème ondergrond, donkere leestekst. Font: Inter.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@500;600;700;800&family=Poppins:wght@500;600;700&display=swap");

:root
{
	--vhn-black:      #0b0b0c;
	--vhn-black-soft: #16151a;
	--vhn-gold:       #deb358;
	--vhn-gold-dark:  #b8903e;
	--vhn-gold-light: #f3e0b8;
	--vhn-gold-mustard: #e7be69;
	--vhn-cream:      #fbf6ec;
	--vhn-cream-dark: #f2e9d8;
	--vhn-white:      #ffffff;
	--vhn-ink:        #304352;
	--vhn-ink-light:  #5b6b78;
	--vhn-border:     #e7ddc8;
	--vhn-danger:     #b3432b;
	--vhn-success:    #4a7a5e;
	--vhn-rose:       #a1554c;
	--vhn-rose-dark:  #8a453d;

	--vhn-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vhn-font-display: "Cormorant Garamond", Georgia, serif;
	--vhn-font-heading: "Poppins", "Inter", sans-serif;

	--vhn-radius:     10px;
	--vhn-radius-lg:  18px;
	--vhn-shadow:     0 12px 32px -12px rgba(11, 11, 12, 0.28);
	--vhn-shadow-sm:  0 4px 14px -6px rgba(11, 11, 12, 0.18);
	--vhn-glow:       0 0 60px 10px rgba(222, 179, 88, 0.35);

	--vhn-space-1: 0.5rem;
	--vhn-space-2: 1rem;
	--vhn-space-3: 1.5rem;
	--vhn-space-4: 2.5rem;
	--vhn-space-5: 4rem;
}

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

html { scroll-behavior: smooth; }

body
{
	margin: 0;
	font-family: var(--vhn-font-body);
	color: var(--vhn-ink);
	background: var(--vhn-cream);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4
{
	font-family: var(--vhn-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--vhn-black);
}

h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.vhn-lead
{
	font-size: 1.15rem;
	color: var(--vhn-ink-light);
	max-width: 46em;
}

.vhn-hero-grid
{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--vhn-space-4);
	align-items: center;
}
.vhn-hero-photo
{
	border-radius: var(--vhn-radius-lg);
	overflow: hidden;
	box-shadow: var(--vhn-glow), var(--vhn-shadow);
}
.vhn-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

@media (max-width: 860px)
{
	.vhn-hero-grid { grid-template-columns: 1fr; text-align: center; }
	.vhn-hero-grid > div:first-child > div { justify-content: center; }
	.vhn-hero-photo { max-width: 360px; margin: 0 auto; }
}

/* ---------- Layout ---------- */

.vhn-wrap
{
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--vhn-space-3);
}

.vhn-section        { padding: var(--vhn-space-5) 0; }
.vhn-section--tight  { padding: var(--vhn-space-4) 0; }
.vhn-section--dark
{
	background: var(--vhn-black);
	color: var(--vhn-cream);
}
.vhn-section--dark h1, .vhn-section--dark h2, .vhn-section--dark h3 { color: var(--vhn-white); }
.vhn-section--gold
{
	background: linear-gradient(160deg, var(--vhn-gold-mustard) 0%, var(--vhn-gold-dark) 100%);
	color: var(--vhn-black);
}
.vhn-section--gold h1, .vhn-section--gold h2, .vhn-section--gold h3 { color: var(--vhn-black); }

.vhn-center { text-align: center; }

/* ---------- Header ---------- */

.vhn-header
{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 11, 12, 0.92);
	backdrop-filter: blur(8px);
	color: var(--vhn-cream);
}

.vhn-header-inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--vhn-space-2) var(--vhn-space-3);
	min-height: 84px;
}

.vhn-brand
{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--vhn-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--vhn-white);
	white-space: nowrap;
	flex: 0 0 auto;
}

.vhn-logo-heart
{
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--vhn-gold);
}
.vhn-logo-heart svg { width: 100%; height: 100%; }

.vhn-nav { display: flex; align-items: center; gap: var(--vhn-space-3); flex-wrap: nowrap; }
.vhn-nav a
{
	font-size: 0.95rem;
	color: var(--vhn-cream-dark);
	opacity: 0.85;
	white-space: nowrap;
}
.vhn-nav a:hover, .vhn-nav a.is-active { opacity: 1; color: var(--vhn-gold-light); }

/* ---------- App-shell (sidebar + topbar voor ingelogde gebruikers) ---------- */

.vhn-app { display: flex; min-height: 100vh; align-items: stretch; }

.vhn-app-sidebar
{
	flex: 0 0 272px;
	display: flex;
	flex-direction: column;
	gap: var(--vhn-space-3);
	padding: var(--vhn-space-3) var(--vhn-space-2);
	background: var(--vhn-cream-dark);
	border-right: 1px solid var(--vhn-border);
}
.vhn-app-sidebar .vhn-brand { color: var(--vhn-black); padding: 0 0.5rem; margin-bottom: var(--vhn-space-1); }
.vhn-app-sidebar .vhn-logo-heart { color: var(--vhn-gold-dark); }

.vhn-app-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.vhn-app-nav a, .vhn-app-nav span.is-disabled
{
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.8rem;
	border-radius: var(--vhn-radius);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--vhn-ink);
}
.vhn-app-nav .vhn-icon { width: 20px; height: 20px; color: var(--vhn-gold-dark); flex: 0 0 auto; }
.vhn-app-nav a:hover { background: rgba(184, 144, 62, 0.1); }
.vhn-app-nav a.is-active { background: var(--vhn-white); box-shadow: var(--vhn-shadow-sm); }
.vhn-app-nav span.is-disabled { color: var(--vhn-ink-light); font-weight: 500; cursor: not-allowed; }
.vhn-app-nav span.is-disabled .vhn-icon { color: var(--vhn-ink-light); opacity: 0.6; }

.vhn-app-promo, .vhn-app-help
{
	background: var(--vhn-white);
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-2);
}
.vhn-app-promo-title { display: flex; align-items: center; gap: 0.4rem; font-family: var(--vhn-font-display); font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--vhn-black); }
.vhn-app-promo p { font-size: 0.88rem; color: var(--vhn-ink-light); margin: 0 0 0.9rem; }

.vhn-app-help { display: flex; gap: 0.7rem; margin-top: auto; }
.vhn-app-help .vhn-icon { width: 20px; height: 20px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.1rem; }
.vhn-app-help strong { display: block; font-size: 0.9rem; color: var(--vhn-black); }
.vhn-app-help p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--vhn-ink-light); }
.vhn-app-help a { color: var(--vhn-ink); }
.vhn-app-help a:hover { color: var(--vhn-gold-dark); }

.vhn-app-logout { text-align: center; font-size: 0.85rem; color: var(--vhn-ink-light); padding: 0.3rem; }
.vhn-app-logout:hover { color: var(--vhn-rose); }

.vhn-app-main { flex: 1 1 auto; min-width: 0; background: var(--vhn-cream); }
.vhn-app-main main { display: block; padding: var(--vhn-space-3) var(--vhn-space-4) var(--vhn-space-5); }
@media (max-width: 760px)
{
	.vhn-app-main main { padding: var(--vhn-space-2) var(--vhn-space-2) var(--vhn-space-4); }
}

.vhn-app-topbar
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem var(--vhn-space-3);
	border-bottom: 1px solid var(--vhn-border);
	background: var(--vhn-cream);
}
.vhn-app-topbar-spacer { flex: 1 1 auto; }
.vhn-app-topbar-brand { display: none; }

.vhn-app-bell
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--vhn-ink);
}
.vhn-app-bell:hover { background: var(--vhn-cream-dark); }
.vhn-app-bell .vhn-icon { width: 20px; height: 20px; }

.vhn-app-account { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.6rem; border-radius: var(--vhn-radius); color: var(--vhn-black); font-weight: 600; font-size: 0.92rem; }
.vhn-app-account:hover { background: var(--vhn-cream-dark); }
.vhn-app-account .vhn-icon { width: 16px; height: 16px; color: var(--vhn-ink-light); }
.vhn-app-avatar
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vhn-gold);
	color: var(--vhn-black);
	font-family: var(--vhn-font-heading);
	font-size: 0.85rem;
}

@media (max-width: 900px)
{
	.vhn-app { display: block; }
	.vhn-app-sidebar
	{
		display: none;
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 60;
		width: min(320px, 86vw);
		height: 100vh;
		overflow-y: auto;
		box-shadow: var(--vhn-shadow);
	}
	.vhn-app-sidebar.is-open { display: flex; }
	.vhn-app-topbar .vhn-nav-toggle { display: flex; }
	.vhn-app-topbar-brand { display: flex; }
	.vhn-app-topbar-brand .vhn-logo-heart { width: 26px; height: 26px; color: var(--vhn-gold-dark); }
	.vhn-app-account span:not(.vhn-app-avatar) { display: none; }
}

/* ---------- Buttons ---------- */

.vhn-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border-radius: var(--vhn-radius);
	font-weight: 600;
	font-size: 1rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	min-height: 44px;
}
.vhn-btn:hover { transform: translateY(-1px); }

.vhn-btn--primary
{
	background: var(--vhn-gold);
	color: var(--vhn-black);
	box-shadow: var(--vhn-shadow-sm);
}
.vhn-btn--primary:hover { background: var(--vhn-gold-dark); }

.vhn-btn--dark
{
	background: var(--vhn-black);
	color: var(--vhn-white);
}
.vhn-btn--dark:hover { background: var(--vhn-black-soft); }

.vhn-btn--secondary
{
	background: transparent;
	color: var(--vhn-ink);
	border-color: var(--vhn-border);
}
.vhn-btn--secondary:hover { background: var(--vhn-cream-dark); }

.vhn-btn--ghost-light
{
	background: transparent;
	color: var(--vhn-cream);
	border-color: rgba(251, 246, 236, 0.35);
}

.vhn-btn--destructive
{
	background: var(--vhn-white);
	color: var(--vhn-danger);
	border-color: var(--vhn-danger);
}
.vhn-btn--destructive:hover { background: var(--vhn-danger); color: var(--vhn-white); }

.vhn-btn--rose
{
	background: var(--vhn-rose);
	color: var(--vhn-white);
	box-shadow: var(--vhn-shadow-sm);
}
.vhn-btn--rose:hover { background: var(--vhn-rose-dark); }

.vhn-btn--block { width: 100%; }
.vhn-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.vhn-btn:focus-visible
{
	outline: 3px solid var(--vhn-gold-dark);
	outline-offset: 2px;
}

/* ---------- Cards ---------- */

.vhn-card
{
	background: var(--vhn-white);
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-3);
	box-shadow: var(--vhn-shadow-sm);
}

/* ---------- Dashboard: "Mijn kluizen" (mockups/mijn-kluizen.png) ---------- */

.vhn-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--vhn-space-3); }
.vhn-dash-head h1 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.vhn-dash-sub { margin: 0.2rem 0 0; color: var(--vhn-ink-light); }

.vhn-dash-tabs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--vhn-border); margin-bottom: var(--vhn-space-3); }
.vhn-tabs { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.vhn-tabs a { padding: 0.8rem 0.1rem; font-weight: 600; font-size: 0.92rem; color: var(--vhn-ink-light); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vhn-tabs a.is-active { color: var(--vhn-rose); border-bottom-color: var(--vhn-rose); }
.vhn-dash-tools { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.6rem; }
.vhn-sort-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--vhn-ink-light); border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius); padding: 0.4rem 0.7rem; }
.vhn-sort-label .vhn-icon { width: 16px; height: 16px; margin: 0; }
.vhn-view-toggle { display: flex; gap: 0.3rem; }
.vhn-view-toggle .vhn-icon { width: 18px; height: 18px; padding: 0.4rem; box-sizing: content-box; border-radius: var(--vhn-radius); color: var(--vhn-ink-light); }
.vhn-view-toggle .vhn-icon.is-active { background: var(--vhn-cream-dark); color: var(--vhn-black); }

.vhn-vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--vhn-space-3); }
.vhn-vault-card { background: var(--vhn-white); border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); overflow: hidden; box-shadow: var(--vhn-shadow-sm); }
.vhn-vault-cover { position: relative; display: block; aspect-ratio: 4/3; background: var(--vhn-black); }
.vhn-vault-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhn-vault-cover-badge
{
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	background: rgba(251, 246, 236, 0.94);
	color: var(--vhn-black);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}
.vhn-vault-body { padding: var(--vhn-space-2) var(--vhn-space-2) var(--vhn-space-2); }
.vhn-vault-body h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.4rem; }
.vhn-vault-body h3 a:first-child { color: var(--vhn-black); }
.vhn-vault-edit { color: var(--vhn-ink-light); flex: 0 0 auto; }
.vhn-vault-edit .vhn-icon { width: 14px; height: 14px; margin: 0; }
.vhn-vault-edit:hover { color: var(--vhn-gold-dark); }

.vhn-vault-progress { margin-top: 0.7rem; }
.vhn-vault-progress-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--vhn-ink-light); margin-bottom: 0.3rem; }
.vhn-progress-bar { height: 6px; border-radius: 999px; background: var(--vhn-cream-dark); overflow: hidden; }
.vhn-progress-bar span { display: block; height: 100%; background: var(--vhn-gold-dark); border-radius: 999px; }

.vhn-vault-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--vhn-space-2); }
.vhn-avatar-stack { display: flex; }
.vhn-avatar
{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vhn-white);
	font-size: 0.72rem;
	font-weight: 700;
	border: 2px solid var(--vhn-white);
	margin-left: -0.5rem;
}
.vhn-avatar:first-child { margin-left: 0; }
.vhn-avatar--more { background: var(--vhn-cream-dark); color: var(--vhn-ink-light); }
.vhn-vault-more { color: var(--vhn-ink-light); font-weight: 700; letter-spacing: 0.1em; cursor: default; padding: 0.2rem 0.5rem; }

.vhn-dash-trust
{
	display: flex;
	align-items: center;
	gap: var(--vhn-space-2);
	background: var(--vhn-white);
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-3);
	margin-top: var(--vhn-space-4);
}
.vhn-dash-trust strong { display: block; color: var(--vhn-black); }
.vhn-dash-trust p { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--vhn-ink-light); }
.vhn-dash-trust a { margin-left: auto; flex: 0 0 auto; white-space: nowrap; color: var(--vhn-gold-dark); font-weight: 600; font-size: 0.9rem; }

.vhn-dash-promo
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vhn-space-3);
	background: var(--vhn-black);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-3) var(--vhn-space-3);
	margin-top: var(--vhn-space-3);
	overflow: hidden;
}
.vhn-dash-promo img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--vhn-radius); flex: 0 0 auto; }
.vhn-dash-promo h2 { color: var(--vhn-white); font-size: 1.3rem; margin: 0; }
.vhn-dash-promo p { color: var(--vhn-cream-dark); margin: 0.2rem 0 0; font-size: 0.9rem; }
.vhn-dash-promo .vhn-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 700px)
{
	.vhn-dash-promo { flex-wrap: wrap; }
	.vhn-dash-promo .vhn-btn { margin-left: 0; }
}

.vhn-grid
{
	display: grid;
	gap: var(--vhn-space-3);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- Forms ---------- */

.vhn-form-group { margin-bottom: var(--vhn-space-2); }

.vhn-label
{
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.35rem;
	color: var(--vhn-black);
}

.vhn-hint
{
	font-size: 0.85rem;
	color: var(--vhn-ink-light);
	margin-top: 0.3rem;
}

input[type="text"], input[type="email"], input[type="date"], input[type="tel"],
input[type="password"], textarea, select
{
	width: 100%;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	border: 1.5px solid var(--vhn-border);
	background: var(--vhn-white);
	font: inherit;
	color: var(--vhn-ink);
	min-height: 44px;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus
{
	outline: none;
	border-color: var(--vhn-gold-dark);
	box-shadow: 0 0 0 3px rgba(222, 179, 88, 0.28);
}
.is-invalid { border-color: var(--vhn-danger) !important; }
.vhn-field-error { color: var(--vhn-danger); font-size: 0.85rem; margin-top: 0.3rem; }

/* radio/choice tiles (wizard) */
.vhn-choices { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vhn-choice
{
	display: block;
	border: 1.5px solid var(--vhn-border);
	border-radius: var(--vhn-radius);
	padding: 1rem 1.1rem;
	cursor: pointer;
	background: var(--vhn-white);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.vhn-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vhn-choice:hover { border-color: var(--vhn-gold); }
.vhn-choice.is-selected { border-color: var(--vhn-gold-dark); background: var(--vhn-gold-light); }

/* ---------- Profiel (mockups/profiel.png) ---------- */

.vhn-profile-grid { display: grid; grid-template-columns: 2.3fr 1fr; gap: var(--vhn-space-3); align-items: start; }
.vhn-profile-main { display: flex; flex-direction: column; gap: var(--vhn-space-3); min-width: 0; }
.vhn-profile-aside { display: flex; flex-direction: column; gap: var(--vhn-space-3); position: sticky; top: var(--vhn-space-2); }

@media (max-width: 959px)
{
	.vhn-profile-grid { grid-template-columns: 1fr; }
	.vhn-profile-aside { position: static; }
}

.vhn-profile-card h2, .vhn-profile-vaults h2 { margin: 0 0 var(--vhn-space-3); font-size: 1.35rem; }

.vhn-profile-body { display: flex; gap: var(--vhn-space-4); align-items: flex-start; }
.vhn-profile-photo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.vhn-profile-photo-circle
{
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vhn-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.vhn-profile-photo-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhn-profile-photo-circle span { font-family: var(--vhn-font-display); font-size: 3rem; font-weight: 700; color: var(--vhn-black); }
.vhn-profile-photo .vhn-btn { font-size: 0.88rem; padding: 0.6rem 1rem; }
.vhn-profile-photo .vhn-btn .vhn-icon { width: 18px; height: 18px; margin: 0; }

.vhn-profile-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.vhn-profile-field { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 1.2rem; }
.vhn-profile-field-label { font-weight: 600; font-size: 0.92rem; color: var(--vhn-black); }
.vhn-profile-field-label .vhn-hint { display: block; margin: 0.15rem 0 0; font-weight: 400; }
.vhn-profile-field input:disabled { color: var(--vhn-ink-light); background: var(--vhn-cream-dark); cursor: not-allowed; }

.vhn-profile-save { margin-top: var(--vhn-space-3); }

.vhn-profile-vaults ul { list-style: none; margin: 0; padding: 0; }
.vhn-profile-vaults li { padding: 0.7rem 0; border-bottom: 1px solid var(--vhn-border); }
.vhn-profile-vaults li:last-child { border-bottom: none; }
.vhn-profile-vaults a { font-weight: 600; color: var(--vhn-black); }
.vhn-profile-vaults a:hover { color: var(--vhn-gold-dark); }

@media (max-width: 700px)
{
	.vhn-profile-body { flex-direction: column; align-items: center; text-align: center; }
	.vhn-profile-field { grid-template-columns: 1fr; gap: 0.35rem; }
}

.vhn-profile-security { text-align: center; }
.vhn-profile-security h2 { margin: 0 0 var(--vhn-space-2); font-size: 1.2rem; }
.vhn-profile-security-badge
{
	width: 64px;
	height: 64px;
	margin: 0 auto 0.9rem;
	border-radius: 50%;
	background: var(--vhn-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vhn-profile-security-badge .vhn-icon { width: 30px; height: 30px; margin: 0; color: var(--vhn-gold-dark); }
.vhn-profile-security-status { margin: 0 0 var(--vhn-space-2); font-weight: 700; color: var(--vhn-black); }
.vhn-profile-security-list { list-style: none; margin: 0 0 var(--vhn-space-3); padding: 0; text-align: left; }
.vhn-profile-security-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.9rem; color: var(--vhn-ink); }
.vhn-profile-security-list .vhn-icon { width: 16px; height: 16px; margin: 0; color: var(--vhn-success); }

.vhn-profile-quote { text-align: center; }
.vhn-profile-quote p { font-family: var(--vhn-font-display); font-style: italic; font-size: 1.15rem; color: var(--vhn-black); margin: 0 0 0.8rem; line-height: 1.5; }
.vhn-profile-quote .vhn-icon { width: 20px; height: 20px; margin: 0; color: var(--vhn-gold-dark); }

.vhn-profile-trust
{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--vhn-cream-dark);
	border-color: var(--vhn-border);
}
.vhn-profile-trust strong { display: flex; align-items: center; font-size: 1.05rem; color: var(--vhn-black); }
.vhn-profile-trust .vhn-icon { width: 20px; height: 20px; margin: 0 0.5rem 0 0; color: var(--vhn-gold-dark); }
.vhn-profile-trust p { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--vhn-ink-light); max-width: 440px; }

/* ---------- Uitnodigen (mockups/uitnodiging-versturen.png) ---------- */

.vhn-invite-card h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.vhn-invite-card > p, .vhn-invite-link-text > p { margin: 0 0 var(--vhn-space-2); color: var(--vhn-ink-light); }

.vhn-invite-link-section { display: flex; gap: var(--vhn-space-3); align-items: flex-start; }
.vhn-invite-link-icon
{
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vhn-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vhn-invite-link-icon .vhn-icon { width: 24px; height: 24px; margin: 0; color: var(--vhn-gold-dark); }
.vhn-invite-link-text { flex: 1 1 auto; min-width: 0; }

.vhn-invite-link-row { display: flex; gap: 0.7rem; margin-top: 0.9rem; flex-wrap: wrap; }
.vhn-invite-link-input { flex: 1 1 320px; min-width: 0; color: var(--vhn-ink-light); }

.vhn-invite-share-row { display: flex; gap: var(--vhn-space-3); margin-top: 1.2rem; flex-wrap: wrap; }
.vhn-invite-share-btn
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	font: inherit;
	font-size: 0.82rem;
	color: var(--vhn-ink);
	font-weight: 600;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.vhn-invite-share-icon
{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vhn-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vhn-gold-dark);
	transition: background 0.15s ease;
}
.vhn-invite-share-btn:hover .vhn-invite-share-icon { background: var(--vhn-gold-light); }
.vhn-invite-share-icon .vhn-icon { width: 20px; height: 20px; margin: 0; }
.vhn-invite-share-btn.is-copied .vhn-invite-share-icon { background: var(--vhn-success); color: var(--vhn-white); }

.vhn-invite-divider { border: none; border-top: 1px solid var(--vhn-border); margin: var(--vhn-space-3) 0; }

.vhn-invite-add-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.vhn-invite-add-row input[type="email"] { flex: 1 1 260px; min-width: 0; }
.vhn-invite-add-row select { flex: 0 0 auto; width: auto; }

.vhn-invite-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.vhn-invite-row
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius);
	background: var(--vhn-cream);
}
.vhn-invite-row-email { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhn-invite-row-relatie { flex: 0 0 auto; width: auto; min-height: 38px; padding: 0.4rem 0.7rem; }
.vhn-invite-row-remove
{
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: none;
	border: none;
	padding: 0;
	color: var(--vhn-ink-light);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.vhn-invite-row-remove:hover { background: var(--vhn-cream-dark); color: var(--vhn-danger); }

.vhn-invite-sent { margin-top: var(--vhn-space-3); }
.vhn-invite-sent h2 { margin: 0 0 var(--vhn-space-2); font-size: 1.15rem; }
.vhn-invite-sent-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--vhn-border); }
.vhn-invite-sent-row:first-of-type { border-top: none; padding-top: 0; }
.vhn-invite-sent-actions { display: flex; gap: 0.5rem; }

.vhn-invite-kluis-cover { border-radius: var(--vhn-radius); overflow: hidden; aspect-ratio: 4/3; margin-bottom: var(--vhn-space-2); }
.vhn-invite-kluis-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhn-invite-kluis-list { list-style: none; margin: 0; padding: 0; }
.vhn-invite-kluis-list li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--vhn-border); }
.vhn-invite-kluis-list li:first-child { border-top: none; }
.vhn-invite-kluis-list .vhn-icon { width: 17px; height: 17px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.2rem; }
.vhn-invite-kluis-list > li > div { flex: 1 1 auto; min-width: 0; }
.vhn-invite-kluis-list strong { display: block; font-size: 0.9rem; }
.vhn-invite-kluis-list a { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--vhn-gold-dark); }

@media (max-width: 700px)
{
	.vhn-invite-link-section { flex-direction: column; align-items: center; text-align: center; }
	.vhn-invite-share-row { justify-content: center; }
	.vhn-invite-row { flex-wrap: wrap; }
}

/* ---------- Bijdragen (mock-ups bijdrage.png / bijdrage-tekst.png / bijdrage-foto.png) ---------- */

.vhn-contrib-wrap { max-width: 1360px; padding-top: var(--vhn-space-4); padding-bottom: var(--vhn-space-5); }

.vhn-contrib-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vhn-space-3); flex-wrap: wrap; margin-bottom: var(--vhn-space-3); }
.vhn-contrib-head h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); flex-wrap: wrap; }
.vhn-contrib-head h1 .vhn-heart-accent { color: var(--vhn-gold); font-size: 0.9em; }
.vhn-contrib-head-naam { color: var(--vhn-gold-dark); }
.vhn-contrib-head-sparkle { font-size: 0.75em; }
.vhn-contrib-head .vhn-lead { margin: 0.5rem 0 0; max-width: 640px; }
.vhn-contrib-help { flex: 0 0 auto; text-align: right; font-size: 0.88rem; color: var(--vhn-ink-light); white-space: nowrap; }
.vhn-contrib-help span { display: block; color: var(--vhn-gold-dark); font-weight: 600; }

.vhn-contrib-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: var(--vhn-space-4); align-items: start; }
.vhn-contrib-main { min-width: 0; }
.vhn-contrib-aside { display: flex; flex-direction: column; gap: var(--vhn-space-3); position: sticky; top: var(--vhn-space-2); }

.vhn-contrib-recipient h2 { margin: 0 0 var(--vhn-space-2); font-size: 1.1rem; text-align: center; }
.vhn-contrib-recipient-row { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.vhn-contrib-recipient-avatar
{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--vhn-gold);
	color: var(--vhn-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vhn-font-display);
	font-size: 1.6rem;
	font-weight: 700;
}
.vhn-contrib-recipient-row strong { font-size: 1.05rem; }
.vhn-contrib-recipient-meta { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.vhn-contrib-recipient-meta li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--vhn-ink-light); }
.vhn-contrib-recipient-meta .vhn-icon { width: 15px; height: 15px; margin: 0; color: var(--vhn-gold-dark); }

.vhn-contrib-cover { border-radius: var(--vhn-radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--vhn-shadow-sm); }
.vhn-contrib-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vhn-contrib-quote { text-align: center; padding: 0 var(--vhn-space-2); }
.vhn-contrib-quote p { font-family: var(--vhn-font-display); font-style: italic; font-size: 1rem; color: var(--vhn-ink); margin: 0; line-height: 1.6; }
.vhn-contrib-quote .vhn-icon { width: 14px; height: 14px; color: var(--vhn-rose); margin: 0 0 0 0.15rem; }
.vhn-contrib-quote span { display: block; margin-top: 0.6rem; font-family: var(--vhn-font-display); font-weight: 700; color: var(--vhn-black); }

.vhn-contrib-tips h3 { margin: 0 0 var(--vhn-space-2); font-size: 1.05rem; }
.vhn-contrib-tips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.vhn-contrib-tips li { display: flex; align-items: flex-start; gap: 0.7rem; }
.vhn-contrib-tips .vhn-icon { width: 18px; height: 18px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.15rem; }
.vhn-contrib-tips strong { display: block; font-size: 0.9rem; }
.vhn-contrib-tips p { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--vhn-ink-light); }

.vhn-contrib-icon-badge
{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vhn-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--vhn-space-2);
}
.vhn-contrib-icon-badge .vhn-icon { width: 24px; height: 24px; margin: 0; color: var(--vhn-gold-dark); }
.vhn-contrib-icon-badge--rose { background: rgba(161, 85, 76, 0.12); }
.vhn-contrib-icon-badge--rose .vhn-icon { color: var(--vhn-rose); }

.vhn-contrib-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: var(--vhn-space-2); }
.vhn-contrib-card-head h2 { margin: 0 0 0.3rem; font-size: 1.25rem; }
.vhn-contrib-card-head p { margin: 0; }

.vhn-contrib-tips-popover { flex: 0 0 auto; }
.vhn-contrib-tips-popover summary
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--vhn-gold-dark);
	border: 1px solid var(--vhn-border);
	border-radius: 999px;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
}
.vhn-contrib-tips-popover summary::-webkit-details-marker { display: none; }
.vhn-contrib-tips-popover summary .vhn-icon { width: 14px; height: 14px; margin: 0; }
.vhn-contrib-tips-popover ul { margin: 0.6rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--vhn-ink-light); }
.vhn-contrib-tips-popover li { margin-bottom: 0.3rem; }

.vhn-choice--icon { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.vhn-choice--icon .vhn-icon { width: 18px; height: 18px; margin: 0; color: var(--vhn-gold-dark); }

.vhn-contrib-toolbar { display: flex; align-items: center; gap: 0.3rem; padding: 0.6rem 0.8rem; background: var(--vhn-cream); border: 1px solid var(--vhn-border); border-bottom: none; border-radius: var(--vhn-radius) var(--vhn-radius) 0 0; margin-top: var(--vhn-space-2); }
.vhn-contrib-toolbar button
{
	background: none;
	border: none;
	padding: 0.4rem 0.55rem;
	border-radius: 6px;
	color: var(--vhn-ink-light);
	font-size: 0.9rem;
	cursor: not-allowed;
	opacity: 0.6;
}
.vhn-contrib-toolbar .vhn-icon { width: 15px; height: 15px; margin: 0; }
.vhn-contrib-toolbar-sep { width: 1px; height: 20px; background: var(--vhn-border); margin: 0 0.3rem; }

.vhn-contrib-textarea { border-top-left-radius: 0; border-top-right-radius: 0; min-height: 280px; line-height: 1.7; resize: vertical; }
.vhn-contrib-counter { text-align: right; font-size: 0.8rem; color: var(--vhn-ink-light); margin-top: 0.4rem; }

.vhn-contrib-dropzone
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	border: 1.5px dashed var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-4) var(--vhn-space-3);
	margin-top: var(--vhn-space-2);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.vhn-contrib-dropzone:hover, .vhn-contrib-dropzone.is-dragover { border-color: var(--vhn-gold-dark); background: var(--vhn-cream); }
.vhn-contrib-dropzone .vhn-icon { width: 40px; height: 40px; margin: 0 0 0.3rem; color: var(--vhn-gold-dark); }
.vhn-contrib-dropzone strong { font-size: 1.05rem; }
.vhn-contrib-dropzone > span:first-of-type { color: var(--vhn-ink-light); font-size: 0.85rem; }

.vhn-contrib-filelist { margin-top: var(--vhn-space-3); }
.vhn-contrib-file-list, .vhn-contrib-filelist #vhn-contrib-selected-items { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.vhn-contrib-file-row
{
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius);
	background: var(--vhn-cream);
}
.vhn-contrib-file-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.vhn-contrib-file-row > .vhn-icon { width: 20px; height: 20px; margin: 0; color: var(--vhn-gold-dark); flex: 0 0 auto; }
.vhn-contrib-file-name { flex: 0 1 auto; min-width: 0; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.vhn-contrib-file-caption { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.vhn-contrib-file-row button { flex: 0 0 auto; background: none; border: none; padding: 0; color: var(--vhn-ink-light); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.vhn-contrib-file-row button:hover { color: var(--vhn-danger); }

.vhn-contrib-preview-media { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.vhn-contrib-preview-media li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--vhn-ink-light); }
.vhn-contrib-preview-media .vhn-icon { width: 16px; height: 16px; margin: 0; color: var(--vhn-gold-dark); flex: 0 0 auto; }

.vhn-contrib-checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.92rem; }
.vhn-contrib-checkbox .vhn-icon { width: 16px; height: 16px; margin: 0; color: var(--vhn-ink-light); }

.vhn-contrib-preview { border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius); padding: var(--vhn-space-2); margin: var(--vhn-space-2) 0; }

.vhn-contrib-final-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: var(--vhn-space-2); }

.vhn-contrib-back { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--vhn-space-3); }
.vhn-contrib-back .vhn-hint { display: flex; align-items: center; gap: 0.4rem; }
.vhn-contrib-back .vhn-icon { width: 14px; height: 14px; margin: 0; color: var(--vhn-gold-dark); }

@media (max-width: 959px)
{
	.vhn-contrib-grid { grid-template-columns: 1fr; }
	.vhn-contrib-aside { position: static; }
	.vhn-contrib-topbar { flex-direction: column; }
	.vhn-contrib-help { text-align: left; }
}

@media (max-width: 560px)
{
	.vhn-contrib-card-head { flex-direction: column; }
}

/* ---------- Kluis-beheer shell ---------- */

.vhn-manage-shell
{
	display: flex;
	gap: var(--vhn-space-3);
	align-items: flex-start;
}
.vhn-manage-sidebar
{
	flex: 0 0 220px;
	background: var(--vhn-black);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-2);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.vhn-manage-sidebar a
{
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 0.8rem;
	border-radius: 10px;
	color: var(--vhn-cream-dark);
	font-size: 0.95rem;
}
.vhn-manage-sidebar a:hover { background: var(--vhn-black-soft); color: var(--vhn-white); }
.vhn-manage-sidebar a.is-active { background: var(--vhn-gold); color: var(--vhn-black); font-weight: 600; }
.vhn-manage-content { flex: 1 1 auto; min-width: 0; }

.vhn-stat-card { display: flex; align-items: center; gap: 0.9rem; }
.vhn-stat-card .vhn-icon { width: 26px; height: 26px; color: var(--vhn-gold-dark); margin: 0; }
.vhn-stat-card strong { display: block; font-family: var(--vhn-font-display); font-size: 1.5rem; color: var(--vhn-black); line-height: 1.1; }
.vhn-stat-card span { font-size: 0.85rem; color: var(--vhn-ink-light); }

@media (max-width: 959px)
{
	.vhn-manage-shell { flex-direction: column; }
	.vhn-manage-sidebar
	{
		flex-direction: row;
		overflow-x: auto;
		width: 100%;
		border-radius: var(--vhn-radius);
	}
	.vhn-manage-sidebar a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Alerts / feedback ---------- */

.vhn-alert
{
	border-radius: var(--vhn-radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: var(--vhn-space-2);
	font-size: 0.95rem;
	border: 1px solid transparent;
}
.vhn-alert--info    { background: #eef3f7; color: #2c4a5e; border-color: #cfe0ea; }
.vhn-alert--success { background: #eaf3ec; color: var(--vhn-success); border-color: #cfe6d5; }
.vhn-alert--warning { background: var(--vhn-gold-light); color: #6b4d17; border-color: var(--vhn-gold); }
.vhn-alert--danger   { background: #f8e9e5; color: var(--vhn-danger); border-color: #eec7bb; }

/* ---------- Wizard ---------- */

.vhn-wizard-progress
{
	display: flex;
	gap: 0.4rem;
	margin-bottom: var(--vhn-space-3);
}
.vhn-wizard-progress span
{
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--vhn-border);
}
.vhn-wizard-progress span.is-done { background: var(--vhn-gold-dark); }
.vhn-wizard-progress span.is-active { background: var(--vhn-gold); }

.vhn-wizard-shell { max-width: 640px; margin: 0 auto; }

.vhn-wizard-actions
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--vhn-space-3);
	gap: 1rem;
}

/* ---------- The Box (UXR-001/002/003/004) ---------- */

.vhn-box-scene
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--vhn-space-5) var(--vhn-space-2);
	min-height: 60vh;
	background: radial-gradient(circle at 50% 30%, #201c14 0%, var(--vhn-black) 65%);
	color: var(--vhn-cream);
	border-radius: var(--vhn-radius-lg);
	position: relative;
	overflow: hidden;
}

.vhn-box
{
	width: 200px;
	height: 150px;
	position: relative;
	margin: 0 auto var(--vhn-space-3);
}

.vhn-box-glow
{
	position: absolute;
	inset: -70px;
	background: radial-gradient(circle, rgba(222,179,88,0.55) 0%, rgba(222,179,88,0) 70%);
	opacity: 0.35;
	transition: opacity 1.1s ease;
	pointer-events: none;
}
.vhn-box.is-open .vhn-box-glow { opacity: 1; }

.vhn-box-body
{
	position: absolute;
	inset: 42px 0 0 0;
	background: linear-gradient(160deg, #1c1a17 0%, var(--vhn-black) 100%);
	border: 1.5px solid var(--vhn-gold-dark);
	border-radius: 8px;
	box-shadow: 0 18px 44px -10px rgba(0,0,0,0.65);
}
.vhn-box-heart
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vhn-cream);
	z-index: 2;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.vhn-box-heart .vhn-icon { width: 34px; height: 34px; }

.vhn-box-lid
{
	position: absolute;
	top: 26px;
	left: -8px;
	right: -8px;
	height: 24px;
	background: linear-gradient(160deg, var(--vhn-gold) 0%, var(--vhn-gold-dark) 100%);
	border-radius: 6px;
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 6px 16px -4px rgba(0,0,0,0.5);
}
.vhn-box.is-open .vhn-box-lid { transform: rotate(-105deg) translate(-4px, -10px); }

.vhn-box-ribbon
{
	position: absolute;
	top: 26px;
	bottom: 0;
	left: 50%;
	width: 14px;
	margin-left: -7px;
	background: linear-gradient(180deg, var(--vhn-gold) 0%, var(--vhn-gold-dark) 100%);
	opacity: 0.9;
}

.vhn-box-sparkle
{
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--vhn-gold-light);
	opacity: 0;
	pointer-events: none;
}
.vhn-box.is-open .vhn-box-sparkle:nth-child(2) { animation: vhn-sparkle-rise 1.4s ease-out 0.05s forwards; }
.vhn-box.is-open .vhn-box-sparkle:nth-child(3) { animation: vhn-sparkle-rise 1.4s ease-out 0.2s forwards; }
.vhn-box.is-open .vhn-box-sparkle:nth-child(4) { animation: vhn-sparkle-rise 1.4s ease-out 0.35s forwards; }
.vhn-box.is-open .vhn-box-sparkle:nth-child(5) { animation: vhn-sparkle-rise 1.4s ease-out 0.5s forwards; }
@keyframes vhn-sparkle-rise
{
	0%   { opacity: 0; transform: translateY(0) scale(0.4); }
	30%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-70px) scale(1); }
}

.vhn-cards-float
{
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--vhn-space-3);
}
.vhn-card-float
{
	width: 90px;
	height: 120px;
	background: var(--vhn-cream);
	border-radius: 8px;
	box-shadow: var(--vhn-shadow);
	opacity: 0;
	transform: translateY(24px);
	animation: vhn-card-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes vhn-card-rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce)
{
	.vhn-box-lid { transition: none; }
	.vhn-box-glow { transition: none; }
	.vhn-box-sparkle { animation: none !important; opacity: 0; }
	.vhn-card-float { animation: none; opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Contribution card (leesomgeving) ---------- */

.vhn-contribution-card
{
	background: var(--vhn-white);
	border-radius: var(--vhn-radius-lg);
	box-shadow: var(--vhn-shadow);
	padding: var(--vhn-space-3);
	max-width: 520px;
	margin: 0 auto;
}
.vhn-contribution-meta
{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--vhn-space-2);
	color: var(--vhn-ink-light);
	font-size: 0.9rem;
}
.vhn-avatar
{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vhn-gold-light);
	color: #6b4d17;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--vhn-font-display);
}

/* ---------- Badges / chips ---------- */

.vhn-badge
{
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--vhn-gold-light);
	color: #6b4d17;
}
.vhn-badge--muted { background: var(--vhn-cream-dark); color: var(--vhn-ink-light); }

/* ---------- Bijdrage-tegels ---------- */

.vhn-tile { position: relative; overflow: hidden; }
.vhn-tile-type-icon { position: absolute; top: 0.9rem; right: 0.9rem; color: var(--vhn-gold-dark); opacity: 0.55; }
.vhn-tile-type-icon .vhn-icon { width: 20px; height: 20px; margin: 0; }
.vhn-tile--foto { background: linear-gradient(165deg, var(--vhn-cream) 0%, var(--vhn-white) 60%); }
.vhn-tile--audio { background: linear-gradient(165deg, #f6f1e4 0%, var(--vhn-white) 60%); }
.vhn-tile--video { background: linear-gradient(165deg, #f3ece0 0%, var(--vhn-white) 60%); }
.vhn-tile--brief { background: linear-gradient(165deg, #fbf6ec 0%, #f6efdd 100%); }
.vhn-tile--brief p { font-family: var(--vhn-font-display); font-size: 1.05rem; }

.vhn-audio-wave { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin: 0.5rem 0; }
.vhn-audio-wave span { width: 3px; background: var(--vhn-gold-dark); border-radius: 2px; opacity: 0.75; display: block; }

/* ---------- Iconen ---------- */

.vhn-icon
{
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	vertical-align: -0.25em;
	color: var(--vhn-gold-dark);
	flex-shrink: 0;
}

.vhn-card .vhn-icon:first-child
{
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: 0.6rem;
}

/* ---------- Footer ---------- */

.vhn-footer
{
	background: var(--vhn-black);
	color: var(--vhn-cream-dark);
	padding: var(--vhn-space-3) 0;
	font-size: 0.88rem;
}
.vhn-footer a { opacity: 0.75; }
.vhn-footer a:hover { opacity: 1; }
.vhn-footer-inner
{
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--vhn-space-3);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---------- Inschrijven (Founding Member wachtlijst) ---------- */

.vhn-signup-page
{
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: var(--vhn-space-4) var(--vhn-space-2);
	background: #0b0b0c url("images/vhn-hero-portrait.jpg") center 30% / cover no-repeat;
}

.vhn-signup-grid
{
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vhn-space-3);
	align-items: stretch;
}

.vhn-signup-card
{
	border-radius: 24px;
	padding: var(--vhn-space-4) var(--vhn-space-3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--vhn-white);
	min-height: 520px;
}

.vhn-signup-card--benefits
{
	background:
		linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.82)),
		url("images/vhn-hero-portrait.jpg") 8% 32% / cover no-repeat;
}
.vhn-signup-card--benefits h2 { font-family: var(--vhn-font-heading); color: var(--vhn-gold-mustard); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.vhn-signup-card--benefits ul { list-style: none; margin: 1.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.vhn-signup-card--benefits li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.05rem; }
.vhn-signup-card--benefits li::before { content: "\2713"; color: var(--vhn-gold-mustard); font-weight: 700; }
.vhn-signup-card--benefits .vhn-signup-note { font-weight: 600; margin-top: 0.5rem; }

.vhn-signup-card--form { background: rgba(0,0,0,0.79); }
.vhn-signup-card--form h2 { font-family: var(--vhn-font-heading); font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--vhn-white); margin-bottom: 0.9rem; }
.vhn-signup-card--form h2 span { color: var(--vhn-gold-mustard); display: block; }
.vhn-signup-card--form p { color: var(--vhn-cream-dark); }
.vhn-signup-card--form strong { color: var(--vhn-gold-mustard); font-weight: 700; }
.vhn-signup-form
{
	background: var(--vhn-white);
	border-radius: 16px;
	padding: var(--vhn-space-3);
	margin-top: 1.2rem;
}
.vhn-signup-form .vhn-label { color: var(--vhn-ink); }
.vhn-signup-form .vhn-label .vhn-required { color: var(--vhn-danger); }
.vhn-signup-form input { background: #f8fafc; }
.vhn-signup-form .vhn-btn { width: 100%; margin-top: 0.4rem; }

.vhn-signup-thanks { text-align: center; }
.vhn-signup-thanks .vhn-logo-heart { width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--vhn-gold-mustard); }

@media (max-width: 860px)
{
	.vhn-signup-grid { grid-template-columns: 1fr; }
	.vhn-signup-card--benefits { order: 2; min-height: 0; }
	.vhn-signup-card--form { order: 1; }
}

/* ---------- Login / narrow shells ---------- */

.vhn-shell-narrow
{
	max-width: 440px;
	margin: var(--vhn-space-5) auto;
	padding: 0 var(--vhn-space-2);
}

.vhn-shell-with-photo
{
	max-width: 920px;
	margin: var(--vhn-space-5) auto;
	padding: 0 var(--vhn-space-2);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vhn-space-4);
	align-items: center;
}
.vhn-shell-with-photo .vhn-shell-photo
{
	border-radius: var(--vhn-radius-lg);
	overflow: hidden;
	box-shadow: var(--vhn-shadow);
}
.vhn-shell-with-photo .vhn-shell-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.vhn-shell-with-photo .vhn-shell-form { max-width: 440px; margin: 0 auto; width: 100%; }

@media (max-width: 760px)
{
	.vhn-shell-with-photo { grid-template-columns: 1fr; }
	.vhn-shell-with-photo .vhn-shell-photo { display: none; }
}

.vhn-shell-narrow .vhn-logo-heart,
section.vhn-center > .vhn-logo-heart
{
	width: 48px;
	height: 48px;
	margin: 0 auto var(--vhn-space-2);
	color: var(--vhn-gold-dark);
}

.vhn-nav-toggle
{
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--vhn-cream);
	cursor: pointer;
	padding: 0;
}
.vhn-nav-toggle .vhn-icon { width: 22px; height: 22px; }
.vhn-nav-toggle-close { display: none; }
.vhn-nav-toggle[aria-expanded="true"] .vhn-nav-toggle-open { display: none; }
.vhn-nav-toggle[aria-expanded="true"] .vhn-nav-toggle-close { display: block; }

.vhn-visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Homepage: marketing-nav (alleen op de index voor bezoekers) ---------- */

.vhn-nav--marketing { gap: 1.6rem; }
.vhn-nav--marketing a { font-size: 1rem; opacity: 1; }
.vhn-nav--marketing .vhn-btn { margin-left: 0.4rem; white-space: nowrap; padding: 0.7rem 1.2rem; }

@media (max-width: 1080px)
{
	.vhn-header-inner:has(.vhn-nav--marketing) .vhn-nav-toggle { display: flex; }
	.vhn-nav--marketing
	{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--vhn-black);
		padding: var(--vhn-space-2) var(--vhn-space-3) var(--vhn-space-3);
		border-top: 1px solid rgba(251,246,236,0.12);
	}
	.vhn-nav--marketing.is-open { display: flex; }
	.vhn-nav--marketing a { padding: 0.75rem 0; border-bottom: 1px solid rgba(251,246,236,0.08); }
	.vhn-nav--marketing .vhn-btn { margin: 0.75rem 0 0; }
}

/* ---------- Homepage: hero v2 (sfeerfoto + tekst, obv www.vertelhetnu.nl) ---------- */

.vhn-hero-v2
{
	position: relative;
	background: radial-gradient(circle at 78% 45%, #241b0d 0%, var(--vhn-black) 62%);
	padding: var(--vhn-space-5) 0;
	overflow: hidden;
}

.vhn-hero-v2-layout { display: flex; align-items: center; gap: var(--vhn-space-4); }
.vhn-hero-v2-inner { position: relative; max-width: 600px; flex: 1 1 52%; }
.vhn-hero-v2-photo
{
	flex: 1 1 46%;
	align-self: stretch;
	min-height: 420px;
	border-radius: var(--vhn-radius-lg);
	overflow: hidden;
	box-shadow: var(--vhn-glow), var(--vhn-shadow);
}
.vhn-hero-v2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 42%; }

@media (max-width: 900px)
{
	.vhn-hero-v2-layout { flex-direction: column; align-items: stretch; }
	.vhn-hero-v2-inner { max-width: none; }
	.vhn-hero-v2-photo { min-height: 280px; }
}
.vhn-hero-v2 h1
{
	font-size: clamp(2.1rem, 3.6vw, 3.4rem);
	font-weight: 800;
	color: var(--vhn-cream);
	line-height: 1.15;
}
.vhn-hero-v2 h1 span, .vhn-hero-v2 h1 em { color: var(--vhn-gold-mustard); font-style: italic; }
.vhn-hero-v2-lead { font-size: 1.15rem; color: var(--vhn-cream-dark); max-width: 44em; }

.vhn-kicker { font-family: var(--vhn-font-display); font-style: italic; font-size: 1.2rem; color: var(--vhn-gold-mustard); margin: 0 0 0.6em; }
.vhn-hero-v2 .vhn-kicker { margin-top: 0; }

.vhn-cta-block { margin-top: var(--vhn-space-3); }
.vhn-cta-block .vhn-btn { font-size: 1.15rem; padding: 1rem 1.6rem; }
.vhn-cta-block--dual { display: flex; gap: 1rem; flex-wrap: wrap; }
.vhn-cta-sub { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--vhn-cream-dark); opacity: 0.85; }
.vhn-cta-sub em { color: var(--vhn-gold-mustard); font-style: normal; }

/* ---------- Homepage: feature-grid (4 kolommen met icoon-bubbel) ---------- */

.vhn-feature-grid { background: var(--vhn-cream); padding: var(--vhn-space-4) 0; margin-top: -1px; }
.vhn-feature-grid-inner
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vhn-space-3);
	text-align: center;
}
.vhn-feature-grid-inner .vhn-icon-bubble { width: 56px; height: 56px; margin: 0 auto 0.9rem; }
.vhn-feature-grid-inner .vhn-icon-bubble .vhn-icon { width: 26px; height: 26px; }
.vhn-feature-grid-inner strong { display: block; color: var(--vhn-black); margin-bottom: 0.3rem; }
.vhn-feature-grid-inner p { margin: 0; font-size: 0.92rem; color: var(--vhn-ink-light); }

@media (max-width: 760px)
{
	.vhn-feature-grid-inner { grid-template-columns: 1fr 1fr; gap: var(--vhn-space-4) var(--vhn-space-2); }
}

/* ---------- Homepage: "Hoe het werkt" — genummerde stappen ---------- */

.vhn-steps { padding: var(--vhn-space-5) 0; }
.vhn-steps-divider { color: var(--vhn-gold-dark); font-size: 1.3rem; margin: 0.4rem 0 var(--vhn-space-4); }
.vhn-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vhn-space-3); position: relative; }
.vhn-steps-row::before
{
	content: "";
	position: absolute;
	top: 18px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--vhn-border) 0 8px, transparent 8px 14px);
	z-index: 0;
}
.vhn-step { position: relative; text-align: center; z-index: 1; }
.vhn-step-number
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	border: 1px solid var(--vhn-gold-dark);
	background: var(--vhn-cream);
	color: var(--vhn-gold-dark);
	font-family: var(--vhn-font-heading);
	font-weight: 600;
}
.vhn-step .vhn-icon { width: 2.6rem; height: 2.6rem; color: var(--vhn-gold-dark); margin-bottom: 0.7rem; }
.vhn-step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.vhn-step p { margin: 0; font-size: 0.9rem; color: var(--vhn-ink-light); }

@media (max-width: 760px)
{
	.vhn-steps-row { grid-template-columns: 1fr 1fr; gap: var(--vhn-space-4) var(--vhn-space-2); }
	.vhn-steps-row::before { display: none; }
}

/* ---------- Homepage: "Voor wie zou jij een kluis openen?" banner ---------- */

.vhn-banner-voorwie
{
	background: radial-gradient(circle at 50% 120%, var(--vhn-gold-dark) 0%, var(--vhn-gold-mustard) 70%);
	padding: 3.2rem 0;
	text-align: center;
}
.vhn-banner-voorwie h2
{
	color: var(--vhn-white);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	margin: 0;
}

/* ---------- Homepage: "Meer dan een cadeau" ---------- */

.vhn-inspiratie { background: var(--vhn-cream-dark); padding: var(--vhn-space-5) var(--vhn-space-2); }
.vhn-inspiratie-grid
{
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--vhn-space-4);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}
.vhn-inspiratie-tekst h2 { margin-bottom: 0.3rem; }
.vhn-inspiratie-tekst .vhn-kicker { margin-bottom: 1rem; }
.vhn-inspiratie-foto { border-radius: var(--vhn-radius-lg); overflow: hidden; box-shadow: var(--vhn-shadow); }
.vhn-inspiratie-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px)
{
	.vhn-inspiratie-grid { grid-template-columns: 1fr; }
}

/* ---------- Homepage: quote-band ---------- */

.vhn-quote-band { background: var(--vhn-cream-dark); padding: 0 0 var(--vhn-space-4); text-align: center; }
.vhn-quote { font-family: var(--vhn-font-display); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--vhn-black); margin: 0; }
.vhn-quote-divider { color: var(--vhn-gold-dark); margin: 0.7rem 0 0; }

/* ---------- Homepage: laatste CTA-band met sfeerfoto ---------- */

.vhn-final-band { position: relative; padding: var(--vhn-space-5) 0; text-align: center; overflow: hidden; }
.vhn-final-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vhn-final-band::before { content: ""; position: absolute; inset: 0; background: rgba(9,8,7,0.62); }
.vhn-final-band-inner { position: relative; }
.vhn-final-band h2 { color: var(--vhn-white); font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 0.4rem; }
.vhn-final-band p { color: var(--vhn-cream-dark); margin-bottom: var(--vhn-space-3); }
.vhn-trust-list
{
	list-style: none;
	margin: var(--vhn-space-3) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--vhn-space-3);
}
.vhn-trust-list li { display: flex; align-items: center; gap: 0.4rem; color: var(--vhn-cream-dark); font-size: 0.9rem; }
.vhn-trust-list .vhn-icon { width: 1.1em; height: 1.1em; margin: 0; color: var(--vhn-gold-mustard); }

/* ---------- Homepage: FAQ ---------- */

.vhn-faq { background: var(--vhn-black); color: var(--vhn-cream); padding: var(--vhn-space-5) 0; }
.vhn-faq h2 { font-family: var(--vhn-font-heading); color: var(--vhn-white); text-align: center; margin-bottom: var(--vhn-space-4); }
.vhn-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.vhn-faq-item
{
	background: var(--vhn-white);
	border-radius: var(--vhn-radius);
	padding: 0;
	overflow: hidden;
}
.vhn-faq-item summary
{
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
	color: var(--vhn-ink);
}
.vhn-faq-item summary::-webkit-details-marker { display: none; }
.vhn-faq-item summary .vhn-icon { color: var(--vhn-ink-light); transition: transform 0.2s ease; }
.vhn-faq-item[open] summary .vhn-icon { transform: rotate(180deg); }
.vhn-faq-item-body { padding: 0 1.3rem 1.3rem; color: var(--vhn-ink-light); font-size: 0.96rem; }
.vhn-faq-item-body p { margin: 0 0 0.8em; }
.vhn-faq-item-body ul { margin: 0 0 0.8em; padding-left: 1.2em; }
.vhn-faq-item-body em { color: var(--vhn-ink); font-style: normal; font-weight: 600; }

/* ---------- Login (herontwerp obv mock-up 2) ---------- */

.vhn-login { padding: var(--vhn-space-5) 0 var(--vhn-space-4); }

.vhn-login-grid
{
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: var(--vhn-space-4);
	align-items: stretch;
	max-width: 980px;
	margin: 0 auto;
}

.vhn-login-col { max-width: 440px; width: 100%; margin: 0 auto; }

.vhn-login-brand
{
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--vhn-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--vhn-gold-dark);
	margin-bottom: var(--vhn-space-4);
}
.vhn-login-brand .vhn-logo-heart { color: var(--vhn-gold-dark); width: 34px; height: 34px; }

.vhn-login-heading { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.vhn-heart-accent { color: var(--vhn-gold-dark); font-size: 0.7em; }

.vhn-login-card { margin-top: var(--vhn-space-3); }

.vhn-login-card-head
{
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin-bottom: var(--vhn-space-3);
}
.vhn-login-card-head strong { display: block; color: var(--vhn-black); }
.vhn-login-card-head p { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--vhn-ink-light); }

.vhn-icon-bubble
{
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vhn-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vhn-icon-bubble .vhn-icon { width: 22px; height: 22px; margin: 0; color: var(--vhn-gold-dark); }

.vhn-login-safe
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--vhn-ink-light);
	margin: 0.9rem 0 0;
}
.vhn-login-safe .vhn-icon { width: 1.1em; height: 1.1em; color: var(--vhn-gold-dark); }

.vhn-login-divider
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 1.1rem 0;
	color: var(--vhn-ink-light);
	font-size: 0.85rem;
}
.vhn-login-divider::before, .vhn-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--vhn-border); }

.vhn-login-new
{
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--vhn-cream-dark);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-2) var(--vhn-space-3);
	margin-top: var(--vhn-space-3);
}
.vhn-login-new .vhn-icon-bubble { background: var(--vhn-white); }
.vhn-login-new strong { display: block; color: var(--vhn-black); }
.vhn-login-new p { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--vhn-ink-light); }
.vhn-login-arrow { margin-left: auto; color: var(--vhn-ink-light); font-size: 1.2rem; }

.vhn-login-help { text-align: center; margin-top: var(--vhn-space-4); }
.vhn-login-help h2 { font-family: var(--vhn-font-heading); font-size: 1rem; font-weight: 600; color: var(--vhn-black); margin-bottom: 0.8rem; }
.vhn-login-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vhn-login-help li { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.92rem; }
.vhn-login-help .vhn-icon { width: 1.1em; height: 1.1em; margin: 0; color: var(--vhn-gold-dark); }
.vhn-login-help a { color: var(--vhn-ink); }
.vhn-login-help a:hover { color: var(--vhn-gold-dark); }

.vhn-login-footer { text-align: center; margin-top: var(--vhn-space-4); font-size: 0.82rem; color: var(--vhn-ink-light); }
.vhn-login-footer p { margin: 0 0 0.4em; }
.vhn-login-footer a { color: var(--vhn-ink-light); }
.vhn-login-footer a:hover { color: var(--vhn-gold-dark); }

.vhn-login-photo { border-radius: var(--vhn-radius-lg); overflow: hidden; box-shadow: var(--vhn-shadow); min-height: 420px; }
.vhn-login-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px)
{
	.vhn-login-grid { grid-template-columns: 1fr; max-width: 440px; }
	.vhn-login-photo { display: none; }
}

.vhn-feature-strip
{
	max-width: 980px;
	margin: var(--vhn-space-4) auto 0;
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-3);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.vhn-feature-strip > div { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0 var(--vhn-space-2); border-left: 1px solid var(--vhn-border); }
.vhn-feature-strip > div:first-child { border-left: none; padding-left: 0; }
.vhn-feature-strip .vhn-icon { width: 26px; height: 26px; margin-top: 0.1rem; color: var(--vhn-gold-dark); flex: 0 0 auto; }
.vhn-feature-strip strong { display: block; font-size: 0.95rem; color: var(--vhn-black); }
.vhn-feature-strip p { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--vhn-ink-light); }

@media (max-width: 760px)
{
	.vhn-feature-strip { grid-template-columns: 1fr 1fr; gap: var(--vhn-space-3) 0; padding: var(--vhn-space-2); }
	.vhn-feature-strip > div:nth-child(3) { border-left: none; }
	.vhn-feature-strip > div:nth-child(2n) { border-left: 1px solid var(--vhn-border); }
}

@media (max-width: 640px)
{
	.vhn-nav-toggle { display: flex; }
	.vhn-nav
	{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--vhn-black);
		padding: var(--vhn-space-2) var(--vhn-space-3) var(--vhn-space-3);
		border-top: 1px solid rgba(251,246,236,0.12);
	}
	.vhn-nav.is-open { display: flex; }
	.vhn-nav a { padding: 0.75rem 0; border-bottom: 1px solid rgba(251,246,236,0.08); }
	.vhn-wizard-actions { flex-direction: column-reverse; align-items: stretch; }
	.vhn-btn--block-mobile { width: 100%; }
}

/* ---------- Wizard v2: "Nieuwe kluis aanmaken" (mockups/nieuwe-kluis-stap-*.png) ---------- */

.vhn-wizard-shell--v2 { max-width: 1180px; margin: 0 auto; }
.vhn-wizard-head h1 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.vhn-wizard-head .vhn-hint { margin: 0.2rem 0 0; }

.vhn-wizard-stappen { display: flex; align-items: flex-start; margin: var(--vhn-space-3) 0; overflow-x: auto; }
.vhn-wizard-stap { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1 1 auto; min-width: 84px; }
.vhn-wizard-stap-bol
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--vhn-border);
	background: var(--vhn-white);
	color: var(--vhn-ink-light);
	font-family: var(--vhn-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	z-index: 1;
}
.vhn-wizard-stap-bol .vhn-icon { width: 15px; height: 15px; margin: 0; color: inherit; }
.vhn-wizard-stap.is-done .vhn-wizard-stap-bol { background: var(--vhn-gold-dark); border-color: var(--vhn-gold-dark); color: var(--vhn-white); }
.vhn-wizard-stap.is-active .vhn-wizard-stap-bol { background: var(--vhn-rose); border-color: var(--vhn-rose); color: var(--vhn-white); }
.vhn-wizard-stap-label { margin-top: 0.4rem; font-size: 0.8rem; color: var(--vhn-ink-light); white-space: nowrap; }
.vhn-wizard-stap.is-active .vhn-wizard-stap-label { color: var(--vhn-black); font-weight: 700; }
.vhn-wizard-stap-lijn { position: absolute; top: 17px; left: 50%; width: 100%; height: 1px; background: var(--vhn-border); z-index: 0; }
.vhn-wizard-stap.is-done .vhn-wizard-stap-lijn { background: var(--vhn-gold-dark); }

.vhn-wizard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--vhn-space-3); align-items: start; }
.vhn-wizard-grid .vhn-card { padding: var(--vhn-space-3); }

.vhn-required { color: var(--vhn-rose); }
.vhn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--vhn-space-2); }

.vhn-info-band
{
	display: flex;
	gap: 0.8rem;
	background: var(--vhn-cream-dark);
	border-radius: var(--vhn-radius);
	padding: var(--vhn-space-2);
	margin-top: var(--vhn-space-2);
}
.vhn-info-band .vhn-icon { width: 20px; height: 20px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.1rem; }
.vhn-info-band strong { display: block; font-size: 0.92rem; color: var(--vhn-black); }
.vhn-info-band p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--vhn-ink-light); }

/* Stap 1: gelegenheid-kaarten */
.vhn-gelegenheid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vhn-space-2); margin-top: var(--vhn-space-2); }
.vhn-gelegenheid-card
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	padding: var(--vhn-space-2);
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	cursor: pointer;
}
.vhn-gelegenheid-card input { position: absolute; opacity: 0; pointer-events: none; }
.vhn-gelegenheid-card:hover { border-color: var(--vhn-gold); }
.vhn-gelegenheid-card.is-selected { border-color: var(--vhn-gold-dark); background: var(--vhn-cream-dark); }
.vhn-gelegenheid-card .vhn-icon { width: 2.2rem; height: 2.2rem; color: var(--vhn-gold-dark); margin: 0.2rem 0; }
.vhn-gelegenheid-card strong { font-size: 0.95rem; }
.vhn-gelegenheid-card p { margin: 0; font-size: 0.8rem; color: var(--vhn-ink-light); }
.vhn-gelegenheid-check
{
	display: none;
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vhn-gold-dark);
	color: var(--vhn-white);
	align-items: center;
	justify-content: center;
}
.vhn-gelegenheid-check .vhn-icon { width: 10px; height: 10px; margin: 0; color: var(--vhn-white); }
.vhn-gelegenheid-card.is-selected .vhn-gelegenheid-check { display: flex; }

.vhn-gelegenheid-anders
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius-lg);
	padding: var(--vhn-space-2);
	margin-top: var(--vhn-space-2);
	cursor: pointer;
}
.vhn-gelegenheid-anders input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.vhn-gelegenheid-anders.is-selected { border-color: var(--vhn-gold-dark); background: var(--vhn-cream-dark); }
.vhn-gelegenheid-anders .vhn-icon:first-of-type { width: 1.8rem; height: 1.8rem; color: var(--vhn-gold-dark); flex: 0 0 auto; }
.vhn-gelegenheid-anders strong { display: block; font-size: 0.92rem; }
.vhn-gelegenheid-anders p { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--vhn-ink-light); }
.vhn-gelegenheid-anders input[type="text"] { flex: 0 0 220px; max-width: 40%; }

@media (max-width: 760px)
{
	.vhn-gelegenheid-grid { grid-template-columns: 1fr 1fr; }
	.vhn-gelegenheid-anders { flex-wrap: wrap; }
	.vhn-gelegenheid-anders input[type="text"] { flex: 1 1 100%; max-width: none; }
}

/* Stap 3: datum-kalender */
.vhn-datum-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--vhn-space-3); margin-top: var(--vhn-space-2); }
.vhn-datum-cal { border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); }
.vhn-datum-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--vhn-space-2); font-weight: 700; }
.vhn-datum-cal-head button { background: none; border: none; color: var(--vhn-ink); cursor: pointer; padding: 0.3rem; }
.vhn-datum-cal-head .vhn-icon { width: 16px; height: 16px; }
.vhn-icon-flip { transform: scaleX(-1); }
.vhn-datum-cal-weekdagen, .vhn-datum-cal-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; text-align: center; }
.vhn-datum-cal-weekdagen span { font-size: 0.75rem; color: var(--vhn-ink-light); font-weight: 700; padding: 0.3rem 0; }
.vhn-datum-cal-dagen button
{
	aspect-ratio: 1;
	border: none;
	background: none;
	border-radius: 50%;
	font-size: 0.88rem;
	color: var(--vhn-ink);
	cursor: pointer;
}
.vhn-datum-cal-dagen button:hover:not(:disabled) { background: var(--vhn-cream-dark); }
.vhn-datum-cal-dagen button:disabled { color: var(--vhn-border); cursor: not-allowed; }
.vhn-datum-cal-dagen button.is-selected { background: var(--vhn-rose); color: var(--vhn-white); }

.vhn-datum-side { border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); }
.vhn-datum-selected { font-family: var(--vhn-font-display); font-weight: 700; font-size: 1.6rem; color: var(--vhn-rose); margin: 0; }
.vhn-datum-side hr { border: none; border-top: 1px solid var(--vhn-border); margin: var(--vhn-space-2) 0; }
.vhn-datum-checklist { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; }
.vhn-datum-checklist .vhn-icon { width: 14px; height: 14px; color: var(--vhn-success); margin-right: 0.3rem; }
.vhn-datum-lock { display: flex; align-items: center; gap: 0.5rem; background: var(--vhn-cream-dark); border-radius: var(--vhn-radius); padding: 0.7rem; margin-top: var(--vhn-space-2); font-size: 0.82rem; }
.vhn-datum-lock .vhn-icon { width: 16px; height: 16px; color: var(--vhn-gold-dark); flex: 0 0 auto; }

.vhn-datum-alt { display: flex; align-items: center; gap: 0.8rem; margin-top: var(--vhn-space-3); padding-top: var(--vhn-space-2); border-top: 1px solid var(--vhn-border); }
.vhn-datum-alt .vhn-icon { width: 20px; height: 20px; color: var(--vhn-gold-dark); flex: 0 0 auto; }
.vhn-datum-alt strong { display: block; font-size: 0.92rem; }
.vhn-datum-alt p { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--vhn-ink-light); }
.vhn-datum-alt .vhn-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 760px)
{
	.vhn-datum-grid { grid-template-columns: 1fr; }
	.vhn-datum-alt { flex-wrap: wrap; }
	.vhn-datum-alt .vhn-btn { margin-left: 0; }
}

/* Stap 4: instellingen-kaarten */
.vhn-instellingen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vhn-space-2); margin-top: var(--vhn-space-2); }
.vhn-instellingen-card { border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); }
.vhn-instellingen-card > .vhn-icon { width: 22px; height: 22px; color: var(--vhn-gold-dark); }
.vhn-instellingen-card strong { display: block; margin-top: 0.4rem; }
.vhn-instellingen-card > p { margin: 0.15rem 0 0.7rem; font-size: 0.85rem; color: var(--vhn-ink-light); }
.vhn-instellingen-card .vhn-hint { margin-top: 0.6rem; }

.vhn-pill-choice { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vhn-pill-choice label
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--vhn-border);
	border-radius: var(--vhn-radius);
	padding: 0.5rem 0.9rem;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	flex: 1 1 auto;
	justify-content: center;
}
.vhn-pill-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vhn-pill-choice .vhn-icon { width: 15px; height: 15px; }
.vhn-pill-choice label.is-selected { border-color: var(--vhn-rose); color: var(--vhn-rose); background: rgba(161, 85, 76, 0.08); }
.vhn-pill-choice--ja-nee label { flex: 0 1 70px; }

.vhn-select { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius); background: var(--vhn-white); font-family: inherit; font-size: 0.85rem; color: var(--vhn-ink); text-overflow: ellipsis; }

.vhn-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.vhn-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.vhn-switch span { position: absolute; inset: 0; background: var(--vhn-border); border-radius: 999px; transition: background 0.15s ease; }
.vhn-switch span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--vhn-white); border-radius: 50%; transition: transform 0.15s ease; box-shadow: var(--vhn-shadow-sm); }
.vhn-switch input:checked + span { background: var(--vhn-rose); }
.vhn-switch input:checked + span::before { transform: translateX(18px); }

@media (max-width: 760px)
{
	.vhn-instellingen-grid { grid-template-columns: 1fr; }
}

/* Stap 5: overzicht */
.vhn-overzicht-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vhn-space-2); margin-top: var(--vhn-space-2); }
.vhn-overzicht-card { display: flex; align-items: flex-start; gap: 0.7rem; border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); }
.vhn-overzicht-card > .vhn-icon { width: 20px; height: 20px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.15rem; }
.vhn-overzicht-card > div { flex: 1 1 auto; }
.vhn-overzicht-card strong { display: block; }
.vhn-overzicht-card p { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--vhn-ink-light); }
.vhn-overzicht-card a { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--vhn-gold-dark); }
.vhn-overzicht-lijst { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.vhn-overzicht-lijst .vhn-icon { width: 13px; height: 13px; color: var(--vhn-gold-dark); margin-right: 0.3rem; }

@media (max-width: 760px)
{
	.vhn-overzicht-grid { grid-template-columns: 1fr; }
}

.vhn-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vhn-space-2); margin-top: var(--vhn-space-3); }
.vhn-trust-row > div { display: flex; align-items: flex-start; gap: 0.5rem; }
.vhn-trust-row .vhn-icon { width: 17px; height: 17px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.15rem; }
.vhn-trust-row strong { display: block; font-size: 0.85rem; }
.vhn-trust-row p { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--vhn-ink-light); }

@media (max-width: 900px)
{
	.vhn-trust-row { grid-template-columns: 1fr 1fr; }
}

.vhn-wizard-cancel { display: inline-flex; align-items: center; padding: 0.85rem 1rem; color: var(--vhn-ink-light); font-weight: 600; }
.vhn-wizard-cancel:hover { color: var(--vhn-rose); }

/* Live voorbeeldpaneel */
.vhn-voorbeeldpaneel { border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); background: var(--vhn-white); position: sticky; top: var(--vhn-space-2); }
.vhn-voorbeeldpaneel h2 { text-align: center; font-size: 1rem; margin: 0 0 0.8rem; }
.vhn-voorbeeldpaneel-foto { border-radius: var(--vhn-radius); overflow: hidden; margin-bottom: var(--vhn-space-2); aspect-ratio: 4/3; }
.vhn-voorbeeldpaneel-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhn-voorbeeldpaneel-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--vhn-border); }
.vhn-voorbeeldpaneel-item .vhn-icon { width: 17px; height: 17px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.2rem; }
.vhn-voorbeeldpaneel-item > div { flex: 1 1 auto; }
.vhn-voorbeeldpaneel-item strong { display: block; font-size: 0.9rem; }
.vhn-voorbeeldpaneel-item a { flex: 0 0 auto; font-size: 0.8rem; color: var(--vhn-gold-dark); font-weight: 600; }
.vhn-voorbeeldpaneel-features { border-top: 1px solid var(--vhn-border); margin-top: 0.4rem; padding-top: var(--vhn-space-2); display: flex; flex-direction: column; gap: 0.8rem; }
.vhn-voorbeeldpaneel-features > div { display: flex; gap: 0.6rem; font-size: 0.82rem; color: var(--vhn-ink-light); }
.vhn-voorbeeldpaneel-features .vhn-icon { width: 16px; height: 16px; color: var(--vhn-gold-dark); flex: 0 0 auto; margin-top: 0.1rem; }
.vhn-voorbeeldpaneel-features strong { color: var(--vhn-black); }

@media (max-width: 900px)
{
	.vhn-wizard-grid { grid-template-columns: 1fr; }
	.vhn-voorbeeldpaneel { position: static; }
}

/* Stap 6: afronden */
.vhn-klaar-banner { display: flex; align-items: center; gap: var(--vhn-space-3); border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-3); }
.vhn-klaar-hart { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; background: var(--vhn-cream-dark); display: flex; align-items: center; justify-content: center; }
.vhn-klaar-hart .vhn-icon:first-child { width: 42px; height: 42px; color: var(--vhn-gold-dark); }
.vhn-klaar-sparkle { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; color: var(--vhn-gold); }
.vhn-klaar-banner h2 { margin: 0 0 0.3rem; }
.vhn-klaar-banner p { margin: 0; color: var(--vhn-ink-light); }

.vhn-wat-nu-heading { margin: var(--vhn-space-3) 0 0.8rem; }
.vhn-wat-nu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vhn-space-2); }
.vhn-wat-nu-card { display: block; border: 1px solid var(--vhn-border); border-radius: var(--vhn-radius-lg); padding: var(--vhn-space-2); color: var(--vhn-ink); }
.vhn-wat-nu-card:hover { border-color: var(--vhn-gold); }
.vhn-wat-nu-card strong { display: block; margin: 0.6rem 0 0.2rem; color: var(--vhn-black); }
.vhn-wat-nu-card p { margin: 0; font-size: 0.85rem; color: var(--vhn-ink-light); }
.vhn-wat-nu-link { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--vhn-gold-dark); }

.vhn-klaar-footer { display: flex; align-items: center; gap: 0.6rem; background: var(--vhn-cream-dark); border-radius: var(--vhn-radius); padding: var(--vhn-space-2); margin-top: var(--vhn-space-3); font-size: 0.9rem; }
.vhn-klaar-footer .vhn-icon { width: 18px; height: 18px; color: var(--vhn-gold-dark); flex: 0 0 auto; }

@media (max-width: 760px)
{
	.vhn-wat-nu-grid { grid-template-columns: 1fr; }
}