/* container als flex */
main#projecten {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;                /* i.p.v. margin truukjes */
    align-items: stretch;
    justify-content: center;
  }
  
  /* kaart */
  .project {
    display: flex;
    width: min(560px, 100%);  /* 2 naast elkaar op brede schermen */
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }
  
  /* logo */
  .project img {
    width: 150px;
    height: 150px;
    object-fit: contain;
  }
  
  /* roze lijn */
  .roseLijn {
    width: 3px;
    height: 200px;
    margin: 0 16px;
    background-color: #bc1c7c;
  }
  
  /* headings: je gebruikt nu h2 in plaats van h4 */
  .project h2 { 
    font-size: 1.25rem; 
    margin: 0 0 8px; 
    text-align: left; 
  }
  
  /* fallback voor oude CSS selector */
  .project div h4,
  .project h2 { text-align: left; }
  
  /* mobiel */
  @media (max-width: 640px) {
    .project { 
      flex-direction: column; 
      text-align: center; 
    }
    .roseLijn { display: none; }
    .project img { margin-bottom: 12px; }
  }

  .project h2 a,
.project h2 a:visited {
  color: inherit;             /* neemt kleur van h2 over */
  text-decoration: none;      /* geen onderstreping */
}

/* Hover: subtiele feedback (mag je weglaten als je écht niets wilt) */
.project h2 a:hover {
  text-decoration: underline; /* of: border-bottom: 1px solid currentColor; */
  text-underline-offset: 2px;
}

/* Toetsenbord-focus zichtbaar en in jouw huiskleur */
.project h2 a:focus-visible {
  outline: 2px solid #bc1c7c;
  outline-offset: 2px;
}