/* ==========================================================================
   Basiq Dental bezoekersregistratie — gedeelde huisstijl
   Kleuren zoals Roadmap (navy / groen / amber). Typografie: Poppins (huisstijl),
   met systeemfallback als er geen internet is.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #004B93;
  --navy-donker: #00376C;
  --navy-licht: #E7EFFA;
  --green: #009984;
  --green-donker: #007A6A;
  --green-licht: #E3F5F1;
  --amber: #D98A2B;
  --amber-licht: #FBEEDC;
  --rood: #C0392B;
  --rood-donker: #962D22;
  --rood-licht: #FBE7E4;
  --ink: #13293D;
  --mute: #5E6E7C;
  --line: #E2E8F0;
  --bg: #F4F7FA;
  --card: #FFFFFF;
  --schaduw: 0 1px 2px rgba(19, 41, 61, .06), 0 8px 24px -12px rgba(19, 41, 61, .18);
  --schaduw-zwaar: 0 2px 4px rgba(19, 41, 61, .08), 0 24px 48px -16px rgba(19, 41, 61, .28);
  --radius: 14px;
  --radius-klein: 9px;
  --sans: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;
  --serif: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif; /* koppen: zelfde font, zwaarder gewicht */
  --overgang: 180ms cubic-bezier(.2, .7, .2, 1);
  --kop-hoogte: 59px; /* plakkende kopbalk; de ontruimingsbalk op /bhv/ plakt eronder */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
.mute { color: var(--mute); }
.klein { font-size: 12.5px; }
.verborgen { display: none !important; }

/* Achtergrondsfeer: twee zachte kleurvlekken in de merkkleuren + fijn puntraster. */
.sfeer::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(0, 153, 132, .10), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(0, 75, 147, .10), transparent 60%),
    radial-gradient(rgba(19, 41, 61, .06) 1px, transparent 1px) 0 0 / 22px 22px;
}

/* ---- kopbalk ------------------------------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.top img { height: 30px; display: block; }
.top .rechts { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mute); }
.top .menu { display: flex; gap: 8px; }
.top .menu a { text-decoration: none; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--navy-licht); white-space: nowrap; }
.top .menu a[aria-current="page"] { background: var(--navy); color: #fff; }
.top #ik { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Smal scherm: logo, het volle menu (beheer: ±390px) en de naam passen niet op één
   rij. Het menu krijgt een eigen rij en breekt af in plaats van van het scherm te
   lopen. De kop plakt dan niet, zodat hij niet half het scherm vult en de
   ontruimingsbalk op /bhv/ niet bedekt. */
@media (max-width: 900px) {
  :root { --kop-hoogte: 0px; }
  .top { position: static; flex-wrap: wrap; row-gap: 10px; }
  .top .rechts { display: contents; }
  .top .menu { order: 1; flex-basis: 100%; flex-wrap: wrap; gap: 6px; }
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 20px 60px; }
.wrap.smal { max-width: 720px; }

/* ---- kaarten ------------------------------------------------------------- */
.kaart {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--schaduw);
}
.kaart + .kaart { margin-top: 14px; }
.kaart h2 { margin-bottom: 10px; }

/* ---- knoppen ------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-klein); font-weight: 700; font-size: 14px;
  border: 1.5px solid transparent; transition: transform var(--overgang), box-shadow var(--overgang), background var(--overgang), border-color var(--overgang);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.knop:active { transform: translateY(1px) scale(.99); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop.primair { background: var(--navy); color: #fff; }
.knop.primair:hover { background: var(--navy-donker); }
.knop.groen { background: var(--green); color: #fff; }
.knop.groen:hover { background: var(--green-donker); }
.knop.gevaar { background: var(--rood); color: #fff; }
.knop.gevaar:hover { background: var(--rood-donker); }
.knop.secundair { background: var(--card); color: var(--navy); border-color: var(--line); }
.knop.secundair:hover { border-color: var(--navy); }
.knop.stil { color: var(--mute); }
.knop.stil:hover { color: var(--ink); background: var(--navy-licht); }
.knop.groot { padding: 18px 28px; font-size: 18px; border-radius: var(--radius); min-height: 72px; }
.knop.breed { width: 100%; }

/* ---- velden -------------------------------------------------------------- */
.veld { display: block; margin-bottom: 14px; }
.veld > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.veld input, .veld select, .veld textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-klein);
  background: var(--card); outline: none; transition: border-color var(--overgang), box-shadow var(--overgang);
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0, 75, 147, .12); }
.veld textarea { min-height: 120px; resize: vertical; }
/* Een span in .veld krijgt de labelopmaak; deze rij niet. */
.veld > .tel-veld { display: flex; gap: 8px; margin: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.tel-veld select { width: auto; flex: none; }
/* Beheer, tabblad Teksten: een aangepaste tekst valt op. */
.teksten-tabel td { vertical-align: top; min-width: 220px; }
.teksten-tabel textarea { width: 100%; min-height: 58px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-klein); background: var(--card); font: inherit; font-size: 14px; resize: vertical; }
.teksten-tabel textarea.eigen, #melding-teksten .eigen { border-color: var(--navy); background: var(--navy-licht); }
.tel-veld input { flex: 1; min-width: 0; }
.vink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.vink input { width: 18px; height: 18px; accent-color: var(--navy); }

/* ---- badges, lijsten, tabellen ------------------------------------------ */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.badge.navy { background: var(--navy-licht); color: var(--navy); }
.badge.groen { background: var(--green-licht); color: var(--green-donker); }
.badge.amber { background: var(--amber-licht); color: #9A5F14; }
.badge.rood { background: var(--rood-licht); color: var(--rood-donker); }
.badge.grijs { background: #EEF2F6; color: var(--mute); }

.lijst { display: flex; flex-direction: column; gap: 10px; }
.rij {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schaduw);
}
.rij .info { flex: 1; min-width: 0; }
.rij .naam { font-weight: 800; font-size: 16px; }
.rij .sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
.rij .tijd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }

.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th, .tabel td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabel th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); font-weight: 700; }
.tabel tr:hover td { background: #FAFCFE; }
.tabel td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.leeg { text-align: center; padding: 40px 20px; color: var(--mute); }
.leeg .icoon { font-size: 40px; margin-bottom: 8px; }

/* ---- tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { padding: 10px 14px; font-weight: 700; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.actief { color: var(--navy); border-color: var(--navy); }

/* ---- statistiek-tegels --------------------------------------------------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tegel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tegel .n { font-family: var(--serif); font-size: 36px; font-weight: 700; line-height: 1; color: var(--navy); }
.tegel .l { font-size: 12.5px; color: var(--mute); font-weight: 700; margin-top: 4px; }

/* ---- dialoog ------------------------------------------------------------- */
.dialoog-achter { position: fixed; inset: 0; background: rgba(19, 41, 61, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; animation: fade .15s ease-out; }
.dialoog { background: var(--card); border-radius: var(--radius); padding: 24px; max-width: 460px; width: 100%; box-shadow: var(--schaduw-zwaar); animation: pop .18s cubic-bezier(.2, .8, .2, 1); }
.dialoog h2 { margin-bottom: 8px; }
.dialoog p { color: var(--mute); margin-bottom: 18px; }
.dialoog .acties { display: flex; gap: 10px; justify-content: flex-end; }

/* ---- toast --------------------------------------------------------------- */
.toast-houder { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--radius-klein); font-weight: 600; box-shadow: var(--schaduw-zwaar); animation: pop .2s ease-out; max-width: 90vw; }
.toast.fout { background: var(--rood); }
.toast.goed { background: var(--green); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); } 50% { box-shadow: 0 0 0 12px rgba(192, 57, 43, 0); } }

/* ==========================================================================
   Kiosk: iPad, staand of liggend, op armlengte. Alles groter en rustiger.
   ========================================================================== */
body.kiosk { font-size: 20px; overflow: hidden; height: 100vh; height: 100dvh; }
/* z-index: de schermen liggen als laag over de hele pagina; de kopbalk met de
   taalknoppen moet daar bovenop liggen, anders zijn de knoppen niet aan te tikken. */
body.kiosk .kiosk-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 24px 36px; }
body.kiosk .kiosk-top img { height: 36px; }
body.kiosk .klok { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mute); font-size: 18px; }
body.kiosk .talen { display: flex; gap: 8px; }
body.kiosk .talen button {
  min-width: 64px; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 16px; letter-spacing: .04em;
  color: var(--mute); background: var(--card); border: 2px solid var(--line); transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}
body.kiosk .talen button.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
body.kiosk .scherm {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto;
  padding: 100px 48px 48px; animation: slidein .28s cubic-bezier(.2, .8, .2, 1);
}
body.kiosk .scherm.actief { display: flex; }
body.kiosk .kolom { width: 100%; max-width: 820px; margin: auto 0; }
body.kiosk .namen .leeg { grid-column: 1 / -1; padding: 18px; }
body.kiosk .groet { font-family: var(--serif); font-size: 56px; font-weight: 600; color: var(--navy); letter-spacing: -.02em; line-height: 1.05; }
body.kiosk .groet em { font-style: italic; color: var(--navy); }
body.kiosk .groet .merk-basiq { color: var(--green); }
body.kiosk .groet .merk-dental { color: var(--navy); }
body.kiosk .onder { color: var(--mute); font-size: 22px; margin-top: 10px; font-weight: 500; }
body.kiosk .tegel-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
body.kiosk .tegel-knop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px 30px; border-radius: 22px;
  text-align: left; min-height: 210px; transition: transform var(--overgang), box-shadow var(--overgang);
  box-shadow: var(--schaduw-zwaar);
}
body.kiosk .tegel-knop:active { transform: scale(.985); }
body.kiosk .tegel-knop .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; }
body.kiosk .tegel-knop .kop { font-family: var(--serif); font-size: 36px; font-weight: 600; }
body.kiosk .tegel-knop .uitleg { font-size: 17px; opacity: .85; font-weight: 500; }
body.kiosk .tegel-knop.aan { background: var(--green); color: #fff; }
body.kiosk .tegel-knop.aan .ic { background: rgba(255, 255, 255, .2); }
body.kiosk .tegel-knop.af { background: var(--card); color: var(--navy); border: 2px solid var(--navy-licht); }
body.kiosk .tegel-knop.af .ic { background: var(--navy-licht); }
/* Drie tegels: "ik word verwacht" (navy) staat voorop, want dat is de snelste weg. */
body.kiosk .tegel-keuze.drie { grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.kiosk .tegel-keuze.drie .tegel-knop { min-height: 190px; padding: 28px 24px; }
body.kiosk .tegel-keuze.drie .tegel-knop .kop { font-size: 30px; }
body.kiosk .tegel-knop.verwacht { background: var(--navy); color: #fff; }
body.kiosk .tegel-knop.verwacht .ic { background: rgba(255, 255, 255, .18); }
/* Belknop onder de tegels: lichter dan de tegels, want aanbellen is geen aanmelden. */
body.kiosk .bel-knop {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; margin-top: 18px; padding: 16px 24px;
  border-radius: 18px; background: var(--card); color: var(--navy); border: 2px dashed var(--amber); font-size: 22px; text-align: left;
  transition: transform var(--overgang);
}
body.kiosk .bel-knop:active { transform: scale(.99); }
/* Tijdens het aanbellen zichtbaar bezig; .knop:disabled geldt niet voor deze knop. */
body.kiosk .bel-knop:disabled { opacity: .5; cursor: not-allowed; }
/* Een lege foutregel op het startscherm zou het scherm op een hoge iPad omlaag duwen. */
body.kiosk #fout-start:empty { display: none; }
body.kiosk .bel-knop .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: var(--amber-licht); flex: none; }
body.kiosk .bel-knop b { font-weight: 700; }
/* "Tik hier om aan te bellen →" als één geheel: past het niet achter de vraag, dan komt het
   samen op de volgende regel in plaats van een losse pijl (EN/DE zijn langer dan NL). */
body.kiosk .bel-knop .actie { white-space: nowrap; }
body.kiosk .code-invoer { font-family: Consolas, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; font-size: 32px !important; }
body.kiosk .gasten-kies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 38vh; overflow: auto; padding: 4px; }
body.kiosk .gasten-kies .naam-knop.al { opacity: .5; }
body.kiosk .gasten-kies .naam-knop small { display: block; font-weight: 500; color: var(--mute); font-size: 14px; }
body.kiosk .teller-invoer { display: flex; align-items: center; gap: 18px; }
body.kiosk .teller-invoer span { font-family: var(--serif); font-size: 44px; font-weight: 700; min-width: 60px; text-align: center; color: var(--navy); }
body.kiosk .teller-invoer .knop { min-width: 76px; font-size: 30px; }
/* QR scannen: camerabeeld gespiegeld (voelt als een spiegel), met een pulserend kader. */
body.kiosk .scan-blok { margin-bottom: 18px; text-align: center; }
body.kiosk .scan-status { color: var(--mute); font-size: 18px; font-weight: 600; margin-top: 4px; }
body.kiosk .scan-status.fout-tekst { color: var(--rood); }
body.kiosk .scan-venster { position: relative; width: min(440px, 84vw, 31vh); aspect-ratio: 4 / 3; margin: 0 auto 6px; border-radius: 22px; overflow: hidden; background: #0B1B2B; box-shadow: var(--schaduw-zwaar); }
body.kiosk .scan-venster video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
body.kiosk .scan-kader { position: absolute; inset: 27% 34%; border: 4px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(11, 27, 43, .35); animation: scanpuls 1.6s ease-in-out infinite; }
body.kiosk .scan-venster.gevonden .scan-kader { border-color: var(--green); animation: none; }
@keyframes scanpuls { 50% { border-color: var(--green); } }

body.kiosk .stappen { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
body.kiosk .stap { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--navy-licht); color: var(--navy); }
body.kiosk .stap.nu { background: var(--navy); color: #fff; }
body.kiosk .stap.klaar { background: var(--green); color: #fff; }
body.kiosk .stap-lijn { width: 26px; height: 2px; background: var(--line); }
body.kiosk .vraag { font-family: var(--serif); font-size: 42px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin-bottom: 22px; }
body.kiosk .veld input { font-size: 26px; padding: 18px 20px; border-radius: 14px; border-width: 2px; }
body.kiosk .veld > span { font-size: 14px; }
body.kiosk .acties { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; }
body.kiosk .knop.groot { font-size: 22px; padding: 20px 34px; min-height: 76px; border-radius: 16px; }
body.kiosk .fout { color: var(--rood); font-weight: 700; margin-top: 10px; min-height: 1.4em; }

body.kiosk .zoek { position: relative; margin-bottom: 14px; }
body.kiosk .zoek input { padding-left: 56px; }
body.kiosk .zoek::before { content: "⌕"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%) scaleX(-1); font-size: 28px; color: var(--mute); }
body.kiosk .namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 300px; overflow: auto; padding: 4px; }
body.kiosk .naam-knop {
  padding: 16px 18px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); text-align: left; font-weight: 700; font-size: 19px;
  transition: border-color var(--overgang), background var(--overgang);
}
body.kiosk .naam-knop:active, body.kiosk .naam-knop.gekozen { border-color: var(--green); background: var(--green-licht); }
body.kiosk .redenen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
body.kiosk .redenen .hele-rij { grid-column: 1 / -1; }
body.kiosk .instructie {
  background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 26px 30px; font-size: 21px; line-height: 1.55;
  white-space: pre-wrap; max-height: 44vh; overflow: auto;
}
body.kiosk .klaar-icoon { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-size: 60px; background: var(--green-licht); color: var(--green); margin-bottom: 20px; animation: pop .35s cubic-bezier(.2, .8, .2, 1); }
body.kiosk .klaar-icoon.navy { background: var(--navy-licht); color: var(--navy); }
body.kiosk .centrum { text-align: center; display: flex; flex-direction: column; align-items: center; }
body.kiosk .aanwezig-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-height: 50vh; overflow: auto; padding: 4px; }
body.kiosk .aanwezig-lijst .naam-knop small { display: block; font-weight: 500; color: var(--mute); font-size: 15px; margin-top: 2px; }
body.kiosk .dialoog { max-width: 560px; padding: 32px; }
body.kiosk .dialoog h2 { font-size: 32px; }
body.kiosk .dialoog p { font-size: 20px; }

@media (max-width: 760px) {
  body.kiosk { font-size: 17px; }
  body.kiosk .groet { font-size: 36px; }
  body.kiosk .tegel-keuze, body.kiosk .tegel-keuze.drie { grid-template-columns: 1fr; }
  body.kiosk .tegel-knop, body.kiosk .tegel-keuze.drie .tegel-knop { min-height: 130px; }
  body.kiosk .vraag { font-size: 30px; }
  body.kiosk .scherm { padding: 90px 22px 22px; }
  body.kiosk .redenen { grid-template-columns: 1fr; }
  body.kiosk .bel-knop .actie { white-space: normal; } /* smal scherm: liever afbreken dan uit de knop lopen */
}
@media (max-width: 640px) {
  .wrap { padding: 16px 14px 60px; }
  .top { padding: 12px 14px; }
  .top img { height: 24px; }
  h1 { font-size: 24px; }
}
/* Afspraak- en afmeldscherm met camera: compact, zodat alles op een liggende iPad past. */
body.kiosk :is([data-scherm="verwacht"], [data-scherm="afmelden"]) .vraag { margin-bottom: 14px; }
body.kiosk :is([data-scherm="verwacht"], [data-scherm="afmelden"]) .veld { margin-bottom: 6px; }
body.kiosk :is([data-scherm="verwacht"], [data-scherm="afmelden"]) .toelichting { font-size: 16px; margin: 0 0 4px; }
body.kiosk :is([data-scherm="verwacht"], [data-scherm="afmelden"]) .acties { margin-top: 14px; }
body.kiosk [data-scherm="afmelden"] .aanwezig-lijst { max-height: 24vh; margin-top: 8px; }
body.kiosk .tijd-regel { color: var(--mute); font-size: 18px; font-weight: 600; margin-top: 8px; }
body.kiosk .knop.contact-knop { margin-top: 10px; font-size: 18px; padding: 12px 18px; color: var(--navy); }
/* Welkom + instructie op één scherm (vooraangemelde gast). */
body.kiosk .instructie-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 16px 0 6px; }
body.kiosk .instructie-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
/* Zelfde regelhoogte als het label, zodat de link de rij niet hoger maakt. */
body.kiosk .instructie-kop .privacy-link { font-size: 16px; line-height: 19px; }
body.kiosk .instructie.compact { font-size: 18px; line-height: 1.5; padding: 18px 22px; max-height: 30vh; }
/* Privacymelding: één rustige regel onder de instructie (bij een vooraangemelde gast alleen de
   link, op de labelrij). De link houdt een tikvlak van 44px zonder de regel hoger te maken.
   De uitleg zelf staat in een dialoog. */
body.kiosk .privacy-regel { font-size: 17px; color: var(--mute); margin-top: 10px; }
body.kiosk .privacy-link { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 12px 6px; margin: -12px -6px; }
body.kiosk .dialoog.privacy-dialoog { max-width: 680px; }
body.kiosk .privacy-tekst { white-space: pre-wrap; font-size: 18px; line-height: 1.55; max-height: 64vh; overflow: auto; margin-bottom: 20px; }
body.kiosk .privacy-dialoog .acties { justify-content: flex-end; margin-top: 0; }
body.kiosk [data-scherm="verwacht-bevestig"] .gasten-kies { max-height: 24vh; }
body.kiosk [data-scherm="verwacht-bevestig"] .acties { margin-top: 16px; }
/* Groep: namen, teller én instructie op één scherm; compacter zodat het op een iPad past. */
body.kiosk [data-scherm="verwacht-bevestig"].groep .vraag { font-size: 34px; margin-bottom: 14px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep .gasten-kies { max-height: 19vh; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
body.kiosk [data-scherm="verwacht-bevestig"].groep .naam-knop { padding: 10px 14px; font-size: 17px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep #verwacht-anoniem { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px !important; }
body.kiosk [data-scherm="verwacht-bevestig"].groep #verwacht-anoniem.verborgen { display: none; }
body.kiosk [data-scherm="verwacht-bevestig"].groep #verwacht-anoniem p { margin: 0 !important; font-size: 17px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep .teller-invoer .knop { min-height: 52px; min-width: 56px; padding: 6px 14px; font-size: 24px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep .teller-invoer span { font-size: 32px; min-width: 44px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep .instructie-kop { margin-top: 12px; }
body.kiosk [data-scherm="verwacht-bevestig"].groep .instructie.compact { font-size: 16px; padding: 12px 18px; max-height: 17vh; }