/* EZQR-huisstijl: oranje #F4731C op warm zwart #1F1A17, crème als achtergrond, marine #14213D als tweede kleur.
   Nunito 900 voor koppen en het woordmerk, Inter voor tekst. Eén beeldmerk voor alle merken; het woordmerk is het domein. */
:root {
  --bg: #FFF6EC;
  --kaart: #ffffff;
  --inkt: #1F1A17;
  --zacht: #8A6A4F;
  --lijn: #F3E4D3;
  --accent: #F4731C;
  --accent-donker: #D45F0E;
  --link: #B5500C;
  --accent-zacht: #FDE9D8;
  --tweede: #14213D;
  --donker: #14213D;        /* grote donkere vlakken: hero, voet (marine) */
  --voet: #14213D;
  --sterk: #14213D;         /* gekozen chip, stap, label: marine met witte tekst */
  --op-sterk: #ffffff;
  --goed: #1f7a4d;
  --goed-zacht: #e3f4ea;
  --fout: #b42318;
  --fout-zacht: #fdecea;
  --r: 12px;
}
/* Donkere stand: marine. Aan via het systeem (automatisch) of met de hand; het script in base.html zet html.donker. */
html.donker {
  & {
    --bg: #0F1930; --kaart: #182642; --inkt: #F2F5FB; --zacht: #A9B6D3; --lijn: #2A3A5C;
    --accent: #F4731C; --accent-donker: #FF8A3D; --link: #FFA060; --accent-zacht: #33301F; --tweede: #FFB070;
    --donker: #0B1326; --voet: #0B1326; --sterk: #F2F5FB; --op-sterk: #0F1930;
    --goed: #6fd59c; --goed-zacht: #16301f;
    --fout: #ff8a80; --fout-zacht: #3a1a18;
  }
  .top { background: #14213D; }
  .zoekveld, .account-chip, .wisselaar select, .meer-knop { background: #101C36; color: var(--inkt); }
  .code-mini, .qr-vak:not(.donker), .tk-inhoud { background: #fff; }
  .label { background: #2A3A5C; color: #FFB070; }
  .label.grijs { background: #223254; color: var(--zacht); }
  .knop.licht { background: #2A3A5C; color: #FFB070; }
  .tegel.let-op { background: #3a2c12; border-color: #8a5300; }
  .telefoonkader { border-color: #0B1326; }
  input, select, textarea { background: #101C36; border-color: var(--lijn); color: var(--inkt); }
  img.voet-merk { opacity: .9; }
}
* { box-sizing: border-box; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/static/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/static/fonts/poppins-latin-800-normal.woff2") format("woff2"); }
body { margin: 0; background: var(--bg); color: var(--inkt); font: 16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { font-family: "Nunito", "Poppins", "Inter", system-ui, sans-serif; font-weight: 900; letter-spacing: -.01em; }
a { color: var(--link); }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .5rem; font-weight: 800; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
h3 { margin: 0 0 .4rem; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 32px; padding-bottom: 64px; }
.top { background: var(--donker); color: #fff; }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--inkt); text-decoration: none; }
.logo .blok { width: 18px; height: 18px; background:
  linear-gradient(var(--inkt) 0 0) 0 0 / 7px 7px no-repeat,
  linear-gradient(var(--inkt) 0 0) 100% 0 / 7px 7px no-repeat,
  linear-gradient(var(--inkt) 0 0) 0 100% / 7px 7px no-repeat,
  linear-gradient(var(--accent) 0 0) 100% 100% / 7px 7px no-repeat; }
nav { display: flex; align-items: center; gap: 16px; }
nav { gap: 22px; }
/* Past de balk niet op één regel (veel menukeuzes, smaller scherm), dan loopt hij door op een tweede regel
   in plaats van rechts uit beeld te verdwijnen. */
.top-in { height: auto; min-height: 88px; padding-block: 10px; }
nav { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; column-gap: 22px; }
@media (max-width: 1100px) { nav { column-gap: 16px; } nav a:not(.knop) { font-size: .95rem; } }
nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem; transition: color .15s; }
nav a:hover { color: var(--accent); }
nav a.knop { color: #fff; border-radius: 999px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
nav a.knop:hover { color: #fff; }
.wisselaar select { background: #111; color: #fff; border-color: #333; }
.voet { background: var(--voet); color: rgba(255,255,255,.75); font-size: .88rem; padding: 32px 0; }
.voet a { color: #fff; }
.voet .slogan { font-family: "Poppins", sans-serif; font-weight: 700; color: #fff; font-size: 1.05rem; margin: 0 0 6px; }

.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px; }
.lead { font-size: 1.1rem; color: var(--zacht); max-width: 600px; }
.klein-tekst { font-size: .88rem; color: var(--zacht); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.mono.groot { font-size: 1.15rem; color: var(--zacht); margin-top: 0; }
.hoofd { text-transform: uppercase; }

.knop { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; font: inherit; font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.knop:hover { background: #0e5a88; }
.knop.tweede { background: var(--tweede); }
.knop.tweede:hover { background: #0f8d7e; }
.knop.licht { background: var(--accent-zacht); color: var(--accent); }
.knop.licht:hover { background: #cbe9fb; }
.knop.klein { padding: 6px 12px; font-size: .88rem; }
.knop.gevaar { background: transparent; color: var(--fout); border: 1px solid var(--fout); margin-top: 20px; }

.melding { padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; background: var(--goed-zacht); color: var(--goed); font-weight: 500; }
.melding.fout { background: var(--fout-zacht); color: var(--fout); }

.formulier { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: .92rem; }
input { font: inherit; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--bg); color: var(--inkt); }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input:disabled { opacity: .5; }
fieldset { border: 1px solid var(--lijn); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.vinkje { flex-direction: row; align-items: center; gap: 8px; }
.rij { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; }
fieldset .rij { grid-template-columns: 1fr 1fr; }
.nieuw { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.nieuw .rij { width: 100%; }

.smal { max-width: 420px; margin: 24px auto; }
.midden { text-align: center; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 760px) { .twee, .drie, .rij, .held { grid-template-columns: 1fr !important; } nav a:not(.knop) { font-size: .88rem; } }

.held { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: 24px 0; }
.held-qr { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 24px; text-align: center; }
.held-qr img { width: 220px; height: 220px; image-rendering: pixelated; }

.tabel { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--lijn); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.getal { text-align: right; font-variant-numeric: tabular-nums; }
tr.uit td { opacity: .55; }
table.mini th, table.mini td { padding: 6px 8px; }
.label { font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent-zacht); color: var(--accent); vertical-align: middle; }
.label.grijs { background: var(--lijn); color: var(--zacht); }

.stijlkeuze { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.stijl { font: inherit; font-size: .82rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--bg); color: var(--inkt); cursor: pointer; }
.stijl.actief { background: var(--inkt); color: var(--kaart); border-color: var(--inkt); }
.qr-vak { border-radius: 10px; padding: 16px; display: flex; justify-content: center;
  background: repeating-conic-gradient(#e9ebef 0 25%, #f7f8fa 0 50%) 0 0 / 20px 20px; }
.qr-vak.donker { background: repeating-conic-gradient(#20242c 0 25%, #2a2f39 0 50%) 0 0 / 20px 20px; }
.qr-vak img { width: 100%; max-width: 300px; image-rendering: pixelated; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.los { margin-top: 28px; }
.stappen { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.dns { margin-top: 8px; background: var(--bg); border-radius: 8px; }
.prijs { font-size: 1.3rem; font-weight: 700; margin: 4px 0 12px; }
.kaart.uitgelicht { border: 2px solid var(--accent); }
.kaart ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* Tussenpagina */
.tussen-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tussen { width: 100%; max-width: 440px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.tussen-van { margin: 0; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.tussen-kop { font-size: 1.4rem; margin: 0; }
.tussen-tekst { font-size: 1.35rem; font-weight: 600; line-height: 1.35; margin: 0; }
.tussen-beeld { width: 100%; border-radius: 14px; max-height: 260px; object-fit: cover; }
.tussen-events { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tussen-event { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--kaart);
  border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; }
.tussen-event:hover { border-color: var(--accent); }
.tussen-event img { width: 100%; border-radius: 8px; max-height: 140px; object-fit: cover; margin-bottom: 6px; }
.tussen-datum { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.tussen-balk { height: 4px; background: var(--lijn); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.tussen-balk span { display: block; height: 100%; width: 0; background: var(--accent); animation: vul linear forwards; }
@keyframes vul { to { width: 100%; } }
.tussen-door { align-self: center; }
.kaartje { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.kaartje .tussen-kop { margin: 2px 0 4px; }
.kaartje-regel { margin: 0; color: var(--zacht); }
.kaartje-tekst { margin: 6px 0 0; white-space: pre-line; }
.tussen > .knop { display: block; }
.tussen-kop.klein { font-size: 1.05rem; margin-top: 12px; }
.soortkeuze { display: flex; gap: 16px; flex-wrap: wrap; }
.soortkeuze label { flex-direction: row; align-items: center; gap: 6px; }
.velden { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.velden[hidden], fieldset[hidden], [hidden] { display: none !important; }
.rij.drie-kol { grid-template-columns: 1fr 1fr 1fr; }
.tussen-voet { margin: 4px 0 0; }
.modus { display: flex; flex-direction: column; gap: 8px; }
.modus label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--bg); color: var(--inkt); resize: vertical; }
select { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--bg); color: var(--inkt); }
.keuze-events { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.keuze-events label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.logo-blok { margin-top: 16px; }
.kleuren { display: flex; gap: 16px; flex-wrap: wrap; }
.kleuren input[type=color] { width: 64px; height: 40px; padding: 2px; cursor: pointer; }
.rij.twee-kol { grid-template-columns: 1fr 1fr; }
.melding.let-op { background: #fff4e0; color: #8a5300; }
html.donker { .melding.let-op { background: #3a2c12; color: #f2c66d; } }
.logo-voorbeelden { display: flex; gap: 12px; flex-wrap: wrap; }
.logo-voorbeelden figure { margin: 0; text-align: center; }
.logo-voorbeelden img { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--lijn); }
.logo-voorbeelden figcaption { font-size: .8rem; color: var(--zacht); }
.logo-knop { margin-bottom: 10px; }
.mobiel-code { display: none; }
@media (max-width: 760px) {
  .tabel th:nth-child(2), .tabel td:nth-child(2), .tabel th:nth-child(3), .tabel td:nth-child(3) { display: none; }
  .mobiel-code { display: block; font-size: .8rem; color: var(--zacht); }
  th, td { padding: 10px 12px; }
}
.kopregel { display: flex; justify-content: space-between; align-items: end; }

/* Teams, locaties, snelstart */
.wisselaar select { font: inherit; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--bg); color: var(--inkt); max-width: 200px; }
form.inline { display: inline; }
.team td { vertical-align: middle; }
.team select { font: inherit; font-size: .88rem; padding: 4px 6px; }
.uitnodiging { border-top: 1px solid var(--lijn); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.kopieer { display: flex; gap: 6px; }
.kopieer input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
.link-knop { background: none; border: 0; padding: 0; color: var(--fout); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; }
.snelstart { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.code-status { display: block; min-height: 1.2em; font-weight: 500; }
.code-status.fout { color: var(--fout); }
.code-status.goed { color: var(--goed); }
.code-status.let-op { color: #8a5300; }
@media (max-width: 760px) { .wisselaar select { max-width: 130px; } nav { gap: 10px; } }
.drie.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .drie.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .drie.vier { grid-template-columns: 1fr; } }
.via-koepel td { color: var(--zacht); }

/* Organisatie: locaties */
.label.let-op { background: #fff4e0; color: #8a5300; }
html.donker { .label.let-op { background: #3a2c12; color: #f2c66d; } }
details.hernoem summary { cursor: pointer; list-style: none; }
details.hernoem summary::-webkit-details-marker { display: none; }
details.hernoem[open] summary { margin-bottom: 6px; }
details.hernoem form { display: flex; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
details.hernoem input { max-width: 200px; }
td.knoppen { white-space: nowrap; }
td.knoppen form + form { margin-left: 4px; }

/* Slim doorsturen */
#regels { margin-top: 24px; }
#regels .kopregel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nu-status { margin: 0; }
ol.regels { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
li.regel { border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; }
li.regel.nu { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
li.regel.uit { opacity: .6; }
.regel-kop { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.regel-kop .nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-zacht); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.regel-tekst { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.regel-knoppen { display: flex; gap: 4px; flex-wrap: wrap; }
details.bewerk > summary, details.nieuwe-regel > summary { cursor: pointer; margin-top: 8px; display: inline-block; }
details.bewerk > summary { color: var(--accent); font-size: .9rem; }
details.nieuwe-regel > summary::-webkit-details-marker, details.bewerk > summary::-webkit-details-marker { display: none; }
details.nieuwe-regel > summary { list-style: none; }
.regel-form { margin-top: 12px; }
details.groep { border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; }
details.groep > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
details.groep[open] > summary { margin-bottom: 8px; }
details.groep > * + * { margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { display: inline-flex; margin: 0; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { padding: 4px 10px; border: 1px solid var(--lijn); border-radius: 999px; font-size: .85rem; user-select: none; }
.chips input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rij.herhaal label { flex: 1 1 110px; }
.test-rij { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; align-items: end; }
.test-rij .vinkje { padding-bottom: 10px; }
form.test { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); }
form.test h3 { margin: 0 0 8px; font-size: 1rem; }
.rij.test-rij { align-items: flex-end; flex-wrap: wrap; }
.test-uitkomst { font-size: 1.05rem; overflow-wrap: anywhere; }
.weer-form { align-items: flex-end; }

/* Eigen tussenpagina */
.tussen-form fieldset { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; }
.schermen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: start; }
.schermen > p { grid-column: 1 / -1; margin: 0; }
.scherm label { font-size: .85rem; }
.scherm input[type=file] { font-size: .8rem; max-width: 100%; }
.scherm-voorbeeld { background: var(--lijn); border-radius: 8px; display: grid; place-items: center; overflow: hidden; margin: 0 auto 6px; color: var(--zacht); font-size: .75rem; }
.scherm-voorbeeld img { width: 100%; height: 100%; object-fit: cover; }
.scherm-telefoon { width: 64px; aspect-ratio: 9 / 16; }
.scherm-tablet { width: 90px; aspect-ratio: 3 / 4; }
.scherm-computer { width: 140px; aspect-ratio: 16 / 9; }
.tussen-form textarea.mono { font-size: .82rem; }

/* Platform */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.cijfers .kaart { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; margin: 0; }
.getal-groot { font-size: 1.7rem; font-weight: 700; }
tr.uit td { opacity: .55; }
#event-form { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); }
#event-form h3 { margin: 0; }
.slim-tussen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.slim-tussen h3 { margin: 0 0 4px; font-size: 1rem; }
.voorwaarden-kop { margin: 8px 0 0; font-size: .95rem; }
#paginas { margin-bottom: 16px; }

/* Gratis: upgrade en sloten */
.kaart.upgrade { border-color: var(--accent); background: var(--accent-zacht); }
.upgrade-kop { font-size: 1.05rem; margin: 0 0 4px; }
.kaart.upgrade .knop { margin-top: 6px; }
.sloten { margin: 20px 0; }
.sloten h2 { font-size: 1rem; margin: 0 0 8px; }
.slot-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.slot { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px dashed var(--lijn); border-radius: 12px; background: var(--kaart); margin: 8px 0; color: inherit; text-decoration: none; }
.slot:hover { border-color: var(--accent); }
.slot-rij .slot { margin: 0; }
.slot-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slot-icoon { color: var(--zacht); flex: none; }

/* Woordmerk: het beeldmerk (wit op de donkere balk) met het domein in kleine letters ernaast. Nunito staat zelf op de server. */
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("/static/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("/static/fonts/nunito-latin-900-normal.woff2") format("woff2"); }
.logo img { display: block; border-radius: 7px; }
/* Net als STEPH op steph.nl: wit woordmerk met het blauwe beeldmerk rechts ernaast, 64px hoog (mobiel 48px) */
.logo { gap: 10px; height: 64px; }
.woordmerk { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 2.6rem; letter-spacing: -.03em; color: #fff; line-height: 1; white-space: nowrap; }
.woordmerk .nl { font-size: .45em; font-weight: 800; color: rgba(255,255,255,.6); letter-spacing: 0; }
.logo .beeldmerk { width: 54px; height: 54px; color: #fff; flex: none; }
.ez-woordmerk { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; letter-spacing: -.03em; }
.ez-woordmerk .tld { font-size: .45em; font-weight: 800; color: var(--zacht); letter-spacing: 0; }
.logo img { width: 54px; height: 54px; border-radius: 7px; order: 2; align-self: center; }
nav a.knop, nav a.knop.klein { padding: 9px 18px; font-size: 1rem; white-space: nowrap; }
input, select, textarea { background: #fff; border-color: #d1d5db; border-radius: 6px; }
html.donker { input, select, textarea { background: var(--bg); border-color: var(--lijn); } }
@media (max-width: 760px) {
  .top-in { height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; row-gap: 8px; }
  .logo { height: 48px; gap: 8px; }
  .woordmerk { font-size: 2rem; }
  .logo img, .logo .beeldmerk { width: 40px; height: 40px; }
  nav { gap: 8px 16px; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  nav a:not(.knop) { font-size: .95rem; }
  nav a.knop, nav a.knop.klein { margin-left: auto; padding: 7px 14px; font-size: .92rem; }
}
}

/* Privacy en voorwaarden */
.tekstpagina { max-width: 760px; }
.tekstpagina h2 { margin-top: 28px; font-size: 1.15rem; }
.tekstpagina li { margin: 4px 0; }
.tekst-tabel td, .tekst-tabel th { vertical-align: top; }

/* Kerkcodes en korte codes */
.kerkcode-rij { display: flex; align-items: center; gap: 4px; }
.kerkcode-rij input { flex: 1; min-width: 0; }
input.kerkcode-veld { max-width: 5ch; text-align: center; flex: none; }
.kortcode { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.kortcode h3 { font-size: 1rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.kortcode-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kortcode-form .kerkcode-rij { flex: 1 1 220px; min-width: 0; max-width: 100%; }

/* Abonnement bestellen */
.bestel > .kaart { margin-bottom: 16px; }
.periode-keuze { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.periode-keuze label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.plan-keuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.plan-kaart { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--lijn); border-radius: 12px; cursor: pointer; }
.plan-kaart input { position: absolute; opacity: 0; pointer-events: none; }
.plan-kaart.gekozen { border-color: var(--accent); background: var(--accent-zacht); }
.plan-kaart:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-naam { font-weight: 700; font-size: 1.1rem; }
.plan-prijs { font-weight: 600; }
.factuur-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
table.bedrag { max-width: 420px; }
table.bedrag .totaalregel td { border-top: 2px solid var(--lijn); }

/* Platform: tabellen met sorteren, filter en bulkacties */
th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorteer::after { content: " ↕"; color: var(--zacht); font-size: .8em; }
th.sorteer[data-richting="op"]::after { content: " ↑"; color: var(--accent); }
th.sorteer[data-richting="af"]::after { content: " ↓"; color: var(--accent); }
.links-filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.links-filter label { min-width: 180px; }
.bulk-balk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; position: sticky; top: 0; background: var(--kaart); padding: 6px 0; z-index: 1; }
.bulk-balk .klein-tekst { margin-right: 6px; }
td.bestemming { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bewerk-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bewerk-form label { flex: 1 1 180px; }
.plan-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plan-form input[type=date] { width: 150px; }
td.fout { color: #b42318; font-weight: 600; }
.deellink { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 20px; }
.deellink .groot { overflow-wrap: anywhere; }
/* Schakelaar: kleinste QR of eigen deellink */
.qr-bron { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; padding: 3px; margin: 4px 0 10px; gap: 2px; }
.qr-bron label { margin: 0; cursor: pointer; }
.qr-bron input { position: absolute; opacity: 0; pointer-events: none; }
.qr-bron span { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--zacht); }
.qr-bron small { font-weight: 500; opacity: .8; margin-left: 4px; }
.qr-bron input:checked + span { background: var(--accent); color: #fff; }
.qr-bron input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kerk of organisatie */
.soort-keuze { border: 0; padding: 0; margin: 0 0 4px; display: grid; gap: 8px; }
.soort-keuze legend { font-weight: 600; margin-bottom: 6px; }
.soort-kaart { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--lijn); border-radius: 12px; cursor: pointer; }
.soort-kaart:has(input:checked) { border-color: var(--accent); background: var(--accent-zacht); }
.soort-kaart > span { display: flex; flex-direction: column; gap: 2px; }
.soort-kaart input { margin-top: 4px; }

details.kaart > summary { cursor: pointer; font-weight: 700; }
details.kaart[open] > summary { margin-bottom: 10px; }

/* Beginpagina: donker blok zoals de opening van steph.nl */
.held-donker { background: var(--donker); color: #fff; margin: -32px calc(50% - 50vw) 40px; padding: 48px calc(50vw - 50%) 88px; }
.held-donker .held { padding: 0; }
.held-donker h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; margin-bottom: 1.2rem; }
.held-donker .lead { color: rgba(255,255,255,.9); font-size: 1.2rem; }
.verloop { background: linear-gradient(90deg, #F4731C, #FFB070); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-donker .held-qr { background: #fff; color: var(--inkt); border: 0; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.4); position: relative; }
.held-donker .knop.licht { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.held-donker .knop.licht:hover { background: rgba(255,255,255,.1); }
.kaart h3 { font-size: 1.25rem; }
html, body { overflow-x: clip; }

/* Foto op de beginpagina, wegvallend in het zwart zoals op steph.nl */
.held-foto { position: relative; }
.foto-vak { position: relative; z-index: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.foto-vak img { display: block; width: 100%; height: auto; }
.foto-vak::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%),
              linear-gradient(to right, rgba(0,0,0,.75) 0%, transparent 45%),
              linear-gradient(rgba(0,0,0,.65) 0%, transparent 40%); }
.cirkel { position: absolute; border-radius: 50%; z-index: 0; }
.cirkel-tweede { width: 96px; height: 96px; right: -24px; bottom: -24px; background: var(--tweede); }
.cirkel-blauw { width: 64px; height: 64px; left: -24px; top: -24px; background: #F4731C; }
.held-donker .held-qr.klein { position: absolute; z-index: 2; left: -20px; bottom: -28px; padding: 14px 16px 10px; width: 176px; border-radius: 8px; }
.held-qr.klein img { width: 120px; height: 120px; }
.held-qr.klein .mono { font-size: .72rem; margin: 6px 0 0; word-break: break-all; }
.held-qr.klein .klein-tekst { font-size: .72rem; margin: 2px 0 0; }
@media (max-width: 760px) {
  .held-foto { margin: 8px 8px 24px; }
  .held-donker .held-qr.klein { left: -8px; bottom: -20px; width: 140px; padding: 10px 12px 8px; }
  .held-qr.klein img { width: 96px; height: 96px; }
}

/* Voorbeeld van de tussenpagina op vier schermen naast elkaar (verkleinde iframes) */
.proef { margin-top: 12px; grid-column: 1 / -1; width: 100%; }
.proef-kop { margin: 0 0 8px; }
.proef-rij { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
@media (max-width: 760px) { .proef-scherm { --hoogte: 150; } }
.proef-scherm { --hoogte: 200; margin: 0; text-align: center; }
.proef-raam { width: calc(var(--b) * var(--hoogte) / var(--h) * 1px); height: calc(var(--hoogte) * 1px); overflow: hidden;
  border-radius: 8px; border: 3px solid #111; background: #111; position: relative; }
.proef-raam iframe { border: 0; position: absolute; left: 0; top: 0; transform-origin: 0 0;
  transform: scale(calc(var(--hoogte) / var(--h))); pointer-events: none; }
.proef-scherm figcaption { font-size: .8rem; color: var(--zacht); margin-top: 4px; }

/* Beginpagina: de troeven van EZQR, grote steekwoorden zoals op steph.nl */
.troeven { margin: 8px 0 24px; }
.troeven-kop { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin: 0 0 22px; line-height: 1.15; }
.troef-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.troef { position: relative; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 26px 24px 22px;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease, translate .6s ease; }
.troef::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #F4731C, #FFB070);
  transform: scaleX(.18); transform-origin: left; transition: transform .35s ease; }
.troef:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -12px rgba(3, 105, 160, .28); }
.troef:hover::before { transform: scaleX(1); }
.troef.verborgen { opacity: 0; translate: 0 18px; }
.troef-groot { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 3.3rem); line-height: 1; margin: 0 0 14px;
  letter-spacing: -.01em; background: linear-gradient(90deg, #F4731C, #FFB070); -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; }
.troef-groot span { font-size: .55em; }
.troef h3 { font-size: 1.15rem; margin: 0 0 6px; }
.troef p:last-child { margin: 0; color: var(--zacht); }
/* Wisselend woord: Advent, Kerst, Pasen, Pinksteren */
.troef-wissel { position: relative; height: 1.08em; background: none; color: inherit; }
.troef-wissel span { position: absolute; left: 0; top: 0; font-size: 1em; opacity: 0; animation: wissel 10s infinite;
  background: linear-gradient(90deg, #F4731C, #FFB070); -webkit-background-clip: text; background-clip: text; color: transparent; }
.troef-wissel span:nth-child(2) { animation-delay: 2.5s; }
.troef-wissel span:nth-child(3) { animation-delay: 5s; }
.troef-wissel span:nth-child(4) { animation-delay: 7.5s; }
@keyframes wissel { 0% { opacity: 0; transform: translateY(.35em); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-.35em); } }
@media (prefers-reduced-motion: reduce) {
  .troef-wissel span { animation: none; } .troef-wissel span:first-child { opacity: 1; }
}
@media (max-width: 900px) { .troef-rij { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .troef-rij { grid-template-columns: 1fr; } }

/* Troeven: zacht en rustig wisselende achtergrond in de kleuren van de site */
.troef { --t1: #ffffff; --t2: #FFF1E3; --t3: #FFF6EC;
  background: linear-gradient(135deg, var(--t1), var(--t2), var(--t3), var(--t1)); background-size: 300% 300%;
  animation: troefgloed 22s ease-in-out infinite alternate; border-color: #e3edf3; }
.troef:nth-child(2) { animation-delay: -4s; --t2: #FFF6EC; --t3: #FFF1E3; }
.troef:nth-child(3) { animation-delay: -9s; }
.troef:nth-child(4) { animation-delay: -13s; --t2: #FFF6EC; --t3: #FBEFE4; }
.troef:nth-child(5) { animation-delay: -6s; --t2: #FBEFE4; --t3: #FFF1E3; }
.troef:nth-child(6) { animation-delay: -17s; --t2: #FFF1E3; --t3: #FFF6EC; }
@keyframes troefgloed { 0% { background-position: 0% 0%; } 50% { background-position: 100% 60%; } 100% { background-position: 40% 100%; } }
html.donker {
  .troef { --t1: #182642; --t2: #1F3158; --t3: #142040; border-color: #2A3A5C; }
  .troef:nth-child(4) { --t3: #1B2A4A; } .troef:nth-child(5) { --t2: #1B2A4A; }
}
@media (prefers-reduced-motion: reduce) { .troef { animation: none; } }
/* Rollend woord achter de / */
.troef-woord span { display: inline-block; background: linear-gradient(90deg, #F4731C, #FFB070); -webkit-background-clip: text; background-clip: text;
  color: transparent; transition: transform .16s ease-in, opacity .16s ease-in; }
.troef-woord span.weg { transform: translateY(-.45em); opacity: 0; }
.troef-woord span.erin { transform: translateY(.45em); opacity: 0; transition: none; }
.troef-woord { overflow: hidden; }
.troef-woord { font-size: clamp(2rem, 3.3vw, 2.75rem); height: 1.2em; }
.troef-woord span { font-size: 1em; }

/* Beeldmerk rechts in de voet in plaats van bovenin */
.voet-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.voet-merk { width: 64px; height: 64px; border-radius: 9px; flex: none; }
@media (max-width: 560px) { .voet-in { align-items: flex-start; } .voet-merk { width: 48px; height: 48px; } }
/* Wisselende steekwoorden in de troeven */
.troef-groot { font-size: clamp(2rem, 3.3vw, 2.75rem); height: 1.15em; overflow: hidden; }
.troef-groot .wissel { display: inline-block; font-size: 1em; background: linear-gradient(90deg, #F4731C, #FFB070); -webkit-background-clip: text;
  background-clip: text; color: transparent; transition: transform .26s ease-in, opacity .26s ease-in; }
.troef-groot .wissel.weg { transform: translateY(-.5em); opacity: 0; }
.troef-groot .wissel.erin { transform: translateY(.5em); opacity: 0; transition: none; }
.troef-groot.troef-wissel { height: 1.15em; }

/* Wisselende kop boven de troeven: alle regels op dezelfde plek, één tegelijk zichtbaar */
.wisselkop { display: grid; }
.wisselkop .kop-regel { grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.wisselkop .kop-regel.aan { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wisselkop .kop-regel { transition: none; } }
.wissellead { display: grid; }
.wissellead .lead-regel { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.wissellead .lead-regel.aan { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wissellead .lead-regel { transition: none; } }

.uitleg-keuze { background: var(--accent-zacht); color: var(--inkt); border-radius: 8px; padding: 10px 14px; font-size: .95rem; }

/* Beginpagina rechts: kleine foto rechtsboven, daaronder de scanner met sluiter */
.held-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.mini-foto { margin: 0; display: flex; align-items: center; gap: 12px; flex-direction: row-reverse; }
.mini-foto .foto-vak { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 3px #F4731C, 0 0 0 6px rgba(244,115,28,.35); }
.mini-foto .foto-vak img { width: 100%; height: 100%; object-fit: cover; }
.mini-foto .foto-vak::before { background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%); }
.mini-foto figcaption { font-size: .9rem; color: rgba(255,255,255,.75); }
.scanner { align-self: center; text-align: center; }
.zoeker { position: relative; width: 260px; height: 260px; border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.sc-qr { position: absolute; left: 30px; top: 30px; width: 200px; height: 200px; image-rendering: pixelated; transition: transform .25s ease; }
.hoek { position: absolute; width: 34px; height: 34px; border: 5px solid #F4731C; z-index: 3; transition: inset .5s ease, border-color .3s; }
.hoek.lb { left: 12px; top: 12px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.hoek.rb { right: 12px; top: 12px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.hoek.lo { left: 12px; bottom: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.hoek.ro { right: 12px; bottom: 12px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.scanner.zoekt .hoek { border-color: #FFB070; }
.scanner.zoekt .hoek.lb { left: 22px; top: 22px; } .scanner.zoekt .hoek.rb { right: 22px; top: 22px; }
.scanner.zoekt .hoek.lo { left: 22px; bottom: 22px; } .scanner.zoekt .hoek.ro { right: 22px; bottom: 22px; }
.scanlijn { position: absolute; left: 18px; right: 18px; top: 18px; height: 3px; border-radius: 3px; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, transparent, #F4731C, transparent); box-shadow: 0 0 14px 3px rgba(244,115,28,.6); }
.scanner.zoekt .scanlijn { opacity: 1; animation: scanlijn 1.6s ease-in-out; }
@keyframes scanlijn { 0% { top: 18px; } 50% { top: 238px; } 100% { top: 18px; } }
/* Sluiter: twee lamellen klappen dicht en open, met een korte flits */
.sluiter { position: absolute; left: 0; right: 0; height: 50%; background: #0b0f15; z-index: 4; transform: scaleY(0); }
.sluiter.boven { top: 0; transform-origin: top; } .sluiter.onder { bottom: 0; transform-origin: bottom; }
.scanner.klik .sluiter { animation: sluiter .32s ease-in-out; }
@keyframes sluiter { 0%, 100% { transform: scaleY(0); } 45%, 55% { transform: scaleY(1); } }
.flits { position: absolute; inset: 0; background: #fff; z-index: 5; opacity: 0; pointer-events: none; }
.scanner.klik .flits { animation: flits .5s ease-out .28s; }
@keyframes flits { 0% { opacity: .9; } 100% { opacity: 0; } }
.scanner.klik .sc-qr { transform: scale(.94); }
/* Uitkomst: waar de scan nu heen gaat */
.sc-uitkomst { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: #1F1A17; font-weight: 600; box-shadow: 0 10px 20px -8px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
.scanner.klaar .sc-uitkomst { opacity: 1; transform: none; }
.sc-vink { width: 24px; height: 24px; border-radius: 50%; background: #F4731C; color: #fff; display: grid; place-items: center; font-size: .85rem; }
.sc-tijd { font-family: "Nunito", sans-serif; font-weight: 900; color: #D45F0E; }
.sc-onder { margin: 12px 0 0; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.5; }
.sc-onder .mono { color: #fff; }
@media (prefers-reduced-motion: reduce) { .sc-uitkomst { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .held-rechts { align-items: center; }
  .mini-foto { position: absolute; top: 18px; right: 16px; }
  .mini-foto .foto-vak { width: 64px; height: 64px; }
  .mini-foto figcaption { display: none; }
  .held-donker { position: relative; }
  .held-donker h1 { padding-right: 76px; }
  .zoeker { width: 230px; height: 230px; }
  .sc-qr { left: 25px; top: 25px; width: 180px; height: 180px; }
  @keyframes scanlijn { 0% { top: 18px; } 50% { top: 208px; } 100% { top: 18px; } }
}
/* Foto in een kader als het oog van een QR-code: dikke afgeronde rand, ruimte, en de foto als binnenste blok */
.mini-foto .foto-vak { width: 170px; height: 170px; border-radius: 40px; box-shadow: none; border: 14px solid #F4731C;
  padding: 12px; background: #000; overflow: visible; }
.mini-foto .foto-vak picture, .mini-foto .foto-vak img { display: block; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; }
.mini-foto .foto-vak::before { display: none; }
@media (max-width: 760px) {
  .mini-foto { top: 14px; }
  .mini-foto .foto-vak { width: 96px; height: 96px; border-width: 8px; padding: 6px; border-radius: 24px; }
  .mini-foto .foto-vak picture, .mini-foto .foto-vak img { border-radius: 12px; }
  .held-donker h1 { padding-right: 108px; }
}

/* Foto weer groot rechts, in de vorm van een QR-oog: afgerond vierkant met een ring eromheen, wegvallend in het zwart */
.oogfoto { position: relative; max-width: 390px; justify-self: end; width: 100%; }
.oogfoto .foto-vak { position: relative; z-index: 1; margin: 12%; border-radius: 22%; overflow: hidden; box-shadow: none; }
.oogfoto .foto-vak img { display: block; width: 100%; height: auto; }
.oogfoto .foto-vak::before { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 50%),
  linear-gradient(to right, rgba(0,0,0,.8) 0%, transparent 45%), linear-gradient(rgba(0,0,0,.5) 0%, transparent 35%); }
/* De ring van het oog: blauw rechtsboven, wegvallend naar zwart linksonder */
.oog-ring { position: absolute; inset: 0; border-radius: 28%; padding: 7%; z-index: 0;
  background: linear-gradient(225deg, #F4731C 0%, rgba(244,115,28,.55) 35%, rgba(0,0,0,0) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Scanner onder de knoppen, naast elkaar */
.held .scanner { display: flex; align-items: center; gap: 22px; text-align: left; margin-top: 30px; align-self: auto; }
.held .zoeker { width: 200px; height: 200px; flex: none; border-radius: 18px; }
.held .sc-qr { left: 25px; top: 25px; width: 150px; height: 150px; }
.held .hoek { width: 28px; height: 28px; border-width: 4px; }
@keyframes scanlijn { 0% { top: 18px; } 50% { top: 178px; } 100% { top: 18px; } }
.held .sc-uitkomst { margin-top: 0; }
.scanner-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 760px) {
  .oogfoto { justify-self: center; max-width: 320px; }
  .held .scanner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) { .held-donker h1 { padding-right: 0; } }

/* ---------- keuzemenu (publiek) ---------- */
.menu-body { align-items: flex-start; padding: 28px 16px 40px; }
.menu { max-width: 520px; gap: 18px; }
.menu-kop { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.menu-kop.links { align-items: flex-start; text-align: left; }
.menu-logo { max-width: 140px; max-height: 64px; object-fit: contain; margin-bottom: 4px; }
.menu-intro { margin: 2px 0 0; color: var(--zacht); line-height: 1.45; }
.menu-lijst { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.menu-knop { display: block; border-radius: 16px; background: var(--kaart); border: 1px solid var(--lijn); color: var(--inkt);
  text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s; }
a.menu-knop:hover { border-color: var(--accent); }
a.menu-knop:active { transform: scale(.985); }
.menu-knop.nu { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-zacht); }
.menu-knop.straks { opacity: .55; border-style: dashed; cursor: default; }
.menu-foto { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.menu-tekst { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 64px; }
.menu-emoji { font-size: 1.9rem; line-height: 1; flex: none; width: 2.2rem; text-align: center; }
.menu-woorden { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.menu-woorden strong { font-size: 1.08rem; line-height: 1.25; }
.menu-onder { font-size: .9rem; color: var(--zacht); line-height: 1.35; }
.menu-pijl { font-size: 1.6rem; line-height: 1; color: var(--zacht); flex: none; }
.menu-nu { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 999px; }
.menu-stip { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: menu-puls 1.6s ease-in-out infinite; }
@keyframes menu-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .menu-stip { animation: none; } }
.menu-leeg { padding: 22px; border: 1px dashed var(--lijn); border-radius: 16px; color: var(--zacht); text-align: center; margin: 0; }
.menu-voet { text-align: center; }
.menu-voorbeeld a.menu-knop { pointer-events: none; }
/* tekst- en pdf-pagina */
.menu-pagina { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.menu-terug { color: var(--zacht); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menu-pagina-foto { width: 100%; border-radius: 14px; }
.menu-artikel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 22px 22px 8px; font-size: 1.06rem; line-height: 1.6; }
.menu-artikel h2 { font-size: 1.3rem; margin: 6px 0 10px; }
.menu-artikel h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.menu-artikel p, .menu-artikel ul { margin: 0 0 14px; }
.menu-artikel ul { padding-left: 1.2em; }
.menu-artikel a { overflow-wrap: anywhere; }
.menu-pdf { display: flex; flex-direction: column; gap: 10px; }
.menu-pdf img { width: 100%; border-radius: 6px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.menu-download, .menu-terug-knop { align-self: stretch; text-align: center; }
/* ---------- keuzemenu (beheer) ---------- */
.rij.knop-titelrij { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.knop-foto-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.knop-foto-rij > label:not(.vinkje) { flex: 1; min-width: 200px; }
.knop-foto-klein { width: 72px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.knop-emoji-klein { font-size: 1.6rem; width: 40px; text-align: center; flex: none; }
.knop-form fieldset, .menu-inst fieldset { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.knop-form legend, .menu-inst legend { font-weight: 600; padding: 0 4px; }
.soortkeuze label.dicht { opacity: .55; }
.menu-inst .vinkje { align-items: flex-start; }
.menu-proef { margin-top: 18px; }
.menu-proef .test-rij { max-width: 560px; margin-bottom: 12px; }
.filter-rij { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.filter-rij .filter { padding: 5px 12px; border: 1px solid var(--lijn); border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--inkt); }
.filter-rij .filter.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop-nieuw { border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
/* ---------- afstandsbediening (live) ---------- */
.live-body { margin: 0; min-height: 100vh; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); }
.live { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.live-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.live-lamp { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; background: #c62828; color: #fff; }
.live-lamp.uit { background: var(--lijn); color: var(--zacht); }
.live-lamp.uit .menu-stip { animation: none; background: var(--zacht); }
.live-nu { margin: 0; font-size: 1.1rem; }
.live-knoppen { display: flex; flex-direction: column; gap: 10px; }
.live-knop { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
  font: inherit; font-size: 1.1rem; color: var(--inkt); background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.live-knop:active { transform: scale(.985); }
.live-knop.nu { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-zacht); }
.live-knop.geweest { opacity: .7; }
.live-nr { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--accent-zacht); color: var(--accent); }
.live-knop.nu .live-nr { background: var(--accent); color: #fff; }
.live-naam { flex: 1; font-weight: 600; }
.live-tag { flex: none; font-size: .78rem; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.live-knop.nu .live-tag { color: var(--accent); }
.live-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.live-rij .knop, .live-einde { min-height: 52px; font-size: 1rem; }
.live-fout { color: #e57373; }
/* live in het beheer */
.live-beheer { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.live-beheer .live-qr { width: 150px; height: 150px; background: #fff; border-radius: 8px; padding: 6px; }
@media (max-width: 640px) { .live-beheer { grid-template-columns: 1fr; } }
.live-codes { width: 100%; font-size: .85rem; border-collapse: collapse; }
.live-codes td { padding: 4px 6px; border-top: 1px solid var(--lijn); vertical-align: top; }
.live-codes td:first-child { white-space: nowrap; }
.live-codes .mono { overflow-wrap: anywhere; }
/* ---------- beeld voor ProPresenter ---------- */
.beamer { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .beamer { grid-template-columns: 1fr; } }
.beamer-keuzes .knop { align-self: flex-start; }
.beamer-voorbeeld { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--lijn);
  background: linear-gradient(135deg, #1f2a5a, #5b2aa8); }
.beamer-voorbeeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.beamer-voorbeeld.licht { background: linear-gradient(135deg, #f4efe6, #dfe7ef); }
.beamer-voorbeeld img { transition: opacity .15s; }
.beamer-voorbeeld.laadt img { opacity: .55; }
.beamer-onder { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.beamer-achter { display: inline-flex; align-items: center; gap: 6px; }
.beamer-achter .knop.actief { background: var(--accent); color: #fff; }
.live-adres { margin: 4px 0 16px; }
.live-adres-rij { display: flex; gap: 8px; }
.live-adres-rij input { flex: 1; min-width: 0; }
/* Melding die in beeld blijft als de pagina naar een anker springt */
.melding.zwevend { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; width: min(640px, calc(100vw - 32px));
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25); padding-right: 40px; transition: opacity .4s; }
.melding.zwevend.weg { opacity: 0; pointer-events: none; }
.melding-sluit { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; }
.live-foto { flex: none; width: 74px; height: 42px; object-fit: cover; border-radius: 8px; }
.live-emoji { flex: none; font-size: 1.5rem; width: 34px; text-align: center; }

/* EZQR Brug: downloadpagina */
.brug-kop { display: flex; gap: 24px; align-items: center; margin-top: 8px; }
.brug-icoon { flex: none; border-radius: 22px; }
.brug-download { margin-top: 24px; max-width: 640px; }
.brug-download .knop { font-size: 1.05rem; }
.brug-download p { margin: 10px 0 0; }
.drie + h2, .brug-download + h2 { margin-top: 40px; }
.brug-uitleg .kaart h3 { margin-top: 0; }
@media (max-width: 720px) {
  .brug-kop { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brug-icoon { width: 72px; height: 72px; }
  .brug-uitleg { grid-template-columns: 1fr; }
}

/* ---------- Beginpagina: QR-code en foto wisselen in het kader, één uitgelicht vak, balk onderaan ---------- */
.held-rechts-foto { display: flex; flex-direction: column; align-items: center; justify-self: end; width: 100%; max-width: 390px; }
.held-rechts-foto .oogfoto { max-width: none; justify-self: auto; }
.fotoscanner .foto-vak { isolation: isolate; }
/* De QR-laag ligt over de foto, precies binnen het kader */
.fs-qr { position: absolute; inset: 0; z-index: 2; background: #fff; display: grid; place-items: center; opacity: 0; }
.fotoscanner.qr .fs-qr { opacity: 1; }
.fotoscanner .fs-qr img { width: 58%; height: auto; image-rendering: pixelated; transition: transform .25s ease; }
.fotoscanner.klik .fs-qr img { transform: scale(.95); }
.fs-hoek { position: absolute; width: 15%; height: 15%; border: 5px solid #F4731C; transition: inset .5s ease, border-color .3s; }
.fs-hoek.lb { left: 7%; top: 7%; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.fs-hoek.rb { right: 7%; top: 7%; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.fs-hoek.lo { left: 7%; bottom: 7%; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.fs-hoek.ro { right: 7%; bottom: 7%; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.fotoscanner.zoekt .fs-hoek { border-color: #FFB070; }
.fotoscanner.zoekt .fs-hoek.lb { left: 11%; top: 11%; } .fotoscanner.zoekt .fs-hoek.rb { right: 11%; top: 11%; }
.fotoscanner.zoekt .fs-hoek.lo { left: 11%; bottom: 11%; } .fotoscanner.zoekt .fs-hoek.ro { right: 11%; bottom: 11%; }
.fs-lijn { position: absolute; left: 9%; right: 9%; top: 10%; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, #F4731C, transparent); box-shadow: 0 0 16px 4px rgba(244,115,28,.55); }
.fotoscanner.zoekt .fs-lijn { opacity: 1; animation: fs-lijn .9s ease-in-out; }
@keyframes fs-lijn { 0% { top: 10%; } 100% { top: 89%; } }
/* Sluiter: twee lamellen klappen dicht (zwart) en open, met een korte flits */
.fs-sluiter { position: absolute; left: 0; right: 0; height: 50.5%; background: #05080c; z-index: 4; transform: scaleY(0); }
.fs-sluiter.boven { top: 0; transform-origin: top; } .fs-sluiter.onder { bottom: 0; transform-origin: bottom; }
.fotoscanner.klik .fs-sluiter { animation: fs-sluiter .42s ease-in-out; }
@keyframes fs-sluiter { 0%, 100% { transform: scaleY(0); } 40%, 60% { transform: scaleY(1); } }
.fs-flits { position: absolute; inset: 0; background: #fff; z-index: 5; opacity: 0; pointer-events: none; }
.fotoscanner.klik .fs-flits { animation: flits .45s ease-out .26s; }
/* Uitkomst onder het kader */
.fs-uitkomst { text-align: center; margin-top: -2%; position: relative; z-index: 2; }
.fs-uitkomst .sc-uitkomst { margin-top: 0; }
.fs-uitkomst.klaar .sc-uitkomst { opacity: 1; transform: none; }
.fs-uitkomst .sc-onder { margin-top: 10px; }

/* Eén uitgelicht vak in de donkere kop, in de stijl van de troeven */
.troef.uitgelicht-troef { --t1: #1B2A4A; --t2: #233660; --t3: #16223D; margin-top: 30px; max-width: 520px; color: #fff;
  border-color: rgba(255,255,255,.12); padding: 22px 24px 18px; }
.uitgelicht-troef::before { transform: scaleX(1); }
.uitgelicht-troef:hover { transform: none; box-shadow: 0 18px 30px -12px rgba(18,165,148,.25); }
.troef-teller { margin: 0 0 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ut-vensters { display: grid; }
/* Eerst gaat de oude weg, dan komt de nieuwe: nooit twee teksten door elkaar */
.ut-venster { grid-area: 1 / 1; opacity: 0; transform: translateX(-10px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.ut-venster.aan { opacity: 1; transform: none; pointer-events: auto; transition: opacity .4s ease .22s, transform .4s ease .22s; }
.uitgelicht-troef h3 { color: #fff; }
.uitgelicht-troef .ut-venster p:last-child { color: rgba(255,255,255,.75); margin: 0; }
.uitgelicht-troef .troef-groot { margin-bottom: 10px; }
.ut-stippen { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.ut-stip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.25); cursor: pointer;
  transition: width .3s ease, background .3s ease; }
.ut-stip.aan { width: 22px; background: linear-gradient(90deg, #F4731C, #FFB070); }
.ut-stip:focus-visible { outline: 2px solid #F4731C; outline-offset: 2px; }

/* Balk onderaan met de wisselende zin */
.slotbalk { margin: -40px calc(50% - 50vw) -64px; padding: 56px calc(50vw - 50%) 64px;
  background: linear-gradient(120deg, rgba(244,115,28,.10), rgba(20,33,61,.08)); border-top: 1px solid var(--lijn); }
.slotbalk-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.slotbalk .wisselkop { font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.15; margin: 0; flex: 1; min-height: 2.3em; align-items: center; }
.slotbalk .knop { flex: none; }
@media (max-width: 760px) {
  .held-rechts-foto { justify-self: center; max-width: 320px; width: 100%; }
  /* Op een telefoon: eerst de titel en knoppen, dan de foto met de QR-code, en pas daarna het wisselende vak.
     De linkerkolom lost op in het raster (display: contents), zodat de foto ertussen kan. */
  .held > div:first-child { display: contents; }
  .held { gap: 0; }
  .held .lead { margin: 0 0 18px; }
  .held-rechts-foto { margin: 22px 0 10px; }
  .held .uitgelicht-troef { order: 2; max-width: none; margin-top: 4px; }
  .slotbalk-in { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-uitkomst .sc-uitkomst { opacity: 1; transform: none; }
  .ut-venster { transition: none; }
}
/* Wisselende titel bovenaan: iets kleiner, zodat de langste zin in drie regels past (geen gat eronder) */
.held-donker h1.wisselkop { font-size: clamp(2rem, 4.1vw, 3.1rem); line-height: 1.08; }
/* Op een smal scherm is de titel zo hoog als de zin die nu te zien is, niet als de langste van alle zinnen.
   De andere zinnen liggen er los overheen; het script past de hoogte zacht aan bij het wisselen. */
@media (max-width: 760px) {
  .held-donker h1.wisselkop { position: relative; display: block; transition: height .5s ease; }
  .held-donker h1.wisselkop .kop-regel { display: block; }
  .held-donker h1.wisselkop .kop-regel:not(.aan) { position: absolute; left: 0; right: 0; top: 0; }
}

/* Facturen op het platform */
.label.fout { background: #fde8e8; color: #9b1c1c; }
html.donker { .label.fout { background: #3b1414; color: #f6a5a5; } }
.facturen-tabel td { vertical-align: top; }
.facturen-tabel td:nth-child(2), .facturen-tabel td:nth-child(3), .facturen-tabel td.getal { white-space: nowrap; }
.facturen-tabel tr.status-geannuleerd td { opacity: .55; }
.factuur-regels input { width: 100%; }
.factuur-regels .smal-getal { width: 7.5em; text-align: right; }
.factuur-regels td:first-child { min-width: 260px; }
.factuur-form .twee { margin-top: 0; }

/* ---------- Prijzen: vergelijkingsmatrix ---------- */
.pm-kop { max-width: 760px; margin-bottom: 18px; }
.pm-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(2, 8, 23, .25); }
.pm-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.pm col.pm-col-naam { width: 30%; }
.pm th, .pm td { padding: 13px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--lijn); }
.pm tbody th[scope=row], .pm tfoot th { text-align: left; font-weight: 500; }
/* Eerste kolom blijft staan bij opzij vegen */
.pm th:first-child, .pm td:first-child { position: sticky; left: 0; z-index: 2; background: var(--kaart); }
.pm-wrap.links-meer th:first-child { box-shadow: 8px 0 12px -10px rgba(2, 8, 23, .35); }
.pm-rij-naam { display: block; color: var(--inkt); }
.pm-uitleg { display: block; font-size: .8rem; color: var(--zacht); font-weight: 400; margin-top: 2px; line-height: 1.35; }
/* Kop met de abonnementen */
.pm thead th { vertical-align: bottom; padding-top: 26px; padding-bottom: 18px; border-bottom: 2px solid var(--lijn); }
.pm-hoek { text-align: left !important; }
.pm-plan { position: relative; }
.pm-plan > span { display: block; }
.pm-naam { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem; }
.pm-prijs { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.1; margin-top: 6px; letter-spacing: -.01em; }
.pm-prijs small { font-size: .85rem; font-weight: 600; color: var(--zacht); letter-spacing: 0; }
.pm-jaar { font-size: .8rem; color: var(--zacht); margin: 2px 0 12px; font-weight: 400; }
.pm-leeg { display: block; height: 32px; }
.pm-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #F4731C, #FFB070); }
/* De uitgelichte kolom (Kerk) */
.pm .pm-uit { background: color-mix(in srgb, var(--accent) 5%, var(--kaart)); }
.pm thead .pm-uit { box-shadow: inset 0 3px 0 var(--accent); }
/* Groepen */
.pm-groep th { text-align: left !important; background: var(--bg) !important; padding: 10px 16px; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.pm-groep th span { position: sticky; left: 16px; }
/* Waarden */
.pm-ja { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #F4731C, #FFB070); vertical-align: middle; }
.pm-ja svg { width: 15px; height: 15px; }
.pm-nee { color: var(--zacht); opacity: .6; font-size: 1.1rem; }
.pm-waarde { font-weight: 600; font-size: .9rem; }
.pm-bij { display: block; font-size: .78rem; color: var(--zacht); }
.pm tbody tr:not(.pm-groep):hover td, .pm tbody tr:not(.pm-groep):hover th { background: color-mix(in srgb, var(--accent) 7%, var(--kaart)); }
.pm tfoot td, .pm tfoot th { border-bottom: 0; padding: 18px 16px 22px; }
.pm-onder { margin-top: 18px; color: var(--zacht); font-size: .9rem; }
.pm-onder p { margin: 4px 0; }
/* Veeghint en schaduw rechts: alleen als er echt meer staat */
.pm-veeg { display: none; align-items: center; gap: 6px; font-size: .82rem; color: var(--zacht); margin: 0 0 8px; }
.pm-veeg svg { width: 16px; height: 16px; }
@media (max-width: 820px) {
  .pm-veeg { display: flex; }
  .pm { min-width: 720px; font-size: .9rem; }
  .pm col.pm-col-naam { width: 170px; }
  .pm th, .pm td { padding: 11px 12px; }
  .pm th:first-child { min-width: 160px; max-width: 170px; }
  .pm-prijs { font-size: 1.6rem; }
  .pm-wrap.rechts-meer { box-shadow: inset -18px 0 16px -16px rgba(2, 8, 23, .35), 0 14px 30px -18px rgba(2, 8, 23, .25); }
}
/* De algemene tabelkop (klein, hoofdletters) niet in de prijsmatrix */
.pm th { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; }
.pm .pm-groep th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.pm .pm-hoek .klein-tekst { font-weight: 400; }
.pm thead .pm-uit { padding-top: 38px; }
.pm-badge { top: 10px; transform: translateX(-50%); }
/* Huisstijl: voorbeeld terwijl je kiest */
.hs-proef { margin: 6px 0 14px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hs-proef img { width: 180px; height: 180px; border-radius: 10px; border: 1px solid var(--lijn);
  background: repeating-conic-gradient(#e9edf2 0 25%, #fff 0 50%) 0 0 / 16px 16px; image-rendering: auto; }

/* Scans per moment (keuzemenu) */
.momenten-dagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.momenten-live { margin-bottom: 14px; }
.momenten-tijd { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 4px 10px; }
.momenten-keuze { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.mk-rij { display: contents; }
.mk-balk { display: block; height: 10px; background: var(--lijn); border-radius: 999px; overflow: hidden; }
.mk-balk span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
@media (max-width: 600px) { .momenten-tijd { grid-template-columns: auto 1fr; } .mk-cijfer { grid-column: 2; margin-bottom: 4px; } }

/* Afbeelding in het midden van de QR-code, per link */
.qr-beeld-keuze { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 10px 0; }
.qr-beeld-keuze > label { flex: 1 1 220px; }
.qr-beeld-keuze .klein-tekst { flex-basis: 100%; margin: 0; }
.qr-beeld-eigen { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
.qr-beeld-eigen[hidden] { display: none; }
.qr-beeld-klein { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; }
.qr-beeld-mini { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; border-radius: 4px; background: #fff; }

/* Foto-QR op de linkpagina */
.foto-qr { display: grid; gap: 10px; margin: 6px 0 4px; flex: 1 1 100%; min-width: 0; }
.foto-qr[hidden] { display: none; }
/* Smal vak naast de QR-code: foto en resultaat onder elkaar; is er ruimte, dan naast elkaar */
.foto-qr-werk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.foto-qr .klein-tekst { flex-basis: auto; }
.foto-qr-kolom > label { display: grid; gap: 4px; }
.foto-qr-kolom { display: grid; gap: 8px; min-width: 0; }
.foto-venster { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; touch-action: none; cursor: grab;
  background: repeating-conic-gradient(#e5e7eb 0 25%, #f9fafb 0 50%) 0 0 / 20px 20px; }
.foto-venster:active { cursor: grabbing; }
.foto-venster canvas { width: 100%; height: 100%; display: block; }
.foto-leeg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #6b7280; font-size: .95rem; pointer-events: none; }
.foto-uitkomst { width: 100%; aspect-ratio: 1; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.foto-uitkomst img { width: 100%; height: 100%; }
.fq-schuif { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: .9rem; }
.fq-schuif output { font-size: .8rem; color: var(--zacht, #6b7280); font-variant-numeric: tabular-nums; }
.fq-schuif input { grid-column: 1 / -1; width: 100%; }
.fq-snel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fq-status { margin: 0; font-size: .9rem; font-weight: 600; min-height: 1.4em; }
.fq-status.goed { color: #0f7d55; } .fq-status.let { color: #8a5a00; } .fq-status.fout { color: #b4372a; }
html.donker { .fq-status.goed { color: #5fd39d; } .fq-status.let { color: #f2c56b; } .fq-status.fout { color: #f08a7c; } }

/* Kolommen mogen smaller worden dan hun breedste inhoud (anders schuift de linkpagina op de telefoon rechts uit beeld) */
.twee > *, .drie > * { min-width: 0; }

/* Boodschap-tussenpagina: eigen afbeelding */
.boodschap-beeld { display: grid; gap: 8px; }
.boodschap-voorbeeld { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid var(--lijn); object-fit: cover; }

/* Emoji-kiezer */
.met-emoji-knop { position: relative; }
.met-emoji-knop input[data-emoji] { padding-right: 44px; }
.emoji-open { position: absolute; right: 4px; bottom: 4px; width: 36px; height: calc(100% - 8px); max-height: 36px; border: 0; border-radius: 6px;
  background: var(--lijn); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; }
.emoji-open:hover { filter: brightness(.95); }
.emoji-venster { position: fixed; z-index: 1000; width: 340px; height: 400px; display: flex; flex-direction: column; background: var(--kaart, #fff);
  color: var(--inkt); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.35); overflow: hidden; }
.emoji-venster[hidden] { display: none; }
.emoji-venster.onder { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 55vh; border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.emoji-kop { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--lijn); }
.emoji-zoek { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: 7px 10px; }
.emoji-sluit { border: 0; background: none; font-size: 1.5rem; line-height: 1; padding: 0 8px; cursor: pointer; color: var(--zacht); }
.emoji-tabs { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--lijn); overflow-x: auto; }
.emoji-tabs button { border: 0; background: none; font-size: 1.15rem; padding: 4px 6px; border-radius: 6px; cursor: pointer; flex: none; }
.emoji-tabs button:hover { background: var(--lijn); }
.emoji-lijst { flex: 1; overflow-y: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.emoji-lijst h4 { position: sticky; top: -4px; background: var(--kaart, #fff); margin: 0; padding: 8px 2px 4px; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); z-index: 1; }
.emoji-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.emoji-raster button { border: 0; background: none; font-size: 1.55rem; line-height: 1; aspect-ratio: 1; border-radius: 8px; cursor: pointer; padding: 0; }
.emoji-raster button:hover, .emoji-raster button:focus-visible { background: var(--lijn); }
.emoji-niets { color: var(--zacht); padding: 16px 4px; margin: 0; }
.emoji-voet { border-top: 1px solid var(--lijn); padding: 6px 10px; text-align: right; font-size: .9rem; }

/* Schakelaar (aan/uit) */
.schakelaar, .formulier .schakelaar { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; cursor: pointer; margin: 6px 0; width: auto; }
.schakelaar > span:last-child { flex: 1; }
.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakelaar-baan { flex: none; width: 42px; height: 24px; border-radius: 999px; background: #c7ccd4; position: relative; transition: background .15s; }
.schakelaar-baan::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.schakelaar input:checked + .schakelaar-baan { background: var(--accent, #F4731C); }
.schakelaar input:checked + .schakelaar-baan::after { transform: translateX(18px); }
.schakelaar input:focus-visible + .schakelaar-baan { outline: 3px solid var(--accent, #F4731C); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .schakelaar-baan, .schakelaar-baan::after { transition: none; } }

/* Eigen HTML in het beeldvak van een menuknop */
.menu-html { position: relative; overflow: hidden; background: #000; }
.menu-html iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.knop-html-klein { width: 72px; height: 40px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, #F4731C, #D45F0E); }
.knop-beeld { display: grid; gap: 8px; }
.knop-beeld [hidden] { display: none !important; }

/* Keuzeblok op de voorpagina: voor wie maak je QR-codes (een kaart per merk) */
.merkkeuze { margin: 40px 0 8px; }
.merkkeuze h2 { font-size: 1.5rem; margin-bottom: 4px; }
.merkkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.merkkaart { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--kaart); border: 1.5px solid var(--lijn); border-radius: 14px;
  color: var(--inkt); text-decoration: none; transition: border-color .15s, transform .15s; }
.merkkaart:hover { border-color: var(--accent); transform: translateY(-2px); }
.merkkaart.aan { border: 2px solid var(--sterk); }
.merkkaart-domein { font-size: 1.5rem; line-height: 1.1; margin-bottom: 4px; }
.merkkaart strong { font-size: 1rem; }
input, select, textarea, progress { accent-color: var(--accent); }
/* Neutrale gratis tussenpagina (qr2u, ezqr): geen events, een korte uitleg van het merk */
.tussen-neutraal { text-align: center; padding: 12px 0 8px; color: var(--inkt); }
.tussen-neutraal .tussen-kop { font-size: 1.4rem; margin: 10px 0 6px; }
.tussen-neutraal p { margin: 0 0 10px; color: var(--zacht); }

/* ===== Stap 4: de app in de nieuwe stijl (witte balk, overzicht met tegels, wizard, tabbladen, telefoonbalk) ===== */
.top { background: var(--kaart); color: var(--inkt); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.top-in { min-height: 64px; padding-block: 6px; }
.logo { height: 48px; gap: 8px; }
.logo .beeldmerk { width: 40px; height: 40px; color: var(--inkt); }
.woordmerk { color: var(--inkt); font-size: 1.9rem; }
.woordmerk .nl { color: var(--zacht); }
nav#hoofdnav a:not(.knop) { color: var(--zacht); font-weight: 700; font-size: .98rem; }
nav#hoofdnav a:not(.knop):hover { color: var(--inkt); }
nav#hoofdnav a.uitloggen { font-weight: 600; }
.account-chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--bg); font-size: .9rem; font-weight: 700; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.wisselaar select { background: var(--bg); color: var(--inkt); border: 1px solid var(--lijn); border-radius: 999px; padding: 6px 12px; font-weight: 700; }
.meer-knop { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart); color: var(--inkt); place-items: center; cursor: pointer; }
.held-donker { margin-top: -32px; }


/* Overzicht */
.overzicht-kop { align-items: center; gap: 16px; flex-wrap: wrap; }
.overzicht-acties { display: flex; gap: 10px; align-items: center; }
.zoekveld { padding: 10px 14px; border: 1px solid var(--lijn); border-radius: 999px; min-width: 200px; background: var(--kaart); }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 18px; }
.tegel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; color: var(--inkt); text-decoration: none; min-height: 78px; }
a.tegel:hover { border-color: var(--accent); }
.tegel-kop { font-size: .78rem; font-weight: 800; color: var(--zacht); text-transform: none; }
.tegel-waarde { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.tegel-waarde.klein { font-size: 1.05rem; font-family: inherit; font-weight: 800; }
.tegel.let-op { border-color: #f2c66d; background: #fff8ea; }
html.donker { .tegel.let-op { background: #3a2c12; border-color: #8a5300; } }
.live-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(244,115,28,.25); flex: none; }
.filter-rij .filter { background: var(--kaart); }
.filter-rij .filter.actief { background: var(--sterk); border-color: var(--sterk); color: var(--op-sterk); }
.codelijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coderij-in { display: grid; grid-template-columns: 56px minmax(180px, 1.4fr) minmax(0, 1.2fr) 72px 120px 20px; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; color: var(--inkt); text-decoration: none; transition: border-color .15s, transform .15s; }
.coderij-in:hover { border-color: var(--accent); transform: translateY(-1px); }
.coderij.uit .coderij-in { opacity: .6; border-style: dashed; }
.code-mini { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--lijn); background: #fff; display: grid; place-items: center; overflow: hidden; }
.code-mini img { width: 48px; height: 48px; image-rendering: pixelated; }
.code-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.code-naam strong { font-size: 1.05rem; }
.code-naam .code-adres { flex-basis: 100%; }
.code-uitleg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fout-tekst { color: var(--fout); font-weight: 700; white-space: normal; }
.label.live { background: var(--accent); color: #fff; }
.label.donker { background: var(--sterk); color: var(--op-sterk); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 72px; }
.spark i { flex: 1; min-height: 3px; background: var(--lijn); border-radius: 2px 2px 0 0; }
.spark i.nu { background: var(--accent); }
.code-scans { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.code-scans strong { font-size: 1.05rem; }
.code-totaal { font-size: .75rem; }
.code-pijl { color: var(--zacht); font-size: 1.3rem; }
.leeg-start { text-align: center; padding: 40px 20px; }
@media (max-width: 900px) {
  .coderij-in { grid-template-columns: 48px minmax(0, 1fr) auto 20px; gap: 12px; }
  .code-uitleg, .spark { display: none; }
  .code-mini { width: 48px; height: 48px; } .code-mini img { width: 40px; height: 40px; }
}

/* Wizard: nieuwe code in drie stappen */
.stappen.wz-stappen { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.stappen .stap { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--zacht); font-size: .95rem; white-space: nowrap; }
.stappen .stap:not(:last-child)::after { content: ""; display: block; width: clamp(24px, 10vw, 140px); height: 2px; background: var(--lijn); margin-left: 8px; }
.stappen .stap.klaar:not(:last-child)::after { background: var(--sterk); }
.stappen .stap.aan { color: var(--inkt); }
.stappen .stap[data-naar].klaar { cursor: pointer; }
.stap-nr { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--lijn); display: grid; place-items: center; font-size: .8rem; flex: none; box-sizing: border-box; }
.stap.aan .stap-nr { background: var(--sterk); border-color: var(--sterk); color: var(--op-sterk); }
.stap.klaar .stap-nr { border-color: var(--sterk); color: var(--sterk); }
.wz-kop { text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 4px; }
.wz-sub { text-align: center; margin: 0 0 20px; }
.soortkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; max-width: 920px; margin: 0 auto; }
.soortkaart { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; background: var(--kaart); border: 1.5px solid var(--lijn); border-radius: 16px; color: var(--inkt); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.soortkaart:hover { border-color: var(--accent); transform: translateY(-2px); }
.soortkaart.aan { border: 2px solid var(--sterk); }
.soortkaart.dicht { opacity: .55; cursor: not-allowed; }
.soortkaart.dicht:hover { transform: none; border-color: var(--lijn); }
.sk-icoon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--accent); display: grid; place-items: center; flex: none; }
.sk-icoon svg { width: 22px; height: 22px; }
.sk-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sk-tekst strong { font-size: 1.05rem; }
.wz-snel { max-width: 920px; margin: 14px auto 0; padding: 12px 16px; border: 1px dashed var(--lijn); border-radius: 14px; background: var(--kaart); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-twee { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.wz-twee .wz-kop { text-align: left; margin-bottom: 14px; }
.wizard .soortkeuze { display: none; }   /* de soort is in stap 1 gekozen */
.wz-knoppen { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wz-voorbeeld { text-align: center; position: sticky; top: 84px; }
.wz-label { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.telefoonkader { background: #fff; border: 8px solid var(--inkt); border-radius: 36px; overflow: hidden; aspect-ratio: 9 / 17; margin: 0 auto 10px; max-width: 280px; }
.tk-balk { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f6f3ef; font-size: .72rem; color: #5C5048; border-bottom: 1px solid #ece6df; overflow: hidden; white-space: nowrap; }
.tk-stip { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; flex: none; }
.tk-inhoud { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tk-blok { display: block; height: 110px; border-radius: 10px; background: #e9e6e2; }
.tk-lijn { display: block; height: 10px; border-radius: 6px; background: #e9e6e2; width: 80%; }
.tk-lijn.kort { width: 55%; }
.tk-knop { display: block; height: 38px; border-radius: 10px; background: var(--accent); margin-top: 6px; }
@media (max-width: 860px) { .wz-twee { grid-template-columns: 1fr; } .wz-voorbeeld { display: none; } .stappen .stap-naam { display: none; } .stappen .stap.aan .stap-naam { display: inline; } }
.klaar-stappen { margin-bottom: 14px; }

/* Linkpagina: tabbladen */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; color: var(--zacht); font-weight: 800; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--inkt); }
.tabs a.aan { color: var(--inkt); border-bottom-color: var(--accent); }
.tab-tal { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--lijn); font-size: .72rem; margin-left: 4px; }
.tabbladen .tabblad[hidden] { display: none; }
.tabbladen > .tabblad { margin-bottom: 16px; }

/* Telefoonbalk onderin */
.onderbalk { display: none; }
@media (max-width: 760px) {
  .meer-knop { display: grid; margin-left: auto; }
  .top-in { flex-wrap: nowrap; }
  nav#hoofdnav { display: none; }
  body.nav-open nav#hoofdnav { display: flex; flex-direction: column; align-items: stretch; position: fixed; left: 12px; right: 12px; top: 70px; z-index: 30; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 10px; gap: 2px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); }
  body.nav-open nav#hoofdnav a:not(.knop) { padding: 10px 12px; border-radius: 10px; font-size: 1rem; }
  body.nav-open nav#hoofdnav a.knop { margin: 8px 12px 4px; text-align: center; }
  body.nav-open nav#hoofdnav a:not(.knop):hover { background: var(--bg); }
  body.nav-open nav#hoofdnav .wisselaar, body.nav-open nav#hoofdnav .account-chip { margin: 6px 12px; max-width: none; }
  .onderbalk { display: flex; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--kaart); border-top: 1px solid var(--lijn); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .onderbalk a, .onderbalk button { display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; font-size: .7rem; font-weight: 800; color: var(--zacht); text-decoration: none; background: none; border: 0; padding: 2px 10px; cursor: pointer; }
  .onderbalk a.aan { color: var(--inkt); }
  .onderbalk svg { width: 22px; height: 22px; }
  .onderbalk .nieuw { color: var(--accent); }
  .onderbalk .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 17px; line-height: 1; }
  main.wrap { padding-bottom: 96px; }
  .voet { padding-bottom: 80px; }
  .overzicht-acties { width: 100%; } .zoekveld { flex: 1; min-width: 0; }
}
.live-stip.uit { background: var(--lijn); box-shadow: none; }
.tabbladen .qr-vak { max-width: 460px; }
@media (max-width: 760px) { .tegels { grid-template-columns: 1fr 1fr; gap: 8px; } .tegel { padding: 12px; min-height: 0; } .tegel-waarde { font-size: 1.2rem; } .tegel-waarde.klein { font-size: .95rem; } }
.tabblad, .tabs, h2[id], h3[id], div[id], section[id] { scroll-margin-top: 84px; }
/* Fotokader zonder animatie: de QR-code klein en vast rechtsonder op de foto */
.fotoscanner.stil .fs-qr { opacity: 1; inset: auto 6% 6% auto; width: 38%; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.fotoscanner.stil .fs-qr img { width: 84%; }
.fotoscanner.stil .fs-hoek, .fotoscanner.stil .fs-lijn, .fotoscanner.stil .fs-sluiter, .fotoscanner.stil .fs-flits { display: none; }

/* Themaknop in de balk: zon (licht), maan (donker), halve cirkel (automatisch) */
.thema-knop { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--kaart); color: var(--zacht); cursor: pointer; padding: 0; }
.thema-knop:hover { color: var(--inkt); border-color: var(--accent); }
.thema-knop svg { width: 18px; height: 18px; }
.thema-knop [data-stand] { display: none; } .thema-knop[data-nu="auto"] [data-stand="auto"], .thema-knop[data-nu="light"] [data-stand="light"], .thema-knop[data-nu="dark"] [data-stand="dark"] { display: block; }
.fotoscanner .fs-qr.fs-foto img { width: 88%; image-rendering: auto; border-radius: 6px; }
.fotoscanner.stil .fs-qr.fs-foto img { width: 92%; }
/* Balk: logo, navigatie, rechts de themaknop en op de telefoon helemaal rechts de menuknop */
.balk-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.cta-mobiel { display: none; }
@media (max-width: 760px) {
  .top-in { gap: 10px; }
  .meer-knop { display: grid; margin-left: 0; order: 10; flex: none; }
  .logo { flex: none; margin-right: auto; }
  .cta-mobiel { display: inline-block; padding: 7px 12px; font-size: .88rem; white-space: nowrap; }
}
@media (max-width: 380px) { .woordmerk { font-size: 1.5rem; } .logo .beeldmerk { width: 32px; height: 32px; } .cta-mobiel { padding: 6px 10px; } }

/* Online betalen */
.betaalwijze { border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 14px; margin: 14px 0; }
.betaalwijze legend { font-weight: 600; padding: 0 6px; }
.betaal-optie { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; padding: 10px 4px; cursor: pointer; font-weight: normal; }
.betaal-optie > span { flex: 1; min-width: 0; }
.betaalwijze.een-keuze .betaal-optie input { display: none; }     /* maar één manier: geen rondje om te kiezen */
.betaal-optie input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.betaal-optie + .betaal-optie { border-top: 1px solid var(--lijn); }
.auto-betalen { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-left: 4px solid var(--goed); }
.auto-betalen form { margin: 0; }
.betaal-nu { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0; }
.betaal-nu .knop { margin: 0; }
form.inline { display: inline; margin: 0; }
td.knoppen { white-space: nowrap; }
.betaal-uitkomst { text-align: center; margin-top: 40px; }
.betaal-icoon { font-size: 2.2rem; line-height: 1; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-zacht); color: var(--accent); font-weight: 700; }
.betaal-icoon.goed { background: var(--goed-zacht); color: var(--goed); }
.betaal-icoon.fout { background: var(--fout-zacht); color: var(--fout); }
.fin-ok { color: var(--goed); font-weight: 600; }
.fin-blok { border-top: 1px solid var(--lijn); padding: 8px 0; }
.fin-blok > summary { cursor: pointer; padding: 4px 0; }
details.kaart.fin-blok { border-top: 0; padding: 14px 20px; }
.klein-lijst { margin: 6px 0; padding-left: 18px; }
.label.fout { background: var(--fout-zacht); color: var(--fout); }
/* Factuurgegevens: postcode en huisnummer eerst, straat en plaats vullen we in */
.factuur-velden label > span:first-child, .adres-zoek label > span:first-child { min-height: 1.5em; }
.adres-zoek { display: grid; grid-template-columns: minmax(120px, 180px) minmax(100px, 140px) 1fr; gap: 10px 16px; align-items: end; margin: 12px 0; }
.adres-zoek .adres-status { margin: 0 0 10px; }
.adres-status.goed { color: var(--goed); } .adres-status.let-op { color: #8a5300; }
html.donker .adres-status.let-op { color: #f2c66d; }
@media (max-width: 760px) { .adres-zoek { grid-template-columns: 1fr 1fr; } .adres-zoek .adres-status { grid-column: 1 / -1; margin: 0; } }
/* Voet: logo's van de betaalmiddelen die in Mollie aan staan */
.betaalmiddelen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; font-size: .85rem; opacity: .9; }
.betaalmiddelen img { height: 24px; width: auto; background: #fff; border-radius: 5px; padding: 2px 4px; }
/* Het label met naam en abonnement is ook de link naar Abonnement */
nav#hoofdnav a.account-chip { color: var(--inkt); text-decoration: none; transition: border-color .15s; }
nav#hoofdnav a.account-chip:hover, nav#hoofdnav a.account-chip.aan { border-color: var(--accent); color: var(--inkt); }
.bulk-extra { margin-top: 6px; flex-wrap: wrap; }
.bulk-extra label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.bulk-extra input[type=url] { min-width: 240px; }
.bulk-scheiding { width: 1px; align-self: stretch; background: var(--lijn); margin: 0 4px; }
/* Tweestapsverificatie */
.tweestaps .code-groot { font-size: 1.4rem; letter-spacing: .2em; max-width: 220px; }
.tweestaps-qr { background: #fff; padding: 10px; border-radius: 12px; width: fit-content; margin: 10px 0; }
.tweestaps-qr svg { display: block; width: 200px; height: 200px; }
.tweestaps .sleutel { word-break: break-all; }
.herstelcodes { columns: 2; list-style: none; padding: 0; font-size: 1.1rem; line-height: 2; }
.knoppenrij { display: flex; gap: 10px; flex-wrap: wrap; }
.beschermd-blok { border-left: 4px solid var(--goed); }
.stappenlijst { padding-left: 20px; }
/* Passkeys */
.knop.breed { width: 100%; display: block; text-align: center; }
.of-scheiding { display: flex; align-items: center; gap: 10px; color: var(--zacht); font-size: .85rem; margin: 14px 0; }
.of-scheiding::before, .of-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }
/* Kopregel: bovenaan wat groter, kleiner zodra je scrolt (klasse .klein via base.html); het beeldmerk knipoogt bij de wissel */
.top-in { min-height: 84px; transition: min-height .25s ease, padding .25s ease; }
.logo { height: 60px; transition: height .25s ease; }
.logo .beeldmerk { width: 56px; height: 56px; transition: width .25s ease, height .25s ease; }
.woordmerk { font-size: 2.55rem; transition: font-size .25s ease; }
.top.klein .top-in { min-height: 60px; }
.top.klein .logo { height: 44px; }
.top.klein .logo .beeldmerk { width: 38px; height: 38px; }
.top.klein .woordmerk { font-size: 1.8rem; }
.top.klein { box-shadow: 0 6px 18px -12px rgba(0,0,0,.45); }
.logo .oog { transform-box: fill-box; transform-origin: center; }
.logo.knipoog .oog-r { animation: knipoog .5s ease-in-out; }
@keyframes knipoog { 0%, 100% { transform: scaleY(1); } 35%, 60% { transform: scaleY(.1); } }
@media (max-width: 760px) {
  .top-in { min-height: 64px; }
  .logo { height: 48px; }
  .logo .beeldmerk { width: 44px; height: 44px; }
  .woordmerk { font-size: 2rem; }
  .top.klein .top-in { min-height: 54px; }
  .top.klein .logo { height: 38px; }
  .top.klein .logo .beeldmerk { width: 34px; height: 34px; }
  .top.klein .woordmerk { font-size: 1.55rem; }
}
@media (max-width: 380px) { .woordmerk { font-size: 1.6rem; } .logo .beeldmerk { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .top-in, .logo, .logo .beeldmerk, .woordmerk { transition: none; }
  .logo.knipoog .oog-r { animation: none; }
}

/* Woordmerk Easy QR: "QR" in de kleur van de oogjes */
.woordmerk .qr { color: #F4731C; }
/* "Easy QR" is breder dan een domein: op de telefoon iets kleiner, zodat het menu er nog naast past */
@media (max-width: 760px) { .woordmerk.naam { font-size: 1.7rem; } .top.klein .woordmerk.naam { font-size: 1.4rem; } }
@media (max-width: 400px) { .woordmerk.naam { font-size: 1.45rem; } .top.klein .woordmerk.naam { font-size: 1.3rem; } }
@media (max-width: 350px) { .woordmerk.naam { font-size: 1.25rem; } }
@media (max-width: 400px) {
  .top-in { gap: 6px; }
  .balk-rechts { gap: 6px; }
  .balk-rechts .thema-knop, .meer-knop { width: 36px; height: 36px; }
  .cta-mobiel { padding: 6px 10px; font-size: .85rem; }
}
@media (max-width: 350px) { .logo .beeldmerk { width: 30px; height: 30px; } .cta-mobiel { padding: 5px 8px; font-size: .8rem; } }
@media (max-width: 350px) { .balk-rechts .thema-knop { display: none; } }

/* App op het beginscherm (PWA): de melding boven de onderbalk, en de offline-pagina */
.app-melding { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 40px 14px 14px; border-radius: 16px;
  background: var(--kaart); color: var(--inkt); border: 1px solid var(--lijn); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: app-in .3s ease-out; }
.app-melding img { border-radius: 10px; flex: none; }
.app-melding p { margin: 0 0 8px; font-size: .92rem; line-height: 1.4; }
.app-melding p:last-child { margin: 0; }
.app-melding svg { vertical-align: -3px; color: #2F7BF5; }
.app-sluit { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--zacht);
  font-size: 1.5rem; line-height: 1; cursor: pointer; }
@keyframes app-in { from { transform: translateY(20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .app-melding { animation: none; } }
.offline-pagina { min-height: 100vh; display: grid; place-items: center; background: #14213D; color: #fff; margin: 0; }
.offline-in { max-width: 420px; padding: 24px; text-align: center; }
.offline-in img { border-radius: 16px; }
.offline-in p { color: rgba(255,255,255,.8); }
[data-installeer][hidden] { display: none !important; }

/* Factuur als pagina in de site (zelfde opmaak als de pdf) */
.fb-acties { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.fb { background: #fff; color: #1F1A17; border-radius: 18px; overflow: hidden; border: 1px solid var(--lijn); max-width: 760px; margin-bottom: 18px; }
.fb small { display: block; font: 700 .7rem/1.3 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8A6A4F; margin-bottom: 4px; }
.fb-kop { background: #14213D; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; flex-wrap: wrap; }
.fb-merk { display: flex; align-items: center; gap: 10px; font: 900 1.7rem/1 Nunito, system-ui, sans-serif; letter-spacing: -.03em; }
.fb-merk b { color: #F4731C; }
.fb-nr { text-align: right; font: 900 1.35rem/1.1 Nunito, system-ui, sans-serif; }
.fb-nr small { color: #FFB070; margin: 0; }
.fb-partijen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 24px 8px; }
.fb-partijen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
.fb-partijen strong { font-size: 1.02rem; }
.fb-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 12px 24px; }
.fb-tegels > div { background: #FFF6EC; border-radius: 12px; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.fb-regels { padding: 6px 24px; }
.fb-regel { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F3E4D3; }
.fb-regel:first-child { border-top: 2px solid #14213D; }
.fb-oms { min-width: 0; overflow-wrap: anywhere; }
.fb-oms small { text-transform: none; letter-spacing: 0; font-weight: 500; margin: 2px 0 0; }
.fb-regel b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-totaal { display: flex; flex-direction: column; gap: 6px; padding: 12px 24px 6px; margin-left: auto; max-width: 360px; font-variant-numeric: tabular-nums; }
.fb-totaal > div { display: flex; justify-content: space-between; gap: 12px; }
.fb-te-betalen { background: #14213D; color: #fff; border-radius: 12px; padding: 12px 14px; margin-top: 4px; align-items: center; }
.fb-te-betalen b { color: #FFB070; font: 900 1.25rem Nunito, system-ui, sans-serif; }
.fb-stempel { display: inline-block; margin: 14px 24px 22px; padding: 8px 18px; border: 2px solid currentColor; border-radius: 10px; font: 900 1.05rem Nunito, system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.fb-stempel.goed { color: #1F7A4D; } .fb-stempel.fout { color: #B42318; }
.fb-betaal { margin: 14px 24px 22px; background: #FFF6EC; border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.fb-betaal p { margin: 4px 0 0; overflow-wrap: anywhere; }
.fb > .klein-tekst { padding: 0 24px 18px; color: #8A6A4F; }
.fout-tekst { color: #B42318; }
@media (max-width: 560px) { .fb-partijen { grid-template-columns: 1fr; } .fb-nr { text-align: left; } .fb-totaal { max-width: none; } }

/* Telefoon: postcode en huisnummer passen naast elkaar */
.adres-zoek > * { min-width: 0; }
.adres-zoek input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Telefoon: een tabel die niet past, wordt een stapel kaartjes (base.html zet de klasse 'stapel' en de labels) */
@media (max-width: 760px) {
  table.stapel, table.stapel > tbody, table.stapel > tbody > tr, table.stapel > tbody > tr > td, table.stapel > tbody > tr > th { display: block; width: auto !important; }
  table.stapel > thead, table.stapel tr.stapel-kop { display: none; }
  table.stapel > tbody > tr { border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; background: var(--kaart); }
  table.stapel > tbody > tr > td, table.stapel > tbody > tr > th { border: 0 !important; padding: 4px 0 !important; text-align: left !important; overflow-wrap: anywhere; }
  table.stapel > tbody > tr > td:not(:empty) { display: block !important; }
  table.stapel > tbody > tr > td[data-label] { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; text-align: right !important; }
  table.stapel > tbody > tr > td[data-label]::before { content: attr(data-label); flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--zacht); text-transform: uppercase; text-align: left; }
  table.stapel > tbody > tr > td[data-label]:empty, table.stapel > tbody > tr > td[data-label=""] { display: none !important; }
  table.stapel > tbody > tr > td:first-child { font-weight: 700; }
  table.stapel .mobiel-code { display: none; }
  .tabel:has(> table.stapel) { overflow-x: visible; }
}