/* body vergrendelen wanneer popup open is */
  body.popup-open { overflow: hidden; }

  .popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: none; /* verborgen tot klik */
    justify-content: center; align-items: center;
    z-index: 9999;
    padding: 24px;  /* ruimte aan randen op mobiel */
  }
  .popup-content {
    background: #fff;
    width: min(900px, 100%);
    max-height: 90vh; overflow: auto;
    border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
    position: relative; padding: 24px 20px 20px 20px;
    animation: popupFade .25s ease;
  }
  .popup-close {
    position: sticky; top: 0; float: right;
    margin-top: -6px;
    font-size: 26px; line-height: 1; cursor: pointer; user-select: none;
    padding: 6px 10px; border-radius: 8px;
    background: transparent; border: none; color: #333;
  }
  .popup-close:hover { background: #f3f4f6; }
  .popup-body h2 { margin: 0 0 8px 0; }
  .popup-body p { margin: 0 0 12px 0; }

  /* Afbeeldingen in content responsief */
  .popup-body img { max-width: 100%; height: auto; border-radius: 10px; display:block; }
  .popup-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    margin-top: 10px;
  }

  @keyframes popupFade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

  /* Optioneel: cursor op icon-box */
  .icon-box { cursor: pointer; }
  .icon-box a { pointer-events: none; } /* voorkom navigation op titel-klik */