/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .lab21-brandbar-link {
    min-height: 56px;
    padding: 0 16px;
    gap: 8px;
  }
  .lab21-brandbar-logo { height: 32px; }
  header.page-header { padding: 0 16px; }
  .header-inner { height: auto; min-height: 52px; gap: 12px; }
  .health-badge .label { display: none; }
  main { width: 100%; padding-left: 16px; padding-right: 16px; }
  .split-landing { min-height: 0; }
  .input-layout {
    grid-template-columns: 1fr;
  }
  .input-right {
    grid-template-columns: 1fr;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--gap);
  }
  .drop-zone--room {
    aspect-ratio: unset;
    min-height: 220px;
  }
  .options-grid { grid-template-columns: 1fr; }
  .pipeline-stepper { flex-wrap: wrap; gap: .5rem; }
  .pipeline-step:not(:last-child)::after { display: none; }
  .landing-columns { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .lab21-brandbar-wordmark { display: none; }
  /* ⚠️ Hard 12px, geen rem. De root van deze app staat op 15px
     (base.css: `html { font-size: 15px }`), dus `.76rem` is 11,4px — onder de
     leesbaarheidsnorm van 12px. Gemeten in de klikronde van 05-09-2026 op
     visualiser.apps.lab21helpdesk.com. Aan de klassenaam zie je zoiets niet;
     reken een rem altijd om met de ECHTE root. */
  .page-header nav a { padding: .38rem .65rem; font-size: 12px; }
  .material-body { flex-direction: column; }
  .material-images { justify-content: space-around; }
  .combo-selector { border-left: none; border-top: 1px solid var(--border); width: 100%; max-width: none; }
  .combo-list { flex-direction: row; flex-wrap: wrap; overflow-y: visible; max-height: none; }
  .result-grid { grid-template-columns: 1fr; }
}