/* mockup.secctl.io: huisstijl van secctl.io (tokens uit web/src/styles), alleen wat deze pagina nodig heeft. */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("fonts/fragment-mono-normal.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #FFFFFF; --surface: #F6F7F9; --surface-2: #EDEEF2; --border: #D8DBE0; --border-strong: #83868E;
  --text: #12161F; --text-muted: #585E69; --accent: #2D49C9; --accent-hover: #2237AF; --accent-subtle: #E9F0FF; --on-accent: #FFFFFF;
  --ok: #197037; --ok-subtle: #E7F7E9; --risico: #B71824; --risico-subtle: #FFEDEB;
  --ib: #1F3385; --ib-vlak: #E3EDFF; --ib-rand: #B8CBF3;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 40px); --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0C111A; --surface: #141B26; --surface-2: #1B2431; --border: #2A3442; --border-strong: #6B7686;
    --text: #E8ECF2; --text-muted: #A3ADBB; --accent: #88A7FD; --accent-hover: #9FBBFF; --accent-subtle: #1A2547; --on-accent: #0C111F;
    --ok: #6FD08C; --ok-subtle: #12301D; --risico: #FF8A8F; --risico-subtle: #3A1517; --ib: #C9D7FF; --ib-vlak: #111C3D; --ib-rand: #2E4282; }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zacht { color: var(--text-muted); }
.klein { font-size: .875rem; }

.kop { background: var(--ib-vlak); border-bottom: 1px solid var(--ib-rand); padding: 28px 0 40px; }
.merk { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 36px; }
.logo-blok { width: 22px; height: 22px; border: 3px solid var(--text); border-radius: 2px; position: relative; }
.logo-blok::after { content: ""; position: absolute; inset: 4px; background: var(--text); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.lead { margin-top: 14px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 60ch; }

main { padding-bottom: 96px; }
.blok { margin-top: 40px; display: grid; gap: 14px; }
h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.veld { display: grid; gap: 6px; max-width: 640px; }
label { font-weight: 600; }
input[type=text], textarea, select { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 10px 12px; min-height: 44px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.lokveld { position: absolute; left: -9999px; }

.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.kaart { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); display: grid; grid-template-rows: auto 1fr; transition: border-color .15s, box-shadow .15s; }
.kaart.gekozen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.beeldknop { position: relative; display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); cursor: zoom-in; }
.beeldknop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.vergroot { position: absolute; right: 10px; bottom: 10px; background: var(--text); color: var(--bg); font-size: .8125rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; opacity: .9; }
.kaart-tekst { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.nr { font: .75rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.idee { color: var(--text-muted); font-size: .9375rem; }
.links { font-size: .875rem; }
.plekken { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.plek-lbl { font-size: .875rem; font-weight: 600; margin-right: 2px; }
.plekknop { min-width: 44px; min-height: 44px; font: 700 1rem var(--font-sans); color: var(--accent); background: var(--bg); border: 1.5px solid var(--accent); border-radius: 999px; cursor: pointer; }
.plekknop:hover { background: var(--accent-subtle); }
.plekknop[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.top3 { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 22px clamp(16px, 3vw, 28px); }
.topregel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.topregel > label:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.plekcijfer { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .9375rem; flex: none; }
@media (max-width: 700px) { .topregel { grid-template-columns: 1fr; } }
.verstuur { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.knop { font: 600 1.0625rem var(--font-sans); color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--r); padding: 14px 26px; min-height: 52px; cursor: pointer; }
.knop:hover { background: var(--accent-hover); }
.knop:disabled { opacity: .6; cursor: wait; }
.fout, .goed { padding: 12px 16px; border-radius: var(--r); font-weight: 600; }
.fout { background: var(--risico-subtle); color: var(--risico); }
.goed { background: var(--ok-subtle); color: var(--ok); }

.naar-top3 { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.2); white-space: nowrap; z-index: 5; }

dialog { width: min(1200px, 96vw); max-height: 94vh; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
dialog::backdrop { background: rgba(10, 14, 22, .7); }
.dialoog-kop, .dialoog-voet { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.dialoog-kop h2 { font-size: 1.125rem; margin-right: auto; }
.dialoog-voet { justify-content: space-between; border-top: 1px solid var(--border); }
.dialoog-beeld { background: var(--surface); overflow: auto; max-height: calc(94vh - 130px); }
.dialoog-beeld img { width: 100%; height: auto; margin-inline: auto; }
.dialoog-beeld img.telefoon { max-width: 420px; }
.weergave { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
.weergave button, .sluit, .vorige, .volgende { font: 600 .9375rem var(--font-sans); min-height: 44px; padding: 0 14px; border: 0; background: var(--bg); color: var(--text); cursor: pointer; }
.weergave button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sluit, .vorige, .volgende { border: 1px solid var(--border-strong); border-radius: var(--r); }

.bedankt, .resultaten { padding-top: 48px; display: grid; gap: 16px; }
.resultaten table { border-collapse: collapse; width: 100%; max-width: 760px; }
.resultaten th, .resultaten td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.resultaten .getal { text-align: right; }
.inzendingen { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.inzendingen li { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; }
.inzendingen .plekcijfer { width: 22px; height: 22px; font-size: .8125rem; }
.algemeen { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }