/* ==========================================================================
   Arrivo — gedeelde huisstijl
   Kleuren: navy / groen / amber. Typografie: het systeemlettertype (geen download,
   geen verzoek naar een derde partij). De klant zet de accentkleur via --accent.
   ========================================================================== */

:root {
  /* Arrivo. --accent zet de pagina naar de kleur van de klant (hulp.huisstijl); de rest volgt daarvan. */
  --navy: var(--accent, #1E3A5F);
  /* Vaste waarden (de Arrivo-navy donkerder en lichter) voor browsers zonder color-mix(), zoals een oude kiosk-iPad onder
     iPadOS 16.2: daar werd een var() met color-mix ongeldig en verdwenen achtergrond en hoverkleur. Met color-mix volgen ze
     de accentkleur van de klant, zie het @supports-blok hieronder. */
  --navy-donker: #182E4C;
  --navy-licht: #E9EBEF;
  --navy-vlek: rgba(30, 58, 95, .10);   /* zachte vlek in de achtergrondsfeer */
  --navy-ring: rgba(30, 58, 95, .12);   /* focusring van invoervelden */
  --green: #2BB5A0;
  --green-donker: #1F8E7D;
  --green-licht: #E2F6F2;
  --amber: #D98A2B;
  --amber-licht: #FBEEDC;
  --rood: #C0392B;
  --rood-donker: #962D22;
  --rood-licht: #FBE7E4;
  --ink: #1B2430;
  --mute: #5E6E7C;
  --line: #E2E8F0;
  --bg: #F4F6F8;
  --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;
  /* Systeemletter: geen download, geen verzoek naar een derde partij. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);
  --overgang: 180ms cubic-bezier(.2, .7, .2, 1);
  --kop-hoogte: 59px; /* plakkende kopbalk; de ontruimingsbalk op /bhv/ plakt eronder */
}

/* color-mix() alleen waar de browser het kent (Safari 16.2+, Chrome 111+): daar volgen deze kleuren de accentkleur van de
   klant. De rest van het bestand gebruikt alleen de variabelen, nooit color-mix zelf. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --navy-donker: color-mix(in srgb, var(--navy) 80%, #000);
    --navy-licht: color-mix(in srgb, var(--navy) 10%, #fff);
    --navy-vlek: color-mix(in srgb, var(--navy) 10%, transparent);
    --navy-ring: color-mix(in srgb, var(--navy) 12%, transparent);
  }
}

*, *::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(43, 181, 160, .10), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, var(--navy-vlek), 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; }

/* Het merk linksboven: logo van de klant (of het Arrivo-merkteken) en de naam. hulp.huisstijl vult het in. */
.merk { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); min-width: 0; max-width: 100%; }
.merk > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* een lange naam wordt afgekort, niet over drie regels gebroken */
.merk img { height: 40px; width: auto; flex: none; }
.merk img[data-merk-standaard] { height: 32px; }
/* In de kopbalk blijft het merk zo hoog als de balk (--kop-hoogte rekent daarop). */
.top .merk img, .top .merk img[data-merk-standaard] { height: 30px; }
/* Het hidden-attribuut verliest van een display in de stijl (zoals display: block hierboven); het logo staat verborgen tot er een is. */
[hidden] { display: none !important; }
.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; }
/* Smaller scherm: logo, het volle menu (beheer met beide uitlogknoppen: ±690px) en de
   naam (tot 180px) passen samen tot ±1100px niet op één rij. Het menu krijgt dan 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: 1120px) {
  :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 var(--navy-ring); }
.veld textarea { min-height: 120px; resize: vertical; }
.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; flex-wrap: wrap; }
.tabs button { padding: 10px 14px; font-weight: 700; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; }
.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 .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; }
  .top .merk img, .top .merk img[data-merk-standaard] { 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; }