/*
 * Mibobooth: huisstijl voor de website. Dezelfde waarden staan in brand/tokens.css; de stijlgids (brand/guide/index.html) laat zien hoe ze
 * gebruikt worden. Limoen is de kleur van het logo, inkt de kleur van de tekst, roze het kleine accent uit de app.
 * Letters: Poppins (koppen) en Inter (tekst), beide met open licentie en vanaf deze site zelf geladen.
 */
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --lime: #c6da4f;            /* het logo; vlakken, knoppen, accenten. Nooit als tekstkleur op wit (te weinig contrast) */
  --lime-deep: #54620a;       /* limoen als tekstkleur op licht (contrast 6,7 op wit, 6,0 op zacht limoen) */
  --lime-soft: #f1f6d2;       /* rustige limoenvlakken */
  --lime-mid: #e2ebaa;
  --ink: #1d1d1b;             /* tekst, donkere vlakken */
  --ink-2: #3d3d39;           /* tekst in rustige vlakken */
  --muted: #62625d;           /* bijschriften (contrast 6,1 op wit, 5,5 op zacht limoen) */
  --line: #e4e4dc;
  --bg: #f8f8f3;
  --surface: #ffffff;
  --pink: #b83265;            /* klein accent, zoals in de app */
  --font-head: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 10px; --r: 20px; --r-l: 28px;
  --shadow: 0 1px 2px rgba(29, 29, 27, .06), 0 8px 24px rgba(29, 29, 27, .06);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--lime); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-s); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(100% - 3rem, var(--wrap)); } }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--ink-2); max-width: 36em; }
.eyebrow { font: 600 .8125rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--lime-deep); margin: 0 0 1rem; }
.on-dark .eyebrow { color: var(--lime); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .8rem 1.6rem; border-radius: 14px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 1rem/1.2 var(--font-head); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-lime { background: var(--lime); }
.btn-lime:hover { background: #d3e564; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { color: #fff; box-shadow: 0 6px 0 var(--lime); }
.on-dark .btn { border-color: var(--lime); }
.on-dark .btn:hover { box-shadow: 0 6px 0 var(--lime); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } html { scroll-behavior: auto; } }

/* kop */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(248, 248, 243, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-block: .7rem; }
.logo { display: inline-flex; line-height: 0; border-radius: 10px; }
.logo img { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.4rem; }
.site-nav a { font: 600 .9375rem/1 var(--font-head); text-decoration: none; padding: .6rem .1rem; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .2em; color: var(--ink); }
.site-nav .btn { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; }
@media (max-width: 760px) { .site-nav .hide-s { display: none; } .logo img { height: 38px; width: auto; } }

/* hero */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); background: var(--lime-soft); overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.02fr 1fr; gap: 3rem; } }
.ticks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .5rem; }
.ticks li { display: flex; gap: .7rem; align-items: baseline; color: var(--ink-2); }
.ticks li::before { content: ""; flex: none; width: .65rem; height: .65rem; margin-top: .45rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.hero-visual { position: relative; padding: 0 0 2.5rem 0; }
.window { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.window-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--lime); border-bottom: 2px solid var(--ink); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: .85; }
.window img { display: block; width: 100%; }
/* de photobooth: een staande kast met het scherm bovenin, de camera erboven en onderin de gleuf waar de afdruk uit komt, op twee voetjes.
   Alle maten zijn een percentage van de breedte van de booth (padding en margin tellen mee), zodat hij op elke schermbreedte dezelfde vorm houdt. */
.hero-visual { --bw: min(26%, 150px); }
.booth { position: absolute; bottom: 0; width: var(--bw); }
.booth-1 { right: 1%; }
.booth-2 { right: calc(1% + var(--bw) + 1.1rem); }
.booth-body { position: relative; background: var(--lime); border: 3px solid var(--ink); border-radius: 10px 10px 6px 6px; padding: 15% 6% 36%; box-shadow: 5px 5px 0 var(--ink); }
.booth-body img { display: block; width: 100%; height: auto; background: #000; border: 3px solid var(--ink); border-radius: 4px; }
.booth-body::before { content: ""; position: absolute; left: 50%; top: 0; width: 9%; margin: 3.3% 0 0 -4.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 34%, #fff 0 11%, transparent 12%), var(--ink); box-shadow: 0 0 0 2px var(--lime-soft), 0 0 0 4px var(--ink); }
.booth-body::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44%; margin: 0 0 17% -22%; aspect-ratio: 11 / 1; border-radius: 99px; background: var(--ink); }
.booth-print { position: absolute; left: 50%; bottom: 0; width: 9%; margin: 0 0 6% -4.5%; aspect-ratio: 9 / 13; background: #fff; border: 2px solid var(--ink); border-radius: 1px 1px 0 0; }
.booth-feet { display: block; position: relative; height: 0; padding-bottom: 4%; }
.booth-feet::before, .booth-feet::after { content: ""; position: absolute; top: 0; width: 18%; height: 100%; background: var(--ink); border-radius: 0 0 4px 4px; }
.booth-feet::before { left: 10%; }
.booth-feet::after { right: 10%; }
.sticker { position: absolute; z-index: 2; left: -.6rem; top: -1.6rem; width: clamp(84px, 14vw, 128px); transform: rotate(-8deg); filter: drop-shadow(4px 4px 0 var(--ink)); }
.sticker img { display: block; width: 100%; height: auto; }

/* secties */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-lime { background: var(--lime-soft); }
.section-ink { background: var(--ink); color: #fff; }
.section-ink a:not(.btn) { color: #fff; }
.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.steps { display: grid; gap: 1.25rem; counter-reset: stap; list-style: none; padding: 0; margin: 0; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r); padding: 1.6rem 1.5rem 1.5rem; counter-increment: stap; }
.step::before { content: counter(stap); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); font: 700 1.2rem/1 var(--font-head); margin-bottom: 1rem; }
.step p { margin: 0; color: var(--ink-2); }
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--shadow); }
.card .ic { width: 56px; height: 56px; display: block; margin-bottom: 1rem; }
.card p { margin: 0; color: var(--ink-2); }
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } .split.flip > :first-child { order: 2; } }
.shot { position: relative; }
.shot .badge { position: absolute; right: -.4rem; bottom: -1.4rem; width: clamp(76px, 12vw, 104px); transform: rotate(7deg); filter: drop-shadow(4px 4px 0 var(--ink)); }
.shot .badge img { display: block; width: 100%; height: auto; }
.list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .9rem; }
.list li { display: flex; gap: .8rem; align-items: baseline; }
.list li::before { content: ""; flex: none; width: .7rem; height: .7rem; margin-top: .4rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.two { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .two { grid-template-columns: repeat(2, 1fr); } }

/* prijzen */
.prices { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 820px) { .prices { grid-template-columns: repeat(3, 1fr); } }
.price { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r); padding: 1.75rem 1.6rem; }
.price.best { background: var(--lime); box-shadow: 8px 8px 0 var(--ink); }
.price .tag { position: absolute; top: -.85rem; left: 1.6rem; font: 700 .75rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: .5rem .8rem; border-radius: 99px; }
.price h3, .price h4 { margin-bottom: .25rem; }
.price .amount { font: 700 clamp(2.4rem, 5vw, 3rem)/1 var(--font-head); letter-spacing: -.03em; margin: .5rem 0 .2rem; }
.price .per { color: var(--ink-2); margin: 0 0 1rem; }
.price.best .per { color: var(--ink); }
.price ul { margin: 0; padding: 1rem 0 0; list-style: none; border-top: 2px solid var(--ink); display: grid; gap: .5rem; font-size: .975rem; }
.price.best ul { border-top-color: var(--ink); }
.price-group + .price-group { margin-top: 3rem; }
.price-group-title { text-align: center; margin: 0 0 .35rem; }
.price-group-sub { text-align: center; color: var(--ink-2); margin: 0 0 1.75rem; }
.loyalty { max-width: 46rem; margin: 2.5rem auto 0; padding: 1.5rem 1.75rem; background: var(--lime); border: 2px solid var(--ink); border-radius: var(--r); text-align: center; }
.loyalty h3 { margin: 0 0 .5rem; }
.loyalty p { margin: 0; color: var(--ink); }
.fine { font-size: .9375rem; color: var(--muted); max-width: 46rem; margin: 1.5rem auto 0; text-align: center; }

/* veelgestelde vragen */
.faq-list { display: grid; gap: .75rem; max-width: 52rem; margin-inline: auto; }
.faq-group { margin: 2.5rem auto 1rem; max-width: 52rem; font-size: 1.4rem; }
details.faq { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-s); }
details.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 3.4rem 1.1rem 1.25rem; font: 600 1.0625rem/1.4 var(--font-head); position: relative; border-radius: var(--r-s); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); font: 700 1.2rem/1 var(--font-head); }
details.faq[open] summary::after { content: "−"; }
details.faq .answer { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }
details.faq .answer p:last-child { margin-bottom: 0; }
.crumbs { font-size: .9375rem; color: var(--muted); margin-bottom: 1.2rem; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-hidden] { margin: 0 .4rem; }

/* download en afsluiting */
.dl { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .dl { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.dl .mascot { width: min(100%, 260px); justify-self: center; transform: rotate(5deg); filter: drop-shadow(8px 8px 0 var(--lime)); }
.dl .mascot img { display: block; width: 100%; height: auto; }
.notes { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; color: #d6d6cf; font-size: .975rem; }

/* voet */
.site-foot { background: #121211; color: #cfcfc8; padding: 3rem 0 2rem; font-size: .9375rem; }
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--lime); }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-foot h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: .8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-foot .logo img { height: 40px; width: auto; }
.legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #333330; color: #a8a8a0; }

/* 404 */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 3rem 0; }
.nf .mascot { width: 160px; margin: 0 auto 1.5rem; transform: rotate(-6deg); filter: drop-shadow(6px 6px 0 var(--lime)); }
.nf .mascot img { display: block; width: 100%; height: auto; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* kleine hulpklassen (geen losse stijlregels in de pagina's: de beveiligingsregel van de site staat die niet toe) */
.mt-m { margin-top: 1.5rem; } .mt-l { margin-top: 2rem; } .mt-xl { margin-top: 3rem; } .mb-s { margin-bottom: 1rem; }
.pad-b-s { padding-bottom: 1rem; } .pad-t-0 { padding-top: 0; }
.lead-center { margin-inline: auto; } .lead-light { color: #e4e4dd; } .row-center { justify-content: center; }
.h1-page { font-size: clamp(2.1rem, 5.2vw, 3.2rem); }
.foot-text { margin-top: 1rem; max-width: 26rem; }

/* Aanraakschermen (telefoon, tablet): tikvlakken van minstens 44 px. Met een muis blijft alles zoals het was. Links midden in een zin blijven zoals ze zijn. */
@media (pointer: coarse) {
  .logo, .site-nav a:not(.btn), .site-foot li a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav a:not(.btn), .site-foot li a { min-width: 44px; justify-content: center; }
  .site-foot li a { justify-content: flex-start; }
  .site-foot ul { gap: 0; }
  .crumbs a { padding-inline: .15rem; }
}
/* de menulinks die op een telefoon wegblijven, blijven weg (de regel hierboven maakt ze anders weer zichtbaar) */
@media (pointer: coarse) and (max-width: 760px) { .site-nav a.hide-s { display: none; } }

/* Taalkeuze: de link in de kop en de melding onderaan (die verschijnt alleen als de taal van de browser niet past, zie js/taal.js) */
.site-nav .lang { color: var(--muted); }
.langbar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; max-width: 36rem; margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; background: var(--ink); color: #fff; padding: .8rem 3.4rem .8rem 1.1rem; border-radius: var(--r); box-shadow: 0 10px 30px rgba(29, 29, 27, .28); }
.langbar[hidden] { display: none; }
.langbar p { margin: 0; flex: 1 1 14rem; font-weight: 600; }
.langbar .btn { min-height: 44px; padding: .5rem 1.1rem; font-size: .9375rem; }
.langbar-close { position: absolute; right: .3rem; top: .3rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 700 1.6rem/1 var(--font-head); cursor: pointer; }
.langbar-close:hover { color: var(--lime); }
.langbar :focus-visible { outline-color: var(--lime); }
@media print { .langbar { display: none; } }
/* de 404-pagina in twee talen */
.nf-en { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.h2-small { font-size: 1.5rem; }