/* VVZ SponsorKliks Pagina 1.1.1 — alle stijlen zijn gescoped onder .vvzsk-page */

@font-face { font-family:'VVZ Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'VVZ Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'VVZ Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'VVZ Inter'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/inter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family:'VVZ Script'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/caveat-latin-700-normal.woff2') format('woff2'); }

body.vvzsk-has-page, body:has(.vvzsk-page) { overflow-x:clip; }

.vvzsk-page {
  --green:#0a7a45; --green-hover:#086438; --dark:#0b4d37; --deep:#064431; --bright:#12b95b;
  --mist:#eef5f0; --paper:#fafcfa; --ink:#173a30; --muted:#5d7269; --line:#dfe9e2;
  /* volle breedte, ook binnen een smalle thema-container */
  position:relative; left:50%; width:100vw; max-width:100vw; margin:0 0 0 -50vw;
  font-family:'VVZ Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--ink); line-height:1.5; font-size:16px; text-align:left;
}
.vvzsk-page *, .vvzsk-page *::before, .vvzsk-page *::after { box-sizing:border-box; }
.vvzsk-page a { text-decoration:none; }
.vvzsk-page h1, .vvzsk-page h2, .vvzsk-page h3, .vvzsk-page p { margin:0; padding:0; font-family:inherit; }
.vvzsk-page svg { display:block; }
.vvzsk-wrap { max-width:1600px; margin:0 auto; padding:0 clamp(20px,4.4vw,68px); }

/* ---------- Knoppen ---------- */
.vvzsk-page .vvzsk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  min-height:46px; padding:0 24px; border-radius:999px; font-size:15px; font-weight:700; line-height:1;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vvzsk-page .vvzsk-btn:hover { transform:translateY(-1px); }
.vvzsk-page .vvzsk-btn:focus-visible, .vvzsk-page .vvzsk-shop-tile:focus-visible, .vvzsk-faq-item summary:focus-visible { outline:3px solid var(--bright); outline-offset:3px; }
.vvzsk-page .vvzsk-btn-green { background:linear-gradient(180deg,#0f8c4f,var(--green)); color:#fff; box-shadow:0 4px 12px rgba(10,122,69,.25); }
.vvzsk-page .vvzsk-btn-green:hover { background:var(--green-hover); color:#fff; box-shadow:0 6px 16px rgba(10,122,69,.32); }
.vvzsk-page .vvzsk-btn-outline { color:#fff; border:1.5px solid rgba(255,255,255,.75); background:transparent; }
.vvzsk-page .vvzsk-btn-outline:hover { background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.vvzsk-arrow { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }


/* ---------- Hero ---------- */
.vvzsk-hero { position:relative; overflow:hidden; background:linear-gradient(100deg,#04402f,#064a35); color:#fff; isolation:isolate; }

/* Hero-illustratie: lichtbundel, perspectief-veld, wapen en bal */
.vvzsk-hero-art { position:absolute; z-index:-1; top:0; bottom:0; right:0; width:72%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%); mask-image:linear-gradient(90deg,transparent 0,#000 28%); }
.vvzsk-glow { position:absolute; left:44%; top:34%; width:640px; height:640px; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(150,240,185,.42) 0,rgba(30,170,90,.18) 36%,transparent 66%); }
.vvzsk-pitch { position:absolute; left:-10%; right:-10%; bottom:0; height:56%; perspective:380px; perspective-origin:44% 0; }
.vvzsk-plane { position:absolute; left:0; right:0; top:0; height:230%; transform-origin:50% 0; transform:rotateX(64deg); background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 90px,rgba(255,255,255,0) 90px 180px), linear-gradient(180deg,#0f7a49,#0a6038); box-shadow:inset 0 14px 40px rgba(3,50,36,.55); }
.vvzsk-halfway { position:absolute; left:0; right:0; top:0; height:4px; background:rgba(255,255,255,.4); }
.vvzsk-circle { position:absolute; left:calc(44% - 170px); top:-170px; width:340px; height:340px; border-radius:50%; border:4px solid rgba(255,255,255,.4); }
.vvzsk-ball { position:absolute; left:22%; bottom:11%; width:clamp(46px,4.6vw,70px); height:auto; filter:drop-shadow(0 10px 8px rgba(0,0,0,.35)); animation:vvzsk-roll 6s ease-in-out infinite alternate; }
.vvzsk-crest { position:absolute; z-index:0; left:61%; bottom:clamp(34px,4vw,56px); width:clamp(160px,14vw,215px); transform:translateX(-50%); }
.vvzsk-crest picture { display:block; width:100%; }
.vvzsk-crest img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 22px rgba(0,0,0,.4)); animation:vvzsk-float 5s ease-in-out infinite; }
.vvzsk-crest-shadow { position:absolute; left:14%; right:14%; bottom:-14px; height:18px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%); animation:vvzsk-shadow 5s ease-in-out infinite; }
@keyframes vvzsk-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
@keyframes vvzsk-shadow { 0%,100% { transform:scaleX(1); opacity:1 } 50% { transform:scaleX(.88); opacity:.7 } }
@keyframes vvzsk-roll { from { transform:translateX(0) rotate(0) } to { transform:translateX(26px) rotate(60deg) } }
@media (prefers-reduced-motion:reduce) { .vvzsk-ball, .vvzsk-crest img, .vvzsk-crest-shadow { animation:none !important; } }
.vvzsk-hero-inner { max-width:1600px; margin:0 auto; min-height:360px; padding:clamp(24px,2.6vw,36px) clamp(20px,4.4vw,68px); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.vvzsk-hero-copy { max-width:520px; }
.vvzsk-page .vvzsk-eyebrow { font-size:14px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.7); margin-bottom:6px; }
.vvzsk-page .vvzsk-hero h1 { color:#fff; font-size:clamp(44px,5vw,66px); font-weight:800; line-height:1.02; letter-spacing:-.025em; margin-bottom:18px; }
.vvzsk-page .vvzsk-intro { font-size:clamp(16px,1.4vw,20px); line-height:1.6; color:rgba(255,255,255,.95); }

.vvzsk-tag { position:relative; flex:none; width:clamp(230px,19vw,290px); aspect-ratio:300/230; transform:rotate(-7deg); margin-right:clamp(0px,1.5vw,24px); filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.vvzsk-tag svg { position:absolute; inset:0; width:100%; height:100%; }
.vvzsk-page .vvzsk-tag p { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:7%; text-align:center; font-family:'VVZ Script','Segoe Script','Bradley Hand',cursive; font-weight:700; font-size:clamp(25px,2.2vw,34px); line-height:1.06; color:#0b4d37; }

/* ---------- Secties ---------- */
.vvzsk-section { padding:clamp(26px,3.2vw,44px) 0; }
.vvzsk-page .vvzsk-section h2 { color:var(--dark); font-size:clamp(24px,2.3vw,30px); font-weight:800; line-height:1.15; letter-spacing:-.015em; }

/* Stappen */
.vvzsk-how { background:var(--paper); padding-bottom:clamp(24px,3vw,38px); }
.vvzsk-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; }
.vvzsk-step { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start; padding:0 24px; position:relative; }
.vvzsk-step:first-child { padding-left:0; }
.vvzsk-step:last-child { padding-right:0; }
.vvzsk-step:not(:last-child)::after { content:""; position:absolute; right:0; top:2px; bottom:2px; width:1px; background:var(--line); }
.vvzsk-icon { position:relative; width:68px; height:68px; flex:none; border-radius:50%; background:var(--dark); display:grid; place-items:center; color:#fff; }
.vvzsk-icon svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vvzsk-icon svg .fill { fill:currentColor; stroke-width:1; }
.vvzsk-icon span { position:absolute; top:-3px; right:-5px; width:26px; height:26px; border-radius:50%; background:var(--bright); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; border:2px solid var(--paper); }
.vvzsk-page .vvzsk-step h3 { color:var(--dark); font-size:15.5px; font-weight:700; line-height:1.25; margin:6px 0 6px; }
.vvzsk-page .vvzsk-step p { color:var(--muted); font-size:14px; line-height:1.5; }

/* Winkels */
.vvzsk-shops { background:var(--mist); }
.vvzsk-shops-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:16px; }
.vvzsk-page .vvzsk-shops-head p { margin-top:6px; color:var(--muted); font-size:16px; }
.vvzsk-shops-head .vvzsk-btn { margin-top:4px; }
.vvzsk-shop-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.vvzsk-page .vvzsk-shop-tile { display:grid; place-items:center; height:78px; padding:10px; background:#fff; border-radius:10px; border:1px solid rgba(10,77,55,.06); box-shadow:0 2px 8px rgba(6,68,49,.05); transition:transform .18s ease, box-shadow .18s ease; }
.vvzsk-page .vvzsk-shop-tile:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(6,68,49,.13); }
.vvzsk-page .vvzsk-disclaimer { margin-top:14px; font-size:12.5px; color:#74887f; }

/* Winkel-woordmerken */
.vvzsk-logo { display:inline-flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; }
.vvzsk-logo-bol { font-size:40px; font-weight:800; letter-spacing:-.04em; color:#1b2a9e; }
.vvzsk-logo-cool { width:56px; height:56px; border-radius:50%; background:#f7731f; color:#fff; font-weight:800; font-size:15px; line-height:.95; text-align:center; letter-spacing:-.03em; }
.vvzsk-logo-booking { font-size:25px; font-weight:700; letter-spacing:-.04em; color:#0c3b8c; }
.vvzsk-logo-booking i { font-style:normal; color:#0a8bd6; }
.vvzsk-logo-media { font-size:25px; font-weight:800; font-style:italic; letter-spacing:-.05em; color:#e30613; }
.vvzsk-logo-media b { font-weight:800; }
.vvzsk-logo-klm { flex-direction:column; gap:3px; font-size:29px; font-weight:800; letter-spacing:-.01em; color:#00a1de; }
.vvzsk-logo-klm svg { width:26px; height:15px; fill:#00a1de; }
.vvzsk-logo-zalando { gap:7px; font-size:29px; font-weight:600; letter-spacing:-.03em; color:#1a1a1a; }
.vvzsk-logo-zalando svg { width:15px; height:19px; fill:#ff6900; }

/* FAQ */
.vvzsk-faq { background:var(--paper); padding-bottom:clamp(34px,4vw,56px); }
.vvzsk-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,5vw,72px); margin-top:14px; }
.vvzsk-faq-col { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.vvzsk-faq-item { background:#fff; border:1px solid var(--line); border-radius:6px; transition:box-shadow .18s ease; }
.vvzsk-faq-item[open] { box-shadow:0 6px 18px rgba(6,68,49,.07); }
.vvzsk-faq-item summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; cursor:pointer; font-size:15.5px; font-weight:600; color:var(--ink); }
.vvzsk-faq-item summary::-webkit-details-marker { display:none; }
.vvzsk-chev { width:20px; height:20px; flex:none; fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.vvzsk-faq-item[open] .vvzsk-chev { transform:rotate(180deg); }
.vvzsk-page .vvzsk-faq-item p { padding:0 18px 16px; font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .vvzsk-shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vvzsk-steps { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px; }
  .vvzsk-step:nth-child(odd) { padding-left:0; }
  .vvzsk-step:nth-child(2) { padding-right:0; }
  .vvzsk-step:nth-child(2)::after { display:none; }
}
@media (max-width:820px) {
  .vvzsk-hero-art { width:100%; -webkit-mask-image:none; mask-image:none; }
  .vvzsk-glow { left:30%; top:75%; }
  .vvzsk-pitch { height:40%; }
  .vvzsk-circle { display:none; }
  .vvzsk-ball { left:42%; bottom:14px; width:44px; }
  .vvzsk-crest { left:22%; width:150px; bottom:30px; }
  .vvzsk-hero-inner { flex-direction:column; align-items:flex-start; padding-bottom:62px; min-height:440px; }
  .vvzsk-tag { align-self:flex-end; margin:-8px 4px 0 0; width:210px; }
  .vvzsk-page .vvzsk-tag p { font-size:26px; }
  .vvzsk-shops-head { flex-direction:column; align-items:flex-start; }
  .vvzsk-faq-grid { grid-template-columns:1fr; gap:10px; }
}
@media (max-width:640px) {
  .vvzsk-steps { grid-template-columns:1fr; row-gap:22px; }
  .vvzsk-step, .vvzsk-step:nth-child(odd), .vvzsk-step:nth-child(2), .vvzsk-step:last-child { padding:0; }
  .vvzsk-step::after { display:none !important; }
  .vvzsk-shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .vvzsk-shop-tile .vvzsk-logo-booking, .vvzsk-shop-tile .vvzsk-logo-media { font-size:20px; }
  .vvzsk-shop-tile .vvzsk-logo-bol { font-size:34px; }
  .vvzsk-shop-tile .vvzsk-logo-zalando, .vvzsk-shop-tile .vvzsk-logo-klm { font-size:25px; }
  .vvzsk-shops-head .vvzsk-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .vvzsk-page * { transition:none !important; }
}