/* QR-printpagina — zelfde palet als de vragenlijst ernaast (crème + navy). */
:root {
  --qr-creme: #F3F0EA;
  --qr-navy: #2F4157;
  --qr-navy-zacht: #46677C;
  --qr-lijn: #E2DCD1;
  --qr-wit: #FFFFFF;
  --qr-tekst: #2B3440;
  --qr-grijs: #6B7280;
  --qr-fout: #B3261E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--qr-creme);
  color: var(--qr-tekst);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Kop ─────────────────────────────────────────────────────────────────── */
.qr-head {
  background: var(--qr-navy);
  color: #fff;
  padding: env(safe-area-inset-top) 0 0;
}
.qr-head-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.qr-logo { height: 24px; width: auto; }
.qr-head-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

/* ── Inhoud ──────────────────────────────────────────────────────────────── */
.qr-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qr-kaart {
  background: var(--qr-wit);
  border: 1px solid var(--qr-lijn);
  border-radius: 18px;
  padding: 22px 20px;
}

h1, h2, h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  color: var(--qr-navy);
  margin: 0 0 8px;
}
h1 { font-size: 26px; line-height: 1.25; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

.qr-lead { margin: 0 0 16px; color: var(--qr-grijs); max-width: 62ch; }
.qr-hint { margin: 6px 0 16px; font-size: 13px; color: var(--qr-grijs); max-width: 62ch; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--qr-creme);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── Velden en knoppen ───────────────────────────────────────────────────── */
.qr-veld { display: block; margin: 0 0 12px; }
.qr-veld > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--qr-navy);
  margin: 0 0 6px;
}
.qr-veld input,
.qr-veld select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--qr-lijn);
  border-radius: 12px;
  background: var(--qr-wit);
  color: var(--qr-tekst);
  font: inherit;
  font-size: 15px;
}
.qr-veld input:focus-visible,
.qr-veld select:focus-visible,
.qr-btn:focus-visible {
  outline: 2px solid var(--qr-navy-zacht);
  outline-offset: 2px;
}

.qr-btn {
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--qr-navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.qr-btn:hover { background: var(--qr-navy-zacht); }

.qr-fout { color: var(--qr-fout); font-size: 14px; margin: 0 0 12px; }

.qr-eigen-velden {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}
@media (min-width: 720px) {
  .qr-eigen-velden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── De kaartjes met de codes ────────────────────────────────────────────── */
.qr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px)  { .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .qr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.qr-item {
  background: var(--qr-wit);
  border: 1px solid var(--qr-lijn);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  break-inside: avoid;
}
.qr-item-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qr-navy-zacht);
}
.qr-item h3 { margin: 0; }
.qr-item-omschrijving { margin: 0; font-size: 14px; color: var(--qr-grijs); }

.qr-plaatje {
  align-self: center;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--qr-lijn);
  border-radius: 12px;
  padding: 10px;
}
.qr-plaatje svg { display: block; width: 100%; height: 100%; }

.qr-regels { margin: 0; font-size: 13px; }
.qr-regel { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid var(--qr-lijn); }
.qr-regel:first-child { border-top: 0; }
.qr-regel dt { flex: 0 0 84px; color: var(--qr-grijs); margin: 0; }
.qr-regel dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--qr-navy);
}

.qr-waarschuwing {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #FDF3E7;
  border: 1px solid #E9D4B3;
  color: #7A4E12;
  font-size: 12.5px;
}

/* ── Voet ────────────────────────────────────────────────────────────────── */
.qr-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--qr-grijs);
  font-size: 13px;
}
.qr-footer img { height: 20px; width: auto; opacity: .7; }
.qr-footer p { margin: 0; }

/* ── Printen ─────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; }
  .qr-head, .qr-footer, .qr-intro, .qr-eigen, .qr-btn { display: none !important; }
  .qr-main { padding: 0; }
  .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qr-item { border: 1px solid #999; page-break-inside: avoid; }
}

/* ── Donker ──────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --qr-creme: #1B2430;
    --qr-wit: #232E3C;
    --qr-lijn: #33404F;
    --qr-tekst: #E7EBF0;
    --qr-grijs: #A7B2C0;
    --qr-navy: #2F4157;
    --qr-navy-zacht: #7FA6C0;
  }
  html { background-color: #1B2430 !important; }
  h1, h2, h3 { color: #E7EBF0; }
  .qr-regel dd { color: #C6D6E4; }
  .qr-btn { background: #46677C; }
  /* De QR zelf blijft altijd zwart-op-wit: een gescande code moet contrast
     houden, ook als het scherm donker staat. */
  .qr-plaatje { background: #fff; border-color: #33404F; }
  .qr-waarschuwing { background: #3A2E1B; border-color: #6B5426; color: #F0D9AE; }
}