/* Knoppen (Buttons) */
.knop {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-normaal);
  font-family: var(--font-body);
  font-weight: 600;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: transform var(--animatie-snelheid-snel), box-shadow var(--animatie-snelheid-normaal);
}

.knop-primair {
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
}

.knop-primair:hover {
  background-color: #5528b0;
  box-shadow: 0 4px 10px rgba(108, 60, 225, 0.4);
}

.knop-secundair {
  background-color: var(--kleur-secundair);
  color: var(--kleur-wit);
}

.knop-secundair:hover {
  background-color: #e55a24;
  box-shadow: 0 4px 10px rgba(255, 107, 53, 0.4);
}

.knop-gevaar {
  background-color: var(--kleur-fout);
  color: var(--kleur-wit);
}

.knop-succes {
  background-color: var(--kleur-correct);
  color: var(--kleur-wit);
}

.knop:active {
  transform: scale(0.98);
}

/* Kaarten (Cards) */
.kaart {
  background-color: var(--kleur-wit);
  border-radius: var(--radius-normaal);
  box-shadow: var(--schaduw-normaal);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.kaart-kop {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--kleur-grijs-licht);
  padding-bottom: 0.5rem;
}

/* Formulieren */
.formulier-groep {
  margin-bottom: 1.25rem;
}

.formulier-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.formulier-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--kleur-grijs-licht);
  border-radius: var(--radius-klein);
  font-size: 1rem;
  transition: border-color var(--animatie-snelheid-normaal);
}

.formulier-input:focus {
  outline: none;
  border-color: var(--kleur-primair);
  box-shadow: 0 0 0 2px rgba(108, 60, 225, 0.2);
}

/* Modals */
.modal-achtergrond {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--animatie-snelheid-normaal), visibility var(--animatie-snelheid-normaal);
}

.modal-achtergrond.open {
  opacity: 1;
  visibility: visible;
}

.modal-inhoud {
  background-color: var(--kleur-wit);
  padding: 2rem;
  border-radius: var(--radius-groot);
  max-width: 600px;
  width: 90%;
  box-shadow: var(--schaduw-zwevend);
  transform: translateY(-20px);
  transition: transform var(--animatie-snelheid-normaal);
}

.modal-achtergrond.open .modal-inhoud {
  transform: translateY(0);
}

.modal-sluiten {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--kleur-grijs-donker);
}

/* Grid layout helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}