/* Klantenpagina: zelfde huisstijl als de app (perzik, zeeblauw, boter, bruine inkt, Fredoka voor titels).
   Sinds 0.12 eenvoudiger: onze binders staan vooraan als een waaier (zoals kaarten in je hand), belletjes en
   sterretjes uit het logo zweven zacht in de achtergrond, en er is geen stiksel meer in kaders en knoppen.
   De bruine inktrand blijft enkel op het Ontwerp-kader, het ticket van de beurs, de aanvraag en de bovenste tab.
   0.13: de Instagram-strook, belletjes die ploppen, en thema's (Halloween, kerst …) met hun eigen versiering. */

/* Nooit zijwaarts scrollen: anders zoomt Chrome op Android (en Safari) de hele pagina uit en verspringt alles.
   Eerst hidden voor oudere browsers, dan clip (dat laat position: sticky met rust).
   Over de hele breedte (de balk, de zoekrij, de Instagram-strook): met --vol, de breedte zonder schuifbalk (main.tsx).
   100vw telt op Windows de schuifbalk mee: dan staken ze 15 px uit. */
body { overflow-x: hidden; }
@supports (overflow-x: clip) { body { overflow-x: clip; } }
.klant { max-width: 1080px; margin: 0 auto; padding: 0 16px calc(92px + var(--onder)); display: flex; flex-direction: column; gap: 14px; }
.klant-inhoud { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klant a:focus-visible, .klant button:focus-visible, .klant [role="button"]:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 3px; }

/* ── Bovenbalk: logo links, Instagram en Beheer rechts. Mat glas, schuift weg bij naar beneden scrollen. ── */
.klant-balk {
  position: sticky; top: 0; z-index: 20; margin-inline: calc(50% - var(--vol, 100vw) / 2); padding: calc(8px + var(--boven)) max(16px, calc(var(--vol, 100vw) / 2 - 524px)) 8px;
  transition: transform .35s var(--zacht-uit);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Een eigen kleur (de lichte boter uit het logo), zodat de balk niet in de pagina overloopt. */
  background: rgba(251, 233, 196, .9); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid rgba(59, 42, 18, .16);
}
.klant-merk { display: block; line-height: 0; transition: transform .3s var(--veer); flex: none; }
.klant-merk img { height: 40px; width: auto; max-width: min(170px, 40vw); object-fit: contain; object-position: left center; } /* ook een breed logo van een thema */
.klant-merk:hover { transform: rotate(-2deg) scale(1.04); }
/* Een logo van een thema heeft versiering rond de letters: wat groter, anders worden de letters te klein. */
.klant-merk.thema-logo img { height: 52px; max-width: min(200px, 46vw); }
.klant.balk-weg .klant-balk { transform: translateY(-100%); }
.klant-balk-rechts { display: flex; align-items: center; gap: 2px; flex: none; }
.klant-ig-knop { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--inkt-2); text-decoration: none; }
.klant-ig-knop:hover { background: var(--room); color: var(--inkt); }
.klant-ig-knop svg { color: var(--inkt-2); }


/* ── Navigatie tussen start en de vier catalogi ──
   Gsm: onderaan, binnen bereik van je duim. Groot scherm: bovenaan, als tabbladen van een binder. */
.klant-nav a { display: grid; justify-items: center; gap: 2px; color: var(--inkt-2); text-decoration: none; font-size: 11.5px; font-weight: 700; }
.klant-nav a svg { width: 44px; height: 28px; padding: 3px 11px; border-radius: 14px; transition: background .25s var(--zacht-uit), color .25s; box-sizing: border-box; }
.klant-nav a[aria-current="page"] { color: var(--inkt); }
.klant-nav a[aria-current="page"] svg { background: var(--boter); color: var(--inkt); }
.klant-nav.boven { display: none; }
.klant-nav.onder {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; gap: 2px;
  padding: 8px max(8px, calc(50% - 300px)) calc(8px + var(--onder));
  background: rgba(255, 248, 239, .94); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid rgba(59, 42, 18, .08); box-shadow: 0 -6px 24px rgba(59, 42, 18, .08);
}
.klant-nav.onder a { flex: 1; min-width: 0; min-height: 48px; }
.klant-nav.onder a span { white-space: nowrap; }
.klant-nav.onder a:active svg { transform: scale(.92); }
@media (min-width: 760px) {
  .klant { padding-bottom: 40px; }
  .klant-nav.onder { display: none; }
  .klant-nav.boven { display: flex; gap: 4px; align-self: stretch; align-items: flex-end; margin-bottom: -9px; min-width: 0; }
  .klant-nav.boven a { display: flex; align-items: center; gap: 7px; padding: 9px 12px 11px; border-radius: 14px 14px 0 0; font-size: 14.5px; border: 2px solid transparent; border-bottom: 0; white-space: nowrap; }
  .klant-nav.boven a svg { width: 20px; height: 20px; padding: 0; background: none !important; }
  .klant-nav.boven a:hover { background: rgba(255, 248, 239, .6); color: var(--inkt); }
  /* De gekozen tab heeft de kleur van de pagina en loopt erin over, zoals een tabblad in een binder. */
  .klant-nav.boven a[aria-current="page"] { background: var(--perzik); border-color: var(--inkt); color: var(--inkt); position: relative; }
  .klant-nav.boven a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--perzik); }
}

/* ── Start (0.12): eenvoudig, met onze binders vooraan als een waaier, zoals kaarten in je hand ── */
.held { position: relative; display: grid; gap: 18px; margin-top: 22px; }
.held-tekst { display: grid; gap: 12px; justify-items: start; }
.held-tekst h1 { font-size: clamp(31px, 8.2vw, 52px); line-height: 1.03; letter-spacing: -.012em; color: var(--inkt); max-width: 14ch; text-wrap: balance; }
.held-tekst p { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.5; color: var(--inkt-2); }
.held-knoppen { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.held-knoppen .knop { text-decoration: none; }
.held-tekst .knop.zacht { background: var(--room); color: var(--inkt); box-shadow: inset 0 0 0 2px rgba(59, 42, 18, .1); }
.knop.doorzichtig { background: transparent; color: var(--room); box-shadow: inset 0 0 0 2px rgba(255, 248, 239, .75); text-decoration: none; }
.knop.doorzichtig::after { display: none; }
/* Geen stiksel meer in de knoppen en kaders van de klantenpagina. */
.klant .knop::after { display: none; }

.waaier-blok { --w: min(60vw, 250px); --onder: 24px; display: grid; gap: 4px; justify-items: center; min-width: 0; }
.waaier { position: relative; height: calc(var(--w) * 1.42 + var(--onder) + 16px); width: 100%; max-width: 560px; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.waaier-foto {
  position: absolute; left: 50%; bottom: var(--onder); width: var(--w); margin-left: calc(var(--w) / -2); aspect-ratio: 4 / 5; display: block;
  border-radius: 20px; overflow: hidden; background: var(--room); z-index: var(--z, 1); opacity: var(--o, 1);
  box-shadow: 0 1px 0 rgba(59, 42, 18, .05), 0 24px 40px -20px rgba(59, 42, 18, .5);
  transform-origin: 50% 115%; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform .85s var(--zacht-uit), opacity .55s ease, box-shadow .3s;
}
.waaier-foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Een uitgeknipte binder (de voorbeelden): zonder kader, zoals hij in je hand ligt. */
.waaier-foto.kaal { aspect-ratio: 722 / 1008; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.waaier-foto.kaal img { object-fit: contain; filter: drop-shadow(0 18px 16px rgba(59, 42, 18, .3)); }
.waaier-foto.o0 { --z: 6; }
.waaier-foto.l1 { --x: -28%; --y: 4%; --r: -5.5deg; --s: .9; --z: 5; }
.waaier-foto.r1 { --x: 28%; --y: 4%; --r: 5.5deg; --s: .9; --z: 4; }
.waaier-foto.l2 { --x: -64%; --y: 10%; --r: -13deg; --s: .8; --z: 3; }
.waaier-foto.r2 { --x: 64%; --y: 10%; --r: 13deg; --s: .8; --z: 2; }
.waaier-foto.weg-l { --x: -24%; --y: 18%; --r: -10deg; --s: .7; --o: 0; --z: 0; pointer-events: none; }
.waaier-foto.weg-r { --x: 24%; --y: 18%; --r: 10deg; --s: .7; --o: 0; --z: 0; pointer-events: none; }
/* Op een gsm staat de voorste groot: de twee opzij schuiven wat minder uit, zodat niets buiten het scherm valt. */
@media (max-width: 759px) { .waaier-foto.l1 { --x: -21%; } .waaier-foto.r1 { --x: 21%; } }
.waaier-foto:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 3px; }
@media (hover: hover) {
  .waaier:hover .l1 { --x: -34%; --r: -8deg; }
  .waaier:hover .r1 { --x: 34%; --r: 8deg; }
  .waaier:hover .l2 { --x: -70%; --r: -16deg; }
  .waaier:hover .r2 { --x: 70%; --r: 16deg; }
  .waaier-foto.o0:not(.kaal):hover { box-shadow: 0 1px 0 rgba(59, 42, 18, .05), 0 30px 46px -18px rgba(59, 42, 18, .55); }
}
/* Als een binder vooraan landt: één keer een holo-glans erover (binnen de vorm van de binder) en een sterretje. */
.waaier-glans { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 36%, rgba(150, 225, 255, .28) 44%, rgba(255, 255, 255, .55) 50%, rgba(255, 214, 160, .3) 56%, transparent 64%) no-repeat;
  background-size: 260% 100%; background-position: 115% 0; animation: glans 1.15s .5s cubic-bezier(.4, .1, .3, 1) both; }
.waaier-foto.kaal .waaier-glans { -webkit-mask: var(--beeld) center / contain no-repeat; mask: var(--beeld) center / contain no-repeat; }
@keyframes glans { from { background-position: 115% 0; opacity: 1; } 85% { opacity: 1; } to { background-position: -15% 0; opacity: 0; } }
.waaier-ster { position: absolute; top: -12px; right: 4%; width: 28px; height: 28px; fill: #f2c662; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(59, 42, 18, .15)); animation: ster-pop 1.4s .75s ease-out both; }
@keyframes ster-pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 30% { transform: scale(1.2) rotate(8deg); opacity: 1; } 45% { transform: scale(.92) rotate(4deg); } 70% { transform: scale(1) rotate(10deg); opacity: 1; } 100% { transform: scale(.4) rotate(24deg); opacity: 0; } }
/* Waar je bent in de waaier (ook knoppen, voor wie niet veegt). */
.waaier-bolletjes { display: flex; justify-content: center; gap: 0; }
.waaier-bolletjes button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; background: none; }
.waaier-bolletjes button::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(59, 42, 18, .2); transition: width .3s var(--veer), background .3s; }
.waaier-bolletjes button.aan::before { width: 20px; background: var(--zee); }
.waaier-bolletjes button:focus-visible { outline: 2px solid var(--zee-donker); outline-offset: -2px; border-radius: 8px; }

/* ── Wat je bij ons vindt: per soort een paar beelden als een klein waaiertje ── */
.aanbod h2, .beurzen h2, .over h2, .ontwerp h2, .aanvraag h2 { font-size: 24px; line-height: 1.15; color: var(--inkt); }
.aanbod, .beurzen, .over { display: grid; gap: 14px; margin-top: 44px; }
.vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vak { --kleur: var(--zee-licht); position: relative; display: grid; gap: 8px; padding: 0 0 14px; border-radius: 22px; overflow: hidden; background: var(--kleur);
  color: var(--inkt); text-decoration: none; min-width: 0; transition: transform .25s var(--veer); }
.vak.binders { --kleur: var(--boter-licht); }
.vak.\33 d { --kleur: #f7e1d0; }
.vak.sealed { --kleur: var(--hart-licht); }
.vak:active { transform: scale(.97); }
.vak:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 3px; }
.vak-beeld { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.vak-kaart { position: absolute; left: 50%; bottom: -14%; width: 44%; margin-left: -22%; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: var(--wit);
  box-shadow: 0 10px 18px -10px rgba(59, 42, 18, .5); transform-origin: 50% 120%; transition: transform .35s var(--veer); }
.vak-kaart img, .vak-kaart .foto { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.vak-kaart .foto .glans { display: none; }
.vak-kaart.kaal { aspect-ratio: 722 / 1008; bottom: -10%; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.vak-kaart.kaal img { object-fit: contain; filter: drop-shadow(0 8px 8px rgba(59, 42, 18, .25)); }
.vak-beeld.n2 .vak-kaart:nth-child(1) { transform: translateX(-24%) rotate(-8deg); }
.vak-beeld.n2 .vak-kaart:nth-child(2) { transform: translateX(24%) rotate(8deg); }
.vak-beeld.n3 .vak-kaart:nth-child(1) { transform: translateX(-46%) rotate(-12deg) scale(.92); }
.vak-beeld.n3 .vak-kaart:nth-child(2) { z-index: 2; }
.vak-beeld.n3 .vak-kaart:nth-child(3) { transform: translateX(46%) rotate(12deg) scale(.92); }
@media (hover: hover) {
  .vak:hover .vak-beeld.n1 .vak-kaart { transform: translateY(-5%); }
  .vak:hover .vak-beeld.n2 .vak-kaart:nth-child(1) { transform: translateX(-32%) translateY(-4%) rotate(-11deg); }
  .vak:hover .vak-beeld.n2 .vak-kaart:nth-child(2) { transform: translateX(32%) translateY(-4%) rotate(11deg); }
  .vak:hover .vak-beeld.n3 .vak-kaart:nth-child(1) { transform: translateX(-58%) rotate(-16deg) scale(.92); }
  .vak:hover .vak-beeld.n3 .vak-kaart:nth-child(2) { transform: translateY(-5%); }
  .vak:hover .vak-beeld.n3 .vak-kaart:nth-child(3) { transform: translateX(58%) rotate(16deg) scale(.92); }
  .vak:hover .vak-pijl { transform: translateX(3px); }
}
/* Geen foto's: een rustig icoon in een rondje, geen leeg vlak. */
.vak-icoon { position: absolute; inset: 0; display: grid; place-items: center; }
.vak-icoon svg { width: 76px; height: 76px; padding: 18px; border-radius: 50%; background: rgba(255, 248, 239, .75); color: var(--inkt-2); stroke-width: 1.5; }
.vak-tekst { display: grid; gap: 1px; padding: 0 46px 0 14px; }
.vak-tekst strong { font-family: var(--titel); font-weight: 600; font-size: 19px; line-height: 1.15; }
.vak-tekst span { font-size: 13.5px; color: var(--inkt-2); }
.vak-pijl { position: absolute; right: 10px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--room); color: var(--inkt); transition: transform .25s var(--veer); }

/* ── Ontwerp je binder: één uitnodiging in het midden van de pagina (boter, met een inktrand) ── */
.ontwerp-banner { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding: 16px 18px; border-radius: 20px; background: var(--boter); color: var(--inkt); text-decoration: none;
  border: 2.5px solid var(--inkt); box-shadow: 0 5px 0 var(--inkt); transition: transform .2s var(--veer), box-shadow .2s var(--veer); }
.ontwerp-banner:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--inkt); }
.ontwerp-banner-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ontwerp-banner-tekst strong { font-family: var(--titel); font-weight: 600; font-size: 19px; line-height: 1.15; }
.ontwerp-banner-tekst span { font-size: 14px; color: var(--inkt-2); }
.ontwerp-banner-pijl { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--boter); flex: none; transition: transform .25s var(--veer); }
@media (hover: hover) { .ontwerp-banner:hover .ontwerp-banner-pijl { transform: rotate(-8deg) scale(1.06); } }

/* ── Nieuw op Instagram: een strook die rustig van links naar rechts doorloopt, over de hele breedte ── */
.insta { display: grid; gap: 6px; margin-top: 44px; }
.insta-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.insta h2 { font-size: 24px; line-height: 1.15; color: var(--inkt); }
.insta-acties { display: flex; align-items: center; gap: 8px; min-width: 0; }
.insta-pauze { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--room); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.insta-pauze:hover { box-shadow: inset 0 0 0 1.5px var(--zee); }
.insta-volg { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--room); color: var(--zee-donker);
  font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--zee-licht); min-width: 0; overflow-wrap: anywhere; }
.insta-strook { --tegel: 148px; --tussen: 16px; margin-inline: calc(50% - var(--vol, 100vw) / 2); padding: 14px 0 40px; margin-bottom: -18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* Twee keer dezelfde rij: van -50% naar 0 schuift ze precies één rij op en begint dan onzichtbaar opnieuw. */
.insta-baan { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: insta-loop var(--duur, 40s) linear infinite; animation-play-state: paused; }
.insta-strook.loopt .insta-baan { animation-play-state: running; }
.insta-strook.loopt:hover .insta-baan { animation-play-state: paused; }
/* Met het toetsenbord in de strook: ze staat stil en vooraan, zodat de focus in beeld is. */
.insta-strook:focus-within .insta-baan { animation: none; transform: none; }
@keyframes insta-loop { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.insta-tegel { flex: none; width: var(--tegel); margin-right: var(--tussen); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.insta-tegel.t0 { --r: -2deg; }
.insta-tegel.t1 { --r: 1.6deg; --y: 8px; }
.insta-tegel.t2 { --r: -1deg; --y: -3px; }
.insta-tegel.t3 { --r: 2.2deg; --y: 5px; }
.insta-tegel a { position: relative; display: block; aspect-ratio: 4 / 5; padding: 6px; border-radius: 18px; background: var(--room); color: var(--inkt);
  box-shadow: 0 1px 0 rgba(59, 42, 18, .05), 0 16px 26px -16px rgba(59, 42, 18, .5); transition: transform .35s var(--veer), box-shadow .3s; -webkit-user-drag: none; }
.insta-tegel img, .insta-wacht { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; background: var(--zee-licht); }
.insta-ig { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 248, 239, .92); color: var(--inkt);
  box-shadow: 0 2px 6px rgba(59, 42, 18, .15); }
@media (hover: hover) {
  .insta-tegel a:hover { transform: translateY(-6px) rotate(calc(var(--r, 0deg) * -1)); box-shadow: 0 1px 0 rgba(59, 42, 18, .05), 0 22px 30px -16px rgba(59, 42, 18, .55); }
}

/* ── Een thema (Halloween, kerst …): de eend zegt de zin in een ballon bovenaan de start, en een gloed in de
   kleur van het thema achter de binders. De eend dobbert, de ballon zweeft op zijn eigen ritme. ── */
.thema-eend { display: flex; align-items: center; gap: 4px; margin: 0 0 4px -6px; max-width: 100%; }
.thema-eend img { width: 76px; height: 76px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 12px rgba(59, 42, 18, .22));
  animation: eend-in .8s var(--veer) both, dobber 2.8s 1s ease-in-out infinite; }
.thema-ballon { position: relative; margin: 0 0 18px 6px; min-width: 0; max-width: 30ch; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: var(--wit); color: var(--inkt);
  font-family: var(--titel); font-weight: 600; font-size: 17px; line-height: 1.22; box-shadow: 0 12px 26px -12px rgba(59, 42, 18, .45);
  animation: ballon-in .5s .45s var(--veer) both, ballon-zweef 4.6s 1.2s ease-in-out infinite; }
.thema-ballon::before { content: ""; position: absolute; left: -8px; bottom: 9px; border: 9px solid transparent; border-right-color: var(--wit); border-left: 0; }
.thema-ballon small { display: block; margin-bottom: 3px; font-family: var(--tekst); font-size: 12.5px; font-weight: 700; color: var(--inkt-3); }
@keyframes ballon-zweef { 50% { transform: translateY(-5px) rotate(-.6deg); } }
@media (prefers-reduced-motion: reduce) { .thema-eend img, .thema-ballon { animation: none; } }
.klant.thema .waaier::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(92%, 420px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(243, 201, 129, .3), transparent 68%); }
/* De kleur van het thema waar de browser color-mix kent (oudere Safari: de boterkleur hierboven). */
@supports (background: color-mix(in srgb, red 10%, white)) {
  .thema-ballon small { color: color-mix(in srgb, var(--thema) 70%, var(--inkt)); }
  .klant.thema .waaier::before { background: radial-gradient(circle, color-mix(in srgb, var(--thema) 30%, transparent), transparent 68%); }
}
.waaier.laden { pointer-events: none; }

/* ── Sfeer: belletjes en sterretjes uit ons logo, zacht in de achtergrond (langs de randen) ── */
.sfeer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.klant-inhoud, .klant-voet { position: relative; z-index: 1; }
.belletje { position: absolute; width: var(--d); height: var(--d); border-radius: 50%; opacity: .8;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 11%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 50%, rgba(76, 127, 135, .16) 64%, rgba(243, 201, 129, .3) 71%, rgba(243, 201, 129, 0) 74%);
  animation: drijf var(--t, 14s) ease-in-out var(--v, 0s) infinite alternate; }
@keyframes drijf { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 6px), var(--dy, -18px)); } }
.sterretje { position: absolute; width: var(--d); height: var(--d); fill: #f2c662; opacity: 0; transform-origin: 50% 50%;
  animation: fonkel 15s ease-in-out var(--v, 0s) infinite; }
/* Om beurten één sterretje: het licht op, pompt even, blijft kort staan en verdwijnt (elk 3 s van 15 s). */
@keyframes fonkel {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  4% { opacity: .95; transform: scale(1.15) rotate(8deg); }
  7% { transform: scale(.86) rotate(5deg); }
  10% { opacity: .9; transform: scale(1.05) rotate(7deg); }
  16% { opacity: .85; transform: scale(1) rotate(12deg); }
  20%, 100% { opacity: 0; transform: scale(.25) rotate(18deg); }
}
.b0 { --d: 34px; top: 12%; left: 3%; --t: 13s; --v: -3s; --dx: 8px; --dy: -22px; }
.b1 { --d: 24px; top: 9%; right: 6%; --t: 11s; --v: -6s; --dx: -6px; --dy: -16px; }
.b2 { --d: 46px; top: 46%; right: 2%; --t: 17s; --v: -1s; --dx: -10px; --dy: -26px; }
.b3 { --d: 26px; top: 70%; left: 2%; --t: 12s; --v: -8s; --dx: 7px; --dy: -14px; }
.b4 { --d: 30px; top: 86%; right: 9%; --t: 15s; --v: -4s; --dx: -8px; --dy: -20px; }
.b5 { --d: 20px; top: 33%; left: 1.5%; --t: 14s; --v: -10s; --dx: 6px; --dy: -18px; }
/* Tien sterretjes, om de 1,5 s licht er één op: zo staan er telkens twee. */
.s0 { --d: 20px; top: 20%; left: 9%; --v: 0s; }
.s1 { --d: 16px; top: 30%; right: 5%; --v: -1.5s; }
.s2 { --d: 18px; top: 58%; left: 4%; --v: -3s; }
.s3 { --d: 14px; top: 76%; right: 4%; --v: -4.5s; }
.s4 { --d: 18px; top: 7%; left: 46%; --v: -6s; }
.s5 { --d: 13px; top: 15%; right: 21%; --v: -7.5s; }
.s6 { --d: 15px; top: 43%; left: 13%; --v: -9s; }
.s7 { --d: 17px; top: 64%; right: 15%; --v: -10.5s; }
.s8 { --d: 12px; top: 91%; left: 28%; --v: -12s; }
.s9 { --d: 14px; top: 50%; left: 54%; --v: -13.5s; }
/* Belletjes die verschijnen, wat opstijgen en ploppen (met een kringetje en een paar spatjes). */
.plop { position: absolute; width: var(--d); height: var(--d); }
.plop-bel { position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08) 0 50%, rgba(76, 127, 135, .2) 64%, rgba(243, 201, 129, .36) 71%, rgba(243, 201, 129, 0) 74%);
  animation: plop-op var(--t, 11s) ease-in-out var(--v, 0s) infinite; }
.plop-ring { position: absolute; inset: -10%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(76, 127, 135, .18); opacity: 0;
  animation: plop-ring var(--t, 11s) ease-out var(--v, 0s) infinite; }
.plop-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, .95);
  box-shadow: calc(var(--d) * -.62) calc(var(--d) * -.4) 0 rgba(255, 255, 255, .9), calc(var(--d) * .6) calc(var(--d) * -.5) 0 rgba(243, 201, 129, .9),
    calc(var(--d) * -.5) calc(var(--d) * .55) 0 rgba(243, 201, 129, .9), calc(var(--d) * .62) calc(var(--d) * .45) 0 rgba(255, 255, 255, .9); }
@keyframes plop-op {
  0% { opacity: 0; transform: translateY(0) scale(.2); }
  7% { opacity: .9; transform: translateY(-4px) scale(1); }
  52% { opacity: .9; transform: translateY(var(--hoog, -60px)) scale(1); }
  55% { opacity: 0; transform: translateY(var(--hoog, -60px)) scale(1.22); }
  100% { opacity: 0; transform: translateY(var(--hoog, -60px)) scale(1.22); }
}
@keyframes plop-ring {
  0%, 52% { opacity: 0; transform: translateY(var(--hoog, -60px)) scale(.7); }
  54% { opacity: .95; transform: translateY(var(--hoog, -60px)) scale(.95); }
  62% { opacity: 0; transform: translateY(var(--hoog, -60px)) scale(1.7); }
  100% { opacity: 0; transform: translateY(var(--hoog, -60px)) scale(1.7); }
}
.p0 { --d: 22px; top: 26%; left: 6%; --t: 11s; --v: -2s; --hoog: -70px; }
.p1 { --d: 18px; top: 38%; right: 7%; --t: 13s; --v: -7s; --hoog: -56px; }
.p2 { --d: 26px; top: 66%; right: 6%; --t: 12s; --v: -4s; --hoog: -80px; }
.p3 { --d: 16px; top: 82%; left: 10%; --t: 10s; --v: -9s; --hoog: -50px; }
.p4 { --d: 20px; top: 54%; left: 34%; --t: 14s; --v: -11s; --hoog: -64px; }
.p5 { --d: 15px; top: 18%; right: 32%; --t: 12.5s; --v: -5.5s; --hoog: -48px; }
/* Met een thema: de versiering zweeft (een pompoen, een spookje, een sneeuwvlok …), iets groter dan een belletje. */
.zweef { position: absolute; width: calc(var(--d) * 1.4); height: calc(var(--d) * 1.4); opacity: .9; overflow: visible;
  filter: drop-shadow(0 4px 5px rgba(59, 42, 18, .14)); animation: zweef var(--t, 14s) ease-in-out var(--v, 0s) infinite alternate; }
@keyframes zweef { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(var(--dx, 6px), var(--dy, -18px)) rotate(7deg); } }
@media (max-width: 759px) { .b1, .b3, .s1, .s3, .s9, .p1, .p4 { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .belletje, .zweef { animation: none; }
  .plop { display: none; }
  .insta-baan { animation: none; transform: none; padding-inline: 16px; }
  .insta-strook { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .insta-tegel { scroll-snap-align: start; scroll-margin-left: 16px; }
  .insta-tegel.extra { display: none; }
  .insta-pauze { display: none; }
  .sterretje { animation: none; opacity: .7; }
  .waaier-foto, .vak-kaart { transition: none; }
  .waaier-glans, .waaier-ster { display: none; }
}

/* ── Komende beurzen: de volgende als ticket, de rest als lijst ── */
.ticket {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr);
  border: 2.5px solid var(--inkt); border-radius: 20px; background: var(--room); box-shadow: 0 5px 0 var(--inkt); overflow: hidden;
}
/* Twee halve inkepingen boven en onder de scheurlijn */
.ticket::before, .ticket::after { content: ""; position: absolute; left: 72px; width: 22px; height: 22px; border-radius: 50%; background: var(--perzik); border: 2.5px solid var(--inkt); z-index: 1; }
.ticket::before { top: -13px; }
.ticket::after { bottom: -13px; }
.ticket-stomp { display: grid; align-content: center; justify-items: center; gap: 0; padding: 16px 6px; background: var(--zee); color: var(--room); border-right: 2.5px solid var(--inkt); text-align: center; }
.ticket-stomp span { font-size: 13px; font-weight: 700; }
.ticket-stomp strong { font-family: var(--titel); font-weight: 600; font-size: 40px; line-height: 1; margin: 2px 0; }
.ticket-lijf { display: grid; gap: 6px; padding: 16px 16px 16px 20px; min-width: 0; }
.ticket-lijf h3 { font-size: 22px; line-height: 1.12; color: var(--inkt); overflow-wrap: anywhere; }
.ticket-nog { width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--boter); color: var(--inkt); font-size: 13px; font-weight: 700; }
.ticket-regel { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--inkt-2); }
.ticket-regel svg { flex: none; margin-top: 2px; color: var(--zee-donker); }
.ticket-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ticket-knoppen .knop { text-decoration: none; }
.ticket-knoppen .knop.doorzichtig { color: var(--zee-donker); box-shadow: inset 0 0 0 2px var(--zee-licht); }
.beurzen-leeg { margin: 0; font-size: 15px; color: var(--inkt-2); }
.beurzen-leeg a { color: var(--zee-donker); font-weight: 700; }
.beurs-lijst { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.beurs-lijst li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--lijn); }
.beurs-lijst li:first-child { border-top: 0; }
.beurs-datum { width: 48px; height: 52px; border-radius: 12px; background: var(--zee-licht); color: var(--zee-donker); display: grid; place-content: center; text-align: center; flex: none; }
.beurs-datum strong { font-family: var(--titel); font-weight: 600; font-size: 21px; line-height: 1; }
.beurs-datum em { font-style: normal; font-size: 12px; font-weight: 700; }
.beurs-tekst { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13.5px; color: var(--inkt-2); }
.beurs-tekst strong { color: var(--inkt); font-size: 15.5px; }
.beurs-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--zee-donker); flex: none; }
.beurs-link:hover { background: var(--room); }

/* ── Over Bind'r ── */
.over { grid-template-columns: minmax(0, 1fr); padding: 6px 0 0; }
/* Ons logo met de eend (of dat van het thema) bij Over Bind'r. */
.over-logo { width: min(300px, 78vw); height: auto; justify-self: center; filter: drop-shadow(0 10px 14px rgba(59, 42, 18, .12)); }
.over-tekst { display: grid; gap: 10px; max-width: 64ch; }
.over-tekst p { margin: 0; font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
.over-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.over-lijst li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.over-lijst svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--zee-licht); color: var(--zee-donker); }
.over-lijst strong { color: var(--inkt); }

/* ── Een catalogus: titel en uitleg ── */
.sectie-kop { display: grid; gap: 6px; justify-items: start; margin-top: 18px; }
.sectie-kop { min-width: 0; }
/* Een lang woord (Verkoopvoorwaarden) past ook op een smalle gsm: kleiner en desnoods afgebroken. */
.sectie-kop h1 { font-size: clamp(28px, 9vw, 48px); line-height: 1; max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sectie-kop p { margin: 0; font-size: 15px; color: var(--inkt-2); max-width: 60ch; }
.nieuw-knop { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--boter); color: var(--inkt); font-weight: 700; font-size: 14px; }

/* Zoeken en sorteren: blijft onder de bovenbalk staan. */
.klant-zoekrij {
  position: sticky; top: calc(61px + var(--boven)); z-index: 15; margin-inline: calc(50% - var(--vol, 100vw) / 2); padding: 8px max(16px, calc(var(--vol, 100vw) / 2 - 524px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  background: rgba(252, 235, 215, .88); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  transition: top .35s var(--zacht-uit);
}
.klant.balk-weg .klant-zoekrij { top: 0; }
.klant-zoekrij .zoekbalk { background: var(--room); box-shadow: var(--schaduw); }
.klant-zoekrij .zoekbalk input { padding-left: 2px; }
.sorteer { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px; padding: 0 12px; border-radius: 13px; background: var(--room); box-shadow: var(--schaduw); color: var(--zee-donker); cursor: pointer; }
.sorteer-tekst { display: none; font-size: 14px; font-weight: 600; color: var(--inkt); }
/* De onzichtbare keuzelijst ligt over de knop. Safari geeft een select een minimumbreedte (de langste keuze):
   zonder appearance: none en overflow: hidden stak ze 50 px buiten het scherm op een iPhone. */
.sorteer { overflow: hidden; }
.sorteer select { position: absolute; inset: 0; width: 100%; min-width: 0; max-width: 100%; opacity: 0; cursor: pointer; font-size: 16px; -webkit-appearance: none; appearance: none; }
.sorteer:focus-within { outline: 3px solid var(--zee-donker); outline-offset: 2px; }
@media (min-width: 520px) { .sorteer-tekst { display: inline; } }

/* minmax(0, 1fr): anders maakt Safari de kolom zo breed als alle chips samen (en scrolt de pagina zijwaarts). */
.klant-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.klant-filters > * { min-width: 0; }
.klant-filters .chips, .klant-filters .categorieen { margin: 0 -16px; padding: 2px 16px 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.schakelchip { display: inline-flex; align-items: center; gap: 7px; }
.schakelbol { width: 26px; height: 16px; border-radius: 8px; background: rgba(59, 42, 18, .14); position: relative; transition: background .25s; flex: none; }
.schakelbol::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .3s var(--veer); }
.schakelchip.aan .schakelbol { background: var(--boter); }
.schakelchip.aan .schakelbol::after { transform: translateX(10px); }
.klant-resultaat { display: flex; align-items: center; justify-content: space-between; min-height: 24px; font-size: 14px; font-weight: 600; color: var(--inkt-2); }
.klant-resultaat .tekstknop { padding: 0; }

/* Tegels */
.klant .raster { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
/* minmax(0, 1fr): een kolom wordt nooit breder dan de helft (anders anderhalve kaart en zoomt Android uit). */
@media (max-width: 380px) { .klant .raster { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Enkel de hoogte schatten: een geschatte breedte (300 px) maakte de kolommen op een smalle gsm te breed. */
.klant .tegel { content-visibility: auto; contain-intrinsic-block-size: auto 300px; min-width: 0; }
.klant .tegel-onder { margin-top: 4px; gap: 6px; }
.klant .tegel-onder .badges { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.klant .tegel-naam { font-size: 14.5px; }
.klant .tegel .hartje { font-size: 16px; flex: none; }
.artikel-glyph { font-family: var(--titel); font-size: 44px; font-weight: 600; opacity: .5; }
.artikel-vlak .glans { border-radius: 10px; }
.vraag-merk { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 2px 8px; border-radius: 8px; background: var(--zee); color: #fff; font-size: 11px; font-weight: 800; }

.klant-leeg, .klant-fout { text-align: center; color: var(--inkt-2); padding: 32px 16px; display: grid; justify-items: center; gap: 10px; }
.klant-leeg .knop { text-decoration: none; }
.klant-leeg p { margin: 0; max-width: 42ch; }
.actieve-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.laad-tegel { gap: 8px; animation: none; box-shadow: var(--schaduw); }
.laad-tegel .foto, .laad-tegel span { background: linear-gradient(100deg, var(--lijn) 30%, var(--room) 50%, var(--lijn) 70%); background-size: 300% 100%; animation: glanslaad 1.3s ease-in-out infinite; }
.laad-tegel span { display: block; height: 12px; border-radius: 6px; width: 80%; }
.laad-tegel span:last-child { width: 45%; }
@keyframes glanslaad { from { background-position: 100% 0; } to { background-position: 0 0; } }
.klant-leeg img { animation: dobber 3s ease-in-out infinite; }

/* Binders: groot, ook die niet uitgestald liggen */
.binders-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.binder-kaart { display: grid; gap: 8px; align-content: start; padding: 8px; border-radius: 20px; background: var(--room); box-shadow: var(--schaduw); text-align: left; animation: tegel-in .45s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.binder-kaart .artikel-vlak { aspect-ratio: 4 / 5; border-radius: 14px; }
.binder-tekst { display: grid; gap: 2px; padding: 0 4px; }
/* Zelfde letter als de namen van de kaarten (niet Fredoka): Fredoka enkel voor titels. */
.binder-tekst strong { font-weight: 650; font-size: 16px; line-height: 1.25; }
.binder-tekst span { font-size: 13.5px; color: var(--inkt-2); }
.binder-onder { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 2px; }
.binder-onder em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--zee-donker); }
@media (max-width: 480px) { .binders-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .binder-tekst strong { font-size: 15px; } }

/* Detail */
.klant .sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.klant-sheet .sheet-inhoud { padding-bottom: 12px; }
.klant-detail { display: grid; gap: 12px; justify-items: start; }
.klant-detail-links, .klant-detail-rechts { display: grid; gap: 10px; justify-items: start; width: 100%; }
.klant-detail-links { justify-items: center; }
.klant-detail-foto { position: relative; width: min(250px, 64vw); justify-self: center; border-radius: 16px; cursor: zoom-in; }
.klant-detail-foto .foto, .klant-detail-foto .artikel-vlak { border-radius: 16px; box-shadow: 0 18px 40px rgba(59, 42, 18, .25); }
.klant-detail-foto.holo .glans { opacity: .45; animation: glimmer 4s ease-in-out infinite; }
.vergroot-hint { font-size: 12.5px; color: var(--inkt-3); }
.detail-prijsrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-self: center; }
.detail-prijsrij:empty { display: none; }
.aantal-label { padding: 5px 10px; border-radius: 999px; background: var(--inkt); color: var(--boter); font-weight: 700; font-size: 13px; }
.nieuw-label { padding: 5px 10px; border-radius: 999px; background: var(--boter); color: var(--inkt); font-weight: 700; font-size: 13px; }
.klant-detail .gegevens { width: 100%; background: var(--room); border-radius: 16px; padding: 14px 16px; }
.klant-detail-balk { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + var(--onder)); border-top: 1px solid var(--lijn); background: var(--room); border-radius: 0 0 24px 24px; }
@media (max-width: 699px) { .klant-detail-balk { border-radius: 0; } }
.detail-stand { display: grid; gap: 2px; text-align: right; font-size: 13px; color: var(--inkt-2); min-width: 0; }
.detail-stand strong { color: var(--inkt); font-size: 14.5px; }
.kaart-groot .artikel-vlak { border-radius: 18px; }

/* ── Onderaan: Instagram en Facebook, het logo, wie we zijn (wettelijk) en de links ── */
.klant-voet { margin-top: 30px; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--inkt-2); font-size: 13px; }
.klant-voet p { margin: 0; }
.sociaal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sociaal-knop { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--room); border: 1.5px solid var(--lijn); color: var(--inkt); text-decoration: none; transition: border-color .2s; }
.sociaal-knop:hover { border-color: var(--zee); }
.sociaal-knop svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--zee-licht); color: var(--zee-donker); flex: none; }
.sociaal-knop span { display: grid; text-align: left; font-family: var(--titel); font-weight: 600; font-size: 16px; line-height: 1.15; }
.sociaal-knop em { font-style: normal; font-family: var(--tekst); font-weight: 500; font-size: 12.5px; color: var(--inkt-2); }
.sociaal-tekst { max-width: 44ch; margin-bottom: 8px !important; }
.voet-logo { width: 120px; height: auto; max-height: 70px; object-fit: contain; margin-top: 6px; opacity: .95; }
.voet-wettelijk { display: grid; gap: 3px; max-width: 64ch; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: 12.5px; line-height: 1.45; color: var(--inkt-2); overflow-wrap: anywhere; }
.voet-wettelijk strong { color: var(--inkt-2); }
.voet-wettelijk a { color: inherit; }
.voet-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.voet-links a { color: var(--inkt-2); padding: 6px 2px; }
.voet-links .voet-beheer { color: var(--inkt-3); opacity: .75; }

/* ── Privacy en verkoopvoorwaarden ── */
.juridisch { display: grid; gap: 14px; max-width: 760px; }
.juridisch section { display: grid; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--room); }
.juridisch h2 { font-size: 20px; line-height: 1.2; }
.juridisch p, .juridisch li { margin: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.juridisch ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.juridisch a { color: var(--zee-donker); font-weight: 600; }
.modelformulier { padding: 10px 12px; border-radius: 12px; background: var(--wit); }
.modelformulier summary { cursor: pointer; font-weight: 700; }
.modelformulier p { margin-top: 8px; font-size: 14px; }
.juridisch-terug { padding: 4px 0; }
.juridisch-terug .knop { text-decoration: none; }

/* ── De eend met een tekstballon, linksonder (boven de navigatie op de gsm) ── */
.eend-popup { position: fixed; left: 12px; bottom: calc(80px + var(--onder)); z-index: 50; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
@media (min-width: 760px) { .eend-popup { bottom: calc(12px + var(--onder)); } }
.eend-sluit::before { content: ""; position: absolute; inset: -8px; }
.eend-knop { order: 1; pointer-events: auto; border-radius: 50%; }
.eend-popup.dicht .eend-beeld { width: 60px; height: 60px; }
.eend-beeld { width: 84px; height: 84px; transition: width .35s var(--veer), height .35s var(--veer); animation: eend-in .8s var(--veer) both, dobber 2.8s 1s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(59, 42, 18, .25)); }
.eend-ballon { order: 2; position: relative; margin: 0 0 58px -6px; max-width: 210px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--wit); color: var(--inkt);
  text-decoration: none; font-family: var(--titel); font-weight: 600; font-size: 16px; line-height: 1.2; box-shadow: 0 10px 28px rgba(59, 42, 18, .22); pointer-events: auto;
  animation: ballon-in .5s .55s var(--veer) both; display: grid; gap: 6px; }
.eend-ballon span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--tekst); font-size: 13px; font-weight: 700; color: var(--zee-donker); }
.eend-ballon::before { content: ""; position: absolute; left: -7px; bottom: 10px; border: 8px solid transparent; border-right-color: var(--wit); border-left: 0; }
.eend-sluit { order: 3; pointer-events: auto; align-self: flex-start; margin: 0 0 0 -14px; width: 30px; height: 30px; outline-offset: 6px; border-radius: 50%; background: var(--inkt); color: var(--room); font-size: 12px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); animation: ballon-in .4s .8s var(--veer) both; position: relative; z-index: 1; }
@keyframes eend-in { from { transform: translateY(120%) rotate(-12deg); } }
@keyframes ballon-in { from { opacity: 0; transform: scale(.4) translateX(-20px); transform-origin: left bottom; } }
@media (prefers-reduced-motion: reduce) { .eend-beeld, .eend-ballon, .eend-sluit, .klant-leeg img { animation: none; } }

/* ── Groot scherm ── */
@media (min-width: 760px) {
  .klant { padding-inline: 24px; }
  .held { margin-top: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; min-height: 420px; }
  .waaier-blok { --w: 236px; }
  .vakken { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .beurzen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .beurzen h2, .beurzen-leeg { grid-column: 1 / -1; }
  .beurs-lijst { margin-top: 0; }
  .ticket { grid-template-columns: 104px minmax(0, 1fr); }
  .ticket::before, .ticket::after { left: 92px; }
  .ticket-stomp strong { font-size: 48px; }
  .ticket-lijf { padding: 22px 22px 22px 26px; }
  .ticket-lijf h3 { font-size: 26px; }
  .aanbod, .beurzen, .over, .insta { margin-top: 72px; }
  .ontwerp-banner { margin-top: 56px; padding: 20px 24px; }
  .ontwerp-banner-tekst strong { font-size: 22px; }
  .insta-strook { --tegel: 188px; --tussen: 22px; }
  .aanbod h2, .beurzen h2, .over h2, .ontwerp h2, .aanvraag h2 { font-size: 28px; }
  .klant-detail { grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; align-items: start; }
  .klant-detail-foto { width: 100%; }
  .klant .sheet.klant-sheet { max-width: 860px; }
  .klant-detail-rechts .detail-prijsrij { justify-self: start; }
  .klant-detail-rechts { padding-top: 8px; }
  .klant-filters .chips { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; }
  .klant .raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
  .ig-blok { max-width: 720px; }
}

/* ── Detail: meer foto's van een artikel ── */
.detail-duimen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.detail-duimen button { width: 52px; height: 52px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--room); box-shadow: var(--schaduw); opacity: .7; transition: opacity .2s, border-color .2s; }
.detail-duimen button.aan { border-color: var(--inkt); opacity: 1; }
.detail-duimen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Ontwerp je binder ── */
.ontwerp { display: grid; gap: 18px; margin-top: 6px; }
.ontwerp-binder { position: relative; display: grid; justify-items: center; gap: 6px; }
.ontwerp-canvas { width: min(100%, 380px); aspect-ratio: 722 / 1008; height: auto; cursor: pointer; filter: drop-shadow(0 9px 20px rgba(38, 30, 22, .18)); }
/* Enkel met een ontwerp erop: dan versleep je het, en scrolt de pagina niet mee. */
.ontwerp-canvas.sleepbaar { cursor: grab; touch-action: none; }
.ontwerp-canvas.sleepbaar:active { cursor: grabbing; }
.ontwerp-leeg { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: 18px 22px; border-radius: 18px;
  background: rgba(255, 248, 239, .94); color: var(--inkt); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); border: 2px solid var(--inkt); }
.ontwerp-leeg strong { font-family: var(--titel); font-weight: 600; font-size: 18px; }
.ontwerp-leeg span { font-size: 13px; color: var(--inkt-2); }
.ontwerp-noot { margin: 0; font-size: 12.5px; color: var(--inkt-3); text-align: center; }
.ontwerp-keuzes { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 20px; background: var(--room); box-shadow: var(--schaduw); }
.ontwerp-bestand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ontwerp-naam { font-size: 13.5px; color: var(--inkt-2); overflow-wrap: anywhere; }
.ontwerp-tip { margin: 0; font-size: 13.5px; color: var(--inkt-2); }
.ontwerp-fout { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--hart-licht); color: var(--hart-inkt); font-weight: 600; font-size: 14px; }
.keuze-groep { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.keuze-groep legend, .keuze-groep.schuif > span { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--inkt); }
.keuze-groep.schuif { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.keuze-groep.schuif > span { margin: 0; }
.keuze-groep input[type="range"] { width: 100%; accent-color: var(--zee-donker); }
.stalen { display: flex; flex-wrap: wrap; gap: 10px; }
.staal { width: 38px; height: 38px; border-radius: 50%; background: var(--staal); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); transition: transform .2s var(--veer); }
.staal.aan { box-shadow: 0 0 0 3px var(--room), 0 0 0 5.5px var(--inkt); transform: scale(1.06); }
.segmentje { display: flex; gap: 6px; flex-wrap: wrap; }
.segmentje button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--wit); border: 1.5px solid var(--lijn); font-weight: 600; font-size: 14px; }
.segmentje button.aan { border-color: var(--inkt); background: var(--boter-licht); }
.ontwerp-knoppen { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ontwerp-knoppen .tekstknop { padding: 4px 0; }

.aanvraag { display: grid; gap: 10px; margin-top: 22px; padding: 20px 18px; border-radius: 22px; background: var(--room); border: 2.5px solid var(--inkt); box-shadow: 0 5px 0 var(--inkt); }
.aanvraag-uitleg { margin: 0; color: var(--inkt-2); font-size: 15px; }
.aanvraag-form { display: grid; gap: 14px; }
.wens-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wens-chips .chip { min-height: 38px; }
.veld { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--inkt); }
.veld em { font-style: normal; font-weight: 500; color: var(--inkt-3); }
.veld input, .veld textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--lijn); background: var(--wit); font: 400 16px/1.4 var(--tekst); color: var(--inkt); }
.veld textarea { resize: vertical; min-height: 104px; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--zee); box-shadow: 0 0 0 3px var(--zee-licht); }
.veld input[aria-invalid="true"] { border-color: var(--hart); }
.veld-hint { font-size: 13px; font-weight: 500; color: var(--inkt-3); margin: 0; }
.twee-velden { display: grid; gap: 14px; }
.meesturen { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.meesturen input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--zee-donker); flex: none; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy { margin: 0; font-size: 12.5px; color: var(--inkt-3); line-height: 1.45; }
.aanvraag .knop.groot { width: 100%; }
.aanvraag.klaar { justify-items: center; text-align: center; padding: 28px 20px; }
.aanvraag.klaar p { margin: 0; max-width: 46ch; color: var(--inkt-2); }
.aanvraag-vink { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--groen); color: #fff; animation: plop .5s var(--veer) both; }
.aanvraag.klaar .held-knoppen { justify-content: center; }
.aanvraag.klaar .knop.zacht { text-decoration: none; }
@media (min-width: 760px) {
  .ontwerp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .ontwerp-canvas { width: min(100%, 440px); }
  .twee-velden { grid-template-columns: 1fr 1fr; }
  .aanvraag { padding: 28px 30px; }
}
@media (prefers-reduced-motion: reduce) { .aanvraag-vink { animation: none; } }

/* Breed scherm (vanaf 1000 px): vijf binders in de waaier. */
@media (min-width: 1000px) {
  .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; min-height: 520px; }
  .held-tekst h1 { font-size: 58px; }
  .waaier-blok { --w: 256px; --onder: 58px; } /* de buitenste binders hangen lager: plaats voor de bolletjes */
}

/* Zes tabbladen bovenaan: op een smaller groot scherm wat compacter, Instagram enkel als icoon. */
@media (min-width: 760px) and (max-width: 1099px) {
  .klant-nav.boven { gap: 0; }
  .klant-nav.boven a { padding: 9px 9px 11px; font-size: 13.5px; gap: 5px; }
  .klant-ig-knop span { display: none; }
  .klant-ig-knop { width: 44px; justify-content: center; padding: 0; }
}
/* Een tablet rechtop (Galaxy Tab: 800 px): zonder icoontjes passen ook zes tabbladen. */
@media (min-width: 760px) and (max-width: 959px) { .klant-nav.boven a svg { display: none; } }

/* ── Ontwerp je binder: afbeeldingen bij het idee, de schakelaar en de proef op de binder ── */
.keuze-groep legend em { font-style: normal; font-weight: 500; color: var(--inkt-3); }
.kleur-naam { font-weight: 600; color: var(--inkt-2); }
.idee-beelden { display: flex; flex-wrap: wrap; gap: 10px; }
.idee-beeld { position: relative; width: 92px; height: 92px; }
.idee-beeld img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: var(--schaduw); display: block; }
.idee-weg { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; background: var(--inkt); color: var(--room); font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--room); }
.idee-nieuw { width: 92px; height: 92px; border-radius: 14px; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 6px; border: 2px dashed var(--lijn); background: var(--wit); color: var(--inkt-2); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.proef-schakel { display: grid; gap: 14px; padding: 14px; border-radius: 18px; background: var(--zee-licht); }
.proef-schakel.aan { background: var(--perzik); box-shadow: inset 0 0 0 2px var(--zee); }
.schakel-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.schakel-rij > span { display: grid; gap: 2px; }
.schakel-rij strong { font-size: 15.5px; }
.schakel-rij input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 15px; background: rgba(59, 42, 18, .2); position: relative; cursor: pointer; transition: background .25s; margin: 0; }
.schakel-rij input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--veer); }
.schakel-rij input[type="checkbox"]:checked { background: var(--zee); }
.schakel-rij input[type="checkbox"]:checked::after { transform: translateX(20px); }
.proef { display: grid; gap: 14px; }
.proef-binder { position: relative; display: grid; justify-items: center; gap: 6px; }
.ontwerp-canvas.laden { aspect-ratio: 722 / 1008; background: linear-gradient(100deg, var(--lijn) 30%, var(--room) 50%, var(--lijn) 70%); background-size: 300% 100%; animation: glanslaad 1.3s ease-in-out infinite; border-radius: 18px; }
.proef .ontwerp-keuzes { background: var(--wit); }
@media (min-width: 760px) {
  .proef { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .ontwerp-canvas.laden { animation: none; } }

/* ── Nu live: we staan op een beurs (gestart in de kassa) ── */
.live-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #7bd88f; flex: none; animation: live-puls 1.8s ease-out infinite; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(123, 216, 143, .65); } 100% { box-shadow: 0 0 0 10px rgba(123, 216, 143, 0); } }
.live-pil { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--inkt); color: var(--room);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; flex: none; margin-right: 6px; }
.live { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px; border-radius: 20px; background: var(--inkt); color: var(--room); min-width: 0; }
.klant.thema .live { box-shadow: inset 0 0 0 2px var(--thema), 0 10px 24px -14px var(--thema); }
.live-beeld { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(255, 248, 239, .12); color: var(--boter); }
.live-beeld.eend { width: 60px; height: 60px; margin: -10px 0 -10px -4px; background: none; }
.live-beeld.eend img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.live-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.live-tekst strong { display: flex; align-items: center; gap: 8px; font-family: var(--titel); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--boter); overflow-wrap: anywhere; }
.live-tekst > span { font-size: 13.5px; line-height: 1.35; color: rgba(255, 248, 239, .86); }
.knop.klein.live-route { flex: none; background: var(--boter); color: var(--inkt); text-decoration: none; box-shadow: none; }
.ticket-nog.live-nu { display: inline-flex; align-items: center; gap: 6px; background: var(--inkt); color: var(--room); }
@media (min-width: 760px) {
  .klant-merk.thema-logo img { height: 60px; }
  .over { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; }
  .over-logo { order: 2; width: 320px; }
  .live { padding: 12px 16px; }
  .live-tekst strong { font-size: 19px; }
}
.live-pil .kort { display: none; }
/* Smal scherm: logo, pil en de twee knoppen moeten naast elkaar passen (nooit zijwaarts scrollen). */
@media (max-width: 480px) {
  .live-pil { padding: 4px 10px; margin-right: 0; gap: 6px; }
  .live-pil .lang { display: none; }
  .live-pil .kort { display: inline; }
  .klant-balk.met-live .klant-merk img { max-width: 40vw; }
}
@media (prefers-reduced-motion: reduce) { .live-stip { animation: none; } }