/* =========================================================
   LOQUAL — website
   Zachte versie van de huisstijl (kassaticket, postkaart, cadeaubon)
   ========================================================= */

@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/fraunces-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url('../fonts/jost-latin-600-normal.woff2') format('woff2'); }

:root {
  --blush: #F6E6E2;
  --blush-diep: #EBCFC8;
  --boter: #F4EDCF;
  --boter-diep: #E7DB9C;
  --petrol: #2F5D68;
  --petrol-zacht: #6F98A1;
  --petrol-tint: #E5EEEF;
  --koper: #A9692F;
  --koper-tint: #F3E2D2;
  --inkt: #2A2522;
  --inkt-zacht: #5E5651;
  --papier: #FCF9F6;
  --wit: #FFFFFF;
  --lijn: rgba(42, 37, 34, .14);
  --roze: var(--blush);
  --geel: var(--boter);

  --f-titel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-tekst: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;

  --radius: 20px;
  --schaduw: 0 1px 2px rgba(42,37,34,.04), 0 12px 32px -14px rgba(42,37,34,.18);
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--f-tekst); font-size: 17px; line-height: 1.7;
  color: var(--inkt); background: var(--papier); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--petrol); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--koper); }
h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--inkt); }
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 500; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--koper); }
p { margin: 0 0 1em; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--koper); outline-offset: 3px; }

.eyebrow { display: inline-block; font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--petrol); margin-bottom: 14px; }
.hand { font-family: var(--f-titel); font-style: italic; font-weight: 400; color: var(--koper); font-size: 1.2rem; line-height: 1.3; display: inline-block; }
.lead { font-size: 1.15rem; color: var(--inkt-zacht); max-width: 58ch; }
.klein { font-size: .9rem; color: var(--inkt-zacht); }
.centreer { text-align: center; }
.centreer .lead { margin-inline: auto; }

/* knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--f-tekst); font-weight: 500;
  font-size: .98rem; letter-spacing: .02em; text-decoration: none; color: var(--wit); background: var(--petrol);
  border: 1px solid var(--petrol); border-radius: 999px; padding: .85em 1.7em; cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.knop:hover { background: #244B54; color: var(--wit); transform: translateY(-1px); }
.knop.wit, .knop.licht { background: transparent; color: var(--petrol); }
.knop.wit:hover, .knop.licht:hover { background: var(--petrol); color: var(--wit); }
.knop.koper { background: var(--koper); border-color: var(--koper); }
.knop.koper:hover { background: #8E5726; }

/* logo (originele stijl) */
.logo { display: inline-flex; border-top: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); padding: 3px 0; text-decoration: none; color: var(--inkt); }
.logo span { font-family: var(--f-tekst); font-weight: 500; font-size: 1.45rem; letter-spacing: .16em; margin-right: -.16em; line-height: 1; }
.logo i { font-style: normal; color: var(--koper); }
.logo:hover { color: var(--inkt); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(252, 249, 246, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 78px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { font-weight: 500; font-size: .96rem; text-decoration: none; color: var(--inkt); padding: .4em .85em; border-radius: 999px; position: relative; }
.nav-links a:not(.knop)::after { content: ''; position: absolute; left: .85em; right: .85em; bottom: .15em; height: 1px; background: var(--koper); transform: scaleX(0); transition: transform .25s; }
.nav-links a:not(.knop):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--koper); }
.nav-links .knop { margin-left: 12px; padding: .6em 1.3em; font-size: .9rem; color: var(--wit); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--lijn); border-radius: 12px; width: 46px; height: 46px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--inkt); margin: 5px auto; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-links { position: absolute; left: 0; right: 0; top: 78px; flex-direction: column; align-items: stretch; background: var(--papier); border-bottom: 1px solid var(--lijn); padding: 12px 20px 22px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.1rem; padding: .7em .4em; }
  .nav-links a:not(.knop)::after { display: none; }
  .nav-links .knop { margin: 10px 0 0; }
}

/* ---------- secties ---------- */
section { position: relative; }
.sectie { padding: clamp(64px, 8vw, 110px) 0; }
.bg-roze { background: var(--blush); }
.bg-geel { background: var(--boter); }
.bg-petrol { background: var(--petrol-tint); }
.kop-sectie { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.kop-sectie p { color: var(--inkt-zacht); }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); background: var(--blush); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); margin-bottom: .35em; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-feiten { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 44px 0 0; border-top: 1px solid var(--lijn); }
.hero-feiten li { padding: 18px 34px 0 0; margin-right: 34px; border-right: 1px solid var(--lijn); color: var(--inkt-zacht); font-size: .92rem; line-height: 1.3; }
.hero-feiten li:last-child { border-right: 0; margin-right: 0; }
.hero-feiten b { display: block; font-family: var(--f-titel); font-weight: 400; font-size: 2.3rem; color: var(--inkt); line-height: 1.1; }
.boog { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; background: var(--blush-diep); box-shadow: var(--schaduw); }
.boog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.boog-leeg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px;
  background:
    radial-gradient(circle at 28% 30%, var(--boter) 0 18%, transparent 18.5%),
    radial-gradient(circle at 76% 64%, var(--petrol-tint) 0 22%, transparent 22.5%),
    radial-gradient(circle at 30% 82%, var(--koper-tint) 0 14%, transparent 14.5%),
    var(--blush); }
.boog-leeg .logo { border-color: var(--inkt); }
.boog-leeg .logo span { font-size: 2rem; }
.boog-leeg p { font-family: var(--f-titel); font-style: italic; color: var(--inkt-zacht); margin: 0; max-width: 18ch; }
.zegel { position: absolute; z-index: 3; right: -6px; top: 14%; width: 116px; height: 116px; border-radius: 50%; background: var(--papier); border: 1px solid var(--lijn); box-shadow: var(--schaduw);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-zacht); }
.zegel b { font-family: var(--f-titel); font-weight: 400; font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: var(--koper); line-height: 1.05; }
.hero-beeld { position: relative; max-width: 440px; justify-self: center; width: 100%; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-beeld { max-width: 340px; } .hero-feiten li { padding-right: 20px; margin-right: 20px; } }

/* ---------- kassaticket ---------- */
.ticket {
  --tand: 8px; position: relative; background: var(--wit); padding: 30px 28px 32px; max-width: 400px;
  font-family: var(--f-tekst); text-transform: uppercase; letter-spacing: .05em; color: var(--inkt);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--tand)) 100%,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--tand)) 100%;
  -webkit-mask-composite: source-in;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--tand)) 100%,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--tand)) 100%;
          mask-composite: intersect;
}
.ticket-schaduw { filter: drop-shadow(0 18px 24px rgba(42,37,34,.12)); }
.ticket .kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: .68rem; font-weight: 500; letter-spacing: .14em; color: var(--inkt-zacht); }
.ticket hr { border: 0; border-top: 1px dashed rgba(42,37,34,.45); margin: 14px 0; }
.ticket hr.dubbel { border-top: 3px double rgba(42,37,34,.6); }
.ticket .regel { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; font-size: .86rem; padding: 3px 0; }
.ticket .regel span:last-child { font-weight: 400; font-size: .74rem; letter-spacing: .1em; text-align: right; color: var(--inkt-zacht); }
.ticket .groot { font-family: var(--f-titel); font-size: 1.7rem; text-transform: none; letter-spacing: 0; line-height: 1.1; }
.ticket .totaal { display: flex; justify-content: space-between; font-weight: 600; font-size: .95rem; letter-spacing: .1em; }
.ticket .getal { font-family: var(--f-titel); font-size: 1.25rem; letter-spacing: 0; color: var(--inkt); }
.barcode { height: 38px; margin-top: 16px; opacity: .8; background: repeating-linear-gradient(90deg, var(--inkt) 0 2px, transparent 2px 4px, var(--inkt) 4px 6px, transparent 6px 7px, var(--inkt) 7px 8px, transparent 8px 11px, var(--inkt) 11px 13px, transparent 13px 15px); }
.ticket.print { animation: print 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-16px); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- grids & kaarten ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 72px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } .grid-4 { gap: 12px; } }

.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 30px; box-shadow: var(--schaduw); transition: transform .25s, box-shadow .25s; }
.kaart:hover { transform: translateY(-3px); }
.kaart h3 { margin-bottom: .4em; }
.kaart p:last-child { margin-bottom: 0; }
.kaart .hand { margin-bottom: 6px; }
.kaart.zacht { background: var(--blush); box-shadow: none; }
.kaart.boter { background: var(--boter); box-shadow: none; }
.kaart.petrol { background: var(--petrol-tint); box-shadow: none; }

.categorie { text-align: center; padding: 30px 16px 26px; }
.categorie .icoon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); }
.categorie .icoon svg { width: 30px; height: 30px; }
.categorie .icoon svg * { stroke: var(--petrol); stroke-width: 2; }
.categorie h3 { font-family: var(--f-tekst); font-size: .86rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.categorie p { margin: 0; font-family: var(--f-titel); font-style: italic; font-size: 1.05rem; color: var(--koper); }
.categorie:nth-child(4n+2) .icoon { background: var(--boter); }
.categorie:nth-child(4n+3) .icoon { background: var(--petrol-tint); }
.categorie:nth-child(4n+4) .icoon { background: var(--koper-tint); }
@media (max-width: 600px) { .categorie { padding: 22px 10px 20px; } .categorie h3 { font-size: .74rem; letter-spacing: .1em; } }

/* stadschips */
.stempels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.stempel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--inkt); background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: .55em 1.15em; font-weight: 500; font-size: .95rem; transition: border-color .2s, color .2s; }
.stempel::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--koper); }
.stempel small { display: none; }
.stempel b { font-weight: 500; }
.stempel:hover { border-color: var(--koper); color: var(--koper); }

/* citaat */
.citaat { font-family: var(--f-titel); font-style: italic; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.35; color: var(--inkt); margin: 0 0 .6em; }
.citaat-bron { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); margin: 0 0 1em; }

/* ---------- winkels ---------- */
.kaart-vlaanderen svg { width: 100%; height: auto; overflow: visible; }
.pin { cursor: pointer; outline: none; }
.pin circle.bol { transition: r .2s, fill .2s; }
.pin text { font-family: var(--f-tekst); font-weight: 500; font-size: 21px; pointer-events: none; }
.pin:hover circle.bol, .pin:focus circle.bol, .pin.actief circle.bol { r: 13; }
.pin.actief circle.bol { fill: var(--koper); }
.winkel-kiezer { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.winkel-kiezer button { font-family: var(--f-tekst); font-weight: 500; font-size: .92rem; color: var(--inkt); background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: .45em 1.05em; cursor: pointer; transition: all .2s; }
.winkel-kiezer button:hover { border-color: var(--koper); }
.winkel-kiezer button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--wit); }
.winkel-detail { display: grid; grid-template-columns: 1fr 1.05fr; background: var(--wit); border: 1px solid var(--lijn); border-radius: 24px; overflow: hidden; box-shadow: var(--schaduw); }
.winkel-detail .info { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.winkel-detail h2 { margin: 0; }
.winkel-detail iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 860px) { .winkel-detail { grid-template-columns: 1fr; } .winkel-detail iframe { min-height: 300px; } .winkel-detail .info { padding: 26px; } }
.uren { width: 100%; border-collapse: collapse; font-size: .95rem; }
.uren td { padding: 6px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.uren td:last-child { text-align: right; }
.uren td small { display: block; font-size: .78rem; color: var(--inkt-zacht); }
.uren tr.vandaag td { font-weight: 600; color: var(--petrol); }
.open-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-weight: 500; font-size: .82rem; letter-spacing: .06em; border-radius: 999px; padding: .3em .9em; background: #F1EDEA; color: var(--inkt-zacht); }
.open-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #A39C97; }
.open-badge.open { background: #E5F1E8; color: #2D6A43; }
.open-badge.open::before { background: #3C9A5F; }

.winkel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .winkel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .winkel-raster { grid-template-columns: 1fr; } }
.winkel-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; transition: transform .25s; }
.winkel-kaart:hover { transform: translateY(-3px); }
.winkel-kaart .foto { aspect-ratio: 4 / 3; position: relative; background: var(--blush); overflow: hidden; }
.winkel-kaart .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.foto-leeg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 16px;
  background: radial-gradient(circle at 80% 20%, var(--boter) 0 20%, transparent 20.5%), radial-gradient(circle at 15% 85%, var(--petrol-tint) 0 24%, transparent 24.5%), var(--blush); }
.foto-leeg .groet { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--inkt-zacht); }
.foto-leeg .stad { font-family: var(--f-titel); font-size: 1.9rem; color: var(--inkt); line-height: 1.1; }
.foto-leeg small { font-size: .72rem; color: var(--inkt-zacht); font-style: italic; font-family: var(--f-titel); }
.winkel-kaart .tekst { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.winkel-kaart h3 { font-size: 1.35rem; margin: 0; }
.winkel-kaart address { font-style: normal; font-size: .95rem; line-height: 1.5; color: var(--inkt-zacht); }
.winkel-kaart .acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.mini-knop { font-family: var(--f-tekst); font-weight: 500; font-size: .84rem; text-decoration: none; color: var(--petrol); border: 1px solid var(--lijn); border-radius: 999px; padding: .38em .95em; background: var(--wit); cursor: pointer; transition: all .2s; }
.mini-knop:hover { border-color: var(--petrol); background: var(--petrol); color: var(--wit); }

/* ---------- pers ---------- */
.knipsels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .knipsels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .knipsels { grid-template-columns: 1fr; } }
.knipsel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: var(--schaduw); display: flex; flex-direction: column; transition: transform .25s; }
.knipsel:hover { transform: translateY(-3px); }
.knipsel .bron { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--lijn); }
.knipsel .bron b { font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.knipsel .bron time { font-size: .8rem; color: var(--inkt-zacht); }
.knipsel h3 { font-size: 1.22rem; line-height: 1.3; }
.knipsel p { font-size: .95rem; color: var(--inkt-zacht); }
.knipsel .lees { margin-top: auto; font-weight: 500; font-size: .92rem; text-decoration: none; color: var(--koper); }
.knipsel .lees:hover { text-decoration: underline; }

/* ---------- tijdlijn ---------- */
.tijdlijn { position: relative; max-width: 780px; margin: 0 auto; padding-left: 36px; }
.tijdlijn::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 1px solid var(--blush-diep); }
.moment { position: relative; margin-bottom: 34px; }
.moment::before { content: ''; position: absolute; left: -36px; top: 9px; width: 15px; height: 15px; border-radius: 50%; background: var(--papier); border: 2px solid var(--koper); }
.moment .datum { font-family: var(--f-titel); font-style: italic; font-size: 1.1rem; color: var(--koper); }
.moment h3 { margin: .15em 0 .3em; }
.moment p { color: var(--inkt-zacht); }

/* ---------- formulier ---------- */
.formulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: 24px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--schaduw); }
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.veld label, .veld legend { font-weight: 500; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); }
.veld input, .veld select, .veld textarea { font: inherit; font-size: 1rem; color: var(--inkt); padding: .75em .95em; border: 1px solid rgba(42,37,34,.22); border-radius: 12px; background: var(--papier); transition: border-color .2s, box-shadow .2s; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px var(--petrol-tint); }
.veld textarea { min-height: 140px; resize: vertical; }
.velden-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 640px) { .velden-2 { grid-template-columns: 1fr; } }
fieldset.veld { border: 0; padding: 0; margin: 0 0 18px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vinkjes label { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .94rem; color: var(--inkt); border: 1px solid var(--lijn); border-radius: 999px; padding: .35em .95em; cursor: pointer; background: var(--papier); transition: all .2s; }
.vinkjes input { accent-color: var(--petrol); width: 16px; height: 16px; }
.vinkjes label:has(input:checked) { background: var(--petrol-tint); border-color: var(--petrol); }
.toestemming { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--inkt-zacht); margin-bottom: 22px; }
.toestemming input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--petrol); }
.fout { color: #A2352C; font-weight: 500; font-size: .9rem; display: none; }
.bedankt { display: none; }
.bedankt.toon { display: block; }

/* stappen */
.stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stappen { grid-template-columns: 1fr; } }
.stap::before { counter-increment: stap; content: '0' counter(stap); display: block; font-family: var(--f-titel); font-style: italic; font-size: 2.2rem; color: var(--koper); line-height: 1; margin-bottom: 14px; }

/* FAQ */
details.vraag { border-bottom: 1px solid var(--lijn); }
details.vraag:first-of-type { border-top: 1px solid var(--lijn); }
details.vraag summary { cursor: pointer; list-style: none; padding: 22px 4px; font-family: var(--f-titel); font-size: 1.2rem; display: flex; justify-content: space-between; gap: 14px; }
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after { content: '+'; font-family: var(--f-tekst); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--koper); transition: transform .25s; }
details.vraag[open] summary::after { transform: rotate(45deg); }
details.vraag div { padding: 0 4px 20px; color: var(--inkt-zacht); }

/* pagina-hero */
.pagina-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); background: var(--blush); text-align: center; }
.pagina-hero h1 { max-width: 18ch; margin-inline: auto; }
.pagina-hero .lead { margin: 18px auto 0; }
.pagina-hero .hero-knoppen { justify-content: center; }

/* sociale media */
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.social { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; color: var(--inkt); background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: .55em 1.25em .55em .8em; transition: border-color .2s, color .2s; }
.social:hover { border-color: var(--koper); color: var(--koper); }
.social svg { width: 22px; height: 22px; }
.social svg * { stroke: currentColor; }
.social svg circle[fill] { fill: currentColor; }

/* ---------- footer ---------- */
.site-footer { background: var(--petrol); color: rgba(255,255,255,.9); padding: 0 0 30px; }
.footer-slogan { background: #264D57; text-align: center; padding: 22px 20px; }
.footer-slogan p { margin: 0; font-family: var(--f-titel); font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--wit); }
.footer-slogan p span { color: #E9C29B; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; padding-top: 56px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-family: var(--f-tekst); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: #E9C29B; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,.9); text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:hover { color: #E9C29B; }
.site-footer .logo { display: inline-flex; border-color: var(--wit); color: var(--wit); margin-bottom: 16px; }
.site-footer .logo i { color: #E9C29B; }
.site-footer .socials .social { display: inline-flex; background: transparent; color: var(--wit); border-color: rgba(255,255,255,.35); padding-top: .45em; padding-bottom: .45em; }
.site-footer .socials .social:hover { border-color: #E9C29B; color: #E9C29B; }
.footer-onder { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .85rem; opacity: .8; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* shopmanager */
.manager { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.manager-foto { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--blush); display: grid; place-items: center; border: 2px solid var(--wit); box-shadow: 0 0 0 1px var(--lijn); }
.manager-foto svg { width: 26px; height: 26px; }
.manager-foto svg * { stroke: var(--petrol-zacht); stroke-width: 1.6; stroke-linecap: round; }
.manager-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.manager small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); line-height: 1.3; }
.manager b { font-family: var(--f-titel); font-weight: 400; font-size: 1.05rem; }
.feestdag { margin: -4px 0 0; font-size: .88rem; color: var(--koper); font-family: var(--f-titel); font-style: italic; }

/* FAQ-pagina */
.faq-groep { margin-bottom: 56px; }
.faq-groep h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .6em; }
.faq-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1060px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* pers: stad-label en filter */
.stad-label { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: .3em .85em; border-radius: 999px; background: var(--koper-tint); color: var(--koper); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.stad-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--koper); }
.pers-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.pers-filter button { font-family: var(--f-tekst); font-weight: 500; font-size: .92rem; color: var(--inkt); background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: .45em 1.1em; cursor: pointer; transition: all .2s; }
.pers-filter button:hover { border-color: var(--koper); }
.pers-filter button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--wit); }
.knipsel.verborgen { display: none; }

/* eGift-cadeaubon */
.egift-vak { padding: clamp(18px, 3vw, 36px); min-height: 220px; }
.egift-uitleg { display: none; margin: 16px 0 0; text-align: center; }

/* confetti bij een verstuurde kandidatuur */
.confetti { position: fixed; top: -12px; width: 8px; height: 12px; border-radius: 2px; z-index: 999; pointer-events: none; animation: val 2.8s linear forwards; }
@keyframes val { to { transform: translateY(105vh) rotate(540deg); } }

/* ---------- pers: tijdlijn (nov 2026) ---------- */
.pers-filter .aantal { margin-left: 3px; font-size: .8em; opacity: .55; }
.pers-tijdlijn { max-width: 1000px; margin: 0 auto; }
.pers-jaar { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0 36px; padding-bottom: 22px; }
.pers-jaartal { position: sticky; top: 104px; align-self: start; margin: 0; padding-top: 10px; font-family: var(--f-titel); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; color: var(--koper); }
.pers-lijst { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--blush); }
.pers-item { position: relative; margin: 0 0 12px; }
.pers-item::before { content: ''; position: absolute; left: -36px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--koper); }
.pers-item a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 16px 22px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; text-decoration: none; color: var(--inkt); transition: border-color .2s, transform .2s, box-shadow .2s; }
.pers-item a:hover { border-color: var(--koper); transform: translateX(4px); box-shadow: var(--schaduw); }
.pers-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pers-meta .stad-label { margin: 0; font-size: .72rem; padding: .26em .8em; }
.pers-meta b { font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); }
.pers-meta time { font-size: .82rem; color: var(--inkt-zacht); }
.pers-titel { grid-column: 1; font-family: var(--f-titel); font-size: 1.1rem; line-height: 1.35; }
.pers-pijl { grid-column: 2; grid-row: 1 / span 2; color: var(--koper); font-size: 1.3rem; transition: transform .2s; }
.pers-item a:hover .pers-pijl { transform: translateX(3px); }
.pers-item.verborgen, .pers-jaar.verborgen { display: none; }
.pers-lijst.kort { max-width: 860px; margin: 0 auto; padding: 0; border: 0; }
.pers-lijst.kort .pers-item::before { display: none; }
@media (max-width: 760px) {
  .pers-jaar { grid-template-columns: 1fr; }
  .pers-jaartal { position: static; padding: 0 0 14px; }
  .pers-lijst { padding-left: 20px; }
  .pers-item::before { left: -28px; }
  .pers-item a { padding: 14px 16px; gap: 8px 12px; }
  .pers-titel { font-size: 1.02rem; }
}

/* ---------- word ondernemer: proefmoment (nov 2026) ---------- */
.hero-noot { margin: 22px 0 0; font-size: .98rem; color: var(--inkt-zacht); }
.hero-noot a { color: var(--koper); font-weight: 500; }
.proef-blok { align-items: center; }
.voordelen { list-style: none; margin: 0; padding: 8px 28px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); }
.voordelen li { display: grid; gap: 2px; padding: 16px 0 16px 30px; position: relative; border-bottom: 1px dashed var(--lijn); }
.voordelen li:last-child { border-bottom: 0; }
.voordelen li::before { content: ''; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--koper); box-shadow: 0 0 0 4px var(--koper-tint); }
.voordelen b { font-family: var(--f-titel); font-weight: 500; font-size: 1.12rem; }
.voordelen span { color: var(--inkt-zacht); font-size: .96rem; }
.soort-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.soort-keuze label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--inkt); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px; cursor: pointer; background: var(--papier); transition: all .2s; }
.soort-keuze label:has(input:checked) { background: var(--petrol-tint); border-color: var(--petrol); }
.soort-keuze input { accent-color: var(--petrol); width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; }
.soort-keuze b { display: block; font-weight: 600; font-size: .95rem; }
.soort-keuze small { display: block; font-size: .85rem; color: var(--inkt-zacht); }
[data-enkel-proef][hidden] { display: none; }
@media (max-width: 560px) { .soort-keuze { grid-template-columns: 1fr; } }

/* ---------- menu: cadeaubon subtiel uitgelicht ---------- */
.nav-links a.nav-cadeau { display: inline-flex; align-items: center; gap: 6px; background: var(--koper-tint); color: var(--koper); transition: background .2s, color .2s; }
.nav-links a.nav-cadeau::after { display: none; }
.nav-links a.nav-cadeau:hover, .nav-links a.nav-cadeau[aria-current="page"] { background: var(--koper); color: var(--wit); }
.nav-cadeau svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
@media (max-width: 960px) { .nav-links a.nav-cadeau { align-self: flex-start; padding: .55em 1em; margin: 4px 0; } }