/* Vaylide — huisstijl voor de website, klantomgeving en beheer.
   Warm crème als basis, goud als accent, diep bosgroen voor contrast.
   Titels: Playfair Display. Tekst: DM Sans. Zachte panelen met ronde hoeken,
   dunne gouden lijniconen en één duidelijke knop per blok. */

@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin-wght-normal.ef05b30d6e5c.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin-wght-italic.2175449f9d44.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-wght-normal.7c87a648293f.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  color-scheme: light;
  --ivory: #FBF8F2;
  --ivory-2: #F5EEE6;
  --paper: #FFFDF9;
  --accent: #8E6A3B;
  --accent-2: #7C5B30;
  --accent-dark: #5F4524;
  --accent-text: #7A5A2E;
  --gold: #C4A574;
  --gold-soft: #EADFC9;
  --gold-deep: #7A5A2E;
  --forest: #1E251C;
  --on-dark: #F7F1E7;
  --on-dark-muted: #D9CDB8;
  --ink: #26211D;
  --ink-2: #3F3833;
  --muted: #6B625A;
  --line: #E9E0D2;
  --line-strong: #D6C8B4;
  --success: #2E6A45;
  --success-bg: #E7F2EA;
  --warning: #7A4F00;
  --warning-bg: #FBF0D9;
  --error: #9B1C1C;
  --error-bg: #FBE9E7;
  --info-bg: #EEF0F2;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(38, 33, 29, .05);
  --shadow: 0 22px 44px -30px rgba(70, 50, 25, .45);
  --shadow-float: 0 34px 60px -26px rgba(55, 38, 18, .55);
  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --section: clamp(3rem, 7vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ivory); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
}
main { flex: 1; }
main:focus { outline: none; }
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .6em; color: var(--ink); text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.35rem); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.icon { display: inline-block; flex: none; vertical-align: middle; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--paper); color: var(--ink); padding: .6rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 46rem; }
.container--mid { max-width: 58rem; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .9rem; }
.lead { font-size: clamp(1.05rem, 2vw, 1.18rem); color: var(--ink-2); max-width: 36rem; }
.measure { max-width: 40rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.aside-line { margin-top: 2.5rem; color: var(--muted); }

/* ---------- Testmodus ---------- */
.test-banner { background: var(--forest); color: var(--on-dark-muted); text-align: center; font-size: .8rem; padding: .35rem var(--gutter); line-height: 1.4; }
.test-banner strong { color: var(--gold-soft); letter-spacing: .03em; }

/* ---------- Logo ---------- */
/* Het logo zoals aangeleverd (tools/logo): V, naam en de regel eronder in één beeld. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; border-radius: var(--radius-sm); }
.logo__img { display: block; width: auto; height: 4.5rem; }

/* ---------- Kop ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(251, 248, 242, .93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.page-home .site-header { border-bottom-color: transparent; }
.site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 5.25rem; }
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: clamp(1.25rem, 2.6vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
.site-nav a { position: relative; display: inline-block; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .45rem 0; }
.site-nav a::after { content: ""; position: absolute; left: 50%; bottom: -.3rem; width: 1.2rem; height: 2px; border-radius: 2px; background: var(--accent); transform: translateX(-50%) scaleX(0); transition: transform .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: .3rem; }
.icon-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); text-decoration: none; }
.icon-link:hover { color: var(--accent-text); background: var(--ivory-2); }
.icon-link .icon { width: 1.45rem; height: 1.45rem; }
.site-header__account { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem 0 .7rem; margin-left: .2rem;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.site-header__account .icon { width: 1.2rem; height: 1.2rem; }
.site-header__account:hover { border-color: var(--accent); color: var(--accent-text); background: var(--paper); }
.link-quiet { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 0 .4rem; }
.link-quiet:hover { color: var(--accent-text); }
.site-header__cta { margin-left: .7rem; }
.mobile-nav { display: none; }
.mobile-nav__toggle { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.mobile-nav__toggle::-webkit-details-marker { display: none; }
.mobile-nav__toggle:hover { background: var(--ivory-2); }
.mobile-nav__bars, .mobile-nav__bars::before, .mobile-nav__bars::after { display: block; width: 20px; height: 1.6px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s, background-color .2s; }
.mobile-nav__bars::before, .mobile-nav__bars::after { content: ""; position: absolute; left: 0; }
.mobile-nav__bars::before { top: -6px; }
.mobile-nav__bars::after { top: 6px; }
.mobile-nav[open] .mobile-nav__bars { background: transparent; }
.mobile-nav[open] .mobile-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.mobile-nav[open] .mobile-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 5rem); overflow-y: auto; padding: .5rem var(--gutter) 1.5rem; background: var(--ivory); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.mobile-nav__panel ul { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.mobile-nav__panel li a { display: block; padding: .8rem .1rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; font-size: 1.05rem; }
.mobile-nav__panel li a[aria-current="page"] { color: var(--accent-text); }
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-header__actions { margin-left: auto; }
  .mobile-nav { display: block; }
}
@media (max-width: 640px) {
  .site-header__inner { min-height: 4.4rem; gap: .5rem; }
  /* Op de telefoon blijft alleen 'Inloggen' (of 'Mijn VAYLIDE') rechtsboven staan, naast het menu. */
  .site-header__actions { margin-left: auto; }
  .site-header__actions > :not(.site-header__account) { display: none; }
  .site-header__account { min-height: 40px; padding: 0 .75rem 0 .6rem; font-size: .85rem; }
  .mobile-nav { margin-left: .2rem; }
  .logo__img { height: 3.6rem; }
}
@media (max-width: 380px) { .site-header__account span { display: none; } .site-header__account { padding: 0 .6rem; } }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 1.15rem; height: 1.15rem; transition: transform .2s; }
.btn:hover .icon { transform: translateX(2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); color: #fff; }
.btn--secondary { background: rgba(255, 253, 249, .6); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.btn--secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--danger { background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }
.btn--danger:hover { background: var(--error-bg); }
.btn--sm { min-height: 40px; padding: .45rem 1.1rem; font-size: .92rem; }
.btn--lg { min-height: 54px; padding: .85rem 1.75rem; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: center; }
.btn-row--center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--ink); }
.link-arrow::after { content: "→"; color: var(--accent); transition: transform .2s; }
.link-arrow:hover { color: var(--accent-text); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Secties ---------- */
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(2rem, 5vw, 3rem) 0; }
.section--flush { padding-top: 0; }
.section--line > .container { border-top: 1px solid var(--line); padding-top: var(--section); }
.section--line { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: clamp(1.4rem, 3.5vw, 2rem); }
.section-head h2 { margin: 0; }
.page-head { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
.page-head .lead { margin-bottom: 0; }
.breadcrumbs { font-size: .9rem; margin-bottom: 1rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.panel-soft { background: var(--ivory-2); border-radius: var(--radius-xl); padding: clamp(1.75rem, 4.5vw, 3rem); }

/* ---------- Hero: een 3D-wereld over de volle breedte ---------- */
/* De wereld (zachte lichten, foto met vervloeiende randen en sterretjes) loopt door achter en onder de tekst en
   vloeit onderaan over in de volgende sectie: geen harde randen. hero3d.js zet --rx, --ry, --gx, --gy, --px en --py. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ivory); }
.hero--wereld {
  background:
    radial-gradient(60% 70% at 18% 30%, #FFF4E6 0%, transparent 70%),
    radial-gradient(55% 60% at 80% 40%, #F6E3CF 0%, transparent 72%),
    linear-gradient(180deg, #FBF1E6 0%, #F8EEE3 70%, var(--ivory) 100%);
}
.hero__wereld { position: absolute; inset: 0; pointer-events: none; }
.hero__licht { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hero__licht--1 { left: -8%; top: 8%; width: 46vw; height: 46vw; max-width: 44rem; max-height: 44rem; background: radial-gradient(circle, #FFE7C4, transparent 65%); }
.hero__licht--2 { left: 28%; bottom: -30%; width: 50vw; height: 40vw; max-width: 48rem; max-height: 38rem; background: radial-gradient(circle, #F7D9C8, transparent 65%); }
.hero__licht--3 { right: -6%; top: -18%; width: 40vw; height: 40vw; max-width: 40rem; max-height: 40rem; background: radial-gradient(circle, #F3E1B5, transparent 65%); }
.hero__sparkles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
/* Onderrand: de wereld vloeit zacht over in de ivoorkleur van de volgende sectie. */
.hero--wereld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--ivory)); }
.hero__inner { position: relative; z-index: 3; pointer-events: none; min-height: clamp(35rem, 44vw, 42rem); display: flex; align-items: center; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(4rem, 7vw, 5.5rem); }
.hero__text { max-width: 46rem; pointer-events: auto; }
.hero__text h1 { max-width: 40rem; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); line-height: 1.12; margin-bottom: 1.3rem; }
.hero h1 em { font-style: italic; color: var(--accent-text); }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.15rem); margin-bottom: 2.1rem; max-width: 30rem; }
.hero__checks { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; list-style: none; padding: 0; margin: 2.4rem 0 0; font-size: .9rem; color: var(--ink-2); }
.hero__checks li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__checks .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 36%; z-index: 1; }
/* De foto vervloeit aan alle kanten in de wereld (masker), zodat er geen harde rand of afgesneden stuk te zien is. */
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: .92;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 64% 48%, #000 38%, rgba(0, 0, 0, .55) 62%, transparent 86%);
  mask-image: radial-gradient(ellipse 72% 78% at 64% 48%, #000 38%, rgba(0, 0, 0, .55) 62%, transparent 86%);
  transform: translate(calc(var(--hx, 0) * -10px), calc(var(--hy, 0) * -8px)) scale(1.04); transition: transform .6s ease-out;
}

/* De kaart in de kop: een envelop met het logo, en een gouden kaart erachter. */
.card-stage {
  --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 20%; --px: 0; --py: 0; --w: clamp(15rem, 21vw, 19rem);
  position: absolute; z-index: 3; top: 58%; right: clamp(3rem, 10vw, 10rem); width: var(--w); translate: 0 -50%; perspective: 1200px;
}
.zenv { transform: rotate(-3deg) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.card-stage.is-actief .zenv, .card-stage.is-actief .goudkaart { transition-duration: .12s; transition-timing-function: linear; }
.zenv__knop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: end center; padding: 0 0 3%; border: 0; background: transparent; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.zenv__knop:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 6px; }
.zenv__hint { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); transition: opacity .3s; }
.zenv.is-open .zenv__hint { opacity: 0; }
.zenv.is-open .zenv__knop { inset: 50% 0 0 0; }
.card-stage__shadow { position: absolute; left: 8%; right: 8%; bottom: -12%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 18, .32), transparent); filter: blur(5px); z-index: -2; }

/* Een unieke gouden kaart: warm goud, reliëf in de letters, schaduw en een glans die er af en toe overheen glijdt. */
.goudkaart {
  position: absolute; z-index: -1; left: -52%; top: -14%; width: 58%; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: .35rem; padding: 1rem; text-align: center; color: #3B2A10;
  background:
    radial-gradient(120% 80% at 30% 15%, rgba(255, 250, 225, .75), transparent 55%),
    linear-gradient(135deg, #9C7432 0%, #D6B46C 22%, #F4E2AE 42%, #D9B874 58%, #B38A43 78%, #E7CD8F 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, .7), inset 0 0 0 6px rgba(150, 110, 45, .18), 0 30px 46px -24px rgba(70, 45, 10, .7), 0 6px 12px -6px rgba(70, 45, 10, .4);
  transform: rotate(-11deg) translate(calc(var(--px) * -8px), calc(var(--py) * -6px)) rotateX(calc(var(--rx) * .6)) rotateY(calc(var(--ry) * .6));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.goudkaart__rand { position: absolute; inset: 8px; border: 1px solid rgba(110, 78, 25, .45); border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(255, 244, 210, .35), inset 0 0 0 4px rgba(110, 78, 25, .25); }
/* Reliëf: licht onder, schaduw boven (ingeperst in het goud). */
.goudkaart > span:not(.goudkaart__rand):not(.goudkaart__glans) { position: relative; text-shadow: 0 1px 0 rgba(255, 246, 215, .8), 0 -1px 0 rgba(90, 60, 15, .35); }
.goudkaart__kop { font-size: .6rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.goudkaart__namen { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.1; }
.goudkaart__namen i { font-style: italic; font-size: .7em; }
.goudkaart__lijn { width: 46%; height: 1px; background: rgba(90, 60, 15, .45); box-shadow: 0 1px 0 rgba(255, 246, 215, .7); }
.goudkaart__datum { font-size: .72rem; font-weight: 600; letter-spacing: .18em; }
.goudkaart__glans { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .card-stage { animation: card-zweef 6.5s ease-in-out infinite; }
  .card-stage__shadow { animation: card-schaduw 6.5s ease-in-out infinite; }
  .hero__licht--1 { animation: licht-drijf 18s ease-in-out infinite alternate; }
  .hero__licht--2 { animation: licht-drijf 22s ease-in-out -6s infinite alternate-reverse; }
  .hero__licht--3 { animation: licht-drijf 20s ease-in-out -3s infinite alternate; }
  .goudkaart__glans { animation: goud-glans 7s ease-in-out 1.5s infinite; }
}
@keyframes card-zweef { 0%, 100% { translate: 0 -50%; } 50% { translate: 0 calc(-50% - 12px); } }
@keyframes card-schaduw { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .7; scale: .9; } }
@keyframes licht-drijf { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 3vw) scale(1.12); } }
@keyframes goud-glans { 0%, 62% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) {
  .zenv, .zenv__kaart, .zenv__klep, .zenv__klep svg, .goudkaart { transition-duration: .01s !important; transition-delay: 0s !important; }
}
@media (max-width: 860px) {
  .hero__br { display: none; }
  .hero__inner { min-height: 0; padding-bottom: 1rem; }
  .hero__media { position: relative; left: auto; height: 27rem; margin-top: -1.5rem; }
  .hero__foto { object-position: 70% 50%; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 55% 55%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 90% 70% at 55% 55%, #000 35%, transparent 85%); }
  .card-stage { --w: min(16.5rem, 64vw); top: auto; right: auto; left: 58%; bottom: 3.5rem; translate: -50% 0; }
  @keyframes card-zweef { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -10px; } }
  .goudkaart { left: -30%; top: -34%; width: 50%; }
  .hero__checks { margin-top: 1.75rem; gap: .55rem 1.25rem; }
}
/* Telefoon (< 768 px): eerst de kaart (gouden kaart en envelop), direct onder de kop, daarna kop, tekst, knoppen en voordelen. */
@media (max-width: 767px) {
  .hero { display: flex; flex-direction: column; }
  .hero__media { order: -1; margin-top: 0; height: 19.5rem; }
  .card-stage { --w: min(17.5rem, 68vw); left: 62%; bottom: 2.5rem; }
  /* de foto vervloeit ook onderaan in de achtergrond, nu de tekst eronder staat */
  .hero__foto { -webkit-mask-image: radial-gradient(ellipse 90% 70% at 55% 55%, #000 35%, transparent 85%), linear-gradient(180deg, #000 55%, transparent 97%); -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 90% 70% at 55% 55%, #000 35%, transparent 85%), linear-gradient(180deg, #000 55%, transparent 97%); mask-composite: intersect; }
  .hero__inner { padding-top: 0; }
}

/* ---------- Gelegenheden: boogvormige themakaarten met diepte ---------- */
.sectie-kop { text-align: center; max-width: 40rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.sectie-kop h2 { margin-bottom: .5rem; }
.sectie-kop p:not(.eyebrow) { color: var(--ink-2); }
.themas { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem) 0 var(--section); }
.tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.9rem, 1.8vw, 1.4rem); list-style: none; padding: 0; margin: 0; }
.tile-grid > li { flex: 0 1 calc((100% - 6 * clamp(.9rem, 1.8vw, 1.4rem)) / 7); min-width: 0; }
.tile {
  position: relative; display: grid; gap: .7rem; height: 100%; padding: .55rem .55rem .8rem; text-decoration: none; color: var(--ink);
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg); background: linear-gradient(180deg, var(--paper), #FBF3E8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(196, 165, 116, .28), 0 22px 36px -24px rgba(90, 60, 25, .55);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.tile__img { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: var(--ivory-2); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
/* Een dun gouden boogje binnen de rand geeft het geheel iets van een gewelfd raam. */
.tile__img::after { content: ""; position: absolute; inset: 6px; border-radius: inherit; border: 1px solid rgba(255, 246, 225, .7); pointer-events: none; }
.tile__label { display: flex; align-items: center; justify-content: center; gap: .35rem; font-family: var(--font-display); font-size: 1.08rem; text-align: center; }
.tile__label .icon { width: 1rem; height: 1rem; color: var(--accent); transition: transform .2s; }
.tile:hover { color: var(--ink); transform: translateY(-8px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(196, 165, 116, .55), 0 34px 50px -26px rgba(90, 60, 25, .6); }
.tile:hover .tile__img img { transform: scale(1.06); }
.tile:hover .tile__label .icon { transform: translateX(3px); }
/* Kerst voorop, met een gouden rand. */
.tile--kerst { background: linear-gradient(180deg, #FFF8EC, #F7E6CF); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1.5px var(--gold), 0 22px 36px -22px rgba(120, 40, 30, .5); }
@media (prefers-reduced-motion: no-preference) {
  .tile-grid > li { animation: tegel-zweef 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
}
@keyframes tegel-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 1080px) { .tile-grid > li { flex-basis: calc((100% - 3 * clamp(.9rem, 1.8vw, 1.4rem)) / 4); } }
@media (max-width: 560px) {
  .tile-grid { gap: .8rem; }
  .tile-grid > li { flex-basis: calc((100% - .8rem) / 2); }
  /* Kerst over de volle breedte bovenaan, de andere zes in paren. */
  .tile-grid > li:first-child { flex-basis: 100%; }
  .tile-grid > li:first-child .tile { grid-template-columns: 42% 1fr; align-items: center; border-radius: 999px var(--radius-lg) var(--radius-lg) 999px; padding: .5rem 1rem .5rem .5rem; }
  .tile-grid > li:first-child .tile__img { aspect-ratio: 1; border-radius: 50%; }
  .tile-grid > li:first-child .tile__label { font-size: 1.35rem; justify-content: flex-start; }
  .tile__label { font-size: 1rem; }
}

/* ---------- Zo werkt het (paneel met vier stappen) ---------- */
.how-panel h2 { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); list-style: none; padding: 0; margin: 0; }
.how-step { position: relative; display: grid; align-content: start; gap: .3rem; }
.how-step__top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.how-step__num { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--paper); font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(70, 50, 25, .4); }
.how-step__top .icon { width: 2.4rem; height: 2.4rem; color: var(--accent); stroke-width: 1.3; }
.how-step h3 { font-size: 1.18rem; margin: 0; }
.how-step p { color: var(--muted); font-size: .94rem; margin: 0; max-width: 16rem; }
.how-step:not(:last-child)::after { content: ""; position: absolute; top: 1.35rem; right: calc(clamp(2rem, 4vw, 3.5rem) / -2 - .35rem); width: .7rem; height: .7rem; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: rotate(45deg); }
.how-panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.how-panel__foot strong { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .how-step::after { display: none; }
}
@media (max-width: 480px) {
  .how-steps { gap: 1.75rem 1rem; }
  .how-step__top { gap: .7rem; margin-bottom: .7rem; }
  .how-step__num { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
  .how-step__top .icon { width: 1.9rem; height: 1.9rem; }
  .how-step h3 { font-size: 1.05rem; }
  .how-step p { font-size: .88rem; }
}

/* ---------- Donker paneel: meer dan een uitnodiging ---------- */
.feature-panel { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--forest); color: var(--on-dark); isolation: isolate; }
.feature-panel__bg { position: absolute; inset: 0; z-index: -1; }
.feature-panel__bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.feature-panel__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem); }
.feature-panel h2 { color: var(--on-dark); margin-bottom: 1rem; }
.feature-panel p { color: var(--on-dark-muted); font-size: 1.06rem; max-width: 32rem; }
.feature-panel a:not(.btn):not(.phone__fallback) { color: var(--on-dark); }
.feature-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem .75rem; list-style: none; padding: 0; margin: 2rem 0 2.25rem; }
.feature-icons li { display: grid; justify-items: center; gap: .55rem; text-align: center; font-size: .85rem; color: var(--on-dark); line-height: 1.3; }
.feature-icons .icon { width: 2rem; height: 2rem; color: var(--gold); stroke-width: 1.3; }
.feature-panel .demo-caption { color: var(--on-dark-muted); }
@media (max-width: 1080px) { .feature-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .feature-panel__inner { grid-template-columns: 1fr; }
  .feature-panel__text { order: -1; }
  .feature-panel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 28, 19, .94) 0%, rgba(22, 28, 19, .86) 48%, rgba(22, 28, 19, .25) 100%); }
}

/* Telefoon met live voorbeeld */
.phone-demo { display: grid; justify-items: center; gap: .9rem; }
.phone {
  position: relative; width: min(290px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 10px;
  background: #16130F; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7), inset 0 0 0 1.5px #3A332B;
}
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%); border-radius: 20px; background: #0B0907; z-index: 2; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: var(--ivory); }
.phone__screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.phone__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__screen iframe[data-lazy] { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.phone__screen.is-loaded iframe[data-lazy] { opacity: 1; }
.phone__fallback { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); white-space: nowrap; padding: .55rem 1rem; border-radius: 999px; background: rgba(255, 253, 249, .94); color: var(--ink); font-size: .85rem; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-sm); }
.js .phone__fallback { display: none; }
.demo-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
.demo-switch button {
  min-height: 44px; padding: .2rem .1rem; border: 0; border-bottom: 1px solid transparent; background: none;
  font-size: .92rem; font-weight: 500; color: var(--muted); cursor: pointer;
}
.demo-switch button:hover { color: var(--ink); }
.demo-switch button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.demo-caption { font-size: .85rem; color: var(--muted); text-align: center; margin: 0; }

/* ---------- Rasters en kaarten ---------- */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2.5vw, 1.75rem); }
.designs-row { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.designs-row__text h2 { margin-bottom: .75rem; }
.designs-row__text p { color: var(--ink-2); margin-bottom: 1.25rem; }
@media (max-width: 860px) {
  .designs-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .designs-row__text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
  .designs-row__text h2 { margin: 0; }
  .designs-row__text p { display: none; }
}
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 1.75rem); }
.card--flat { background: transparent; }
.card h3 { margin-bottom: .4rem; }

/* Ontwerpkaarten: beeld, naam, opening */
.design-card__link { display: grid; gap: .15rem; text-decoration: none; color: var(--ink); text-align: center; }
.design-card__visual { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--ivory-2); margin-bottom: .85rem; box-shadow: var(--shadow-sm); }
.design-card__visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.design-card__link:hover .design-card__visual img { transform: scale(1.025); }
/* Kaarten komen tot leven: kantelen met de muis, een glansstreep bij aanwijzen en één keer bij het in beeld komen. */
.design-card__link { perspective: 1000px; }
.design-card__visual { position: relative; transform: rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }
.design-card__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .12) 53%, transparent 64%); translate: -120% 0; }
@media (prefers-reduced-motion: no-preference) {
  .design-card.is-seen .design-card__visual::after { animation: card-shine 1.4s ease .15s; }
  .design-card__link:is(:hover, :focus-visible) .design-card__visual { transform: translateY(-6px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); box-shadow: var(--shadow-float); }
  .design-card__link:hover .design-card__visual::after { animation: card-shine-hover 1.1s ease; }
}
@keyframes card-shine { from { translate: -120% 0; } to { translate: 120% 0; } }
@keyframes card-shine-hover { from { translate: -120% 0; } to { translate: 120% 0; } }
.design-card__name { font-weight: 600; font-size: 1rem; }
.design-card__link:hover .design-card__name { color: var(--accent-text); }
.design-card__meta { font-size: .88rem; color: var(--muted); }
@media (max-width: 560px) {
  .grid--trio .design-card__visual { border-radius: var(--radius); margin-bottom: .6rem; }
  .grid--trio .design-card__name { font-size: .86rem; line-height: 1.3; }
  .grid--trio .design-card__meta { display: none; }
}

/* Stappen (uitlegpagina) */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; align-content: start; }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.steps h2, .steps h3 { font-size: 1.25rem; margin: .45rem 0 .2rem; }
.steps p { color: var(--ink-2); margin: 0; }
.steps--list { grid-template-columns: 1fr; gap: 0; }
.steps--list li { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.steps--list li:last-child { border-bottom: 1px solid var(--line); }

/* Op telefoons: kaarten als rij om door te vegen. */
@media (max-width: 699px) {
  .grid--swipe { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  .grid--swipe::-webkit-scrollbar { display: none; }
  .grid--swipe > * { scroll-snap-align: start; }
}

/* Kenmerken met icoon */
.feature-list { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; }
.feature-list > div { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; align-content: start; }
.feature-list .icon { grid-row: span 2; width: 1.7rem; height: 1.7rem; color: var(--accent); stroke-width: 1.4; margin-top: .1rem; }
.feature-list dt { font-weight: 600; }
.feature-list dd { margin: 0; color: var(--ink-2); }

/* 'Jullie verhaal verdient iets bijzonders' (op maat) */
.unique-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-radius: var(--radius-xl); background: var(--ivory-2); min-height: 17rem; }
.unique-card__text { position: relative; z-index: 2; padding: clamp(1.75rem, 5vw, 3.25rem); }
.unique-card__text h2 { margin-bottom: .75rem; }
.unique-card__text p { color: var(--ink-2); max-width: 26rem; margin-bottom: 1.6rem; }
.unique-card__media { align-self: stretch; position: relative; min-height: 26rem; }
.unique-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; }
.unique-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ivory-2) 0%, rgba(245, 238, 230, 0) 10%); pointer-events: none; }
@media (max-width: 720px) {
  .unique-card { grid-template-columns: 1fr; }
  .unique-card__media { order: -1; min-height: 0; aspect-ratio: 35 / 32; }
  .unique-card__media::before { background: linear-gradient(0deg, var(--ivory-2) 0%, rgba(245, 238, 230, 0) 22%); }
}

/* Filters en keuzes */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); font-weight: 500; font-size: .94rem; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"], .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-bar { margin-top: 1.75rem; }

/* Ontwerpdetail */
.detail-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1.1fr .9fr; } }
.detail-text .btn-row { margin-top: 1.75rem; }
.meta-list { display: grid; gap: .5rem; margin: 1.75rem 0; max-width: 34rem; }
.meta-list > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.meta-list dt { color: var(--muted); }
.meta-list dd { margin: 0; }
.palette-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.palette-list li { display: inline-flex; align-items: center; gap: .45rem; }
/* Soort kaart op de ontwerppagina: een strakke schakelaar met twee delen. */
.segmented { list-style: none; display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); }
.segmented__item { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem; border-radius: 7px; color: var(--ink-2); font-weight: 500; text-decoration: none; }
.segmented__item:hover { color: var(--ink); background: var(--ivory-2); }
.segmented__item[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.segmented__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented__hint { margin: .5rem 0 0; color: var(--muted); font-size: .92rem; }
/* Kleurkeuze op de ontwerppagina: ronde stalen met de kleuren van de variant; de gekozen staal krijgt een ring. */
.swatch-picker__name { margin: 0 0 .5rem; font-weight: 600; color: var(--ink); }
.swatch-picker__list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.swatch {
  position: relative; display: block; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--s1) 0 50%, var(--s2) 50% 76%, var(--s3) 76%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--paper), 0 0 0 4px transparent;
  transition: box-shadow .15s ease, transform .15s ease;
}
.swatch:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--paper), 0 0 0 4px var(--line-strong); }
.swatch[aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .swatch { transition: none; } }
.palette-list__swatches { display: inline-flex; }
.palette-list__swatches span { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ivory); margin-left: -5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.palette-list__swatches span:first-child { margin-left: 0; }
.occasion-picker { max-width: 20rem; }

/* ---------- Prijzen ---------- */
.price-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.price-line h2 { margin: 0 0 .25rem; }
.price-line p { margin: 0; }
.price-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.price-card { display: flex; flex-direction: column; gap: .9rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 1.9rem); }
.price-card--featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.price-card h2 { font-size: 1.6rem; margin: 0; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--ink); margin: 0; }
.price small { font-family: var(--font-body); font-size: .88rem; color: var(--muted); font-weight: 500; }
.price--text { font-size: 1.85rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .96rem; }
.checklist li { position: relative; padding-left: 1.6rem; }
.checklist li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .8rem; height: .45rem; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.provisional { display: inline-flex; font-size: .82rem; font-weight: 600; color: var(--warning); background: var(--warning-bg); padding: .25rem .7rem; border-radius: 999px; vertical-align: middle; }
.table-wrap { overflow-x: auto; }
.table-simple { width: 100%; border-collapse: collapse; font-size: .96rem; }
.table-simple th, .table-simple td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-simple th { font-weight: 600; color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.table-simple td.num, .table-simple th.num { text-align: right; white-space: nowrap; }
.table-note { margin-top: .8rem; }
/* Tabellen die op een smal scherm als kaartjes onder elkaar staan (privacyverklaring). */
@media (max-width: 40rem) {
  .table-stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stapel, .table-stapel tbody, .table-stapel tr, .table-stapel td { display: block; width: 100%; }
  .table-stapel tr { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .table-stapel td { border: 0; padding: .2rem 0; }
  .table-stapel td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}

/* ---------- Veelgestelde vragen ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 500; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 44rem; }

/* ---------- Inspiratie, over ons en zoeken ---------- */
.sample-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.sample { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; display: grid; gap: .6rem; align-content: start; }
.sample h3 { margin: 0; font-size: 1.2rem; }
.sample blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.06rem; line-height: 1.55; color: var(--ink-2); }
.sample figcaption { font-size: .92rem; }
.tip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tip-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.tip-list .icon { width: 1.6rem; height: 1.6rem; color: var(--accent); stroke-width: 1.4; margin-top: .15rem; }
.tip-list strong { display: block; font-weight: 600; }
.tip-list span { color: var(--ink-2); }
.value-grid { display: grid; gap: 1.75rem 2.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; } }
.value-grid li { display: grid; gap: .45rem; align-content: start; }
.value-grid .icon { width: 2rem; height: 2rem; color: var(--accent); stroke-width: 1.3; margin-bottom: .3rem; }
.value-grid h3 { margin: 0; font-size: 1.25rem; }
.value-grid p { color: var(--ink-2); margin: 0; }
.search-form { display: flex; gap: .6rem; max-width: 36rem; margin-top: 1.5rem; }
.search-form .input { flex: 1; min-width: 0; border-radius: 999px; padding-left: 1.2rem; }
.search-results { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.search-results li { padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.search-results a { font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.search-results a:hover { color: var(--accent-text); text-decoration: underline; }
.search-results p { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.search-results__kind { display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- Formulieren ---------- */
.form { display: grid; gap: 1.2rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > label, .field > .label, .field legend { font-weight: 600; font-size: .98rem; color: var(--ink); }
.field .req { color: var(--accent-text); font-weight: 700; }
.field .hint, .helptext { font-size: .88rem; color: var(--muted); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="number"], .field input[type="date"], .field input[type="time"], .field input[type="password"], .field input[type="file"], .field select, .field textarea,
.input {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.field input[type="file"] { padding: .55rem; }
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.field [aria-invalid="true"], .field .is-invalid { border-color: var(--error); }
.field__error, .errorlist { color: var(--error); font-size: .9rem; font-weight: 600; list-style: none; padding: 0; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: var(--paper); }
.fieldset > legend { padding: 0 .4rem; font-weight: 700; }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.radio-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.radio-card { position: relative; display: grid; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--gold-soft) 22%, #fff); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.radio-card strong { font-size: 1.05rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: .5rem; }
.form-errors { background: var(--error-bg); color: var(--error); border-radius: var(--radius); padding: 1rem 1.2rem; font-weight: 600; }
.form-errors ul { margin: .4rem 0 0; font-weight: 500; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.5fr .8fr; } }
.contact-aside { display: grid; gap: 1.25rem; font-size: .96rem; color: var(--ink-2); padding: 1.4rem 1.5rem; border-radius: var(--radius-lg); background: var(--ivory-2); }

/* ---------- Meldingen ---------- */
.flash-wrap { padding-top: 1rem; }
.flash { padding: .85rem 1.1rem; border-radius: var(--radius); background: var(--info-bg); margin: 0 0 .6rem; font-weight: 500; }
.flash--success { background: var(--success-bg); color: var(--success); }
.flash--warning { background: var(--warning-bg); color: var(--warning); }
.flash--error { background: var(--error-bg); color: var(--error); }
.notice { padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--info-bg); }
.notice--warning { background: var(--warning-bg); color: #4F3500; }
.notice--success { background: var(--success-bg); color: #1D4A2F; }
.notice--error { background: var(--error-bg); color: #6D1414; }
.notice--test { background: #F3EEE3; }
.notice strong { display: block; margin-bottom: .15rem; }

/* ---------- Status ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .03em; padding: .22rem .6rem; border-radius: 999px; background: var(--ivory-2); color: var(--ink-2); white-space: nowrap; }
.badge--live, .badge--paid, .badge--done, .badge--sent { background: var(--success-bg); color: var(--success); }
.badge--draft, .badge--pending, .badge--queued, .badge--received { background: var(--info-bg); color: #33415C; }
.badge--attention, .badge--failed, .badge--dead, .badge--error { background: var(--error-bg); color: var(--error); }
.badge--warning, .badge--proposal, .badge--awaiting_payment, .badge--processing, .badge--in_progress { background: var(--warning-bg); color: var(--warning); }
.badge--test { background: #F3EEE3; color: var(--accent-dark); }
.badge--expired, .badge--offline, .badge--cancelled, .badge--closed { background: #EEE9E4; color: #5B504C; }

/* ---------- Voettekst ---------- */
.site-footer { margin-top: auto; background: var(--ivory-2); }
.site-footer__inner { display: grid; gap: 1.5rem 2.5rem; padding-top: clamp(2.25rem, 5vw, 3rem); padding-bottom: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: auto 1fr; align-items: start; } .site-footer__copy { grid-column: 1 / -1; } }
.site-footer__brand { display: grid; gap: .35rem; }
.site-footer__brand .logo__img { height: 7.5rem; }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
@media (min-width: 900px) { .site-footer__links { justify-content: flex-end; padding-top: .6rem; } }
.site-footer__links a { color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.site-footer__links a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer__copy { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* ---------- Eenvoudige pagina's (fouten, niet beschikbaar) ---------- */
.minimal-main { max-width: 36rem; margin: 0 auto; padding: 3rem 1.25rem; display: grid; gap: 2rem; justify-items: start; align-content: start; }
.minimal-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 2.5rem); }
.minimal-card h1 { font-size: clamp(1.9rem, 6vw, 2.5rem); }

/* ---------- Tekstpagina's ---------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.45rem, 3.4vw, 1.8rem); margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.h-small { font-size: clamp(1.25rem, 3vw, 1.45rem); margin-bottom: .6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Inloggen ---------- */
.auth-card { max-width: 30rem; margin: 0 auto; display: grid; gap: 1rem; }
.auth-card__title { font-size: clamp(2rem, 6vw, 2.5rem); margin: 0; }
.auth-card .lead { font-size: 1.05rem; }
.auth-card__note { margin-top: .4rem; }
.test-code { display: inline-block; margin-left: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: .2em; color: var(--accent-dark); }

/* ---------- Bestelstatus ---------- */
.order-status { display: grid; gap: 1.2rem; }
.order-status h1 { font-size: clamp(2rem, 6vw, 2.5rem); margin: 0; }
.progress-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; }
.progress-list li { position: relative; padding-left: 2rem; color: var(--muted); }
.progress-list li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--paper); }
.progress-list li.is-active { color: var(--ink); font-weight: 600; }
.progress-list li.is-active::before { border-color: var(--gold-deep); background: radial-gradient(circle, var(--gold) 0 35%, var(--paper) 40%); }
.progress-list li.is-done { color: var(--ink); }
.progress-list li.is-done::before { border-color: var(--success); background: var(--success); box-shadow: inset 0 0 0 3px var(--paper); }
.share-box { display: grid; gap: .9rem; padding: 1.2rem; border-radius: var(--radius); background: color-mix(in srgb, var(--gold-soft) 30%, var(--paper)); border: 1px solid var(--line); }
.order-lines summary { cursor: pointer; font-weight: 600; }
.order-lines table { margin-top: .6rem; }
.summary-list { display: grid; gap: .4rem; margin: 0; }
.summary-list > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .35rem 0; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 600; text-align: right; }
.test-pay { display: grid; gap: 1rem; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.test-pay h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 0; }

/* =====================================================================
   Nieuwe stijl (2026): warm, licht en in lagen. Gedeeld door alle pagina's.
   ===================================================================== */

/* Gouden knop (op warme, donkere vlakken zoals het kerstpodium). */
.btn--goud {
  color: #2E2010; border-color: rgba(255, 240, 200, .6);
  background: linear-gradient(135deg, #B8893F 0%, #E9CB85 40%, #F7E7B8 55%, #D2AA5E 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 26px -14px rgba(0, 0, 0, .55);
}
.btn--goud:hover { color: #1E150A; background: linear-gradient(135deg, #C29445 0%, #F0D595 40%, #FBEFC8 55%, #DBB468 100%); }

/* ---------- Paginakop met een lichte 3D-wereld (Zo werkt het, Prijzen, Inspiratie, Over ons) ---------- */
.paginakop { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); text-align: center;
  background: radial-gradient(60% 80% at 20% 20%, #FFF3E2, transparent 70%), radial-gradient(55% 70% at 85% 30%, #F6E2CF, transparent 70%), linear-gradient(180deg, #FAEFE3, var(--ivory)); }
.paginakop__wereld { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.paginakop__wereld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paginakop .lead { margin-left: auto; margin-right: auto; }
.paginakop h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); }
.paginakop h1 em { font-style: italic; color: var(--accent-text); }
.paginakop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; z-index: -1; background: linear-gradient(180deg, transparent, var(--ivory)); }
.paginakop .hero__licht { opacity: .5; }

/* ---------- Kerstpodium: warm en feestelijk, met sprankelend licht en zwevende kaarten ---------- */
.kerstpodium {
  position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark); padding: clamp(3.5rem, 8vw, 6rem) 0;
  background:
    radial-gradient(70% 90% at 78% 40%, rgba(255, 190, 110, .38), transparent 62%),
    radial-gradient(60% 80% at 10% 90%, rgba(190, 70, 50, .5), transparent 70%),
    linear-gradient(135deg, #5E1822 0%, #7E2330 45%, #8E3A2A 100%);
}
.kerstpodium__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kerstpodium__licht span { position: absolute; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle, rgba(255, 222, 160, .55), rgba(255, 200, 120, 0) 70%); }
.kerstpodium__licht span:nth-child(1) { width: 9rem; height: 9rem; left: 6%; top: 12%; }
.kerstpodium__licht span:nth-child(2) { width: 5rem; height: 5rem; left: 38%; top: 70%; }
.kerstpodium__licht span:nth-child(3) { width: 12rem; height: 12rem; right: 4%; top: -6%; }
.kerstpodium__licht span:nth-child(4) { width: 4rem; height: 4rem; right: 30%; bottom: 8%; }
.kerstpodium__licht span:nth-child(5) { width: 7rem; height: 7rem; left: 24%; top: -4%; }
.kerstpodium__licht span:nth-child(6) { width: 6rem; height: 6rem; right: 12%; bottom: 20%; }
.kerstpodium__sparkles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.kerstpodium__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.kerstpodium h2 { color: #FFF6E6; font-size: clamp(2.4rem, 5vw, 3.4rem); margin: .6rem 0 .8rem; }
.kerstpodium p { color: #F6E3CE; font-size: 1.08rem; max-width: 28rem; margin-bottom: 1.6rem; }
.kerstpodium__badge { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: linear-gradient(135deg, #E9CB85, #F7E7B8); color: #3A2710; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* Waaier van lichte kerstkaarten; hero3d.js laat hem meekantelen (--tx, --ty).
   Bewust geen transform-style: preserve-3d: dan sorteert de browser de gekantelde kaarten op diepte, terwijl de muis-hit-test niet meekomt; een klik op het zichtbare deel van een kaart
   deed dan niets of opende de buurkaart. Zonder preserve-3d beslist z-index (links boven), voor het oog en voor de klik. */
.kaartenwaaier { --tx: 0deg; --ty: 0deg; position: relative; list-style: none; margin: 0; padding: 0; height: clamp(20rem, 32vw, 26rem); perspective: 1400px; }
/* De waaier past zich aan het aantal kaarten (--n, zet de homepage) aan: --t loopt van -1,5 tot 1,5, de breedte van de waaier blijft gelijk. */
.zweefkaart {
  --t: calc((var(--i) - (var(--n, 4) - 1) / 2) * 3 / (var(--n, 4) - 1)); --r: calc(var(--t) * 8deg); --x: calc(var(--t) * 62%);
  position: absolute; left: 50%; top: 50%; width: clamp(9rem, 15vw, 12.5rem); aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%) translateX(var(--x)) translateY(calc(var(--t) * var(--t) * 10px)) rotate(var(--r)) rotateX(var(--ty)) rotateY(var(--tx));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1); z-index: calc(var(--n, 4) - var(--i));
}
.zweefkaart a { display: block; height: 100%; text-decoration: none; color: var(--ink); }
.zweefkaart__kaart { position: relative; display: block; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(255, 240, 210, .6), 0 30px 50px -22px rgba(20, 5, 5, .7); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.zweefkaart img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.zweefkaart__naam { position: absolute; left: 50%; bottom: .6rem; translate: -50% 0; white-space: nowrap; padding: .25rem .75rem; border-radius: 999px; background: rgba(255, 253, 249, .94); font-size: .8rem; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
/* De hover-lift zit op de kaart ín de link: het klikgebied (de link) blijft staan, dus een kaart die opstijgt glipt niet onder de muis weg. */
.zweefkaart a:hover .zweefkaart__kaart, .zweefkaart a:focus-visible .zweefkaart__kaart { transform: translateY(-14px) scale(1.04); box-shadow: 0 0 0 1.5px var(--gold), 0 40px 60px -24px rgba(20, 5, 5, .75); }
.zweefkaart:hover { z-index: 9; }
@media (prefers-reduced-motion: no-preference) {
  .kerstpodium__licht span { animation: licht-twinkel 5s ease-in-out infinite; }
  .kerstpodium__licht span:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
  .kerstpodium__licht span:nth-child(3n) { animation-duration: 6s; animation-delay: -4s; }
  .zweefkaart a { animation: kaart-drijf 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
  .zweefkaart a:hover, .zweefkaart a:focus-visible { animation-play-state: paused; }
}
@keyframes licht-twinkel { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes kaart-drijf { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 860px) {
  .kerstpodium__inner { grid-template-columns: 1fr; text-align: center; }
  .kerstpodium p { margin-left: auto; margin-right: auto; }
  .kerstpodium .btn-row { justify-content: center; }
  .kaartenwaaier { height: clamp(15rem, 62vw, 20rem); }
  .zweefkaart { width: clamp(7.5rem, 30vw, 10rem); --x: calc(var(--t) * 60%); }
  .zweefkaart__naam { font-size: .7rem; }
}
/* Telefoon: de vijf kaarten van de kerstwaaier iets smaller en verder uit elkaar, zodat elke kaart minstens ~44 px zichtbaar en tikbaar oppervlak houdt. */
@media (max-width: 520px) {
  .zweefkaart { width: clamp(5rem, 26vw, 8rem); --x: calc(var(--t) * 83%); }
}

/* ---------- Zo werkt het: stappen als zwevende kaartjes ---------- */
.stappenrij { counter-reset: none; list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stapkaart {
  position: relative; display: grid; justify-items: center; align-content: start; gap: .4rem; text-align: center;
  padding: 2.4rem 1.2rem 1.5rem; border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--paper), #FBF2E6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(196, 165, 116, .28), 0 24px 40px -28px rgba(90, 60, 25, .55);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.stapkaart:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(196, 165, 116, .5), 0 34px 50px -28px rgba(90, 60, 25, .6); }
.stapkaart__num {
  position: absolute; top: -1.1rem; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-family: var(--font-display); font-size: 1.1rem; color: #3A2710; background: linear-gradient(135deg, #C9A45C, #F1DDA6 55%, #C9A45C); box-shadow: 0 8px 16px -8px rgba(90, 60, 25, .7);
}
.stapkaart__icoon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF8EC, #F3E3CB); color: var(--accent); margin-bottom: .4rem; }
.stapkaart__icoon .icon { width: 2rem; height: 2rem; stroke-width: 1.3; }
.stapkaart h3 { margin: 0; font-size: 1.2rem; }
.stapkaart p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 16rem; }
.stappenrij--zes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
.stappenrij__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; text-align: center; color: var(--ink-2); }
.stappenrij__voet strong { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .stapkaart { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; transition-delay: calc(var(--i, 0) * .12s), calc(var(--i, 0) * .12s), 0s, 0s; }
  .js .stapkaart.is-zichtbaar { opacity: 1; translate: 0 0; }
}
@media (max-width: 900px) { .stappenrij, .stappenrij--zes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; } }
@media (max-width: 480px) {
  .stappenrij, .stappenrij--zes { gap: 2rem .75rem; }
  .stapkaart { padding: 2rem .8rem 1.2rem; }
  .stapkaart__icoon { width: 3.2rem; height: 3.2rem; }
  .stapkaart__icoon .icon { width: 1.6rem; height: 1.6rem; }
  .stapkaart h3 { font-size: 1.05rem; }
  .stapkaart p { font-size: .88rem; }
}

/* ---------- Licht paneel: meer dan een uitnodiging ---------- */
.feature-panel--licht { color: var(--ink); background: radial-gradient(70% 90% at 15% 50%, #FFF4E4, transparent 70%), linear-gradient(135deg, #F7ECDD, #F1E2CE); box-shadow: 0 0 0 1px rgba(196, 165, 116, .3); }
.feature-panel--licht h2 { color: var(--ink); }
.feature-panel--licht p { color: var(--ink-2); }
.feature-panel--licht .feature-icons li { color: var(--ink); }
.feature-panel--licht .feature-icons .icon { color: var(--accent); }
.feature-panel--licht .feature-icons li { padding: .8rem .3rem; border-radius: var(--radius); background: rgba(255, 253, 249, .65); box-shadow: 0 0 0 1px rgba(196, 165, 116, .22); }
.feature-panel--licht .phone { box-shadow: 0 40px 70px -36px rgba(70, 45, 15, .6), inset 0 0 0 1.5px #3A332B; }

/* ---------- Confetti op de kaart van het ontwerp Confetti ---------- */
.design-card__confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.design-card__confetti i { position: absolute; top: -8%; left: calc(var(--c) * 8.5%); width: 7px; height: 11px; border-radius: 2px; opacity: 0; background: var(--k); rotate: calc(var(--c) * 37deg); }
.design-card__confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .design-card.is-seen .design-card__confetti i, .design-card__link:is(:hover, :focus-visible) .design-card__confetti i { animation: confetti-val 1.9s cubic-bezier(.3, .6, .5, 1) both; animation-delay: calc(var(--c) * .07s); }
}
@keyframes confetti-val { 0% { opacity: 0; top: -8%; transform: rotate(0); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 104%; transform: translateX(12px) rotate(540deg); } }

/* ---------- Veelgestelde vragen op de homepage ---------- */
.home-faq { position: relative; }
.faq-lijst { display: grid; gap: .75rem; }
.faq-item { border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28), 0 14px 28px -24px rgba(90, 60, 25, .5); transition: box-shadow .3s; }
.faq-item[open] { box-shadow: 0 0 0 1px rgba(196, 165, 116, .6), 0 20px 36px -24px rgba(90, 60, 25, .55); }
.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.4rem; font-weight: 600; font-size: 1.02rem; border-radius: var(--radius-lg); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ivory-2); color: var(--accent-text); font-size: 1.15rem; font-weight: 500; transition: rotate .3s; }
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item p { padding: 0 1.4rem 1.2rem; margin: 0; color: var(--ink-2); max-width: 46rem; }
.home-faq__meer { text-align: center; margin-top: 1.5rem; }

/* ---------- Wat je gasten krijgen (Zo werkt het): drie rustige groepen ---------- */
.gastgroepen { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gastgroep { padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--paper), #FBF3E8); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28), 0 24px 40px -30px rgba(90, 60, 25, .55); }
.gastgroep h3 { margin: 0 0 .2rem; font-size: 1.3rem; }
.gastgroep > p { margin: 0 0 1.1rem; color: var(--muted); font-size: .95rem; }
.gastgroep ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .95rem; }
.gastgroep li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: start; }
.gastgroep li > .icon { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 50%; background: var(--ivory-2); color: var(--accent); stroke-width: 1.4; }
.gastgroep strong { display: block; font-weight: 600; }
.gastgroep span { display: block; color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
@media (max-width: 900px) { .gastgroepen { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }

/* ---------- Prijzen: drie luxe kolommen ---------- */
.prijskolommen { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; perspective: 1400px; }
.prijskaart {
  position: relative; display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--paper), #FBF2E6); box-shadow: 0 0 0 1px rgba(196, 165, 116, .35), 0 28px 50px -34px rgba(90, 60, 25, .6);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}
.prijskaart--uitgelicht { background: radial-gradient(90% 60% at 50% 0%, #FFF6E2, transparent 70%), linear-gradient(180deg, #FFFBF3, #F7E9D3); box-shadow: 0 0 0 1.5px var(--gold), 0 34px 60px -34px rgba(90, 60, 25, .7); }
.prijskaart--maat { background: radial-gradient(80% 60% at 80% 0%, #F8E7D5, transparent 70%), linear-gradient(180deg, #FBF4EA, #F3E6D6); }
.prijskaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.prijskaart h2 { margin: 0; font-size: 1.7rem; }
.prijskaart__soort { display: inline-flex; padding: .22rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.prijskaart__soort--vast { background: var(--success-bg); color: var(--success); }
.prijskaart__soort--aanvraag { background: var(--warning-bg); color: var(--warning); }
.prijskaart__lint { position: absolute; top: -.8rem; left: 50%; translate: -50% 0; padding: .25rem .9rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.prijskaart .price { font-size: 2.7rem; }
.prijskaart__zegel { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: var(--radius); background: rgba(255, 253, 249, .75); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28); font-size: .92rem; color: var(--ink-2); }
.prijskaart__zegel strong { display: block; color: var(--ink); }
.prijskaart .checklist { flex: 1; align-content: start; }
.prijskaart .btn { align-self: stretch; margin-top: .5rem; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .prijskaart:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 0 0 1.5px var(--gold), 0 44px 70px -34px rgba(90, 60, 25, .7); }
}
@media (max-width: 980px) { .prijskolommen { grid-template-columns: 1fr; max-width: 32rem; margin: 0 auto; row-gap: 2rem; } }

/* Lakzegels (tekening in CSS): rood of groen, standaard met een motief, persoonlijk met initialen. */
.lakzegel {
  --lak: #9E2B2B; --lak-licht: #C8483F; position: relative; flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; color: rgba(255, 230, 215, .85); font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  background: radial-gradient(circle at 34% 30%, var(--lak-licht), var(--lak) 62%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .3), inset 0 3px 5px rgba(255, 255, 255, .2), 0 6px 10px -4px rgba(0, 0, 0, .45);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .2);
}
.lakzegel::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(255, 230, 215, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.lakzegel--groen { --lak: #2F5B3A; --lak-licht: #4F8158; }
.lakzegel .icon { width: 1.2rem; height: 1.2rem; }
.lakzegels { display: flex; }
.lakzegels .lakzegel + .lakzegel { margin-left: -1rem; }

/* ---------- Inspiratie: rustige voorbeeldkaarten met beeld ---------- */
.inspiratie-kiezer { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; padding: 0; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.voorbeelden { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.voorbeeld { margin: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--paper), #FBF3E8); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28), 0 24px 40px -30px rgba(90, 60, 25, .55); scroll-margin-top: 7rem; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.voorbeeld:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(196, 165, 116, .5), 0 34px 50px -30px rgba(90, 60, 25, .6); }
.voorbeeld:target { box-shadow: 0 0 0 2px var(--gold), 0 34px 50px -30px rgba(90, 60, 25, .6); }
.voorbeeld__beeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.voorbeeld__beeld img { width: 100%; height: 100%; object-fit: cover; }
.voorbeeld__beeld h3 { position: absolute; left: 1rem; bottom: .8rem; margin: 0; padding: .3rem .9rem; border-radius: 999px; background: rgba(255, 253, 249, .94); font-size: 1.1rem; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.voorbeeld__tekst { display: grid; gap: 1rem; align-content: space-between; padding: 1.3rem 1.4rem 1.4rem; }
.voorbeeld blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); }
.voorbeeld blockquote p::before { content: "“"; color: var(--gold); }
.voorbeeld blockquote p::after { content: "”"; color: var(--gold); }
.voorbeeld figcaption { font-size: .94rem; }

/* ---------- Over ons ---------- */
.verhaal { max-width: 44rem; margin: 0 auto; }
.verhaal h2 { margin-top: clamp(2rem, 5vw, 3rem); }
.verhaal h2:first-child { margin-top: 0; }
.verhaal p { color: var(--ink-2); font-size: 1.08rem; }
.verhaal__slot { margin-top: 2rem; padding: 1.4rem 1.6rem; border-radius: var(--radius-xl); text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.6rem); color: var(--ink);
  background: radial-gradient(80% 90% at 50% 0%, #FFF6E2, transparent 70%), linear-gradient(180deg, #FBF3E8, #F4E6D2); box-shadow: 0 0 0 1px rgba(196, 165, 116, .4); }
.puntenrij { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2.4vw, 1.4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.puntenrij li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start; padding: 1.4rem; border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--paper), #FBF3E8); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28), 0 24px 40px -30px rgba(90, 60, 25, .55); }
.puntenrij .icon { width: 3.2rem; height: 3.2rem; padding: .7rem; border-radius: 50%; background: var(--ivory-2); color: var(--accent); stroke-width: 1.3; }
.puntenrij h3 { margin: .2rem 0 .3rem; font-size: 1.2rem; }
.puntenrij p { margin: 0; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 720px) { .puntenrij { grid-template-columns: 1fr; } }

/* ---------- Voettekst met een stilstaand beeld van de bloem ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--ivory-2), #F1E4D3); }
.site-footer__bloem { position: absolute; z-index: -1; right: -6%; top: 50%; width: min(46rem, 70%); translate: 0 -50%; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 60% 50%, #000 30%, transparent 75%); }
.site-footer__bloem img { width: 100%; height: auto; }
.site-footer__slogan { margin: .2rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-2); }
@media (max-width: 720px) { .site-footer__bloem { width: 130%; right: -40%; top: auto; bottom: -10%; translate: 0 0; opacity: .35; } }
.verhaal__slot h2 { margin-bottom: .6rem; }
.verhaal__slot-tekst { max-width: 36rem; margin: 0 auto 1.4rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.puntenrij--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .puntenrij--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .puntenrij--drie { grid-template-columns: 1fr; } }
.value-grid--kaarten li { padding: 1.4rem; border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--paper), #FBF3E8); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28), 0 24px 40px -30px rgba(90, 60, 25, .55); }
.prijstabel { padding: .4rem 1.2rem; border-radius: var(--radius-xl); background: var(--paper); box-shadow: 0 0 0 1px rgba(196, 165, 116, .28); }
.prijstabel tbody tr:last-child td { border-bottom: 0; }
.prijskaart__zegel p { margin: 0; }
/* Zeven voorbeelden: de laatste rij staat in het midden in plaats van één losse kaart links. */
.voorbeelden { display: flex; flex-wrap: wrap; justify-content: center; }
.voorbeelden > .voorbeeld { flex: 0 1 calc((100% - 2 * clamp(1rem, 2.5vw, 1.6rem)) / 3); min-width: min(100%, 18rem); }
@media (max-width: 900px) { .voorbeelden > .voorbeeld { flex-basis: calc((100% - clamp(1rem, 2.5vw, 1.6rem)) / 2); } }
@media (max-width: 600px) { .voorbeelden > .voorbeeld { flex-basis: 100%; } }
.site-footer__bloem { opacity: .7; }

/* ---------- Voettekst: betaalmethoden en sociale media ---------- */
.site-footer__extra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2.5rem; }
@media (min-width: 900px) { .site-footer__extra { grid-column: 1 / -1; } }
.site-footer__kop { margin: 0 0 .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.betaalmiddelen { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.betaalmiddel {
  display: inline-flex; align-items: center; min-height: 2.1rem; padding: .25rem .8rem; border-radius: 8px; background: #fff;
  font-weight: 700; font-size: .92rem; letter-spacing: .01em; color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), 0 4px 10px -8px rgba(70, 50, 25, .45);
}
/* Alleen de naam in de merkkleur (geen nagemaakte logo's). */
.betaalmiddel--ideal { color: #B30059; }
.betaalmiddel--paypal { color: #003087; font-style: italic; }
.betaalmiddelen--inline { display: inline-flex; vertical-align: middle; gap: .35rem; margin-left: .25rem; }
.betaalmiddelen--inline .betaalmiddel { min-height: 1.8rem; padding: .1rem .6rem; font-size: .86rem; }
.betaal-uitleg { color: var(--ink-2); font-size: .95rem; line-height: 2; }
.sociale-links { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.sociale-links a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); transition: color .2s, box-shadow .2s, transform .2s; }
.sociale-links a:hover { color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent); transform: translateY(-2px); }
/* Officiële merktekens in hun eigen kleuren (aangeleverd door de eigenaar, ongewijzigd van vorm en kleur): alle vier even groot, rustig in de VAYLIDE-knop. */
.sociale-links img { display: block; width: 1.75rem; height: 1.75rem; transition: transform .25s; }
.sociale-links a:hover img { transform: scale(1.06); }
/* Echte logo's van de betaalmethoden, op een wit tegeltje. */
.betaalmiddel--logo { min-height: 0; padding: .35rem .55rem; }
.betaalmiddel--logo img { display: block; width: auto; height: 2.3rem; }
.betaalmiddelen--inline .betaalmiddel--logo { padding: .2rem .4rem; }
.betaalmiddelen--inline .betaalmiddel--logo img { height: 1.7rem; }

/* Ontwerppagina op de telefoon: de waarde mag de kolom nooit breder maken dan het scherm (de schakelaar
   Uitnodiging/Wenskaart paste niet naast het label); onder 480 pixels staat het label erboven. */
.detail-grid > * { min-width: 0; }
.meta-list > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
@media (max-width: 480px) {
  .meta-list > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* Kleurkeuze op de ontwerppagina: knoppen met drie overlappende kleurbolletjes en de naam. */
.kleurkeuze__lijst { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.kleur-optie {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .35rem 1rem .35rem .45rem; border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .15s ease, color .15s ease, background-color .15s ease;
}
.kleur-optie:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.kleur-optie[aria-current="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 2px var(--ink), 0 6px 14px -10px rgba(38, 33, 29, .5); }
.kleur-optie:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.kleur-optie__stalen { display: inline-flex; }
.kleur-optie__stalen span { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .14); }
.kleur-optie__stalen span + span { margin-left: -7px; }
@media (prefers-reduced-motion: reduce) { .kleur-optie { transition: none; } }

/* Specials: een eigen blok op de collectiepagina, en een label op de kaart. */
.specials { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--radius-xl);
  background: radial-gradient(90% 70% at 20% 0%, #FFF4E0, transparent 70%), linear-gradient(180deg, #FBF3E6, #F4E8D6); box-shadow: 0 0 0 1px rgba(196, 165, 116, .45); }
.specials__kop { max-width: 38rem; margin-bottom: 1.4rem; }
.specials__kop h2 { margin-bottom: .4rem; }
.specials__kop p:not(.eyebrow) { color: var(--ink-2); }
.design-card__special { display: inline-block; margin-right: .3rem; padding: .08rem .5rem; border-radius: 999px; vertical-align: .12em;
  background: linear-gradient(135deg, #B8893F, #E9CB85 55%, #D2AA5E); color: #2E2010; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chip--special { border-color: var(--gold); }

/* ---------- De zachte envelop (templates/partials/envelop.html): homepage en de onthulling na betaling ----------
   Ronde klep en opening als vectorvormen (geen driehoeken). Openen in drie rustige stappen: het zegel verdwijnt, de klep
   vouwt in één 2D-beweging omhoog (halverwege wordt de gouden voering zichtbaar), daarna glijdt de kaart omhoog.
   Sluiten gaat andersom. Alleen transform en opacity: soepel, ook op een telefoon. */
.zenv { position: relative; width: 100%; aspect-ratio: 10 / 7; }
.zenv__achter { position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(180deg, #E4D2AE 0%, #EDDFC4 34%, #E6D6B8 100%); box-shadow: 0 30px 50px -26px rgba(60, 40, 18, .6); }
/* Het kaartvak: de kaart mag er boven uit, maar wordt onderaan door de rand van de envelop afgesneden. */
.zenv__vak { position: absolute; inset: 0; z-index: 1; clip-path: inset(-400% 0 0 0); }
.zenv__kaart { position: absolute; left: 13%; right: 13%; top: 6%; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--paper);
  box-shadow: 0 10px 26px -12px rgba(60, 40, 18, .55); transform: translateY(0); transition: transform .8s cubic-bezier(.5, 0, .3, 1) 0s; }
.zenv__kaart img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* De echte kaart (bedankpagina): zonder JavaScript gewoon kaartbreed; met JavaScript op telefoonbreedte getekend en
   verkleind (--kaart-s uit onthulling.js), zodat hij eruitziet zoals gasten hem op hun telefoon zien. Niet klikbaar. */
.zenv__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); pointer-events: none; }
.zenv__kaart.is-geschaald .zenv__frame { position: absolute; top: 0; left: 0; width: 390px; height: 546px; transform-origin: 0 0;
  transform: scale(var(--kaart-s, .5)); }
.zenv__link { position: absolute; z-index: 6; left: 50%; bottom: -3.4rem; translate: -50% 0; pointer-events: none; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .5rem .9rem .5rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 20px -10px rgba(60, 40, 15, .7); opacity: 0; transition: opacity .3s ease; }
.zenv__link .icon { width: 1.15rem; height: 1.15rem; }
.zenv__link:hover { background: var(--accent-2); color: #fff; }
.zenv__link:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.zenv__voor { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 -1px 1px rgba(120, 90, 40, .12)); }
.zenv__logo { position: absolute; z-index: 3; left: 50%; bottom: 14%; width: 38%; height: auto; translate: -50% 0; pointer-events: none; }
.zenv__klep { position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 4; transform-origin: 50% 0; transform: scaleY(1); opacity: 1;
  transition: opacity .3s ease .75s, transform .75s cubic-bezier(.65, 0, .35, 1) .95s, z-index 0s linear 1.32s; }
.zenv__klep svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zenv__klep-buiten { filter: drop-shadow(0 3px 4px rgba(80, 55, 20, .22)); transition: opacity 0s linear 1.32s; }
.zenv__klep-binnen { opacity: 0; transition: opacity 0s linear 1.32s; }
.zenv__zegel { position: absolute; left: 50%; top: 95%; width: 22%; aspect-ratio: 1; translate: -50% -62%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D86A6A, #8E1B26 58%, #5E0F18); box-shadow: 0 3px 7px rgba(60, 10, 10, .4), inset 0 0 0 3px rgba(255, 220, 200, .14);
  transition: opacity .3s ease 1.7s, transform .3s ease 1.7s; }
.zenv__zegel::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(255, 225, 205, .45); }
/* Open: zegel weg, klep omhoog (scaleY -1 = gespiegeld naar boven, zonder 3D-randen), kaart omhoog. */
.zenv.is-open .zenv__zegel { opacity: 0; transform: scale(.7); transition: opacity .25s ease 0s, transform .25s ease 0s; }
.zenv.is-open .zenv__klep { transform: scaleY(-1); z-index: 0; opacity: 0; transition: transform .75s cubic-bezier(.65, 0, .35, 1) .12s, z-index 0s linear .5s, opacity .45s ease .8s; }
.zenv.is-open .zenv__klep-buiten { opacity: 0; transition: opacity 0s linear .5s; }
.zenv.is-open .zenv__klep-binnen { opacity: 1; transition: opacity 0s linear .5s; }
.zenv.is-open .zenv__kaart { transform: translateY(-58%); transition: transform 1.1s cubic-bezier(.2, .8, .25, 1) .8s; }
.zenv.is-open .zenv__link { opacity: 1; pointer-events: auto; transition-delay: 1.5s; }
/* Homepage op de computer: ook openen bij aanwijzen. */
@media (hover: hover) and (pointer: fine) {
  .card-stage:hover .zenv .zenv__zegel { opacity: 0; transform: scale(.7); transition: opacity .25s ease 0s, transform .25s ease 0s; }
  .card-stage:hover .zenv .zenv__klep { transform: scaleY(-1); z-index: 0; opacity: 0; transition: transform .75s cubic-bezier(.65, 0, .35, 1) .12s, z-index 0s linear .5s, opacity .45s ease .8s; }
  .card-stage:hover .zenv .zenv__klep-buiten { opacity: 0; transition: opacity 0s linear .5s; }
  .card-stage:hover .zenv .zenv__klep-binnen { opacity: 1; transition: opacity 0s linear .5s; }
  .card-stage:hover .zenv .zenv__kaart { transform: translateY(-58%); transition: transform 1.1s cubic-bezier(.2, .8, .25, 1) .8s; }
  .card-stage:hover .zenv .zenv__link { opacity: 1; pointer-events: auto; transition-delay: 1.5s; }
  .card-stage:hover .zenv .zenv__hint { opacity: 0; }
  .card-stage:hover .zenv .zenv__knop { inset: 50% 0 0 0; }
}
/* Zonder JavaScript opent de envelop als de knop of link focus krijgt (tikken op een telefoon). */
html:not(.js) .zenv:focus-within .zenv__klep, .zenv:has(.zenv__link:focus-visible) .zenv__klep { transform: scaleY(-1); z-index: 0; opacity: 0; }
html:not(.js) .zenv:focus-within .zenv__klep-buiten, .zenv:has(.zenv__link:focus-visible) .zenv__klep-buiten { opacity: 0; }
html:not(.js) .zenv:focus-within .zenv__klep-binnen, .zenv:has(.zenv__link:focus-visible) .zenv__klep-binnen { opacity: 1; }
html:not(.js) .zenv:focus-within .zenv__zegel, .zenv:has(.zenv__link:focus-visible) .zenv__zegel { opacity: 0; }
html:not(.js) .zenv:focus-within .zenv__kaart, .zenv:has(.zenv__link:focus-visible) .zenv__kaart { transform: translateY(-56%); }
html:not(.js) .zenv:focus-within .zenv__link, .zenv:has(.zenv__link:focus-visible) .zenv__link { opacity: 1; pointer-events: auto; }
html:not(.js) .zenv:focus-within .zenv__knop { inset: 50% 0 0 0; }
@media (prefers-reduced-motion: reduce) {
  .zenv__kaart, .zenv__klep, .zenv__klep svg, .zenv__zegel, .zenv__link { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- Algemene voorwaarden en bedrijfsgegevens ---------- */
mark.invulveld { background: var(--warning-bg); color: var(--warning); padding: 0 .3em; border-radius: 4px; font-weight: 600; }
.voorwaarden-acties { margin-top: 1rem; }
.voorwaarden h3 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; }
.voorwaarden .modelformulier { list-style: none; padding-left: 0; }
.voorwaarden .modelformulier li { padding: .35rem 0; border-bottom: 1px dashed var(--line-strong); }
.bedrijfsgegevens { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.bedrijfsgegevens__titel { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 0 0 .6rem; }
.bedrijfsgegevens dl { margin: 0 0 .6rem; display: grid; gap: .35rem; }
.bedrijfsgegevens dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .6rem; font-size: .93rem; }
.bedrijfsgegevens dt { color: var(--muted); }
.bedrijfsgegevens dd { margin: 0; overflow-wrap: anywhere; }
.akkoord { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.herroepen { max-width: 36rem; }
@media print {
  .site-header, .site-footer, .voorwaarden-acties, .notice, .test-banner, .skip-link { display: none !important; }
  .voorwaarden { max-width: none; }
}
.order-status__hervatten p { margin: .3rem 0 .8rem; }

/* Eigen media: niet slepen, geen langdrukmenu (iOS) en geen selectie van het beeld zelf. Tekst blijft gewoon selecteerbaar.
   Een afbeelding in een link geeft het klikken en het linkmenu aan de link (zonder "afbeelding opslaan"). */
img[src^="/static/"], video { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
a[href] img[src^="/static/"] { pointer-events: none; }